使用jQuery Mobile，如何在页脚或标题导航中添加滑动/滑块。
那么，在所有图标上都有一个data-role =" navbar"的地方，如何在滑块中添加一个可以在菜单上滑动或按下箭头以在菜单上显示更多图标的滑块？p>我找到了这个工作示例：
我该怎么做？
这是一种大致上的方法，因为它使用JQM代码，您可以将其命名为正常。工作测试示例：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();
});
});
您可以看到，只要您需要做，就可以做到。在此示例中，滑动将一次通过一个按钮移动。我敢肯定，您可以对短滑动和长滑动更敏感，或者您可以将其移动一半的数字。您可以使用自己的图标并将按钮样式为特定尺寸或外观。