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教學導覽