时间:2021-05-26
本文实例为大家分享了jquery简易手风琴插件的封装代码,供大家参考,具体内容如下
理论基础:
基于jquery封装插件,首先我们要清楚封装的代码应该写在哪里?
毫无疑问,写在原型中...
写入原型的好处:
数据共享,节省空间
那么既然知道是写在原型中,那怎么将封装的代码写入原型呢?
首先在jq文件中找到如下代码?
jQuery.fn = jQuery.prototype = {...}
jQuery.fn等于jq对象的原型,而在jq中,jQuery可简写为$
所以我们可以直接在$.fn中编写封装的代码
以上就是封装的代码,在导入jq文件后,我们就可以直接调用了?
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; list-style: none; } div { width: 1200px; height: 400px; margin: 100px auto; overflow: hidden; } ul{ width: 1220px; } li { width: 240px; height: 400px; float: left; } </style></head><body><div id="box"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul></div><script src="js/jquery-1.12.4.js"></script><script src="jquery-accordion.js"></script><script> //调用封装的插件 $("#box").accordion("li").find("li").each(function (index,ele) { $(ele).css("background-image","url(images/"+(index+1)+".jpg)"); });</script></body></html>以上就是简易手风琴插件的封装和调用,最后附上最终效果图:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
前端简洁实用的jQuery手风琴插件|DEMO_jQuery之家-自由分享jQuery、html5、css3的插件库简洁实用的jQuery手风琴插件AjQuer
复制代码代码如下://jquery实现手风琴效果手风琴$(function(){$("#accordion").accordion({header:"h3",e
手风琴菜单一般用于下拉导航,由于外观非常简洁,使用起来跟手风琴一样可以拉伸和收缩而得名,项目中适当应用手风琴效果会给用户带来非常好的体验。本文借助jQuery插
本文实例为大家分享了jquery实现垂直手风琴菜单的具体代码,供大家参考,具体内容如下1、HTML部分垂直手风琴菜单AccountBasicPictureGoP
本文分享了纯js+html制作手风琴和纯css+html制作手风琴两种效果,供大家参考,具体内容如下一、纯css+html的手风琴效果这种用css写的手风琴比较