jQuery tools 第一期

//--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">&nbsp;</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等