文章彙整

Magento2使用手指左右滑動來切換Bootstrap頁籤

By Astral Web 3 weeks agoNo Comments
首頁  /  Magento  /  Magento-2  /  Magento2使用手指左右滑動來切換Bootstrap頁籤

在開始實作之前、我們要先確認已經將Bootstrap打包進我們的Magento主題包裡。詳細的操作可以參考之前分享的 如何在Magento2 使用 Bootstrap

接下來我們要開始讓Bootstrap頁籤可以支援手指左右滑動的動作。

 

因為Magento2 已經將jquery.mobile  的swipeleft, swiperight動作打包好了,所以我們直接叫出來用就好了。

 

建立Html Markup:

<div>


  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
  </ul>


  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home"><p>Home content</p><p>Home content</p><p>Home content</p><p>Home content</p></div>
    <div role="tabpanel" class="tab-pane" id="profile"><p>profile content</p><p>profile content</p><p>profile content</p><p>profile content</p></div>
    <div role="tabpanel" class="tab-pane" id="messages"><p>messages content</p><p>messages content</p><p>messages content</p><p>messages content</p></div>
    <div role="tabpanel" class="tab-pane" id="settings"><p>settings content</p><p>settings content</p><p>settings content</p><p>settings content</p></div>
  </div>


</div>

javascript:

require([
  'jquery',
  'jquery.bootstrap',
  'jquery/jquery.mobile.custom'
  ], function($) {
    $(function() {
        $(".tab-content").swiperight(function() {
            var $tab = $('[role="tablist"] .active').prev();
            if ($tab.length > 0)
                $tab.find('a').tab('show');
        });
        $(".tab-content").swipeleft(function() {
            var $tab = $('[role="tablist"] .active').next();
            if ($tab.length > 0)
                $tab.find('a').tab('show');
        });
    });
});

考慮到頁面中可能同時出現二組以上的 Bootstrap tab,我們可以把javascript改成:

require([
  'jquery',
  'jquery.bootstrap',
  'jquery/jquery.mobile.custom'
  ], function($) {


    $(function() {
        _tabBody = '[data-role="tabwrapper"]';
        var _myTab = $(_tabBody)
        var tabTarget = _myTab.find('.tab-content');


        tabSwipe();


        function tabSwipe() {
            tabTarget.swiperight(function() {
                var $control = $(this).closest(_tabBody).find('.nav-tabs .active');
                var $content = $(this).closest(_tabBody).find('.tab-content .active');
                var $tab = $control.prev();
                var $newContent = $content.prev();
                if ($tab.length) {
                    var _aTarget = $tab.find('a');
                    _aTarget.tab('show');                   
                }
            });
            tabTarget.swipeleft(function() {
                var $control = $(this).closest(_tabBody).find('.nav-tabs .active');
                var $content = $(this).closest(_tabBody).find('.tab-content .active');
                var $tab = $control.next();
                var $newContent = $content.next();
                if ($tab.length) {
                    var _aTarget = $tab.find('a');
                    _aTarget.tab('show');                
                }
            });
        };


    });
});

以上是針對Magento2前端文章介紹,如果有您有更多疑問可以詢問我們,未來會撰寫更多電商網站相關文章,您想知道什麼嗎?歡迎在下方留言給我們。或追蹤我們的粉絲專頁,就不錯過最新文章喔!

想學習更多Magento設定嗎?請見:Magento教學導覽

以上內容由Astralweb 歐斯瑞編寫製作

 000

推薦文章

Category:
  Magento-2

留下回應

你的電子郵件地址不會被公開.

取得獨家電子商務祕技

建立更好的策略靈感

跟上全球的網路趨勢

絕佳的電商解決方案

電子商務戰略全指南

每月發送電商戰略指南,只要填寫E-mail即可訂閱!

請到您的信箱確認,即可完成訂閱。