基于jquery的橫向滾動條（滑動條）
更新時間：2011年02月24日 23:45:56 作者：
ASP.Net的GridView本身不帶滾動條，可通過Panel實現(xiàn)。但是Windows自帶的橫向滾動條只支持顯示在下方，為了使用方便，需要在上下方都顯示橫向滾動條。
查找了很多方法，有些不能實現(xiàn)（被滾動內(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
<div id="topslider" runat="server"></div>
<div id="scroll" runat="server">
<div id="holder">
滾動內(nèi)容
</div>
<div id="bottomslider" style="margin-top:10px;margin-bottom:10px;" runat="server"></div>
3. css
<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
<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'));
}
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">
滾動內(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'));
}
您可能感興趣的文章:
相關(guān)文章
jQuery插件pagination實現(xiàn)分頁特效
jQuery分頁插件示例，ajax方式的jQuery前端分頁插件，其核心代碼jquery.pagination.js已隨示例打包，Demo中包括了5種不同的分頁效果演示，全部是Ajax無刷新方式實現(xiàn)分頁，對于搞前端開發(fā)的朋友來說，這是個值得收藏的代碼特效，為以后實現(xiàn)無刷新分頁提供方便。2015-04-04
jQuery實現(xiàn)訂單提交頁發(fā)送短信功能前端處理方法
這篇文章主要介紹了jQuery實現(xiàn)訂單提交頁發(fā)送短信功能前端處理方法,涉及jQuery響應(yīng)鼠標事件及針對頁面元素的樣式與字符串正則操作相關(guān)技巧,需要的朋友可以參考下2016-07-07
這篇文章主要介紹了JQuery遍歷json數(shù)組的3種方法,本文分別給出了使用each、for遍歷json的方法,其中for又分成兩種形式,需要的朋友可以參考下2014-11-11
本節(jié)主要介紹了jQuery提交多個表單的小技巧,需要的朋友可以參考下2014-07-07
基于jQuery實現(xiàn)文本框只能輸入數(shù)字(小數(shù)、整數(shù))
在實際應(yīng)用中，文本框中有時候只能夠允許輸入整數(shù)，但是有時候可能更為"博愛"一點，可以允許輸入浮點數(shù)，下面就通過實例代碼介紹一下如何利用jquery實現(xiàn)此功能2016-01-01
這里給大家分享幾段JQuery提示效果的代碼，非常的簡單實用，有需要的小伙伴直接拿走吧2014-11-11
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)全選、反選和不選功能 ，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
這篇文章主要為大家詳細介紹了基于jQuery拖拽事件的封裝，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11
本文通過實例代碼給大家講解了基于jquery判斷郵箱格式對錯，非常實用，具有參考借鑒價值，需要的的朋友參考下吧2017-04-04
這篇文章主要是對使用jquery操作iframe的幾種方法進行了詳細的總結(jié)介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12