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

最新推荐文章于 2024-03-09 15:47:06 发布

爸爸去哪了2之熊猫三胞胎

最新推荐文章于 2024-03-09 15:47:06 发布

阅读量556

点赞数 1

本文链接：https://blog.csdn.net/u014785563/article/details/53507946

版权

web前端同时被 3 个专栏收录

99 篇文章 1 订阅

订阅专栏

JavaScript

86 篇文章 0 订阅

订阅专栏

jQuery

14 篇文章 0 订阅

订阅专栏

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库来包含前面的核心库