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 相关文章推荐
用javascript实现的激活输入框后隐藏初始内容
Jun 29 Javascript
ExtJS 2.0 GridPanel基本表格简明教程
May 25 Javascript
按钮JS复制文本框和表格的代码
Apr 01 Javascript
JS中令人发指的valueOf方法介绍
Feb 22 Javascript
jquery.blockUI.js上传滚动等待效果实现思路及代码
Mar 18 Javascript
JS 页面计时器示例代码
Oct 28 Javascript
jquery隐藏标签和显示标签的实例
Nov 11 Javascript
JS两个数组比较,删除重复值的巧妙方法(推荐)
Jun 03 Javascript
Vue.js Ajax动态参数与列表显示实现方法
Oct 20 Javascript
js取小数点后两位四种方法
Jan 18 Javascript
vue中使用vue-pdf的方法详解
Sep 05 Javascript
uniapp 微信小程序 自定义tabBar 导航
Apr 22 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
php+html5使用FormData对象提交表单及上传图片的方法
2015/02/11 PHP
PHP SPL标准库之数据结构栈(SplStack)介绍
2015/05/12 PHP
PHP基于MySQL数据库实现对象持久层的方法
2015/06/17 PHP
ThinkPHP2.x防范XSS跨站攻击的方法
2015/09/25 PHP
phalcon框架使用指南
2016/02/23 PHP
js Event对象的5种坐标
2011/09/12 Javascript
使用jQuery异步加载 JavaScript脚本解决方案
2014/04/20 Javascript
JavaScript不使用prototype和new实现继承机制
2014/12/29 Javascript
jQuery插件StickUp实现网页导航置顶
2015/04/12 Javascript
Angular4学习笔记之准备和环境搭建项目
2017/08/01 Javascript
详解webpack + vue + node 打造单页面(入门篇)
2017/09/23 Javascript
angularjs使用div模拟textarea文本框的方法
2018/10/02 Javascript
从0到1搭建element后台框架优化篇(打包优化)
2019/05/12 Javascript
JavaScript构造函数原理及实现流程解析
2020/11/19 Javascript
Python中利用原始套接字进行网络编程的示例
2015/05/04 Python
详解Python的Django框架中的通用视图
2015/05/04 Python
以windows service方式运行Python程序的方法
2015/06/03 Python
python 如何快速找出两个电子表中数据的差异
2017/05/26 Python
python中单例常用的几种实现方法总结
2018/10/13 Python
python 3.3 下载固定链接文件并保存的方法
2018/12/18 Python
利用ctypes获取numpy数组的指针方法
2019/02/12 Python
tensorflow之获取tensor的shape作为max_pool的ksize实例
2020/01/04 Python
keras 回调函数Callbacks 断点ModelCheckpoint教程
2020/06/18 Python
解决Firefox下不支持outerHTML问题代码分享
2014/06/04 HTML / CSS
Kipling澳洲官网:购买凯浦林包包
2020/12/17 全球购物
JS原生实现轮播图的几种方法
2021/03/23 Javascript
教育系毕业生中文求职信范文
2013/10/06 职场文书
审计局班子四风对照检查材料思想汇报
2014/10/07 职场文书
台风停课通知
2015/04/24 职场文书
2015年基层党建工作总结
2015/05/14 职场文书
2016大学军训通讯稿
2015/11/25 职场文书
HTML+CSS制作心跳特效的实现
2021/05/26 HTML / CSS
源码解读Spring-Integration执行过程
2021/06/11 Java/Android
Pygame Time时间控制的具体使用详解
2021/11/17 Python
MYSQL优化之数据表碎片整理详解
2022/04/03 MySQL
Python接口自动化之文件上传/下载接口详解
2022/04/05 Python