插件描述：JScrollPane类可提供轻量级插件的 scrollable视图。JScrollPane 管理视口、可选的垂直和水平滚动条以及可选的行和列标题视口
JScrollPane
jScrollPane是一个设计非常灵活的跨浏览器的jQuery插件 ，它将浏览器的默认滚动条或是元素溢出时出现的滚动条映射成一个HTML结构，从而很容易地使用CSS来定义滚动的样式。下面来看下这个强大而灵活的jScrollPane的使用方法吧。
引入核心文件，为了更方便的使用，这里引入了mousewheel库
使用方法
1 2 3 4 5 6 7 8 9 10 11 | <!-- styles specific to demo site --><link type="text/css" href="style/demo.css" rel="stylesheet" media="all" /><!-- styles needed by jScrollPane - include in your own sites --><link type="text/css" href="style/jquery.jscrollpane.css" rel="stylesheet" media="all" /><!-- the styles for the lozenge theme --><link type="text/css" href="style/jquery.jscrollpane.lozenge.css" rel="stylesheet" media="all" /><!-- the mousewheel plugin --><script type="text/javascript" src="js/jquery.mousewheel.js"></script><!-- the jScrollPane script --><script type="text/javascript" src="js/jquery.jscrollpane.min.js"></script> |
构建html
1 2 3 | <div class="scroll-pane"> ....内容 </div> |
写入JS
1 2 3 | $(function() { $('.scroll-pane').jScrollPane();}); |
参数选项
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | $('.scroll-pane').jScrollPane( showArrows - boolean (default false)//显示滑杆两边的箭头 maintainPosition - boolean (default true)//保持原位置 stickToBottom- boolean (default false)//滑到底部 stickToRight- boolean (default false)//滑到最右边 autoReinitialise - boolean (default false)//自动加载出现滑杆 autoReinitialiseDelay - int (default 500)//自动加载的时间延迟 verticalDragMinHeight - int (default 0)//垂直拖拽的最小高度 verticalDragMaxHeight - int (default 99999)//处置拖拽的最大高度 horizontalDragMinWidth - int (default 0)//水平拖拽的长度 horizontalDragMaxWidth - int (default 99999)//水平拖拽的最大长度 contentWidth - int (default undefined)//内幕内用的宽度 animateScroll - boolean (default false)//滚动动画 animateDuration - int (default 300)//动画延迟 animateEase - string (default 'linear')//动画轨迹 hijackInternalLinks - boolean (default false)//截获内部链接 verticalGutter - int (default 4)//处置不掉长度 horizontalGutter - int (default 4)//水平不掉长度 mouseWheelSpeed - int (default 10)//鼠标疼速度 arrowButtonSpeed - int (default 10)//方向键按钮的速度 arrowRepeatFreq - int (default 100)//按钮事件重复频率 arrowScrollOnHover - boolean (default false)//接手鼠标在方向键上滑过的动作 verticalArrowPositions - string [split|before|after|os] (default split)//垂直方向上按钮的位置 horizontalArrowPositions - string [split|before|after|os] (default split)//水平方向上按钮的位置 enableKeyboardNavigation - boolean (default true)//是否接受键盘操作 hideFocus - boolean (default false)//隐藏焦点 clickOnTrack - boolean (default true)//路径上点击操作 trackClickSpeed - int (default 30)//互动轨迹上的点击速度 trackClickRepeatFreq - int (default 100)//滑动轨迹上的重复频率 ); |
特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com
- 上一个特效： jQuery目录树插件jtree
- 下一个特效： jQuery响应式表格插件ReStable