【使用jQuery开发accordion手风琴插件】的更多相关文章

使用jQuery开发accordion手风琴插件

一.插件效果 手风琴插件常用的功能均已实现,包括:手风琴菜单项的折叠展开效果.选中指定菜单项.判断菜单项是否选中等. 效果如下: 二.插件内部HTML元素结构 <!-- accordioon组件 --> <ul class="accordion"> <li accordion-id="menu1" class="active">插件使用</li> <li> <ul> <…

基于jQuery开发的手风琴插件 jquery.accordion.js

 1.插件代码 少说多做,基于jQuery的手风琴插件jquery.accordion.js的代码:  /* * 手风琴插件说明: * 1.treeTrunk对应树干 * 2.treeLeaf对应树叶,html代码结构一般为treeTrunk.next()元素 * 3.treeTrunkActiveClass是树干展开后添加的样式 * 4.treeType是触发手风琴效果的事件形式 * 5.treeIs 加载后是否将第一个树干展开 * 6.speed 展开.闭合动画执行时间 * 7.插件命名为j…

使用jQuery开发tab选项卡插件

为了复习巩固jQuery的插件开发.HTML和CSS方面的知识,做了一个简单的tab选项卡插件,简单记录一下开发.使用的过程,以备日后使用. 一.插件效果 tab选项卡插件常用的功能均已实现,包括:动态添加选项卡.关闭选项卡.选中指定选项卡.判断选项卡是否选中.判断选项卡是否存在等. 效果如下: 二.插件内部HTML元素结构 <div id="main"> <div class="tab"> <ul class="tab-he…

jQuery 开发一个简易插件

jQuery 开发一个简易插件 //主要内容 $.changeCss = function(options){ var defaults = { color:'blue', ele:'text', fontSize:'30px' } var options = $.extend(defaults , options); var change ={ changeColor:function(){ $('#'+options.ele).css('color',options.color); }, c…

使用jQuery开发tab选项卡插件（可以右键关闭多个标签）

在前一篇“使用jQuery开发tab选项卡插件”的基础上添加了tab标签右键关闭菜单功能,菜单主要包括:关闭当前标签.关闭左侧标签.关闭右侧标签.关闭其他.关闭全部. 一.插件效果 二.实现思路 为window对象添加右键菜单事件监听: 当事件源对象为tab标签时,取消默认的右键菜单,显示菜单div即设置display: block,并为每一个菜单项添加事件监听: 当事件源对象不为tab标签时,关闭菜单div即设置display: none 为window对象添加单击事件监听:关闭菜单div即设…

Jquery UI accordion手风琴菜单

最近学习jQuery,总结了一些心得. 1.引用 <script type="text/javascript" src=jquery.js></script> 需要放在第一引用: 2.脚本的引用需要写<script></script>,不能够写<script />; 3.当调用jQuery的 Plugin 的时候,需要在 jQuery90.ready.function( '需要调用的plugin')写; 4.jQuery Ac…

[转]jquery开发自定义的插件总结

本文转自:http://www.cnblogs.com/Jimmy009/archive/2013/01/17/jquery%E6%8F%92%E4%BB%B6.html 前几天在玩jquery,今天就把这几天的学习做一个总结. 首先jquery开发自定义的控件分两大类(我自己这么分的),第一就是不带参数的插件,还有一类就是带参数的jquery插件了. 先从简单的开始.首先我们要了解一下什么叫jquery,jquery是对js的一系列的分装,说白了他就是js的分装以后的产物.但是我们用jquer…

JQuery开发工具和插件

最近的研究jquery.为大家介绍几款开发工具.能够帮助你提高开发的效率. 1.Dreamweaver Dreamweaver是建立在WEB站点和应用程序的专业工具. 将可视化工具.应用程序开发功能和代码编辑支持组合在一起.使得各个层次的开发者和设计人员都可以高速创建基于标准的站点和应用程序. 要使Dreamweaver支持jquery自己主动提示代码功能,方法非常easy,仅仅须要下载一个插件就可以. 下载地址例如以下: 在Dreamweaver中依次选择命令-扩展管理-安装管理-JQurer…

jquery开发自定义的插件总结

1.第一种方式,有元素的插件 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv…

使用jQuery开发dialog对话框插件

1.插件使用 首先引入 jquery 库,然后引入 dialog.js.dialog.css,如下: <script type="text/javascript" src="js/jquery/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="js/dialog.js"></script> <…