类垂直站点插件实现与共享 - 网页设计实例教程 网页特效教程-.docx

《类垂直站点插件实现与共享 - 网页设计实例教程 网页特效教程-.docx》由会员分享，可在线阅读，更多相关《类垂直站点插件实现与共享 - 网页设计实例教程 网页特效教程-.docx（6页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、类垂直站点插件实现与共享-网页设计实例教程网页特效教程-最新IT资讯_电脑知识大全_网络安全教程-次元立方网来自广东地区的小伙伴们或多或少都听讲过菲律宾海外程序员派遣吧，十分是深圳和广州地区的招聘群中经常出现这样的信息，一个偶尔的时机，博主在无意中阅读发现有一家博彩公司的注册地址是菲律宾，而且在国内开设网络赌博(这里网站就不透露了)。博主发现固然站点是非法的，还是有很多在站点的设计的非常好，值得我们去学习的，所以就仿照了一下别人家的网站，本人重构了一下类似风格的插件出来。(插件目前为1.0版本，稳定性不高，不建议商业使用，但是学习一下还是能够的)一、插件的设计思想这款插件主要是用来解决侧边固定

2、栏的实现的功能的。该插件的设计思路比起jPage.js有所创新(新来的小伙伴们可能不太清楚，jPage.js就是博主之前共享过的一款类电商的分页插件，详情请看),有了比拟大的突破，之前相当于就是一个方法一个方法的调用，但是如今的设计就是相当于有一个父类初始化了一些公共的方法，然后通过子类继承父类的形式，将父类的值传递给子类，子类改变值重新传给父类，进而到达了不同子类之间的信息分享与传递。图例如下：其中父类Init初始化类中将要使用到的变量，validate中对程序的运行结果进行验证保证传入的参数是正确的，draw这个方法是用来对传入参数进行绘制的，最后在外部对init中进行事件绑定，这样我们就

3、能够很简单的通过一个main方法来new一个init进而到达侧栏绘制的效果二、插件简单DEMO!DOCTYPElang=enheadmetacharset=UTF-8titlemulTSideBarDEMO/title/headbody:/type:hollow,/可选参数有hollow,solidnoCustom:true,/自定义类型，只要在custom为true的时候，customUrl才有效text:微博,customUrl:,/图片的URLclick:function()window.location.href=s:/weiboicon:weibo,/weixin,qq,facebo

4、ok,taobao，zhifubao,weibotype:hollow,/可选参数有hollow,solidnoCustom:false,/自定义类型，只要在custom为true的时候，customUrl才有效text:小兔子,customUrl:img/custom.svg,/图片的URLclick:function()window.location.href=s:/baidu,/点击后的效果icon:goTop,/weixin,qq,facebook,taobao，zhifubao,weibotype:solid,/可选参数有hollow,solidnoCustom:true,/自定义类

5、型，只要在custom为true的时候，customUrl才有效text:置顶,customUrl:,/图片的URL/script/body/运行效果如下：更多的配置请到git上面阅读readme文件，地址：s:/github/leslieSie/font-end-tools/tree/master/jquery/multSideBar三、插件版本规划由于这款插件预期是要在星期六的时候发布的，由于出现一点变动耽搁了发布时间，所以1.0版本在匆忙中紧急发布，因而难免会有一些瑕疵，所以在1.1版本中会修复大家所提交的Bug,添加图标的popup功能(这个功能类似于hover显示微信二维码),允许透明度定制等问题的添加与修复。假如你觉得赞的话，请在右下角点赞，或者给予小额的资金赞助，以供博主能够继续的进行开源项目的开发。同时博主承接插件商业化定制服务