magento模板 -- 添加magento自带的tabs UI插件

在magento模板开发过程中，tabs插件也是众多常用插件中的一种。如何集成一个好用的，又简单的tabs ui 控件呢？

 

事实上，如果有经常使用magento后台就会发现，其实magento自己的后台就有大量使用tab ui 控件。不过这个tabs是varien自己开发的，使用起来没有那么傻瓜式，连CSS也是堆在box.css当中。不过功能还不错，至少支持ajax加载数据，并会有相应的加载示意效果。所以如果你不熟悉别的js开源库或相关插件，不妨就地取材，依样画葫芦。

 

效果图：

 

 

我把相关的css整理出来，一起附在下面：

 

对应 的css代码整理如下，你要在前台使用时，可以放到自己的theme对应的 skin目录中：

ul.tabs-horiz {

background : #F8F8F8 url(images/horiz_tabs_ul_bg.gif) repeat-x scroll 0 100% ;

margin : 0 0 18px ;

padding : 8px 0 0 5px ;

}

ul.tabs-horiz li { 

float : left ;

margin : 0 4px ;

}

ul.tabs-horiz li a {

background : #E2E2E2 none repeat scroll 0 0 ;

border : 1px solid #CCCCCC ;

color : #333333 !important ;

display : block ;

padding : 2px 10px ;

text-decoration : none !important ;

}

ul.tabs-horiz li a.active {

background : #FFFFFF none repeat scroll 0 0 ;

border-bottom : 1px solid #FFFFFF ;

}

 

.np {

padding : 0 !important ;

}

.grid { 

border-bottom : 0 none ;

padding-bottom : 0.5em ;

position : relative ;

}

.grid table {

border-color : #CBD3D4 #CBD3D4 -moz-use-text-color ;

border-style : solid solid none ;

border-width : 1px 1px medium ;

width : 100% ;

}

.grid tr.headings { 

background : transparent url(images/sort_row_bg.gif) repeat-x scroll 0 50% ;

}

 

.grid tr.headings th.no-link { 

color : #67767E ;

padding-bottom : 1px ;

padding-top : 2px ;

}

.grid tr.headings th { 

border-color : #F9F9F9 #D1CFCF #F9F9F9 #F9F9F9 ;

border-style : solid ;

border-width : 1px ;

font-size : 0.9em ;

padding-bottom : 0 ;

padding-top : 1px ;

}

这个插件对应的文件是在

[magento]/js/mage/adminhtml/tabs.js中

 

 

后台应用实例：

 

这个是我们看见的标签（注意只是标签，内容不是在这里）：

<ul class="tabs-horiz" id="grid_tab">
    <li>
        <a class="tab-item-link active" title="Bestsellers" id="grid_tab_reviewed_products" href="#">
            <span><span title="The information in this tab has been changed." class="changed"/><span title="This tab contains invalid data. Please solve the problem before saving." class="error"/>Bestsellers</span>
        </a>
       
    </li>
    <li>
        <a class="tab-item-link ajax notloaded" title="Most Viewed Products" id="grid_tab_ordered_products" href="http://www.mg13.com/index.php/admin/dashboard/productsViewed/key/62455497c7b8f2682b89794f511b9e4c/">
            <span><span title="The information in this tab has been changed." class="changed"/><span title="This tab contains invalid data. Please solve the problem before saving." class="error"/>Most Viewed Products</span>
        </a>
       
    </li>
    <li>
        <a class="tab-item-link ajax notloaded" title="New Customers" id="grid_tab_new_customers" href="http://www.mg13.com/index.php/admin/dashboard/customersNewest/key/32f5e4c7a1228edf9a50d0bc4f43307d/">
            <span><span title="The information in this tab has been changed." class="changed"/><span title="This tab contains invalid data. Please solve the problem before saving." class="error"/>New Customers</span>
        </a>
       
    </li>
    <li>
        <a class="tab-item-link ajax notloaded" title="Customers" id="grid_tab_customers" href="http://www.mg13.com/index.php/admin/dashboard/customersMost/key/8a3fb7222473f159b1a1c8323616edd9/">
            <span><span title="The information in this tab has been changed." class="changed"/><span title="This tab contains invalid data. Please solve the problem before saving." class="error"/>Customers</span>
        </a>
       
    </li>
</ul>

 

这个是标签的内容：初始的状态是，只有第一个tab有内容，其它tab的内容是在后来用ajax加载的，现在只有一个容器div，下面代码的后面那三个div便是：

 

<div id="grid_tab_content"><div style="" id="grid_tab_reviewed_products_content"><div class="grid np">
<table cellspacing="0" id="productsOrderedGrid_table" style="border: 0pt none ;">
        <col/>
        <col width="120"/>
        <col width="120"/>
                <thead>
                            <tr class="headings">
                                    <th class="no-link"><span class="nobr">Product Name</span></th>
                                    <th class="no-link"><span class="nobr">Price</span></th>
                                    <th class="no-link last"><span class="nobr">Quantity Ordered</span></th>
                                </tr>
                    </thead>
        <tbody>
                <tr title="http://www.mg13.com/index.php/admin/catalog_product/edit/id/35/key/4a39620006c753857276826451447f7f/" class="even pointer">
                    <td class="">Coalesce: Functioning On Impatience T-Shirt</td>
                    <td class="a-right">$15.00</td>
                    <td class="a-right a-right last">3</td>
                </tr>
            <tr title="http://www.mg13.com/index.php/admin/catalog_product/edit/id/16/key/4a39620006c753857276826451447f7f/" class="pointer">
                    <td class="">Nokia 2610 Phone</td>
                    <td class="a-right">$149.99</td>
                    <td class="a-right a-right last">1</td>
                </tr>
            </tbody>
</table>
</div>

事实上第一个标签对应的tab内容的container div,就是上面的那个div是空的，数据是从数据库中取出来的，这个动作是通过下面这段js代码实现的，其实也是一个捞数据的过程，但是用的不是ajax也没这个必要。这边也使用了一个你可能感兴趣的控件，也是常用的 --- grid。jquery有很多不错的grid控件，真搞不懂varien要花这么多时间自己来开发，我想真的是有点想给magento制作困难的嫌疑，好让人花钱请他，他好收费。这也是他们为什么不用jquery的原因，用了jquery，magento就立马瘦身了。

<script type="text/javascript">
//<![CDATA[
    productsOrderedGridJsObject = new varienGrid('productsOrderedGrid', 'http://www.mg13.com/index.php/admin/dashboard/index/key/1b7363644fc826259a0f1cb0bd0085bf/', 'page', 'sort', 'dir', 'filter');
    productsOrderedGridJsObject.useAjax = '';
            productsOrderedGridJsObject.rowClickCallback = openGridRow;
                //]]>
</script>
</div>

//第二个标签对应的tab内容的container div,在单击时ajax加载

<div style="display: none;" id="grid_tab_ordered_products_content"/>

//第二个标签对应的tab内容的container div,在单击时ajax加载

<div style="display: none;" id="grid_tab_new_customers_content"/>

//第二个标签对应的tab内容的container div,在单击时ajax加载

<div style="display: none;" id="grid_tab_customers_content"/></div>

 

</div>

 

最后是关键一步：

 

就是初始化tab：

 

<script type="text/javascript">

    grid_tabJsTabs = new varienTabs('grid_tab', 'grid_tab_content', 'grid_tab_reviewed_products', []);
</script>

 

猜就能猜出来，第一个参数 grid_tab应该是tab标签所在的容器的ID，从上面看出是一个ul带li 和a 元素。你可以依样尝试一下。

第二个参数则是包含所有tab标签的内容的容器的id了。

第三个参数则是指定默认显示那个标签了，这边用的是这个标签对应的li中的a标签的ID。

最后一个参数是个空数组，不知道做什么用的，我看一下代码，猜一下应该是其它的末当前显示的所有标签