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导航菜单的滑动滑块

回答

相关问题