您的位置:知识库 » Web前端

jQuery Tools——不可错过的jQuery UI库(二)

作者: IIduce  来源: css9  发布时间: 2009-12-22 17:58  阅读: 30298 次  推荐: 2   原文链接   [收藏]  

上篇对jQuery Tools做了总体的介绍,从本篇起开始介绍jQuery Tools的各个工具组件。

在进入正题前,还是想啰嗦一些东西,也许对jQuery Tools的理解会有所帮助。

  1. jQueryTools的功能侧重于信息展示和视觉效果,从网页常用的功能点上改善用户体验和可阅读性。这一点与其它一些JavascriptUI库不同,它们可能会侧重于一些桌面应用程序效果,诸如拖拽、滑动、排序等,这在富应用程序(RIA)中的应用可能会更多些。而jQueryTools可用于广泛的网站设计中;
  2. jQueryTools并不是一个框架性的东西,不具有什么学习难度,在掌握一些使用规则后,在页面中引用了它的脚本文件就可以立即使用了。虽然它是基于jQuery的,但是并不意味着你需要掌握jQuery才能使用它。当然如果你能了解jQuery的诸如选择器的简单使用,更有助于掌握jQuery Tools;
  3. jQuery Tools的使用严格遵循了javascript代码不与css定义混合的原则。它在使用时仅仅是通过预定义的class来控制html,CSS样式定义完全由你来控制。
  4. 类似于google提供了jquery的CDN服务,jQuery Tools也提供了它的CDN免费服务至2010年底,你可以使用以下方式引用它:
    <script src="http://cdn.jquerytools.org/1.0.2/jquery.tools.min.js"></script>
    可惜的是该CDN目前没有在亚洲设立服务器,官方说要到2009年秋,所以暂时就不建议用了。

不再啰嗦,言归正传看使用:

  • 选项卡应用(Tabs)

    示例一:选项卡效果在Web开发时经常会用到,下面先来看最简单的实现

  • 上面是最终要实现的效果。看一下代码:

    HTML:

    <!-- 定义选项卡按钮,注意最外层的class定义为tabs --> 
    <ul class="tabs"> 
        <li><a href="#first">选项卡1</a></li> 
        <li><a href="#second">选项卡2</a></li> 
        <li><a href="#third">选项卡3</a></li> 
    </ul> 
    <!-- 定义选项卡切换的每个区域,注意最外层的class定义为panes --> 
    <div class="panes"> 
        <div>第一个选项卡内容,<a href="#second">跳转至选项卡2</a></div> 
        <div>第二个选项卡内容,<a href="#third">跳转至选项卡3</a></div> 
        <div>第三个选项卡内容,<a href="#first">跳转至选项卡1</a></div> 
    </div>

    Javascript:

    $(function() { 
        // 将ul.tabs区域设定为选项卡,用来控制div.panes区域中最近一层的各div区域
       // 注意tabs和panes与html中class的对应关系
        $("ul.tabs").tabs("div.panes > div",{history: true}); 
    });

    说明:

    • CSS代码,也就是整个样式完全是由你来控制的。这里是上面选项卡用到的css,供你参考。使用css控制样式时,需注意的一点是当前选项卡的class为“current”。
    • 可设定选项卡锚点,通过链接在选项卡中切换
    • tabs中的参数{history: true},使得选项卡与浏览器历史的前进后退关联在一起。不用的话可以不要这个参数。

    示例二:通过鼠标滑过事件切换选项卡,看效果先:

    Free versionCommercial versionMultidomain version

    HTML:

    <!--定义选项卡区域,用id为products的div包起来-->
    <div id="products">
    <img src="http://static.flowplayer.org/img/commerce/free.png" alt="Free version" />
    <img src="http://static.flowplayer.org/img/commerce/commercial.png" alt="Commercial version" />
    <img src="http://static.flowplayer.org/img/commerce/multidomain.png" alt="Multidomain version" />
    </div>  
    <!--定义pane区域,为每个区域定义相同的class:description-->
    <div class="description" id="free"><div class="arrow"></div> .. 产品介绍一 .. </div> 
    <div class="description" id="commercial"><div class="arrow"></div> .. 产品介绍二 .. </div> 
    <div class="description" id="multidomain"><div class="arrow"/></div> .. 产品介绍三 .. </div>

    Javascript:

    $("#products").tabs("div.description", {event:'mouseover'});

    说明:

    • CSS代码,也就是整个样式完全是由你来控制的。这里是上面选项卡用到的css,供你参考。
    • tabs中的参数{event:’mouseover’},更改默认的点击事件为鼠标划过事件,这里你可以改为自定义事件。

    示例三:创建折叠效果(手风琴效果),看效果先:

    HTML

    <div id="accordion"> 
        <h2>First pane</h2> 
        <div class="pane">... pane content1 ...</div> 
     
        <h2>Second pane</h2> 
        <div class="pane">... pane content2 ...</div> 
     
        <h2>Third pane</h2> 
        <div class="pane">... pane content3 ...</div> 
    </div>

    Javascript

    //上面第一个效果的
    $("#accordion").tabs("#accordion div.pane", { 
        tabs: 'h2',     //确定哪些区域为选项卡
        effect: 'slide'     //展开效果,slide为纵向滑动
    });
     
    //上面第二个效果的
    $("#accordion").tabs("#accordion div", { 
        tabs: 'img',    //确定哪些区域为选项卡
        effect: 'horizontal'  //展开效果,horizontal为横向滑动
    });

    说明:

    • 这里是上面第一个效果用到的css,这里是第二个的,供你参考。
    • 与前两个示例的声明方式不同,上面两个效果在tabs方法的第二个参数的tabs属性中确定哪些区域为选项卡。

    Tabs选项卡总结:

    1. 从上面几个示例的用法可以看到,调用Tabs效果的关键在于HTML的预定义。我们应当为选项卡区域设定一个id或者为每一个选项卡设定相同class,然后为每一个pane区域设定class。在调用tabs方法的时候,关键在于传入上面定义的这两个对象集合。了解到这一点,其余都就可以自由发挥了。
    2. Tabs工具本身不具备任何CSS,CSS需要完全由你来控制,希望不会因为这种自由而难住你。
    3. 在官方示例中还有不少是上面没有提到的,例如tabs中通过ajax填充pane、通过选项卡制作导航器等,这里去查看更多

    通过Tabs的学习,想必大家对jquery tools有了进一步的了解。有什么要说的么,可以再下面留言讨论。
    在后面的文章中会继续探讨其它工具的使用示例,欲知后事如何,请坐好沙发,搬好小马扎,且听下回分解。

    2
    0
    标签:jQuery

    Web前端热门文章

      Web前端最新文章

        最新新闻

          热门新闻