Đang nghiên cứu tạo tab dùng html, css và jquery trong nop

Thảo luận trong 'Tùy chỉnh giao diện' bắt đầu bởi An Nguyen, 27/9/14.

  1. An Nguyen

    An Nguyen bụi Staff Member

    27/9/14
    2014-10-01_234157.png

    Buoc 1. Đầu tiên tạo và thêm file jquery tên là tab-nop.js vào head.cshtml
    PHP:
    jQuery(document).ready(function() {

    jQuery('.tabs .tab-links a').on('click', function(e) {

    var 
    currentAttrValue jQuery(this).attr('href');

    // Show/Hide Tabs

    jQuery('.tabs ' currentAttrValue).show().siblings().hide();

    // Change/remove current tab to active

    jQuery(this).parent('li').addClass('active').siblings().removeClass('active');

    e.preventDefault();

    });

    });
    Mở file Themes\Classico\Views\Shared\_Root.head.cshtml
    Chèn vào đoạn
    Mã:
    Html.AddScriptParts("~/Themes/Classico/Script/tab-nop.js");
    Bước 2. Css
    thêm đoạn css sau
    Mã:
    Mã:
    /*----- Tabs -----*/
    
    .tabs {width:100%;display:inline-block;}
    
    /*----- Tab Links -----*/
    
    /* Clearfix */
    
    .tab-links:after {display:block;clear:both;content:'';}
    
    .tab-links li {margin:0px 5px;float:left;list-style:none;}
    
    .tab-links a {padding:9px 15px;display:inline-block;border-radius:3px 3px 0px 0px;background:#7FB5DA;font-size:16px;font-weight:600;color:#4c4c4c;transition:all linear 0.15s;}
    
    .tab-links a:hover {background:#a7cce5;text-decoration:none;}
    
    
    li.active a, li.active a:hover {background:#fff;color:#4c4c4c;}
    
    /*----- Content of Tabs -----*/
    
    .tab-content {padding:15px;border-radius:3px;box-shadow:-1px 1px 1px rgba(0,0,0,0.15);background:#fff;}
    
    .tab {display:none;}
    
    .tab.active {display:block;}
    Bước 3. HTML
    Mở file Views\Product\ProductTemplate.Simple.cshtml

    Tìm code

    và thay bằng
    PHP:
    <div class="tabs">
        <
    ul class="tab-links">
            <
    li class="active"><a href="#tab-nop1">Mô tả</a></li>
            <
    li><a href="#tab-nop2">Products specifications </a></li>
            <
    li><a href="#tab-nop3">Product Tags</a></li>
        </
    ul>
        <
    div class="tab-content">
            <
    div id="tab-nop1" class="tab active">
                @if (!
    String.IsNullOrEmpty(Model.FullDescription))
                 {
                     <
    div class="full-description" itemprop="description">
                         @
    Html.Raw(Model.FullDescription)
                     </
    div>
                  }
            </
    div>
            <
    div id="tab-nop2" class="tab">
                @
    Html.Partial("_ProductSpecifications"Model.ProductSpecifications)
            </
    div
            <
    div id="tab-nop3" class="tab">
                @
    Html.Partial("_ProductTags"Model.ProductTags)
            </
    div>
        </
    div>
    </
    div>    

    Tham khảo từ đây:
    http://inspirationalpixels.com/tutorials/creating-tabs-with-html-css-and-jquery#step-html
     
    Sửa lần cuối: 17/2/16
    Tags:
    Đang tải...
Draft saved Draft deleted
Tags:

Chia sẻ trang này

Đang tải...