jquery实现手风琴效果实例代码


Posted in Javascript onNovember 15, 2013
//jquery实现手风琴效果  
<!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="Content-Type" content="text/html; charset=utf-8" />  
<title>手风琴</title>  <script type="text/javascript" language="javascript" src="jquery-1.7.1.min.js">  
</script>  
<script type="text/javascript" language="javascript" src="jquery-ui-1.8.18.custom.min.js">  
</script>  
<link rel="stylesheet" href="ui-lightness/jquery-ui-1.8.18.custom.css"/>  
<script type="text/javascript" language="javascript">  
$(function(){  
    $("#accordion").accordion(  
    {  
        header: "h3",  
        event:"mouseover",  
        icons:{  
            header:"ui-icon-carat-2-e-w"  
            },  
        }  
    ).sortable({  
        axis:"Y"//拖动效果  上下拖动  默认为左右拖动  
        });  
    })  
</script>  
</head>  
<body>  
<div id="accordion" style="width:600px; height:600px; border:1px #F00 solid">  
    <div>  
      <h3><a href="#">first</a></h3>  
      <div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>  
    </div>  
  <div>  
   <h3><a href="#">second</a></h3>  
   <div>Phasellus mattis tincidunt nibh.</div>  
  </div>  
  <div>  
   <h3><a href="#">third</a></h3>  
   <div>悠悠</div>  
   </div>  
 </div>  
</body>  
</html> 
Javascript 相关文章推荐
JQuery 弹出框定位实现方法
Dec 02 Javascript
提取字符串中年月日的函数代码
Nov 05 Javascript
非常实用的12个jquery代码片段
Nov 02 Javascript
JavaScript编写点击查看大图的页面半透明遮罩层效果实例
May 09 Javascript
深入浅析JavaScript中with语句的理解
May 12 Javascript
利用imgareaselect辅助后台实现图片上传裁剪
Mar 02 Javascript
js, jQuery实现全选、反选功能
Mar 08 Javascript
vue+webpack 更换主题N种方案优劣分析
Oct 28 Javascript
vue 组件内获取actions的response方式
Nov 08 Javascript
基于JavaScript实现控制下拉列表
May 08 Javascript
ssm+vue前后端分离框架整合实现(附源码)
Jul 08 Javascript
Java 生成随机字符的示例代码
Jan 13 Javascript
jquery中插件实现自动添加用户的具体代码
Nov 15 #Javascript
用jquery中插件dialog实现弹框效果实例代码
Nov 15 #Javascript
javascript禁制后退键(Backspace)实例代码
Nov 15 #Javascript
根据身份证号自动输出相关信息(籍贯,出身日期,性别)
Nov 15 #Javascript
当json键为数字时的取值方法解析
Nov 15 #Javascript
JavaScript SetInterval与setTimeout使用方法详解
Nov 15 #Javascript
jquery.ui.draggable中文文档(原文翻译)
Nov 15 #Javascript
You might like
无线电广播与收音机发展的历史回眸
2021/03/02 无线电
Mysql中limit的用法方法详解与注意事项
2008/04/19 PHP
PHP截取IE浏览器并缩小原图的方法
2016/03/04 PHP
浅谈php和js中json的编码和解码
2016/10/24 PHP
十分钟打造AutoComplete自动完成效果代码
2009/12/26 Javascript
JavaScript 高效运行代码分析
2010/03/18 Javascript
基于jquery的高性能td和input切换并可修改内容实现代码
2011/01/09 Javascript
JQuery文本框高亮显示插件代码
2011/04/02 Javascript
javascript 密码框防止用户粘贴和复制的实现代码
2014/02/17 Javascript
三种动态加载js的jquery实例代码另附去除js方法
2014/04/30 Javascript
借助JavaScript脚本判断浏览器Flash Player信息的方法
2014/07/09 Javascript
Javascript无参数和有参数类继承问题解决方法
2015/03/02 Javascript
JQuery自动触发事件的方法
2015/06/13 Javascript
Extjs4.0 ComboBox如何实现三级联动
2016/05/11 Javascript
JavaScript中匿名函数的递归调用
2017/01/22 Javascript
详解vue slot插槽的使用方法
2017/06/13 Javascript
详解webpack编译速度提升之DllPlugin
2019/02/05 Javascript
基于layui内置模块(element常用元素的操作)
2019/09/20 Javascript
python文件的md5加密方法
2016/04/06 Python
TensorFlow在MAC环境下的安装及环境搭建
2017/11/14 Python
Python的numpy库中将矩阵转换为列表等函数的方法
2018/04/04 Python
PyCharm代码整体缩进,反向缩进的方法
2018/06/25 Python
Python绘图之二维图与三维图详解
2020/08/04 Python
HTML5超文本标记语言的实现方法
2020/09/24 HTML / CSS
微软瑞士官方网站:Microsoft瑞士
2018/04/20 全球购物
Saucony澳大利亚官网:美国跑鞋品牌,运动鞋中的劳斯莱斯
2018/05/05 全球购物
Guess荷兰官网:美国服饰品牌
2020/01/22 全球购物
意大利和国际奢侈品牌购物网站:Suitnegozi.com
2021/01/15 全球购物
个人评价范文分享
2014/01/11 职场文书
纪念九一八事变演讲稿:勿忘国耻
2014/09/14 职场文书
房屋转让协议书
2014/10/18 职场文书
档案管理员岗位职责
2015/02/12 职场文书
协议书格式模板
2016/03/24 职场文书
浅谈Golang 切片(slice)扩容机制的原理
2021/06/09 Golang
openstack中的rpc远程调用的方法
2021/07/09 Python
Mysql案例刨析事务隔离级别
2021/09/25 MySQL