JQ UIslider를 구현하려고하는데 문제가 계속 발생하므로 다른 사람이 도울 수 있기를 바랍니다.JQuery 슬라이더 문제
"슬라이더"버튼에 JQUI 이미지가 없으면이를 수행하려고합니다. 나는 지금까지 얻을 수 있지만 제대로 작동하도록 할 수는 없습니다. 내 코드는 다음과 같다 :
HTML :
<div id="scroll-pane" class="clearfix" >
<div id="pagination" class="clearfix"></div>
<div class="scroll-bar-wrap">
<div class="scroll-bar"></div></div>
</div>
CSS :
.scroll-bar { background-color:#00FFFF; width: 50px; height: 20px; }
#pagination { width: 2440px; float: left; }
#scroll-pane { overflow: auto; width: 99%; float:left; }
.scroll-bar-wrap { clear: left; padding: 0 4px 0 2px; margin: 0 -1px -1px -1px; background: #FFCC00; width: 400px; }
.scroll-bar-wrap .ui-slider { border:0; height: 2em; margin: 0 auto; background: #FF0000; width: 20px;}
과 JQ이 같다 : (BTW 내가 중 하나를 이해하지 않는다!)
$(document).ready(function() {
var scrollPane = $("#scroll-pane"),
scrollContent = $("#pagination");
var scrollbar = $(".scroll-bar").slider({
slide: function(event, ui) {
if (scrollContent.width() > scrollPane.width()) {
scrollContent.css("margin-left", Math.round(
ui.value/100 * (scrollPane.width() - scrollContent.width())
) + "px");
} else {
scrollContent.css("margin-left", 0);
}
}
});
//append icon to handle
var handleHelper = scrollbar.find(".ui-slider-handle")
.mousedown(function() {
scrollbar.width(handleHelper.width());
})
.mouseup(function() {
scrollbar.width("100%");
})
.append("<span class='ui-icon ui-icon-grip-dotted-vertical'></span>")
.wrap("<div class='ui-handle-helper-parent'></div>").parent();
//change overflow to hidden now that slider handles the scrolling
scrollPane.css("overflow", "hidden");
//size scrollbar and handle proportionally to scroll distance
function sizeScrollbar() {
var remainder = scrollContent.width() - scrollPane.width();
var proportion = remainder/scrollContent.width();
var handleSize = scrollPane.width() - (proportion * scrollPane.width());
scrollbar.find(".ui-slider-handle").css({
width: handleSize,
"margin-left": -handleSize/2
});
handleHelper.width("").width(scrollbar.width() - handleSize);
}
//reset slider value based on scroll content position
function resetValue() {
var remainder = scrollPane.width() - scrollContent.width();
var leftVal = scrollContent.css("margin-left") === "auto" ? 0 :
parseInt(scrollContent.css("margin-left"));
var percentage = Math.round(leftVal/remainder * 100);
scrollbar.slider("value", percentage);
}
//if the slider is 100% and window gets larger, reveal content
function reflowContent() {
var showing = scrollContent.width() + parseInt(scrollContent.css("margin-left"), 10);
var gap = scrollPane.width() - showing;
if (gap > 0) {
scrollContent.css("margin-left", parseInt(scrollContent.css("margin-left"), 10) + gap);
}
}
//change handle position on window resize
$(window).resize(function() {
resetValue();
sizeScrollbar();
reflowContent();
});
//init scrollbar size
setTimeout(sizeScrollbar, 10);//safari wants a timeout
});
# 페이지의 콘텐츠가 "동적으로 생성되었습니다." 내가 가지고있는 문제는 .scroll-bar-wrap .ui-slider이 움직이지 않는다는 것입니다 (움직입니다). 그냥 "만지기"만하면 슬라이드 내용이 너무 많이 너무 빨리 이동하기 때문에 "다시 가져 오는"것은 매우 어렵습니다.
필요한 모든 페이지 번호가 생성 될 때 페이지 번호를 표시/숨기기 위해 # 페이지 이동이 왼쪽/오른쪽으로 이동하는 "간단한 슬라이더 상황"이 필요합니다. 뭔가 JQUI 코드가 "복잡합니다"라고 말하면 - 내가 잘못했을 수도 있지만 - 지금까지는 간단한 일이어야하는 것에 훨씬 많은 시간이 걸렸습니다. - OK는 JQ/JS 유형의 사람이 아니라고 인정했습니다. .JQUI 예제 인 link text이 잘 작동하며 이것이이 코드입니다. 나는 그들이 가지고있는 배경/슬라이더 버튼을 원하지 않습니다. 로 스크롤 할 수 있는지 scrollto를 만들기 위해, http://plugins.jquery.com/project/slideto
랩 귀하의 페이지 매김 사업부의 모든 페이지 번호 주위에 스팬 또는 사업부 :이 너무 복잡하다면