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

本篇继续以示例的形式讲解Jquery Tools中的另两个组件tooltips(提示工具条)和expose(突出效果)。

  • Tooltips(提示工具条)

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

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

    The Tooltip

    提示内容

    HTML代码:

    <!-- 提示工具条的触发元素 --> 
    <div id="trigger">
    将鼠标移动到我的上面可以看到提示条
    </div>
    <!-- 定义提示工具条的内容 -->
    <div class="tooltip">
    <h3>The Tooltip</h3>
    提示内容
    </div>

    Javascript代码:

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

    示例说明:

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

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

    注册表单

    HTML代码:
    <form id="myform"> 
    <h3>注册表单</h3>
    <!-- username -->
    <label for="username">用户名</label>
    <input id="username" />
    <div class="tooltip">用户名至少8个字母</div><br/>
    <!-- password -->
    <label for="password">密码</label>
    <input id="password" type="password" />
    <div class="tooltip">密码强度不够</div><br />
    <!-- email -->
    <label for="username">邮箱</label>
    <input id="email" />
    <div class="tooltip">请输入合法格式Email</div><br />
    </form>

    Javascript代码

    // 在id为myform元素中的所有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代码:

    <!--定义一个要用Expose效果的区域,并声明ID-->
    <div id="test">
    鼠标点击这个区域看Expose效果点击方框以外区域或Esc键取消Expose效果
    </div>

    Javascript代码

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

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

原文地址:https://www.cnblogs.com/Leo_wl/p/1813645.html