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

2021年1月12日   |   by tgcode

上一篇讲解了jQuery Tools中Tabs选项卡的用法和示例,本篇继续以示例的形式讲解Jquery Tools中的另两个组件tooltips(提示工具条)和expose(突出效果)。

  • Tooltips(提示工具条)

    Tooltips(提示工具条),就是当把鼠标放在网页某个元素上时,显示某个提示信息,用以解释或提示当前操作。它是改善用户体验的一种方式,也是网页设计中经常用到的。

    下面首先看一个最简单的应用示例(将鼠标移动到下面图片上):

    %title插图%num

    The Tooltip

    提示内容

    HTML代码:

     
    id="trigger">
    将鼠标移动到我的上面可以看到提示条
    >


    class="tooltip">

    >

    The Tooltip>
    提示内容
    >

    Javascript代码:

    $("#trigger").tooltip();   //为页面中id为trigger的区域添加tooltip效果

    示例说明:

    1. CSS样式完全由你控制,这里是上面提示条的css,供你参考
    2. 上面是tooltip最简单的调用方法,没有配置任何参数。默认情况下:使用$(elements).tooltip();为页面所有elements元素绑定tooltip效果;tooltip显示的内容为elements后面紧跟的节点元素;提示条默认在触发元素的上方中央位置,以向上滑动的效果出现;
    3. 第二条中所提到的参数都是可以配置的,用以改变tooltip效果

    下面再来看一个在表单中应用Tooltip的示例:

    注册表单

    %title插图%num

    HTML代码:

    tgcode

     id="myform">
     

    >

    注册表单>

    用户名>
    id="username" />
    class="tooltip">用户名至少8个字母
    >

    />


    密码>
    id="password" type="password" />
    class="tooltip">密码强度不够
    >

    />


    邮箱>
    id="email" />
    class="tooltip">请输入合法格式Email
    >

    />

    >

    Javascript代码

    // 在id为myfortgcodem元素中的所有input输入框上应用tooltip效果
    $("#myform :input").tooltip({

    // 设置tooltip出现的位置
    position: ['center', 'right'],

    // 进一步微调tooltip的位置
    offset: [-2, 10],

    // 设置tooltip的显示/消失效果
    effect: 'toggle',

    // 设置tooltip透明度
    opacity: 0.7
    });

    使用方法比较简单,示例说明见代码注释。

  • Expose(突出效果)

    Expose(我把它翻译成突出效果,可能不准确),好像在网页设计中比较少见,但用好了也是个相当人性化的设计。

    下面先用一个最简单的例子看它是怎么回事:

    鼠标点击这个区域看Expose效果,再点击方框以外区域或Esc键取消Expose效果

    在我看来,Expose效果的应用是为了让用户专注于页面的某个区域,浏览信息或完成某项工作,而不受其它干扰。例如,填写某个重要表单,更例如观看视频(下面的例子介绍)。

    HTML代码:


    id="test">
    鼠标点击这个区域看Expose效果点击方框以外区域或Esc键取消Expose效果
    >

    Javascript代码

        // 在要添加效果元素的点击事件中调用expose的load方法,绑定效果。
    $("#test").click(function() {
    // 在点击事件中绑定expose效果,{api: true}是允许访问expose aptgcodei,以在后面调用load()方法
    $(this).expose({api: true}).load();
    });

    使用方法很简单,示例说明看代码注释。

本系列文章导航

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

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

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

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

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

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

相关推荐: Eclipse调试Bug的七种常用技巧

  本文写给那些像几年前的我一样刚刚走出校门,及一些未使用过tgcode这些高级些的调试技巧的人。   记得刚刚毕业的时候,自己连断点也不会打,当时还在用JCreate ,就连毕业设计也是用 System.out 找 Bug 的,想想真的很笨。开始工作后,一个…

Tags: , , ,