web前端之锋利的jQuery九：jQuery插件的使用（模态窗口、cookie、UI）

来源：互联网发布：数据透视表值显示文本编辑：程序博客网时间：2024/06/15 06:19

web前端之锋利的jQuery九：jQuery插件的使用（模态窗口、cookie、UI）

1.模态窗口插件－SimpleModal：

SimpleModal是一个轻量级的jQuery插件，它为模态窗口的开发提供了一个强有力的接口，可以把它当做模态窗口的框架。SimpleModal非常灵活，可以创建你能够想象的任何东西，并且你还不需要考虑UI开发中的跨浏览器相关问题

SimpleModal提供了两种简单方法来调整模态窗口。
第一种方法是作为一个链式的jQuery函数。你可以在一个用jQuery获取的元素上调用modal()函数，之后用这个元素的内容来显示一个模态窗口。比如：
$(“#element-id”).modal();
第二种方法是作为一个单独函数使用。通过传递一个jQuery对象，DOM元素或者纯文本（可以包含HTML）来创建一个模态窗口。比如：

$("#element-id").modal({options});$.modal("<div><h1>SimpleModal</h1></div>",{options});

因为SimpleModal不仅仅是一个模态窗口框架，以上的两个例子只是创建非常基本的没有样式的模态窗口。你也可以通过外部CSS，选项对象或两个一起来应用样式。modal overlay、container和data元素的CSS选项分别是：overlayCss、containerCss、dataCss，他们都是键值对属性。SimpleModal未显示一个模态窗口设置了必要的CSS，另外它动态地把模态窗口置于屏幕中间，除非预先设置了position参数。

SimpleModal在内部定义了如下CSS类：simplemodal-overlay,simplemodal-container,simplemodal-wrap(如果内容比container大，那么它将自动设置overflow为auto)和simplemodal-data

关闭模态窗口
SimpleModal自动为模态窗口内class是“simplemodal-close”的元素绑定了关闭函数。所以只需要在HTML中添加如下代码就可以关闭窗口了：

<button type="button" class="simplemodal-close">关闭</button>或者<a href="#" class="simplemodal-close">关闭</a>

此外你也可以通过调用$.modal.close()的方式关闭当前打开的模态窗口

2.管理Cookie的插件－Cookie：
Cookie是网站设计者放置在客户端的小文本文件。Cookie能为用户提供很多便利，在用户允许的情况下，存储用户登录信息，使得用户在访问网站是不必每次都登录用户信息

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head>    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">    <title>插件</title>    <script type="text/javascript" src="../js/jquery-3.1.1.js"></script>    <script type="text/javascript" src="../js/jquery.cookie.js"></script>    <script type="text/javascript">    $(function(){        var COOKIE_NAME="username";        if($.cookie(COOKIE_NAME)){            $("#username").val($.cookie(COOKIE_NAME));        }        $("#check").click(function(){            if(this.checked){                debugger                $.cookie(COOKIE_NAME,$("#username").val(),{path:'/',expires:10});            }else{                $.cookie(COOKIE_NAME,null,{path:'/'});            }        });    });    </script></head><body>    用户名：<input type="text" name="username"  id="username" /><br>    <input type="checkbox" name="check" id="check" />记住用户名</body></html>

进行调试的时候要注意查看浏览器是否不支持cookie的保存

写入cookie
$.cookie(“the_cookie”,”the_value”);
the_cookie:名，the_value:值

读取cookie
$.cookie(“the_cookie”)

删除cookie
$.cookie(“the_cookie”,null)

cookie的其他属性：

$.cookie("the_cookie","the_value",{    expires:7,//有效期，单位“天”    path:'/',//cookie的路径属性，一般默认创建该cookie的页面路径    damain:"jquery.com",//cookie的域名属性，一般默认创建该cookie的页面域名    secure:true//如果设为true，那么Cookie的传输会要求一个安全协议，例如HTTPS})

3.jQuery UI 插件：
jQuery UI主要分为3个部分，交互、微件和效果库：
交互：这里都是一些与鼠标交互相关的内容，包括拖动（Draggable）、置放（Droppable）、缩小（Resizable）、选择（Selectable）、排序（Sortable）等，微件中有部分是基于这些交互组件来进行制作的。此库需要一个JQuery UI核心库——ui.core.js支持
微件：这里主要是一些界面的扩展。里面包括手风琴导航（Accordion）、自动完成(Autocomlete)、取色器(Colorpicker)、对话框(Dialog)、滑块(Slider)、标签(Tabs)、日历（Datepicker）、放大镜（Magnifier）等。此库需要一个JQuery UI核心库——ui.core.js支持
效果库：此库用于提供丰富的动画效果，让动画不再局限于animate()方法，效果库有自己一套核心即effects.core.js，无需ui.core.js支持

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head>    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">    <title>jQuery UI Sortable</title>    <style type="text/css">    #myList{        width: 80px;        background: #eee;        padding: 5px;    }    #myList a{        text-decoration: none;        color: #0077B0;    }    #myList a:hover{        text-decoration: underline;    }    #myList .qlink{        font-size: 12px;        color: #666;        margin-left: 10px;    }    </style></head><body><ul id="myList">    <li id="myList_mood"><a href="#">心情</a></li>    <li id="myList_photo">        <a href="#">相册</a>        <a href="#" class="qlink">上传</a>    </li>    <li id="myList_blog">        <a href="#">日志</a>        <a href="#" class="qlink">发表</a>    </li>    <li id="myList_vote"><a href="#">投票</a></li>    <li id="myList_share"><a href="#">分享</a></li>    <li id="myList_group"><a href="#">群组</a></li></ul>   <script type="text/javascript" src="../js/jquery-3.1.1.js"></script><script type="text/javascript" src="../js/jquery-ui.js"></script><script type="text/javascript">    $(document).ready(function(){        $("#myList").sortable({//直接让myList下的元素可以拖动            delay:1//修复潜在连接点击问题            ,stop:function(){                alert("触发排序停止后回调函数");            }        });    });</script></body></html>

jQuery UI插件的大部分API已经统一了，以Draggable为例
draggable(options):这是用来让一个DOM对象变成可拖动的对象的方法，其中的options可以设置各种不同的参数
draggable(“disable”):让对应的DOM对象暂时禁用拖动
draggable(“enable”):让对应的DOM对象重新启用拖动
draggable(“destroy”):彻底移除拖动功能

当然可以使用一个完整的UI库来包含前面的核心库

1 0