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 (){
$("#tabs").tabs({
//改变出发动作,默认触发动作click
event:"mouseover",
//设置第一个出现的
selected:1,
//设置弄否被用到
disabled:[2,3],
//透明度
fx:{
opacity:"toggle"
},
}).sortable({ //同样可以排序
axis:"x,y"
});
//添加
$("#tabs").tabs("add","../dialog.html","我是新来的啊");
//参数1:要执行的动作
//参数2:内容(注意:这里的内容必须是一个文件,文本不会显示,并且在火狐下也不会显示该文件中的内容,在IE下则可以,解决在火狐下的显示问题可以在服务器下面运行)
//参数3:标题
//删除
$("#tabs").tabs("remove",2);
});
</script>
</head>
<body>
<h1>模拟tabls效果</h1>
<div id="tabs">
<ul>
<li><a href="#tab-1">面板1</a></li>
<li><a href="#tab-2">面板2</a></li>
<li><a href="#tab-3">面板3</a></li>
<li><a href="./tab4.html">面板4</a></li>
</ul>
<div id="tab-1">111111111111</div>
<div id="tab-2">222222222222</div>
<div id="tab-3">333333333333</div>
</div>
</body>
</html>