jQuery范圍選擇插件jRange

所屬分類:媒體-滑塊和旋轉

分享到微信朋友圈
X
jQuery范圍選擇插件jRange ie兼容8

更新時間:2020-06-14 22:26:42

如何使用

首先,您必須在html文件中包含jquery.range.js和jquery.range.css文件。

<link rel="stylesheet" href="jquery.range.css">
<script src="jquery.range.js"></script>

稍后,只需添加一個隱藏的輸入,即可在任何位置顯示此滑塊。

<input type="hidden" class="slider-input" value="23" />

之后,您必須為此輸入初始化該插件



$('#slider-input').jRange({
   from:7,//最小值
   to:240,//最大值
   step:1,
   scale: ["7","40","60","80","120","160","180","240"],//刻度條
   showLabels:false,//顯示標簽
   showScale:true,//顯示刻度
   format:'%s',//設置標簽格式
   width:$(window).width()*0.86,//寬度
   theme:"theme-blue",//主題(默認是"theme-green"綠色),還有"theme-blue"藍色。你可以在jquery.range.less中設置
   isRange:true,//是否為范圍(默認false,選擇一個點),如果是true,選擇的是范圍,格式為'1,2'
   snap:false,//是否只允許按增值選擇(默認false)
   disable:false,//是否只讀(默認false),若為true,只讀模式,無法選擇??梢杂胘s動態設置$('.slider').jRange('disable'); $('.slider').jRange('enable'); $('.slider').jRange('toggleDisable');
   onstatechange:function () {//數字變化的時候的回調函數
       // alert($("#slider-input").val());
   },
});

樣式可在jquery.range.css中修改


相關插件-滑塊和旋轉

jQuery 3d旋轉木馬

使用TweenMax創造3d旋轉木馬,它在Chrome或Safari效果最好,然后FF.
  滑塊和旋轉
 39035  277

輪播滾動左右切換

輪播滾動左右切換
  滑塊和旋轉
 54843  300

移動端左右滑動插件

移動端左右滑動插件
  滑塊和旋轉
 46234  248

jQuery輪播圖點擊放大

jQuery輪播圖點擊放大,即可點擊輪播又可點擊圖片放大圖片
  滑塊和旋轉
 37121  225

討論這個項目(0)回答他人問題或分享插件使用方法獎勵jQ幣 評論用戶自律公約

取消回復
金鼎智富