js-------插件

来源：互联网发布：网络计划图样板编辑：程序博客网时间：2024/06/05 18:20

2014年3月3号起，每天晚上记录一个js插件，给自己的任务。如果想过自己想要的生活，那就不断提升自己。

1.前段时间有人问我iscroll，今天就简单的记录一下iscroll.（本人只是为了上手快一点，所以想研究详细的博友自己多研究研究）。其实iscroll的效果就是实现滚动条非常爽的效果，滑动起来非常流畅。那么iscroll怎么上手呢，给大家介绍个网站：http://cubiq.org/iscroll-4。进去之后直接点击DOWNLOAD,然后就是下载下来很多iscroll的例子，可以研究下，例子简洁易懂。现在好像到iscroll5了，不过我用的是iscroll4.下载下来还有个好处就是可以直接用例子里的iscroll.js.

首先，下载自己需要的iscroll.js。把下载好的iscroll.js引入你的html中。

然后，就是该你在html中大显身手的时候了，你需要做的就是写个div,然后这个div你得定义个id，比如id="home"（在此要说说，这个id的值可以随便赋值，他和谁都没关系，非要说他和什么有关系的话，那么关系马上就来了，接着看），下面我们就要用到这个id的值了，怎么用呢？就是iscroll.js绑定这个div的值，怎么绑定呢？（在这要啰嗦一句，这个div的DOM树的父级越少用的iscroll越不容易出错。就是尽量不要父级太多，如果这个div根据项目情况是在很里面的话好像也没啥问题，应为我好像做过。一不小心啰嗦了好几句）。怎么绑定呢？你不是把iscroll.js引进你的html里面了吗，然后是这样绑定的，在你html里面写个脚本，如下：

function loaded () {
myScroll = new IScroll('#home', {});
}

看到了吧，这个div的id终于有关系了，而且关系还非常大。有人可能问，我给这个div写个class，然后绑定这个class可以吗？我非常肯定的说可以，但是你考虑过这个问题没，一个页面的任何标签的id是唯一的，而class在一个页面里是没限制的，这下你明白为什么不用class了吧（这只是我个人用零智商猜测的，不知道对不对）。然后我们需要做的就是在页面加载完之后调用这个方法，大家应该知道怎么调用，在body标签里面添加个onload事件就可以了，如下：

这样就完了吗？没，还多着呢！哈哈......给大家开个玩笑，其实只需要再添加一点点就OK了：大家要注意的是，好像绑定的这个div需要给它加个高，否则你的滑动效果会出问题的。也就是你心目中想让她在多高的范围呢滑动，他可以设置很高，但是有个限制，就是再怎么高不能高于她内部的（div或其他标签的）高度（也就是没有她内部总共内容的高度高）如果你不放心，并且你绑定的div一级子级只有一个div那就给这个div设个高度，只要这个高度比你绑定的那个div高就行。还有种方案，就是不想给你绑定的div设置高，可以给她设置top:....,bottom:......(top:....,bottom:......或margin-top:......margin-bottom:.....，是top还是margin-top就得看你的div位置是怎么定了)。好了，这就OK了。可以把你的html运行起来，用你的鼠标在上面滑动了。有种滑冰的感觉.........哈哈哈

如果你觉的光这个还不够好，可以接着看，我们可以在我们上面写得那个脚本方法里面添加点东西，也就是重写他的属性值和方法，可以实现更爽的效果，如下：

function loaded(){

myScroll=new IScroll('#home',{

//在这里面就可以重写她属性和方法，比如她默认的是上下滑，你也想让她左右滑，那就这样

scrollX: true , //把它的左右滑动的属性改为true，还有很多属性，就不一一写了，自己可以去看看她的类库里面的属性，只要你想改的都可以在这里改，方法也可以在这里改，只是属性与属性之间，属性与方法之间，方法与方法之间都用逗号隔开就可以了。

})

}

好了，修改告诉大家在哪里修改了，大家可以根据自己的需求修改。然后给大家介绍个在用iscroll热门的问题，就是大家在用iscroll时，在她滚动范围里难免会出现input,texteare,select,然后对他们没法操作，该怎么办呢？不用急，有办法解决的，在上面讲的修改她属性和方法的地方重写一下她的一个方法就行了，如下：

onBeforeScrollStart: function (e) {
var target = e.target;
while (target.nodeType != 1) target = target.parentNode;
var targetName = target.tagName.toLowerCase();
if (targetName != 'select' && targetName != 'input' && targetName != 'textarea') {
e.preventDefault();
}
}

还有就是，有的在滑动中焦点没被释放遇到了一些问题，也不用急，有办法解决，还是在那里重写她的方法，如下：

onScrollStart: function (e) {
$(':focus').blur();
},

onScrollMove: function (e) {
$(':focus').blur();
}

还有就是他自身带了一个点击事件，所以也可能大家会遇到问题，如果你的点击是双击的效果，那你就把他的一个属性设置一下，如下：

handleClick:false, //它默认的可能是true，当然，如果点击效果没问题的话就不用该此属性的默认值

还有就是，如果你想在这个滑动范围里有个在绑定个滑动范围，怎么防止内部滑动时，外部的能不动呢？不用急，有办法解决，如下：

MyMyIscroll = new iScroll('内部的id', { //这是你myScroll绑定的滑动范围的内部的一个div绑定了一个滑动（这个效果就是滑动内部嵌套滑动）
checkDOMChanges: true, hScroll: false, vScroll: true,
onBeforeScrollStart: function (e) {
myScroll.disable(); //myScroll就是你父级的div绑定的Iscroll,在你滑动子级的滑动效果时，将父级的滑动动作给禁止掉。
}, onScrollEnd: function (e) {
myScroll.enable(); //在你滑动子级结束时，将父级的滑动动作给释放。
}
});

好了，今天暂时总结到这，转眼就晚上12点了，希望每次总结都能帮到刚入门的生活苦逼的新程序员们！明天接着总结。记住，永远不要让别人把你的梦想给糟蹋了！

虽然本人总结的质量很随便，但是如果你想复制或转载的，请附上本人的链接http://blog.csdn.net/liulangdejavascript/article/details/20315889。谢谢！尊重每个人在背后默默总结的付出！尊重每个人的每滴汗水！

0 0