Question

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

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

我该怎么做？

Answer 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();
    });
});

如您所见，您可以根据需要制作它。在此示例中，滑动将一次移动一个按钮。我相信你可以对短滑动而不是长滑动做出更快的反应，或者你可以让它移动一半显示的数字。您可以使用自己的图标并将按钮设置为特定尺寸或外观。

jQuery Mobile - 用于导航菜单的滑动滑块

1 个答案: