使用jquery.mCustomScrollbar自定义滚动条（4）live使用，向未来元素添加滚动条，不实用，了解一下
.div_box元素是本来没有的，在滚动条初始化的时候方法是加在$('.content .div_box').mCustomScrollbar()上面，参数live:on;
点击按钮的时候，进行content里面添加div_box的，这时候滚动条初始化才开始在div_box元素上进行；
小结：
$('.content .div_box').mCustomScrollbar()配合参数live：on向未来元素.div_box上加个滚动条方法，猜想是这时候是绑定了一个事件：在div_box被创建出来之后，进行加载滚动条；
所以看到一个过程：
content里面先append div_box，这时候还是浏览器默认滚动条，然后再变成优化后的自定义滚动条；
因为append一个元素很快，浏览器启动默认滚动条也很快，几乎是同时的；但是jquery mCustomScrollbar加载滚动条有个过程，所以有个两段的过程；
感觉有个过程，比较突兀，个人感觉这种方法不是很好，不建议使用；
仅仅是做个例子记录而已。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jquery版的自定义滚动条</title>
<link rel="stylesheet" type="text/css" href="bootstrap/bootstrap.min.css">
<!--<link rel="stylesheet" type="text/css" href="jquery/jquery.mCustomScrollbar.min.css">-->
<link rel="stylesheet" type="text/css" href="jquery/jquery.mCustomScrollbar.css">
<style type="text/css">
.content{
width: 500px;
margin: 0 auto;
border: 1px solid #ccc;
padding: 10px;
height: 300px;
}
.div_box{
height: 280px;
border: 1px solid #ccc;
overflow: auto;
}
.toolbar{
width: 500px;
margin: 0 auto;
margin-top: 20px;
} /** 覆盖滚动条样式 */
/*
.mCS-dark-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
background-color: #333;
}
.mCS-dark-3.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{
background-color: #333;
background-color: rgba(102,102,102,0.9);
}
*/
.mCSB_inside > .mCSB_container {
margin-right: 20px;
}
</style>
</head> <body> <div class="container">
<div class="row">
<h3 class="text-center">详情描述</h3>
<!--<div class="content mCustomScrollbar" data-mcs-theme="dark"></div>-->
<div class="content"> </div>
<div class="toolbar">
<button class="btn btn-default" id="btn_show">添加div_box</button>
</div>
</div>
</div> </body>
<script src="jquery/jquery.min.js"></script>
<script src="bootstrap/bootstrap.min.js"></script>
<script src="jquery/jquery.mCustomScrollbar.concat.min.js"></script>
<script type="text/javascript">
$(function(){
//将滚动条添加到未来元素.div_box上
$('.content .div_box').mCustomScrollbar({
theme:"dark-3",
scrollInertia:100,
scrollButtons:{
enable: true
},
live:"on"
}); //点击添加div_box元素
$('#btn_show').click(function(){
var div = '<div class="div_box">';
var string = '所谓的甩头。就是虚实举球马上停加碎步。就是篮筐反方向键。↓W或者下DW。马上停。然后调整人物方向带着这几点疑问看视频吧：1.C防两个人的时候是怎么防的？2.怎么应对女PF的钟头？3.被吸到的时候是怎么保证不倒的？还是就不让敌人吸到你？4.篮板是怎么抢的？ 等分？ 直接秒？';
for(var i=0; i<3;i++){
string += string;
}
div += string;
div += '</div>';
$('.content').append(div);
});
});
</script>
</html>
效果：
=========================为工作中Ztree每次加载想的一个demo=======================================================================================================================
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jquery版的自定义滚动条</title>
<link rel="stylesheet" type="text/css" href="bootstrap/bootstrap.min.css">
<!--<link rel="stylesheet" type="text/css" href="jquery/jquery.mCustomScrollbar.min.css">-->
<link rel="stylesheet" type="text/css" href="jquery/jquery.mCustomScrollbar.css">
<style type="text/css">
.content{
width: 500px;
margin: 0 auto;
border: 1px solid #ccc;
padding: 10px;
height: 300px;
}
#fnTree{
height: 280px;
border: 1px solid #ccc;
overflow: auto;
}
.toolbar{
width: 500px;
margin: 0 auto;
margin-top: 20px;
} /** 覆盖滚动条样式 */
/*
.mCS-dark-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
background-color: #333;
}
.mCS-dark-3.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{
background-color: #333;
background-color: rgba(102,102,102,0.9);
}
*/
.mCSB_inside > .mCSB_container {
margin-right: 20px;
}
</style>
</head> <body> <div class="container">
<div class="row">
<h3 class="text-center">详情描述</h3>
<!--<div class="content mCustomScrollbar" data-mcs-theme="dark"></div>-->
<div class="content"> </div>
<div class="toolbar">
<button class="btn btn-default" id="btn_add">重新加载fnTree</button>
</div>
</div>
</div> </body>
<script src="jquery/jquery.min.js"></script>
<script src="bootstrap/bootstrap.min.js"></script>
<script src="jquery/jquery.mCustomScrollbar.concat.min.js"></script>
<script type="text/javascript">
var count = 0; $(function(){ //点击加载fnTree
$('#btn_add').click(function(){
//如果有fnTree DOM，先清除fnTree DOM，防止后面没法加载滚动条；
if($('.content #fnTree').length>0){
$('.content #fnTree').remove();
}
$('.content').append('<div id="fnTree"></div>'); //ajax请求节点，请求完成后 zTree init('fnTree')
var times = '第'+(++count)+'次加载...<br/>';
var string = '所谓的甩头。就是虚实举球马上停加碎步。就是篮筐反方向键。↓W或者下DW。马上停。然后调整人物方向带着这几点疑问看视频吧：1.C防两个人的时候是怎么防的？2.怎么应对女PF的钟头？3.被吸到的时候是怎么保证不倒的？还是就不让敌人吸到你？4.篮板是怎么抢的？ 等分？ 直接秒？';
for(var i=0; i<3;i++){
string += string;
}
$('.content #fnTree').html(times+string); //fnTree init结束，开始加载滚动条,因为zTree init没有回调方法，所以init之后写就行
$('.content #fnTree').mCustomScrollbar({
theme:"dark-3",
scrollInertia:100,
scrollButtons:{
enable: true
}
});
});
});
</script>
</html>
使用jquery.mCustomScrollbar自定义滚动条（4）live使用，向未来元素添加滚动条，不实用，了解一下的更多相关文章
- 使用jquery.mCustomScrollbar自定义滚动条（3）callback onCreate
碰到了一个问题,想简洁,所以在页面上使用 <div class="div_box mCustomScrollbar" data-mcs-theme="dark-3& ...
- 使用jquery.mCustomScrollbar自定义滚动条（2）
参考博客:http://www.qianxingzhem.com/post-1602.html 接着上篇,另一个使用的例子,使用js来初始化滚动条,并且div中的内容可变化.需要调用相应的方法, 代码 ...
- 使用jquery.mCustomScrollbar自定义滚动条（1）
参考博客:https://blog.csdn.net/cdnight/article/details/41351505 api网址:http://manos.malihu.gr/jquery-cust ...
- jQuery 中 on 方法-----给未来元素添加事件
<li class='clear dir-li'> <div class='left title'> 添加到目录:</div> <div class='lef ...
- 自定义浏览器滚动条的样式，打造属于你的滚动条风格——兼容IE和webkit(ff不支持)
前段时间,到网上找素材时,看到了一个很个性的滚动条式,打开Chrome的调试工具看了一下,发现不是用JavaScript来模拟实现的,觉得 有必要折腾一下.于是在各大浏览器中对比了一下,发现只用Chr ...
- VC对话框实现添加滚动条实现滚动效果
对话框滚动条及滚动效果实现,用的api主要有: ScrollWindow, SetScrollInfo, GetScrollInfo, SetWindowOrgEx.涉及的数据结构为SCROLLINF ...
- 滚动条mCustomScrollbar自定义
mCustomScrollbar 是个基于 jQuery UI 的自定义滚动条插件,它可以让你灵活的通过 CSS 定义网页的滚动条,并且垂直和水平两个方向的滚动条都可以定义,它通过 Brandon A ...
- jquery mCustomScrollbar 滚动条宽度的设置
一.项目使用 $("#iscroll-1, #tree_box, .work, .item1, .item2, .item3, .item4").mCustomScrollbar( ...
- 【JQuery插件】元素根据滚动条位置自定义吸顶效果
;(function($){ $.fn.extend({ /* 元素根据滚动条位置自定义吸顶插件 @defaultTop 初始化top位置 @startTop 开始滚动和回复原样的位置 @demo v ...
随机推荐
- 洛谷 P1164：小A点菜（DP/DFS）
题目背景 uim神犇拿到了uoi的ra(镭牌)后,立刻拉着基友小A到了一家--餐馆,很低端的那种. uim指着墙上的价目表(太低级了没有菜单),说:"随便点". 题目描述 不过ui ...
- 无用之学matplotlib,numpy，pandas
一.matplotlib学习 matplotlib: 最流行的Python底层绘图库,主要做数据可视化图表,名字取材于MATLAB,模仿MATLAB构建 例子1: # coding=utf- from ...
- git使用之放弃本地修改
一,未使用 git add 缓存代码时. 可以使用 git checkout -- filepathname (比如: git checkout -- readme.md ,不要忘记中间的 “-- ...
- mod libs 课堂
name1= input("请输入一个名字:") name2 = input("再输入一个名字:") print("{}刚化妆完\n就被路过的{}拍照 ...
- 【git】一台机器上使用不同的git账号
1.生成一个新的自定义名称的公钥: ssh-keygen -t rsa -C "shangxiaofei3@163.com" -f ~/.ssh/sxfself 一直点击回车 执行 ...
- CS程序中XML编码Encode和解码Decode
VB6的代码,原则上只要是Windows系统均可以使用此方法 Function XMLEncode(ByVal text As String) As String Dim xmldoc Set xml ...
- （惊艳）对象序列化和反序列--Hibernate的查询和新增极其相似
Hibernate几个关键字持久化,ORM(关系对象映射)(数据库中关系称作是一张表) 应用在项目中,刘一从写的查询代码,每次都挂掉,想要弄出测试数据,自己想着把查询出来的复杂数据弄到文件里自己要是去 ...
- <------------------字节流--------------------->
字节流: 输入和输出:1.参照物都是java程序来惨遭 2.Input输入,持久化上的数据---->内存 3.Output输出,内存--->硬盘 字节输出流: OutputStream: ...
- tailor multi fragment && cutom-amd script demo 说明
tailor 官方demo 中提供了一个multi fragment 的demo,这个比较简单,就是使用不同的 后端server 做为fragment ,然后使用 html tag 进行加载就可以了. ...
- python re 正則表達式
夜深了.敲击键盘.用CSDN整理下python re 正則表達式是含有文本和特别字符的字符串,这些文本和特别字符描写叙述的模式能够识别各种字符串. 一下我们从实例结合理论来学习理解吧... 经常使 ...