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了。
magento------tabs的分析和使用!!!
最新推荐文章于 2021-03-19 14:42:50 发布