快捷導(dǎo)航

基于jquery的橫向滾動(dòng)條（滑動(dòng)條）

更新時(shí)間：2011年02月24日 23:45:56 作者：

ASP.Net的GridView本身不帶滾動(dòng)條，可通過Panel實(shí)現(xiàn)。但是Windows自帶的橫向滾動(dòng)條只支持顯示在下方，為了使用方便，需要在上下方都顯示橫向滾動(dòng)條。

查找了很多方法，有些不能實(shí)現(xiàn)（被滾動(dòng)內(nèi)容的寬度未知，但使用這種方法必須已知），其它的不能完全兼容這些瀏覽器（IE6，F(xiàn)irefox，Chrome）。最后決定使用JQuery的Slider控件。
1. 下載jquery-1.3.2.min.js，jquery-ui-1.7.1.custom.min.js
2. Html

復(fù)制代碼代碼如下:

 
<div id="topslider" runat="server"></div> 
<div id="scroll" runat="server"> 
<div id="holder"> 
滾動(dòng)內(nèi)容 
</div> 
<div id="bottomslider" style="margin-top:10px;margin-bottom:10px;" runat="server"></div> 

3. css

復(fù)制代碼代碼如下:

 
<style> 
#topslider { 
width: 98%; 
height: 6px; 
background: #BBBBBB; 
position: relative; 
} 
#bottomslider { 
width: 98%; 
height: 6px; 
background: #BBBBBB; 
position: relative; 
} 
.ui-slider-handle { 
width: 8px; 
height: 14px; 
position: absolute; 
top: -4px; 
background: #478AFF; 
border: solid 1px black; 
} 
#scroll { 
width: 100%; 
margin-top: 10px; 
overflow: hidden; 
} 
#holder { 
width: 100%; 
} 
</style> 

4. js

復(fù)制代碼代碼如下:

 
<script type="text/javascript" src="JavaScript/jquery-1.3.2.min.js"></script> 
<script type="text/javascript" src="JavaScript/jquery-ui-1.7.1.custom.min.js"></script> 
$(document).ready(function(){ 
$("#topslider").slider({ 
animate: true, 
change: handleSliderChange, 
slide: handleSliderSlide, 
stop:handleTopSliderStop 
}); 
$("#bottomslider").slider({ 
animate: true, 
change: handleSliderChange, 
slide: handleSliderSlide, 
stop:handleBottomSliderStop 
}); 
}); 
function handleSliderChange(e, ui) 
{ 
var maxScroll = $("#scroll").attr("scrollWidth") - $("#scroll").width(); 
$("#scroll").animate({scrollLeft: ui.value * (maxScroll / 100) }, 1000); 
} 
function handleSliderSlide(e, ui) 
{ 
var maxScroll = $("#scroll").attr("scrollWidth") - $("#scroll").width(); 
$("#scroll").attr({scrollLeft: ui.value * (maxScroll / 100) }); 
} 
function handleTopSliderStop(e, ui) 
{ 
$("#bottomslider").slider('value',$("#topslider").slider('value')); 
} 
function handleBottomSliderStop(e, ui) 
{ 
$("#topslider").slider('value',$("#bottomslider").slider('value')); 
} 

您可能感興趣的文章:

橫向滾動(dòng)條

相關(guān)文章

jQuery插件pagination實(shí)現(xiàn)分頁特效
jQuery分頁插件示例，ajax方式的jQuery前端分頁插件，其核心代碼jquery.pagination.js已隨示例打包，Demo中包括了5種不同的分頁效果演示，全部是Ajax無刷新方式實(shí)現(xiàn)分頁，對(duì)于搞前端開發(fā)的朋友來說，這是個(gè)值得收藏的代碼特效，為以后實(shí)現(xiàn)無刷新分頁提供方便。
2015-04-04
jQuery實(shí)現(xiàn)訂單提交頁發(fā)送短信功能前端處理方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)訂單提交頁發(fā)送短信功能前端處理方法,涉及jQuery響應(yīng)鼠標(biāo)事件及針對(duì)頁面元素的樣式與字符串正則操作相關(guān)技巧,需要的朋友可以參考下
2016-07-07
JQuery遍歷json數(shù)組的3種方法
這篇文章主要介紹了JQuery遍歷json數(shù)組的3種方法,本文分別給出了使用each、for遍歷json的方法,其中for又分成兩種形式,需要的朋友可以參考下
2014-11-11
jQuery提交多個(gè)表單的小技巧
本節(jié)主要介紹了jQuery提交多個(gè)表單的小技巧,需要的朋友可以參考下
2014-07-07
基于jQuery實(shí)現(xiàn)文本框只能輸入數(shù)字(小數(shù)、整數(shù))
在實(shí)際應(yīng)用中，文本框中有時(shí)候只能夠允許輸入整數(shù)，但是有時(shí)候可能更為"博愛"一點(diǎn)，可以允許輸入浮點(diǎn)數(shù)，下面就通過實(shí)例代碼介紹一下如何利用jquery實(shí)現(xiàn)此功能
2016-01-01
jQuery提示效果代碼分享
這里給大家分享幾段JQuery提示效果的代碼，非常的簡單實(shí)用，有需要的小伙伴直接拿走吧
2014-11-11
jQuery實(shí)現(xiàn)全選、反選和不選功能
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)全選、反選和不選功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-08-08
基于jQuery拖拽事件的封裝
這篇文章主要為大家詳細(xì)介紹了基于jQuery拖拽事件的封裝，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-11-11
jQuery判斷郵箱格式對(duì)錯(cuò)實(shí)例代碼講解
本文通過實(shí)例代碼給大家講解了基于jquery判斷郵箱格式對(duì)錯(cuò)，非常實(shí)用，具有參考借鑒價(jià)值，需要的的朋友參考下吧
2017-04-04
jquery 操作iframe的幾種方法總結(jié)
這篇文章主要是對(duì)使用jquery操作iframe的幾種方法進(jìn)行了詳細(xì)的總結(jié)介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助
2013-12-12