jQuery Mobile - 导航栏导航菜单的滑动滑块答案

【问题标题】：jQuery Mobile - Swipe Slider for Navbar navigation menujQuery Mobile - 导航栏导航菜单的滑动滑块
【发布时间】：2012-12-28 15:47:30
【问题描述】：

使用 jQuery mobile，如何在页脚或页眉导航中添加滑动/滑块。

那么，如果您有一个带有所有图标的 data-role="navbar"，那么如何添加一个滑块，您可以在其中滑动或按向左/向右箭头以在菜单上显示更多图标？

I have found this working example:

我该怎么做？

【问题讨论】：

基本上，您会想要构建整个栏并使用 CSS 左右滑动。这可以通过slide 事件来完成。查看更多：JQM Events。我会看看是否可以找到更完整的示例或制作一个。如果您有任何尝试过的示例代码。请编辑并添加。

标签： jquery html jquery-mobile navigation slider

【解决方案1】：

这里有一个方法，粗略，因为它使用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();
    });
});

如您所见，您可以随心所欲地制作它。在此示例中，滑动一次会将其移动到一个按钮上。我相信你可以对短滑动比长滑动更敏感，或者你可以让它移动显示数字的一半。您可以使用自己的图标并将按钮设置为特定大小或外观。

【讨论】：