|
//--4. jquery.tools.min.js 常用工具库
//--.1 tabs
/*最基本的元素,一个ul,n个li; 一个div带有类名,n个div项*/
<ul class="tabs">
<li><a href="#">Tab 1</a></li>
<li><a href="#">Tab 2</a></li>
<li><a href="#">Tab 3</a></li>
<li><a href="#">Tab 4</a></li>
</ul>
<!-- tab "panes" -->
<div class="panes">
<div>First tab content. Tab contents are called "panes"</div>
<div>Second tab content</div>
<div>Third tab content</div>
<div>Jack define</div>
</div>
/*使其具有列表功能,仅需一句*/
$("ul.tabs").tabs("div.panes > div");
/*以上完成tabs基本功能,下面就是用css修饰tab.也可从网上找到美观一些的设计直接用*/
#将列表变成横向显示
#列表给一个背景色或图片
#对当前列表给不同的背景色或图片
#对鼠标在列表上活动给不同的背景色或图片
//--.2 tooltip
<!-- the tooltip -->
/*基本元素:
* 一个空的div用于显示tooltip内容;
* 一个包含一系列元素的div,一般是图片,一定要设置其title属性,会在tooltip中显示该内容
* */
<div id="demotip"> </div>
<!-- and the triggers -->
<div id="demo">
<img src="image1.jpg" title="The tooltip text #1"/>
<img src="image2.jpg" title="The tooltip text #2"/>
<img src="image3.jpg" title="The tooltip text #3"/>
<img src="image4.jpg" title="The tooltip text #4"/>
</div>
/*jQuery调用*/
$("#demo img[title]").tooltip('#demotip'); //将列表的title属性内容显示到#demotip中
/*CSS设置*/
#demotip {
display:none; //最重要的是默认隐藏#demotip
... //一些其他属性,如位置,大小,颜色,背景图片..
}
//--.3 overlay
/*基本元素
* n个图片,小图
* 分别设置rel属性#mies1
* 对应图片的n个div,id属性与相应图片的rel属性相同,这是关键
* 在div中添加预览的大图,并编辑其信息
**/
<img src="../image/test1.jpg" rel="#mies1"/>
<img src="../image/test2.jpg" rel="#mies2"/>
<!-- first overlay. id attribute matches our selector -->
<div class="simple_overlay" id="mies1">
<!-- large image -->
<img src="../image/test1.jpg" />
<!-- image details -->
<div class="details">
<h3>The Barcelona Pavilion</h3>
<h4>Barcelona, Spain</h4>
<p>The content ...</p>
</div>
</div>
<div class="simple_overlay" id="mies2">
<!-- large image -->
<img src="../image/test2.jpg" />
<!-- image details -->
<div class="details">
<h3>The Barcelona Pavilion</h3>
<h4>Barcelona, Spain</h4>
<p>The content ...</p>
</div>
</div>
/*CSS
* 主要控制生成大图的div的统一风格,因此大图div最好设置相同的class
*/
/*
* jQuery调用
*/
$("img[rel]").overlay(); //小图的rel指向的div被显示
//--.4 expose
/*基本元素
* 一个有id的div
*/
<div id="test">
Click on this element to expose it.
</div>
/*CSS
* 以#id来设置,不能以div,因为调用后会有新产生的div而冲突
*/
#test {
border:1px solid #ccc;
background-color:#fff;
padding:50px;
font-size:30px;
margin:20px auto;
text-align:center;
width:600px;
}
/*jQuery调用
* expose函数,有许多参数
*/
$(document).ready(function(){
// assign a click event to the exposed element, using normal jQuery coding
$("#test").click(function() {
// perform exposing for the clicked element
//$(this).expose({api: true,color: '#888888', opacity: 0.3, loadSpeed:'slow'}).load();
$(this).expose({
api: true,
opacity: 0.2,
color: 'pink',
loadSpeed:'slow',
closeSpeed: 'fast',
onBeforeLoad: function(event){this.getExposed().animate({width: '+=100'});}
}).onLoad(showName).load();
});
});
function showName(event){ //被注册给onLoad的函数,类似还有onBeforeClose(fn),onClose(fn)
alert('name');
this.getExposed().css({backgroundColor: 'green'});
}
//另外一些参数
onBeforeClose, onClose等
|
