jQuery自定义滚动条样式插件mCustomScrollbar
来源:互联网 发布:12306网络订餐配送工 编辑:程序博客网 时间:2024/05/01 09:24
mCustomScrollbar
是个基于 jQuery UI 的自定义滚动条插件,它可以让你灵活的通过 CSS 定义网页的滚动条,并且垂直和水平两个方向的滚动条都可以定义,它通过 Brandon Aaron jquery mouse-wheel plugin 提供了鼠标滚动的支持,并且在滚动的过程中,还可以缓冲滚动使得滚动更加的平滑,还可以自动调整滚动条的位置和定义滚动到的位置等。
实例:
http://manos.malihu.gr/repository/custom-scrollbar/demo/examples/complete_examples.html
是个基于 jQuery UI 的自定义滚动条插件,它可以让你灵活的通过 CSS 定义网页的滚动条,并且垂直和水平两个方向的滚动条都可以定义,它通过 Brandon Aaron jquery mouse-wheel plugin 提供了鼠标滚动的支持,并且在滚动的过程中,还可以缓冲滚动使得滚动更加的平滑,还可以自动调整滚动条的位置和定义滚动到的位置等。
实例:
http://manos.malihu.gr/repository/custom-scrollbar/demo/examples/complete_examples.html
如何使用 mCustomScrollbar
mCustomScrollbar 这个插件的下载包里面包含了所有的插件文件和一些例子。其中以下的四个文件时必须要:
- jquery.mCustomScrollbar.js
- jquery.mousewheel.min.js
- jquery.mCustomScrollbar.css
- mCSB_buttons.png
第一步:加载 mCustomScrollbar 的样式文件。
通过下面的代码,引入插件包中的 jquery.mCustomScrollbar.css 样式表文件。
<link href="jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css" />
第二步:加载必须的 JS 文件。
需要加载的文件有如下几个:jQuery、jQuery UI, jquery.mousewheel.min.js 和 jquery.mCustomScrollbar.js 这四个。
- jQuery:这个插件的必备库,你懂。
- jQuery UI:扩展 jQuery 库并且为我们的滚动条提供了简单的动画和拖动功能。
- jquery.mousewheel.min.js:这是 Brandon Aaron 编写的一个伟大的只有2kb的插件,它面向所有的操作系统和浏览器,为我们提供了鼠标滚动事件的支持。
- jquery.mCustomScrollbar.js:这是我们的插件主文件。在插件包的 minified 你可以找到它的压缩版。
- jquery.mCustomScrollbar.css: 这个 CSS 文件是让我们来定义边栏用的。你可以在这个文件中定义你的边栏,当然你可以在其他的 CSS 文件中定义,要注意的是,你要用 CSS 中的顺序,其中的优先级关系来覆盖这个文件中的定义。否则可能会无效
jQuery 和 jQuery UI 是必须的, jquery.mousewheel.min.js 是用来提供滚动支持的,jquery.mCustomScrollbar.js 则是插件的主文件。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script><script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script><script src="jquery.mousewheel.min.js"></script><script src="jquery.mCustomScrollbar.js"></script>
第三步:应用 mCustomScrollbar
就可以保证在页面对象全部加载完成之后,加载插件。
。一般的 jQuery 代码加载方法如下:<script type='text/javascript'> (function($){ $(window).load(function(){ $(".content").mCustomScrollbar(); }); })(jQuery);</script>
<script type='text/javascript'> (function($){ $(document).ready(function(){ $(".content").mCustomScrollbar(); }); })(jQuery);</script>
第四步:在页面中添加内容和 mCustomScrollbar 的样式
CSS 来让它出现滚动条,否则是没有效果的。加上的样式很简单,就是定义一个宽或者高或者宽高都定义,然后再定义一个 overflow 值为 auto。这样如果内容超出了指定的宽高,就会出现一个滚动条。例:<div class="content"> <p>测试数据.......还有很多很多</p></div>
.content{
width:100px;
height:100px;overflow:auto;
}
mCustomScrollbar 的参数介绍
$("#main").mCustomScrollbar({scrollButtons:{enable:false,scrollType:"continuous",scrollSpeed:20,scrollAmount:40}, horizontalScroll:false,});
一定要注意闭合的括号和语句之间的逗号,新手可能会因为不小心,没有严格的按照这个规则写导致插件无法运行。好,下面我们介绍详细的参数。
- set_width:false:设置你内容的宽度 值可以是像素或者百分比
- set_height:false:设置你内容的高度 值可以是像素或者百分比
- horizontalScroll:Boolean:是否创建一个水平滚动条 默认是垂直滚动条 值可为:true(创建水平滚动条) 或 false
- scrollInertia:Integer:滚动的惯性值 在毫秒中 使用0可以无滚动惯性 (滚动惯性可以使区块滚动更加平滑)
- scrollEasing:String:滚动动作类型 查看 jquery UI easing 可以看到所有的类型
- mouseWheel:String/Boolean:鼠标滚动的支持 值为:true.false,像素 默认的情况下 鼠标滚动设置成像素值 填写false取消鼠标滚动功能
- mouseWheelPixels:Integer:鼠标滚动中滚动的像素数目 值为以像素为单位的数值
- autoDraggerLength:Boolean:根据内容区域自动调整滚动条拖块的长度 值:true,false
- scrollButtons:{ enable:Boolean }:是否添加 滚动条两端按钮支持 值:true,false
- scrollButtons:{ scrollType:String }:滚动按钮滚动类型 值:”continuous”(当你点击滚动控制按钮时断断续续滚动) “pixels”(根据每次点击的像素数来滚动) 点击这里可以看到形象的例子
- scrollButtons:{ scrollSpeed:Integer }:设置点击滚动按钮时候的滚动速度(默认 20) 设置一个更高的数值可以更快的滚动
- scrollButtons:{ scrollAmount:Integer }:设置点击滚动按钮时候每次滚动的数值 像素单位 默认 40像素
- advanced:{ updateOnBrowserResize:Boolean }:根据百分比为自适应布局 调整浏览器上滚动条的大小 值:true,false 设置 false 如果你的内容块已经被固定大小
- advanced:{ updateOnContentResize:Boolean }:自动根据动态变换的内容调整滚动条的大小 值:true,false 设置成 true 将会不断的检查内容的长度并且据此改变滚动条大小 建议除非必要不要设置成 true 如果页面中有很多滚动条的时候 它有可能会产生额外的移出 你可以使用 update 方法来替代这个功能
- advanced:{ autoExpandHorizontalScroll:Boolean }:自动扩大水平滚动条的长度 值:true,false 设置 true 你可以根据内容的动态变化自动调整大小 可以看Demo
- advanced:{ autoScrollOnFocus:Boolean }:是否自动滚动到聚焦中的对象 例如表单使用类似TAB键那样跳转焦点 值:true false
- callbacks:{ onScrollStart:function(){} }:使用自定义的回调函数在滚动时间开始的时候执行
- callbacks:{ onScroll:function(){} }:自定义回调函数在滚动中执行 Demo 同上
- callbacks:{ onTotalScroll:function(){} }:当滚动到底部的时候调用这个自定义回调函数 Demo 同上
- callbacks:{ onTotalScrollBack:function(){} }:当滚动到顶部的时候调用这个自定义回调函数 Demo 同上
- callbacks:{ onTotalScrollOffset:Integer }:设置到达顶部或者底部的偏移量 像素单位
- callbacks:{ whileScrolling:function(){} }:当用户正在滚动的时候执行这个自定义回调函数
- callbacks:{ whileScrollingInterval:Integer }:设置调用 whileScrolling 回调函数的时间间隔 毫秒单位
scrollTo 方法的参数
- $(selector).mCustomScrollbar(“scrollTo”,String);:滚动到某个对象的位置,字符串型的值可以是 id 或者 class 的名字
- $(selector).mCustomScrollbar(“scrollTo”,”top”);:滚动到顶部(垂直滚动条)
- $(selector).mCustomScrollbar(“scrollTo”,”bottom”);:滚动到底部(垂直滚动条)
- $(selector).mCustomScrollbar(“scrollTo”,”left”);:滚动到最左边(水平滚动条)
- $(selector).mCustomScrollbar(“scrollTo”,”right”);:滚动到最右边(水平滚动条
- $(selector).mCustomScrollbar(“scrollTo”,”first”);:滚动到内容区域中的第一个对象位置
- $(selector).mCustomScrollbar(“scrollTo”,”last”);:滚动到内容区域中的最后一个对象位置
- $(selector).mCustomScrollbar(“scrollTo”,Integer);:滚动到某个位置(像素单位)
0 0
- jQuery自定义滚动条样式插件mCustomScrollbar
- jQuery自定义滚动条样式插件mCustomScrollbar
- jQuery自定义滚动条样式插件mCustomScrollbar
- 自定义滚动条插件--mCustomScrollbar
- jQuery 自定义网页滚动条样式插件 mCustomScrollbar 的介绍和使用方法
- jQuery 自定义网页滚动条样式插件 mCustomScrollbar 的介绍和使用方法
- jQuery 自定义网页滚动条样式插件 mCustomScrollbar 的介绍和使用方法
- jQuery 自定义网页滚动条样式插件 mCustomScrollbar 的介绍和使用方法
- 【JQuery】HTML自定义滚动条(mCustomScrollbar)
- mCustomScrollbar 滚动条插件
- jquery个性滚动条插件jquery.mCustomScrollbar.js的使用
- 滚动条的相关插件(mCustomScrollbar)
- mCustomScrollbar.js自定义滚动条…
- jquery插件 - 自定义滚动条插件
- 自定义滚动条样式(Jquery的运用)
- JQuery+DIV自定义滚动条样式
- 美化滚动条插件mCustomScrollbar.js的使用示例
- jQuery自定义内容滚动条插件
- python3爬虫--抓取天气信息
- JVM加载class文件的机制
- Java并发编程:线程间协作的两种方式:wait、notify、notifyAll和Condition
- ORA-00205: error in identifying control file, check alert log for more info
- POJ2632Crashing Robots
- jQuery自定义滚动条样式插件mCustomScrollbar
- tensorflow在windows环境下的安装
- s3c2440时钟系统分析
- LNMP更改默认mysql数据存放到数据盘
- ctr+alt+down在win10上失效
- 闭包
- BigDecimal用法详解
- Android实现多层级Spinner列表选项实时更新树形层级
- 【NOIP2011模拟9.17】地铁建设