假设在页脚部分我想通过ajax调用来获取50个数据并且当我们触摸数据时它们也将是直线,它也会移动并通过鼠标它也会像它应该移动一样滚动plz帮助我我正在获取数据,但它没有滚动,数据不是直线
提前致谢
在HTML5中: -
<div data-role="footer" data-position="fixed" id="footer_ids" onmousedown="startReverseSlider(event)" ontouchstart="startReverseSlider(event)">
<div class="menu_cat_ids" id="menu_button_ids" ></div>
</div>
<style>
#footer_ids{
position: fixed;
width:100%;
overflow-x:auto;
bottom: 1px;
z-index: 10;
text-align: center;
height: 5%;
}
</style>
在jquery中的: -
$(document).unbind('pageinit').bind('pageinit', function () {
callMenuConnection();
});
function callMenuConnection() {
$.support.cors = true;
$.ajax({
type: "GET",
url: "one.html",
contentType: "text/xml",
dataType: "xml",
data: "",
cache:false,
processData:false,
crossDomain:true,
success: function (data) {
$(data).find("category").each(function () {
var id = $(this).find('id').text();
var title = $(this).find('title').text();
var scripts = "<a href='#' data-role='button' data-theme='b' data-inline='true'>"+title+"</a>"
$("#menu_button_ids").append(scripts).trigger('create');
});
}
});
}
function startReverseSlider(event){
theElement=event.currentTarget;
startX = endX = getCurrentPositionX(event);
startY = endY = getCurrentPositionY(event);
mx = getCurrentPositionX(event) - $('#menu_button_ids').offset().left;
document.addEventListener("mousemove",moveReverseSlider,true);
document.addEventListener("mouseup",dropReverseSlider,true);
document.addEventListener("touchmove",moveReverseSlider,true);
document.addEventListener("touchend",dropReverseSlider,true);
//event.stopPropagation();
event.preventDefault();
}
function dropReverseSlider(event)
{
document.removeEventListener("mouseup",dropReverseSlider,true);
document.removeEventListener("mousemove",moveReverseSlider,true);
document.removeEventListener("touchend",dropReverseSlider,true);
document.removeEventListener("touchmove",moveReverseSlider,true);
//event.stopPropagation();
}
function moveReverseSlider(event)
{
endX = getCurrentPositionX(event);
endY = getCurrentPositionY(event);
var clientX = getCurrentPositionX(event) - mx;
if(clientX+sliderLeft < -w+vx-sliderLeft){
} else if (clientX > sliderLeft) {
} else {
$('#menu_button_ids').css('left',(clientX-sliderLeft)+'px');
var X =$('#menu_button_ids').offset().left - sliderLeft;
var P=-X*(rs)/(w);
if (P > rs-ts) {
P = rs - ts;
}
}
}
答案 0 :(得分:0)
在HTML 5中:
<div data-role="page" data-theme="b" id="jqm-home">
<div data-role="footer" data-position="fixed" data-theme="c">
<div class="categories" id="cat">
<ul id="cat_list" class="cat_list_class"></ul>
</div>
</div>
</div>
现在在JQuery中:
var step = 1;
var current = 0;
var maximum = 0;
var visible = 2;
var speed = 500;
var liSize = 120;
var height = 60;
var ulSize = liSize * maximum;
var divSize = liSize * visible;
$(document).unbind('pageinit').bind('pageinit', function () {
callMenuConnection();
$('.categories').css("width", "auto").css("height", height+"px").css("visibility", "visible").css("overflow", "hidden").css("position", "relative");
$(".categories ul a").css("list-style","none").css("display","inline");
$(".categories ul").css("width", ulSize+"px").css("left", -(current * liSize)).css("position", "absolute").css("white-space","nowrap").css("margin","0px").css("padding","5px");
});
$(document).unbind('click').bind('click', function () {
scroll();
});
function callMenuConnection() {
$.support.cors = true;
$.ajax({
type: "GET",
url: "one.html",
contentType: "text/xml",
dataType: "xml",
data: "",
cache:false,
processData:false,
crossDomain:true,
success: processSuccess,
error: processError
});
}
var scripts ="";
function processSuccess(data) {
$(data).find("category").each(function () {
var id = $(this).find('id').text();
var title = $(this).find('title').text();
scripts = scripts+'<a class="ids_cat" data-role="button" data-transition="slide" data-inline="true" >' +title+ '</a>';
});
$('#cat_list').append(scripts);
$('#cat_list').trigger('create');
maximum = $(".categories ul a").size();
}
function processError(data)
{
alert("error");
}
function scroll(){
$(".categories").swipeleft(function(event){
if(current + step < 0 || current + step > maximum - visible) {return; }
else {
current = current + step;
$('.categories ul').animate({left: -(liSize * current)}, speed, null);
}
return false;
});
$(".categories").swiperight(function(event){
if(current - step < 0 || current - step > maximum - visible) {return; }
else {
current = current - step;
$('.categories ul').animate({left: -(liSize * current)}, speed, null);
}
return false;
});
}