jQueryUI插件实现accordion效果

原创 2012年03月28日 16:25:45

<!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 src="js/jquery-1.7.1.min.js"></script>
<script src="js/jquery-ui-1.8.18.custom.min.js"></script>
<link rel="stylesheet" href="jquery-ui-1.8.18.custom.css" />

<script>
 $(function(){
 
  $("#accordion").accordion({
    header:"h3",  //头信息
    event:"mouseover", //面板展开的事件效果
    active:1, //默认展开的面板 从0开始 默认是0
    animated:"bounceslide", //面板展开的动画效果
    autoHeight:true,   //面板高度是否自动增加 
    icons:{
     //设置图标 header默认时的图标 headerSelected 激活时的效果
     header:"ui-icon-carat-2-e-w",
     headerSelected:"ui-icon-carat-2-n-s"
     }
   
  
  
   }).sortable({
       axis:"y",//只能在y轴上拖拽排序  X轴  x,y默认X,Y
    handle:"h3",//只能拖拽 h3
 
    });

  });

</script>
</head>
<body>
<div id="accordion" style="width:600px;height600px; border:#F00 solid 1px;">

    <div>
    <h3><a href="#">河北省</a></h3>
    <div>河北省位于华北平原,省会是石家庄.</div>
    </div>
   
   
    <div>
    <h3><a href="#">北京市</a></h3>
    <div>中华人民共和国的首都.</div>
    </div>
   
    <div>
    <h3><a href="#">香港</a></h3>
    <div>东方之珠</div>
    </div>


</div>


</body>
</html>

JqueryUI插件dialog实现遮罩的效果

JqueryUI插件dialog实现遮罩的效果 通过简单的学习了JqueryUI插件的一些内容,对于dialog对话框效果我们也有了一些简单的了解。那么,我来给大家介绍一下使用jqueryUI di...

JQueryUI插件----手风琴效果(10级学员 赵成举课堂笔记)

JQueryUI插件----手风琴效果 今天我们介绍一下JQuery中UI插件中的手风琴效果,效果图如下: 像这种能够展开和折叠的div在我们项目的开发中经常需要用到,这样能够使界面更加绚...

第30款插件:第25款插件:jquery.accordion.js 纵向手风琴效果插件

描述:这款手风琴效果适用于折叠的菜单,方便使用!用这款插件制作极其方便,只需要定义很少的参数,便可制作出纵向手风琴效果! 图片展示: 兼容浏览器: IE6+/Firefox/Google ...
  • skace
  • skace
  • 2013年01月20日 03:46
  • 475

JqueryUI学习笔记-手风琴面板accordion

Insert title here /* IE has layout issues when sorting (see #5413) */ .group { zoom: 1 } $(f...

SlickGrid 样式在 JQueryUI Accordion 和 Bootstrap框架的兼容性解决办法

SlickGrid with jQueryUI and Bootstrap 原文地址:http://low-bandwidth.blogspot.com.au/2015/06/slickgrid-...
  • besley
  • besley
  • 2015年10月24日 11:25
  • 1085

me配合JQueryUI dialog实现登录对话框效果

先上图:   其实里面的对话框是一个iframe,不把他们做到一个页面中主要方便模块式开发,而且可以带来禁用javascript的时候也能打开编辑界面的效果(当然关闭的时候还需要处理一下): ...

【jQueryUI】利用accordion、tabs与自定义面板布局

下面将用以下的一个布局,说明jQueryUI中accordion、tabs的应用,如何用.ui-widget-content与.ui-widget-header两个元素搞出面板。 以下是在IE8的测...

JQueryUI(Accordion)

1:Accordion的结构,首先我们先看一个基本的例子。 http://www.w3.org/TR/html4/strict.dtd">         A basic a...

jQueryUI1.10.0新版本学习(widget-Accordion)

本次学习的主要内容是关于新版jQueryUI的可折叠面板控件Accordion 1.默认功能的可折叠面板 默认功能的可折叠面板提供了通过鼠标点击标题栏来展开或者收起面板内容的功能。如图: ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jQueryUI插件实现accordion效果
举报原因:
原因补充:

(最多只允许输入30个字)