magento------tabs的分析和使用!!!

来源:互联网 发布:网络民族虚无主义文章 编辑:程序博客网 时间:2024/06/01 16:15



tabs原理:
在hellowired免费模板里面有tabs,(和easytabs插件差不多的功能,不过不可以在后台配置)

template/catalog/product/view/tabs.phtml
template/catalog/product/view/description.phtml




template/catalog/product/view/tabs.phtml
内容:

<?php if($this->getTitle()): ?>
    <h3><?php echo $this->getTitle() ?></h3>
<?php endif ?>
//----
<?php if(!empty($tabs)): ?>

<ul class="product-tabs">
//-----1
    <?php foreach ($this->getTabs() as $_index => $_tab): ?>
//-----2
        <?php if($this->getChildHtml($_tab['alias'])): ?>
            <li id="product_tabs_<?php echo $_tab['alias'] ?>" class="<?php echo !$_index?' active first':(($_index==count($this->getTabs())-1)?' last':'')?>"><a href="#"><?php echo $_tab['title']?></a></li>
        <?php endif; ?>
    <?php endforeach; ?>
</ul>
<?php foreach ($this->getTabs() as $_index => $_tab): ?>
    <?php if($this->getChildHtml($_tab['alias'])): ?>
        <div class="product-tabs-content" id="product_tabs_<?php echo $_tab['alias'] ?>_contents"><?php echo $this->getChildHtml($_tab['alias']) ?></div>
    <?php endif; ?>
<?php endforeach; ?>

<script type="text/javascript">
//<![CDATA[
Varien.Tabs = Class.create();
Varien.Tabs.prototype = {
  initialize: function(selector) {
    var self=this;
    $$(selector+' a').each(this.initTab.bind(this));
  },

  initTab: function(el) {
      el.href = 'javascript:void(0)';
      if ($(el.parentNode).hasClassName('active')) {
        this.showContent(el);
      }
      el.observe('click', this.showContent.bind(this, el));
  },

  showContent: function(a) {
    var li = $(a.parentNode), ul = $(li.parentNode);
    ul.select('li', 'ol').each(function(el){
      var contents = $(el.id+'_contents');
      if (el==li) {
        el.addClassName('active');
        contents.show();
      } else {
        el.removeClassName('active');
        contents.hide();
      }
    });
  }
}
new Varien.Tabs('.product-tabs');
//]]>
</script>


下面为layout:


 <block type="catalog/product_view_tabs" name="product.info.tabs" as="info_tabs" template="catalog/product/view/tabs.phtml" >
                    <action method="addTab" translate="title" module="catalog"><alias>description</alias><title>Product Description</title><block>catalog/product_view_description</block><template>catalog/product/view/description.phtml</template></action>
                    <action method="addTab" translate="title" module="catalog"><alias>upsell_products</alias><title>We Also Recommend</title><block>catalog/product_list_upsell</block><template>catalog/product/list/upsell.phtml</template></action>
                    <action method="addTab" translate="title" module="catalog"><alias>additional</alias><title>Additional Information</title><block>catalog/product_view_attributes</block><template>catalog/product/view/attributes.phtml</template></action>
                       <action method="addTab" translate="title" module="review"><alias>review_tabbed</alias><title>璇勫垎鏈哄埗 </title><block>review/product_view_list</block><template>easytabs/catalogproductreview.phtml</template></action>
                  

                </block>


1.在bolcck中的<action method="addTab" 方法与$this->getTabs()分别为set(),get()方法
2.,$_tab['title']在<action>方法中的<title>里面的值:为点击<a>标签处显示的数值,
3.$_tab['alias']也是block中的as="alias",这个值。。
4.<block>相当于标签<block>中的type
5.<template>相当于<block>中的<template>.
自己写的block,设置好这些值,就可以嵌入tabs了。

原创粉丝点击