我需要制作一个简单的按钮水平滚动,但我无法使它工作,例如:
< - | button1 | button2 | button3 | button4 | button5 | - >
我正在使用jquery mobile 1.4制作移动应用程序,这些按钮是用javascript动态插入的。
以下是我正在使用的示例:此问题JSFiddle提供的stackoverflow。
这就是我现在所拥有的:
的CSS:
/* Horizontal menu list */
#overflow {
height: 70px;
width: 100%;
overflow-x: scroll;
overflow-y: hidden;
}
#overflow .container div {
float: left;
width: 120px;
height: 45px;
float: left;
}
HTML:
<div id="overflow">
<div id="containerID" class="container">
</div>
</div>
使用Javascript:
$('#currentorders').live("pageshow", function () {
var width = 0;
$('#overflow .container div').each(function () {
width += $(this).outerWidth(true);
});
$('#overflow .container').css('width', width + "px");
})
$("#overflow .container div a").live('touchstart', function () {
var width = 0;
$('#overflow .container div').each(function () {
width += $(this).outerWidth(true);
});
$('#overflow .container').css('width', width + "px");
})
Javascript插入按钮:
var $horizontalList = document.getElementById("containerID");
for (var i = 0; i < results.index.length; i++) {
var row = results.index[i];
console.log("index = " + row);
var divForButtons = document.createElement("div");
var buttonAnchor = document.createElement("a");
divForButtons.setAttribute("class", "categoryContainer");
divForButtons.setAttribute("id","categoryContainerID");
buttonAnchor.setAttribute("href", "");
buttonAnchor.setAttribute("data-id",row);
buttonAnchor.setAttribute("class","menuItemRest");
buttonAnchor.setAttribute("id","categoryButton");
buttonAnchor.textContent = row;
divForButtons.appendChild(buttonAnchor);
$horizontalList.appendChild(divForButtons);
}