1、在学习jquery插件之前首先我们来看一下该怎样开始布置工作
jquery ui使用前提:
第一步:引入类库文件包括:
js类库 js库引入要有顺序首先第一个引入的是jquery核心文件(jquery-1.7.1.min.js),然后在引入jquery-ui核心文件(jquery-ui-1.8.18.custom.min.js)
css样式类库 jquery-ui-1.8.18.custom.css
第二步:模拟实现
手风琴效果实现:
<!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>jquery-ui-手风琴效果</title>
<!--引入jquery类库文件-->
<script type="text/javascript" language="javascript" src="../js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" language="javascript" src="../js/jquery-ui-1.8.18.custom.min.js"></script>
<!--css-->
<link type="text/css" rel="stylesheet" href="../css/ui-lightness/jquery-ui-1.8.18.custom.css" />
<script type="text/javascript">
$(function (){
//注册一个
$("#accordion").accordion({
header:"h3",
//触发事件
event:"mouseover",
//面板展开的效果 default:click
animated:"bounceslide",
//是否填充父元素
fillSpace:false,
//是否可以拖拽
dragable:true,
//指定那个先显示
active:1,
//当任何一个动作发生或者改变的时候触发
change:function (){alert("aa");},
//自动调整高度
autoHeight:true, //这个autoHeight如果不设置#accordion的高度那么是不会起作用的<div id="accordion" style="width:200px; height:100px; ">,如果设置了高度就会自动按照你指定的高度去显示并且加上滚动条
//设置图标
icons:{
header:"ui-icon ui-icon-arrow-2-e-w",
headerSelected:"ui-icon ui-icon-arrowthick-2-n-s"
}
}).sortable({//拖拽,排序
//方向,沿那个轴
axis:"x,y",
handle:"h3",
start:function (){
//alert("确定走吗?");
},
stop:function (){
//alert("确定开始吗?");
}
});
//绑定事件 ,要加上那个动作,比如排序上的停止动作,就是sortstop
$("#accordion").bind("sortstop",function(){ alert("hello"); });
});
</script>
</head>
<body>
<h2 class="demoHeaders">Accordion</h2>
<div id="accordion" style="width:400px; height:100px; ">
<div>
<h3><a href="#">First</a></h3>
<div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lor Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.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>