jQuery Mobile - 用於Navbar導航菜單的滑動滑塊

使用jQuery mobile，如何在頁腳或頁眉導航中添加滑動/滑塊。jQuery Mobile - 用於Navbar導航菜單的滑動滑塊

所以，如果你有一個data-role =「navbar」與所有的圖標，怎麼可能添加一個滑動條，你可以滑動或按下左/右箭頭在菜單上顯示更多的圖標？

我會怎麼做呢？

2012-12-28 John

基本上，你會想建立整個酒吧，並用CSS左右滑動。這可以通過'slide'事件完成。查看更多：[JQM Events]（http://jquerymobile.com/demos/1.2.0/docs/api/events.html）。我會看看我能否找到更完整的例子或製作一個例子。如果你有任何你已經嘗試過的示例代碼。請編輯並添加。 – Twisty

下面是一個方法，粗略地說，因爲它使用JQM代碼，所以你可以很簡單地使用ThemeRoll。工作測試示例：http://jsfiddle.net/Twisty/yMpcE/

仍在制定滑動到正確的操作。

HTML

<html> 
    <head> 
     <title>Test Page</title> 
    </head> 
    <body> 
     <div data-role="header"> 
      <h2>Test Scroll Bar</h2> 
      <div id="scrollBar" class="ui-bar ui-bar-a"> 
      </div> 
     </div> 
     <div data-role="content"> 
      <p>Test Page</p> 
     </div> 
     <div data-role="footer" data-theme="c" data-position="fixed" data-tap-toggle="false" data-fullscreen="false"> 
      <div data-role="navbar"> 
      </div> 
     </div> 
    </body> 
</html>

CSS

#scrollBar { 
    width: 840px; 
    overflow-x: hidden; 
}

JQUERY

$(function() { 
    var scrollBarLinks = { 
     0: '#home', 
     1: '#link2', 
     2: '#link3', 
     3: '#link4', 
     4: '#link5', 
     5: '#link6', 
     6: '#link7', 
     7: '#link8', 
     8: '#link9', 
     9: '#link10', 
     10: '#link11', 
     11: '#link12' 
    }; 
    var scrollBarText = { 
     0: 'Home', 
     1: 'Link 2', 
     2: 'Link 3', 
     3: 'Link 4', 
     4: 'Link 5', 
     5: 'Link 6', 
     6: 'Link 7', 
     7: 'Link 8', 
     8: 'Link 9', 
     9: 'Link 10', 
     10: 'Link 11', 
     11: 'Link 12' 
    }; 
    var scrollBarIcons = { 
     0: 'home', 
     1: 'star', 
     2: 'star', 
     3: 'star', 
     4: 'star', 
     5: 'star', 
     6: 'star', 
     7: 'star', 
     8: 'star', 
     9: 'star', 
     10: 'star', 
     11: 'star' 
    }; 

    var numLinksShown = 6; 
    var scrollCursor = 0; 

    for (var i = 0; i < numLinksShown; i++) { 
     $("<a>", { 
      'href': scrollBarLinks[i], 
      'id': 'scrollBarBtn-' + i, 
      'data-role': 'button', 
      'data-inline': true, 
      'data-icon': scrollBarIcons[i], 
      'data-iconpos': 'right', 
      'text': scrollBarText[i] 
     }).appendTo("#scrollBar").button(); 
    } 

    $("#scrollBar").swiperight(function() { 
     if (scrollCursor == 0) { 
      alert("Can't slide to the right. 0"); 
      return false; 
     } 
     $("#scrollBar > a:last").remove(); 
     scrollCursor--; 
     $("<a>", { 
      'href': scrollBarLinks[scrollCursor], 
      'id': 'scrollBarBtn-' + (scrollCursor), 
      'data-role': 'button', 
      'data-inline': true, 
      'data-icon': scrollBarIcons[scrollCursor], 
      'data-iconpos': 'right', 
      'text': scrollBarText[scrollCursor] 
     }).appendTo("#scrollBar").button(); 
    }); 

    $("#scrollBar").swipeleft(function() { 
     if (scrollCursor == scrollBarLinks.length) { 
      alert("Can't slide to the left. " + scrollBarLinks.length); 
      return false; 
     } 
     $("#scrollBar > a:first").remove(); 
     var nextBtn = scrollCursor + numLinksShown; 
     scrollCursor++; 
     $("<a>", { 
      'href': scrollBarLinks[nextBtn], 
      'id': 'scrollBarBtn-' + (nextBtn), 
      'data-role': 'button', 
      'data-inline': true, 
      'data-icon': scrollBarIcons[nextBtn], 
      'data-iconpos': 'right', 
      'text': scrollBarText[nextBtn] 
     }).appendTo("#scrollBar").button(); 
    }); 
});

正如你所看到的，你可以馬只要你願意就可以。在這個例子中，滑動將一次移動一個按鈕。我相信你可以對短時間刷卡和長時間刷卡做出更快的響應，或者你可以讓它移動一半的數字。您可以使用自己的圖標，並將按鈕設置爲特定的尺寸或外觀。

來源

2012-12-29 02:18:31 Twisty

jQuery Mobile - 用於Navbar導航菜單的滑動滑塊

回答

相關問題