jQuery插件CookieAccordion 折叠栏AutocompleteGrowlPassword ValidationPrettydateTooltipTreeview
Posted ChrisP3616
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery插件CookieAccordion 折叠栏AutocompleteGrowlPassword ValidationPrettydateTooltipTreeview相关的知识，希望对你有一定的参考价值。
jQuery（七）插件、Cookie、Accordion 折叠栏、Autocomplete、Growl、Password Validation、Prettydate、Tooltip、Treeview
文章目录
总结：
Cookie
- 在Chrome浏览器中按下F12，打开开发者工具，选择"Console (控制台)"选项卡，输入document.cookie，回车就可以查看当前网站的Cookie了。
- expires
- 定义 cookie 的有效时间，值可以是一个数字（从创建 cookie 时算起，以天为单位）或一个 Date 对象。如果省略，那么创建的 cookie 是会话 cookie，将在用户退出浏览器时被删除。
1. Cookie 插件
jQuery 可以通过 jquery.cookie.js 插件来操作 Cookie。
官方地址：http://plugins.jquery.com/cookie/
Github 地址：https://github.com/carhartl/jquery-cookie
使用 jquery.cookie.js 之前需要先引入 jQuery：
<script src="/path/to/jquery.min.js"></script> <script src="/path/to/jquery.cookie.js"></script>
我们可以使用第三方资源库引入这两个文件：
<script src="https://cdn.staticfile.org/jquery/3.4.0/jquery.min.js"></script> <script src="https://cdn.staticfile.org/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
使用方法
创建 cookie：
$.cookie('name', 'value');
如果未指定过期时间，则会在关闭浏览器或过期。
创建 cookie，并设置 7 天后过期：
$.cookie('name', 'value', { expires: 7 });
创建 cookie，并设置 cookie 的有效路径，路径为网站的根目录：
$.cookie('name', 'value', { expires: 7, path: '/' });
**注：**在默认情况下，只有设置 cookie 的网页才能读取该 cookie。如果想让一个页面读取另一个页面设 置的cookie，必须设置 cookie 的路径。cookie 的路径用于设置能够读取 cookie 的顶级目录。将这 个路径设置为网站的根目录，可以让所有网页都能互相读取 cookie （一般不要这样设置，防止出现冲突）。
读取 cookie：
$.cookie('name'); // => "value"
$.cookie('nothing'); // => undefined
读取所有的 cookie 信息：
$.cookie(); // => { "name": "value" }
删除 cookie：
// cookie 删除成功返回 true，否则返回 false
$.removeCookie('name'); // => true
$.removeCookie('nothing'); // => false
// 写入使用了 path时，读取也需要使用相同的属性 (path, domain)
$.cookie('name', 'value', { path: '/' });
// 以下代码【删除失败】
$.removeCookie('name'); // => false
// 以下代码【删除成功】
$.removeCookie('name', { path: '/' }); // => true
**注意：**删除 cookie 时，必须传递用于设置 cookie 的完全相同的路径，域及安全选项。
$(document).ready(function(){
$.cookie('name', 'runoob'); // 创建 cookie
name = $.cookie('name'); // 读取 cookie
$("#test").text(name);
$.cookie('name2', 'runoob2', { expires: 7, path: '/' });
name2 = $.cookie('name2');
$("#test2").text(name2);
});
在Chrome浏览器中按下F12，打开开发者工具，选择"Console (控制台)"选项卡，输入document.cookie，回车就可以查看当前网站的Cookie了。
执行完后，我们可以在浏览器中查看 Cookie 信息，如下图所示：
参数说明
raw
默认值：false。
默认情况下，读取和写入 cookie 的时候自动进行编码和解码（使用 encodeURIComponent 编码，decodeURIComponent 解码）。要关闭这个功能设置 raw:true 即可：
$.cookie.raw = true;
json
设置 cookie 的数据使用 json 存储与读取，这时就不需要使用 JSON.stringify 和 JSON.parse 了。
$.cookie.json = true;
expires
expires: 365
定义 cookie 的有效时间，值可以是一个数字（从创建 cookie 时算起，以天为单位）或一个 Date 对象。如果省略，那么创建的 cookie 是会话 cookie，将在用户退出浏览器时被删除。
path
path: '/'
默认情况：只有设置 cookie 的网页才能读取该 cookie。
定义 cookie 的有效路径。默认情况下， 该参数的值为创建 cookie 的网页所在路径（标准浏览器的行为）。
如果你想在整个网站中访问这个 cookie 需要这样设置有效路径：path: ‘/’。如果你想删除一个定义了有效路径的 cookie，你需要在调用函数时包含这个路径:
$.cookie('the_cookie', null,{ path: '/' });
domain
domain: 'example.com'
默认值：创建 cookie 的网页所拥有的域名。
secure
secure: true
默认值：false。如果为 true，cookie 的传输需要使用安全协议（HTTPS）。
2. jQuery Accordion 折叠栏
jQuery Accordion 插件用于创建折叠菜单。它通常与嵌套的列表、定义列表或嵌套的 div 一起使用。选项用于指定结构、激活的元素和定制的动画。
该插件现在是 jQuery UI 的一部分，独立的版本不会再更新了。目前版本是 1.6。
jQuery Accordion 官网，jQuery Accordion 插件下载：http://www.runoob.com/try/download/jquery-accordion.zip。
如需了解更多有关 Accordion 的细节，请查看 API 文档 折叠面板部件（Accordion Widget）。
标准
标准代码如下:
jQuery('#list1a').accordion();
jQuery('#list1b').accordion({
autoheight: false
});
导航
带有锚和嵌套列表的无序列表
jQuery('#navigation').accordion({
active: false,
header: '.head',
navigation: true,
event: 'mouseover',
fillSpace: true,
animated: 'easeslide'
});
带选项
容器是一个定义列表，标题是 dt，内容是 dd。
jQuery('#list2').accordion({
event: 'mouseover',
active: '.selected',
selectedClass: 'active',
animated: "bounceslide",
header: "dt"
}).bind("change.ui-accordion", function(event, ui) {
jQuery('<div>' + ui.oldHeader.text() + ' hidden, ' + ui.newHeader.text() + ' shown</div>').appendTo('#log');
});
效果演示网址：jQuery UI Accordion 演示 (runoob.com)
3. jQuery Autocomplete
jQuery Autocomplete 插件根据用户输入值进行搜索和过滤，让用户快速找到并从预设值列表中选择。通过给 Autocomplete 字段焦点或者在其中输入字符，插件开始搜索匹配的条目并显示供选择的值的列表。通过输入更多的字符，用户可以过滤列表以获得更好的匹配。
该插件现在是 jQuery UI 的一部分，独立的版本不会再更新了。目前版本是 1.6。
访问 jQuery Autocomplete 官网，下载 jQuery Autocomplete 插件。
如需了解更多有关 Autocomplete 的细节，请查看 API 文档 自动完成部件（Autocomplete Widget）。
实例演示网址：jQuery Autocomplete | 菜鸟教程 (runoob.com)
4. jQuery Growl 插件(消息提醒)
jQuery Growl 插件(消息提醒) 允许您很容易地在一个覆盖层显示反馈消息。消息会在一段时间后自动消失，不需要单击"确定"按钮等。用户也可以通过移动鼠标或点击关闭按钮加快隐藏信息。
该插件目前版本是 1.0.0。
访问 jQuery Growl 官网，下载 jQuery Growl 插件。
效果如下：
使用方式
下载好插件后导入 jQuery 库，jquery.growl.js，jquery.growl.css 三个文件，如：
<script src="https://cdn.bootcss.com/jquery/2.0.2/jquery.min.js" type="text/javascript"></script>
<script src="https://static.runoob.com/assets/jquery/jquery.growl/javascripts/jquery.growl.js" type="text/javascript"></script>
<link href="https://static.runoob.com/assets/jquery/jquery.growl/stylesheets/jquery.growl.css" rel="stylesheet" type="text/css" />
如需使用 Growl 插件，请选择你要设置的显示文本元素，把文本作为参数传递给它：
$.growl({ title: "消息标题", message: "消息内容!" });
$.growl.error({ title: "错误标题", message: "错误消息内容!" });
$.growl.notice({title: "提醒标题", message: "提醒消息内容!" });
$.growl.warning({title: "警告标题", message: "警告消息内容!" });
有几个可用的默认选项。如果您有兴趣，可以查看下面完整的实例演示：菜鸟教程在线编辑器 (runoob.com)
5. jQuery Password Validation（密码验证）
jQuery Password Validation（密码验证）插件扩展了 jQuery Validate 插件，提供了两种组件：
一种评价密码的相关因素的功能：比如大小写字母的混合情况、字符（数字、特殊字符）的混合情况、长度、与用户名的相似度（可选的）。
一种使用评价功能显示密码强度的验证插件自定义方法。显示的文本可以被本地化。
您可以简单地自定义强度显示的外观、本地化消息显示，并集成到已有的表单中。
该插件目前版本是 1.0.0。
使用方式
如需使用 Password Validation（密码验证）插件，请添加一个 class “password” 到 input，同时添加显示强度的基本标记在表单的需要显示的地方：
<form id="register">
<label for="password">Password:</label>
<input class="password" name="password" id="password" />
<div class="password-meter">
<div class="password-meter-message"> </div>
<div class="password-meter-bg">
<div class="password-meter-bar"></div>
</div>
</div>
</form>
对表单应用 Validate 插件：
$(document).ready(function() {
$("#register").validate();
});
您可以重载 $.validator.passwordRating 实现不同的评价方法。或者重载 $.validator.passwordRating.messages 来提供其他消息，比如本地化。
6. jQuery Prettydate
jQuery Prettydate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息，且已翻译成其他 37 种语言。
该插件目前版本是 1.1.0。
下载 jQuery Prettydate Validation（密码验证）插件。
使用方式
如需使用 Prettydate 插件，您需要在 title 中带有 ISO8601 日期：
<a title="2008-01-28T20:24:17Z">January 28th, 2008</a>
<a title="2008-01-27T22:24:17Z">January 27th, 2008</a>
<a title="2008-01-26T22:24:17Z">January 26th, 2008</a>
然后对它们应用 prettyDate 方法：
$(function() { $("a").prettyDate(); });
如需本地化该插件，请在 $.prettyDate.messages 中重写属性。在这里，以德国本地化为例：
$.prettyDate.messages = { now: "gerade eben", minute: "vor einer Minute", minutes: $.prettyDate.template("vor {0} Minuten"), hour: "vor einer Stunde", hours: $.prettyDate.template("vor {0} Stunden"), yesterday: "Gestern", days: $.prettyDate.template("vor {0} Tagen"), weeks: $.prettyDate.template("vor {0} Wochen") }
该插件每隔 10 秒中更新一次每个被选中的元素。这样子 “just now” 会变为 “1 minute ago” 再变为 “x minutes ago” 再变为 “1 hour ago” 等等。
您可以通过指定 interval 选项为 “false” 来禁用间隔更新：
$(function() { $("a").prettyDate({ interval: false }); });
或者设置一个不同的时间间隔，例如：interval: 1000，每隔一秒更新一次每个被选中的元素：
$(function() { $("a").prettyDate({ interval: 1000 }); });
value 选项默认读取 title 属性中的 ISO8601 日期字符串。重载该选项来使用其他属性，例如，一个自定义的 “isodate” 属性：
$(function() {
$("a").prettyDate({
function() { // "this" 是 DOM 元素
return $(this).attr("isodate");
}
});
});
7. jQuery Tooltip
jQuery Tooltip 插件取代了原生的工具提示框，让它们可自定义，您只需要调整它们的内容、位置和外观即可。
该插件目前版本是 1.3，已经很长时间没有更新，推荐使用 jQuery UI 工具提示框（Tooltip）。
如需了解更多有关 jQuery UI 工具提示框（Tooltip）的细节，请查看 API 文档 jQuery UI 工具提示框部件（Tooltip Widget）。
8. jQuery 树型菜单插件(Treeview)
jQuery Treeview 提供了一个无序灵活的可折叠的树形菜单。适用于一些菜单的导航，支持基于 cookie 的持久性菜单。
<ul id="browser" class="filetree treeview-famfamfam">
<li><span class="folder">Folder 1</span>
<ul>
<li><span class="folder">Item 1.1</span>
<ul>
<li><span class="file">Item 1.1.1</span></li>
</ul>
</li>
<li><span class="folder">Folder 2</span>
<ul>
<li><span class="folder">Subfolder 2.1</span>
<ul id="folder21">
<li><span class="file">File 2.1.1</span></li>
<li><span class="file">File 2.1.2</span></li>
</ul>
</li>
<li><span class="folder">Subfolder 2.2</span>
<ul>
<li><span class="file">File 2.2.1</span></li>
<li><span class="file">File 2.2.2</span></li>
</ul>
</li>
</ul>
</li>
<li class="closed"><span class="folder">Folder 3 (closed at start)</span>
<ul>
<li><span class="file">File 3.1</span></li>
</ul>
</li>
<li><span class="file">File 4</span></li>
</ul>
</li>
</ul>
以上是关于jQuery插件CookieAccordion 折叠栏AutocompleteGrowlPassword ValidationPrettydateTooltipTreeview的主要内容，如果未能解决你的问题，请参考以下文章