舍曲林:jQuery Tools——不可错过的jQuery UI

来源：百度文库 编辑：九乡新闻网 时间：2024/04/28 02:42:56

jQuery Tools——不可错过的jQuery UI库（三）

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

  • Tooltips（提示工具条）

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

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

    The Tooltip

    提示内容

    HTML代码:

     
     
     将鼠标移动到我的上面可以看到提示条
     
      
     
     
    The Tooltip
     
     提示内容

    Javascript代码：

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

    示例说明：

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

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

    注册表单

    HTML代码： 
     
     
    注册表单
     
      
      
      
     
    用户名至少8个字母

     
      
      
      
     
    密码强度不够

     
      
      
      
     
    请输入合法格式Email

    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效果点击方框以外区域或Esc键取消Expose效果

    Javascript代码

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

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

jQuery Tools——不可错过的jQuery UI jquery ui dialog JQuery Block UI V2 jQuery Tools-内容展示型 Web UI 库-JavaScript高级-Java... JQuery 250多个Jquery各式各样的插件jQuery插件,Jquery, JQuery爱好者们的福音：jQuery EasyUI Jquery的一些学习 jquery的验证插件 jQuery 选择器的使用 jQuery选择器CSS的用法 jQuery的弹出窗口 ColorBox Jquery插件datepicker的使用说明 回答读者提问(19)——再谈浏览器的兼容性 - CSS,Javascript,jQuery... jquery trigger jquery插件 jQuery基础 jQuery选择器 基于JQuery的机电设备管理系统 jquery find和filter的区别 jquery 对radio,checkbox,select的操作 jQuery 的 slideUp 和 slideDown 动画 修正 从零开始学习jQuery (二) 万能的选择器 Jquery操作表单Select元素的用法