1. An Nguyen

    An Nguyen bụi Ban quản trị

    9/1/16
    #1
    Bằng cách sử dụng ít kiến thức về javascript, css và html là chúng ta có thể tạo ra các tab với các thông tin khác nhau về sản phẩm
    tab.png
    Bước 1: HTML
    Mở file Views\Product\ProductTemplate.Simple.cshtml
    Tìm
    PHP:
    1. @if (!String.IsNullOrEmpty(Model.FullDescription))
    2.                     {
    3.                         <div class="full-description" itemprop="description">
    4.                             @Html.Raw(Model.FullDescription)
    5.                         </div>
    6.                     }
    Thay thế bằng
    PHP:
    1. <div class="tabs">
    2.     <ul class="tab-links">
    3.         <li class="active"><a href="#tab-nop1">Thông số</a></li>
    4.         <li><a href="#tab-nop2">Giải pháp</a></li>
    5.         <li><a href="#tab-nop3">Khuyến mãi</a></li>
    6.     </ul>
    7.     <div class="tab-content">
    8.         <div id="tab-nop1" class="tab active">
    9.                     @if (!String.IsNullOrEmpty(Model.FullDescription))
    10.                     {
    11.                         <div class="full-description" itemprop="description">
    12.                             @Html.Raw(Model.FullDescription)
    13.                         </div>
    14.                     }
    15.         </div>
    16.         <div id="tab-nop2" class="tab">
    17.         </div>
    18.         <div id="tab-nop3" class="tab">
    19.         </div>
    20.     </div>
    21. </div>    
    Thay các tên tab thông số, giải pháp, khuyến mãi theo ý thích của bạn, bên dưới mục tab-content là chứa nội dung của các thẻ.
    Bước 2: CSS
    Thêm đoạn CSS sau:
    PHP:
    1. /*----- Tabs -----*/
    2. .tabs{width:100%;display:inline-block;}
    3. .tab-links:after{display:block;clear:both;content:'';}
    4. .tab-links li{float:left;list-style:none;margin:0 5px;}
    5. .tab-links a{display:inline-block;border-radius:0;background:#cccccc;font-size:13px;font-weight:bold;color:#fff;transition:all linear .15s;padding:6px 15px;color: #3a3a3a;}
    6. .tab-links a:hover{background:#a7cce5;text-decoration:none;color: #000;}
    7. .tabs li.active a,.tabs li.active a:hover{background:rgba(124, 182, 47, 1);color:#fff;}
    8. .tab-content{border-radius:0;box-shadow:none;background:#fff;padding:0;}
    9. .tab{display:none;}
    10. .tab.active{display:block;}
    Bước 3: Jquery
    Tạo file script tab.js với nội dung dưới vào Views\Shared\_Root.Head.cshtml
    PHP:
    1. jQuery(document).ready(function() {
    2.     jQuery('.tabs .tab-links a').on('click', function(e)  {
    3.         var currentAttrValue = jQuery(this).attr('href');
    4.         // Show/Hide Tabs
    5.         jQuery('.tabs ' + currentAttrValue).show().siblings().hide();
    6.         // Change/remove current tab to active
    7.         jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
    8.         e.preventDefault();
    9.     });
    10. });
    Ví dụ cách chèn file tab.js vào Views\Shared\_Root.Head.cshtml
    PHP:
    1. Html.AppendScriptParts("~/Themes/{0}/Content/scripts/tab.js");
    2016-01-12_135559.png

    Chúc mọi người thực hành tốt nhé:D
     
    Sửa lần cuối: 17/2/16
    1
    Nam Nguyen thích bài này.
    Nam Nguyen thích bài này
    Đang tải...
    • ngày tạo

      An Nguyen 9/1/16
    • trả lời cuối

      Đức Định 26/3/16
    • 3,916

      lượt xem

    • 16

      trả lời

    • 1

      lượt thích

  2. Nam Nguyen

    Nam Nguyen NopMember Ban quản trị

    12/1/16
    #2
    Thanks ca.
     
  3. An Nguyen

    An Nguyen bụi Ban quản trị

    12/1/16
    #3
    no problem! hehe :v
     
  4. KenMT

    KenMT NopActive

    13/1/16
    #4
  5. An Nguyen

    An Nguyen bụi Ban quản trị

    13/1/16
    #5
    đẹp lắm, bạn dùng nop à, cái chat bạn dùng của ai vậy, chỉ mình với
     
  6. KenMT

    KenMT NopActive

    13/1/16
    #6
    Nop 3.6 anh ạ, cái chat thì nhờ ông anh crack hộ thôi ạ, nó chạy riêng trên server khác. Trong Nop cũng có 1 cái Live Chat Free mà chưa xem cụ thể nó ntn :D :D
     
    Sửa lần cuối: 14/1/16
    1
    An Nguyen thích bài này.
    An Nguyen thích bài này
  7. Nam Nguyen

    Nam Nguyen NopMember Ban quản trị

    16/1/16
    #7
    trong nop có live chát free mà a :D
     
  8. An Nguyen

    An Nguyen bụi Ban quản trị

    16/1/16
    #8
    cái nào vậy em, sao a k thấy, cấu hình sao nhỉ
     
  9. Nam Nguyen

    Nam Nguyen NopMember Ban quản trị

    16/1/16
    #9
    Nop.Chat đó a ;);););)
     
  10. An Nguyen

    An Nguyen bụi Ban quản trị

    16/1/16
    #10
    hình nhứ cái đó tốn tiền mà, livechat.com fai k
     
  11. Nam Nguyen

    Nam Nguyen NopMember Ban quản trị

    16/1/16
    #11
  12. An Nguyen

    An Nguyen bụi Ban quản trị

    16/1/16
    #12
  13. Nam Nguyen

    Nam Nguyen NopMember Ban quản trị

    16/1/16
    #13
    Cái luôn thật mà sài a :D sao phải thử làm j :D
     
  14. An Nguyen

    An Nguyen bụi Ban quản trị

    16/1/16
    #14
    anh dg cài, a đọc thấy nó mới free đây thôi.
    https://www.nop.rocks/nopchat
    trong link trên anh thấy thông tin sản phẩm gồm các tab :General, Installation,Configuration,Getting Started
    làm sao để tạo các tab với các thông tin bên trong đó thì a chưa biết
     
  15. Nam Nguyen

    Nam Nguyen NopMember Ban quản trị

    16/1/16
    #15
  16. An Nguyen

    An Nguyen bụi Ban quản trị

    16/1/16
    #16
    tab thì anh biets roi, như bài hướng dẫn này mà, qua trong các noi dung của nó thôi
     
  17. Đẹp, mà bấm dzô link sản phẩm, sao nó ra link local nhẩy :D

    Chính xác là slide hình chiếc giày nhé, set lại link đi bạn :)
     
Đã lưu nháp Draft deleted
Đang tải...