实现手风琴效果

原创 2012年03月28日 19:30:59

<!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 language="javascript" type="text/javascript" src="./js/jquery-1.7.1.min.js"></script>

<script language="javascript" type="text/javascript" src="./js/jquery-ui-1.8.18.custom.min.js"></script>

<link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.8.18.custom.css" />

<script type="text/javascript">

  $(function(){

  $("#accordion").accordion({

  header:"h3",          //头信息 h3必须h3 

  event:"mouseover" ,  //面板展开的事件效果 默认是click效果

  active:1,              //默认展开的面板从0开始  默认值0

  animated:"bounceslide",  //面板展开的动画效果

  autoHeight:true,          //面板高度  是否是自动 增高

  fillSpace:false,           //填充到父元素

  icons:{

  header:"ui-icon-carat-2-e-w",

  headerSelected:"ui-icon-carat-2-n-s"

  }

  }).sortable({

   axis:"y",  //只能在Y轴上拖拽排序  x轴 y轴 默认xy 

   handle:"h3",  //只能拖拽h3

/*    stop:function(event,ui){ //stop事件 匿名函数 event浏览器自带的处理对象 ui操作控制对象

  

 ui.item.children("h3").triggerHandler("focusout")    }

*/   });

//通过绑定的操作方式 写事件处理

$("#accordion").bind("sortstop",function(event,ui){

alert("ii");

});  

  });

</script>

</head>

<body>

<!--

  jquery  UI使用

    1、引入别人类库文件

            js类库

            css样式类库文件

-->

 <div id="accordion" style="width:600px; height:800px; border:#F00 solid 1px;">

<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>Nam dui erat, auctor a, dignissim quis.</div>

</div>

</div>

</body>

</html>

 

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

Jquery中each的三种遍历方法

1、选择器+遍历 $('div').each(function (i){    i就是索引值    this 表示获取遍历每一个dom对象 }); 2、选择器+遍历 $('div&...

query实现可以左右的下拉菜单效果

可以左右选择的下拉菜单效果 //使用jquery加载事件 $(document).ready(function (){ /**************************...

使用jQuery实现 模拟手风琴效果

无标题文档 $(function (){ $("#accordion").accordion({ header:"h3",//设置它的开头内容 event:"mouseo...

jquery插件实现手风琴效果!

手风琴的效果 $(document).ready(function (){ // var option = { hrader: "h3",s}; [{},{},{}]; ...

jquery,scss实现简单的手风琴效果

jquery,scss实现简单的手风琴效果首先页面引用jquery,基本的css,之后开始对页面进行整体的布局,首先一个大的div作为容器并且设置容器的大小,之后采用ul li的形式并且要设置为浮动f...

WindowsPhone8 ListBox 实现手风琴折叠菜单效果

WindowsPhone8 ListBox 实现手风琴折叠菜单效果   XAML示例代码如下:

纯div+css实现手风琴效果下拉框的两种方法

效果图: 方法一:利用按钮的checked模拟点击事件 1)  将按钮(input type="radio" name="btn"  />)覆盖在伪按钮(用标签模拟的按钮)上,并且把按钮透明度(...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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