编程 Javascript

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>

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

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

避免 showModalDialog 弹出新窗体的原因分析

May 31 Javascript

JavaScript cookie的设置获取删除详解

Feb 11 Javascript

jQuery中的$.ajax()方法应用

May 06 Javascript

Javascript快速排序算法详解

Dec 03 Javascript

jQuery实现dialog设置focus焦点的方法

Jun 10 Javascript

javascript产生随机数方法汇总

Jan 25 Javascript

JavaScript实现弹出DIV层同时页面背景渐变成半透明效果

Mar 25 Javascript

AngularJS 指令详细介绍

Jul 27 Javascript

React组件生命周期详解

Jul 03 Javascript

vue实现多个元素或多个组件之间动画效果

Sep 25 Javascript

JavaScript常用事件介绍

Jan 21 Javascript

JS数组Reduce方法功能与用法实例详解

Apr 29 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