期待已久的2012年度最佳 jQuery ...-HTML5本地存储之Web Storage篇-Regexper：牛逼的 JavaScript 正则可视化工具

当前位置: 编程技术>WEB前端

本页文章导读:

▪期待已久的2012年度最佳 jQuery 插件揭晓　　让人期待已久的2012年度最佳 jQuery 插件终于发布了。jQuery 自2006年发布以来，经过6年的迅速发展，目前已是最流行和使用最广泛的 JavaScript 框架，这主要归功于众多围绕 jQuery 的技术.........

▪HTML5本地存储之Web Storage篇 Web Storage是HTML5引入的一个非常重要的功能，可以在客户端本地存储数据，类似HTML4的cookie，但可实现功能要比cookie强大的多，cookie大小被限制在4KB，Web Storage官方建议为每个网站5MB。 Web Sto.........

▪Regexper：牛逼的 JavaScript 正则可视化工具　　正则表达式通常被用来检索或替换符合某个模式的文本内容，编写正则是开发人员的必备技能。简单的正则表达式一下就能看懂含义，但是复杂的正则理解起来就很困难了。　　Jeff Avallon.........

[1]期待已久的2012年度最佳 jQuery 插件揭晓

来源: 发布时间: 2013-10-16

　　让人期待已久的2012年度最佳 jQuery 插件终于发布了。jQuery 自2006年发布以来，经过6年的迅速发展，目前已是最流行和使用最广泛的 JavaScript 框架，这主要归功于众多围绕 jQuery 的技术社区。jQuery 社区的开发者持续不断的在发布各种 jQuery 插件，Web 开发人员能够非常轻松把一些惊艳的功能到项目中。推荐阅读：《2011年度最佳 jQuery 插件》。

Arctext.js

Arctext.js 是基于 Lettering.js 的文字旋转插件，根据设置的旋转半径准确计算每个字母的旋转弧度并均匀分布。

虽然 CSS3 也能够实现字符旋转效果，但是要让安排每个字母都沿着弯曲路径排布相当的复杂，Arctext.js 则可以轻松实现。

可以通过设置下面四个参数调整效果：

radius /* 旋转的半径，最小值是字符长度的一半，如果设置为-1，则文本是直的，不会旋转。默认值是0 */
dir /* 旋转方向，1是向下，-1是向上。默认值是1 */
rotate /* 设置为true表示每个字符都旋转。默认值是true */
fitText /* 如果想使用fitText插件(http://fittextjs.com/)，则需要设置为true。默认值是false */

在线演示源码下载

stellar.js

正如它的口号所说：Parallax has never been easier，的确，它能帮助轻松的实现网页视差滚动效果。

给标签添加data属性（data-stellar-ratio等，使用方法参考帮助文档），然后运行$.stellar()就可以看到很酷的时差滚动效果了。

// For example:
$(window).stellar();
// or:
$('#main').stellar();

还可以通过设置偏移量来调整时差效果：

$.stellar({
horizontalOffset: 40,
verticalOffset: 150
});

也可以为元素添加data属性来配置每个元素的偏移，例如：

在线演示插件下载

Get turn.js

这款 jQuery 插件能够给页面添加漂亮的过渡（transition）效果，类似于书本或者杂志。

主要特色

✓ 支持运行于 iPad 和 iPhone；
✓ 简单，美观和强大的 API 接口；
✓ 可以通过 Ajax 动态加载页面；
✓ 纯 HTML5/CSS3 呈现页面内容；
✓ 提供两种漂亮的过渡（transition）效果；
✓ 借助 turn.html4.js，可以在 IE8 等低版本浏览器工作。

使用非常简单，示例代码：

<div id="flipbook">
<div > Turn.js </div>
<div ></div>
<div> Page 1 </div>
<div> Page 2 </div>
<div> Page 3 </div>
<div> Page 4 </div>
<div ></div>
<div ></div>
</div>
<script type="text/javascript">
$("#flipbook").turn({
width: 400,
height: 300,
autoCenter: true
});
</script>

在线演示插件下载

Flexslider 2.0

FlexSlider 是一款轻量的响应式 jQuery 内容滚动插件，能够帮助你在项目轻松的创建漂亮的内容滚动效果。

这款插件也是 2011 年度最佳 jQuery 插件，今年被 WooThemes 收购并发布了2.0版本，因此继续入选 2012 年度榜单。

主要特色

✓ 简单的，语义化的标签；
✓ 支持所有主流的浏览器；
✓ 水平/垂直滑动和淡入淡出动画；
✓ 支持多个滑块，回调 API，以及更多；
✓ 触摸滑动支持硬件加速；
✓ 能够自定义导航选项。
✓ 兼容最新版本的 jQuery。

使用非常简单，示例代码：

<div >
<ul >
<li>
<img src="/blog_article/slide1.jpg" />
</li>
<li>
<img src="/blog_article/slide2.jpg" />
</li>
<li>
<img src="/blog_article/slide3.jpg" />
</li>
</ul>
</div>

<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider();
});
</script>

在线演示插件下载

hammer.js

Hammer.js 是一个基于 jQuery，在网页中实现多点触摸 JavaScript 库。

支持 Tap、Double Tap、Drag、Hold、Swipe 和 Transform 六种触摸手势。

主要特色

✓ 在网站中快速实现 Touch 事件；
✓ 轻量，GZIP 压缩后只有2KB；
✓ 功能专注，专用于多点触摸手势；
✓ 完全独立的库，也提供了 jQuery 插件版本；

详细使用帮助可参考插件的Github主页，下面是简单示例：

$("#element")
.hammer({
// options...
})
.bind("tap", function(ev) {
console.log(ev);
});

在线演示插件下载

iPicture

iPicture 是一款用于制作交互式照片效果的 jQuery 插件，可以在图片上添加额外的

[2]HTML5本地存储之Web Storage篇

来源: 互联网发布时间: 2013-10-16

Web Storage是HTML5引入的一个非常重要的功能，可以在客户端本地存储数据，类似HTML4的cookie，但可实现功能要比cookie强大的多，cookie大小被限制在4KB，Web Storage官方建议为每个网站5MB。

Web Storage又分为两种：

sessionStorage
localStorage

从字面意思就可以很清楚的看出来，sessionStorage将数据保存在session中，浏览器关闭也就没了；而localStorage则一直将数据保存在客户端本地；

不管是sessionStorage，还是localStorage，可使用的API都相同，常用的有如下几个（以localStorage为例）：

保存数据：localStorage.setItem(key,value);
读取数据：localStorage.getItem(key);
删除单个数据：localStorage.removeItem(key);
删除所有数据：localStorage.clear();
得到某个索引的key：localStorage.key(index);

如上，key和value都必须为字符串，换言之，web Storage的API只能操作字符串。

接下来，我们通过Web Storage开发一个简单的通讯录小程序，以演示相关API的使用方法；我们要实现如下功能：

录入联系人，联系人有姓名、手机号码2个字段，以手机号作为key存入localStorage；

根据手机号码，查找机主；

列出当前已保存的所有联系人信息；

首先，准备一个简单的HTML页面，如下：

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8"/>
    <title>HTML5本地存储之Web Storage篇</title>
</head>
<body>
    <div style="border: 2px dashed #ccc;width:320px;text-align:center;">   
        <label for="user_name">姓名：</label>
        <input type="text" id="user_name" name="user_name" class="text"/>
        <br/>
        <label for="mobilephone">手机：</label>
        <input type="text" id="mobilephone" name="mobilephone"/>
        <br/>
        <input type="button" onclick="save()" value="新增记录"/>
        <hr/>
        <label for="search_phone">输入手机号：</label>
        <input type="text" id="search_phone" name="search_phone"/>
        <input type="button" onclick="find()" value="查找机主"/>
        <p id="find_result"><br/></p>
    </div>
    <br/>
    <div id="list">
    </div>
</body>
</html>

界面展现如下：

要实现联系人的保存，只需要简单实现如下JS方法即可：

        //保存数据
        function save(){
            var mobilephone = document.getElementById("mobilephone").value;
            var user_name = document.getElementById("user_name").value;
            localStorage.setItem(mobilephone,user_name);
        }

要实现查找机主，则实现如下JS方法：

        //查找数据
        function find(){
            var search_phone = document.getElementById("search_phone").value;
            var name = localStorage.getItem(search_phone);
            var find_result = document.getElementById("find_result");
            find_result.innerHTML = search_phone + "的机主是：" + name;
        }

要展现所有已保存的联系人信息，则需要使用localStorage.key(index)方法，如下：

        //将所有存储在localStorage中的对象提取出来，并展现到界面上
        function loadAll(){
            var list = document.getElementById("list");
            if(localStorage.length>0){
                var result = "<table border='1'>";
                result += "<tr><td>姓名</td><td>手机号码</td></tr>";
                for(var i=0;i<localStorage.length;i++){
                    var mobilephone = localStorage.key(i);
                    var name = localStorage.getItem(mobilephone);
                    result += "<tr><td>"+name+"</td><td>"+mobilephone+"</td></tr>";
                }
                result += "</table>";
                list.innerHTML = result;
            }else{
                list.innerHTML = "目前数据为空，赶紧开始加入联系人吧";
            }
        }

效果如下：

问题：如上的演示，都只有2个字段，姓名和手机号码，如果要存入更为丰富的联系人信息，比如公司名称、家庭地址等，如何实现呢？Web Storage不是只能处理字符串吗？此时，可以利用JSON的stringify()方法，将复杂对象转变成字符串，存入Web Storage中；当从Web Storage中读取时，可以通过JSON的parse()方法再转换成JSON对象；

如下简单演示增加了公司属性的联系人保存JS代码：

        //保存数据
        function save(){
            var contact = new Object;
            contact.user_name = document.getElementById("user_name").value;
            contact.mobilephone = document.getElementById("mobilephone").value;
            contact.company = document.getElementById("company").value;
            var str = JSON.stringify(contact);
            localStorage.setItem(contact.mobilephone,str);
            loadAll();
        }
        //将所有存储在localStorage中的对象提取出来，并展现到界面上
        function loadAll(){
            var list = document.getElementById("list");
            if(localStorage.length>0){
                var result = "<table border='1'>";
                result += "<tr><td>姓名</td><td>手机</td><td>公司</td></tr>";
                for(var i=0;i<localStorage.length;i++){
                    var mobilephone = localStorage.key(i);
                    var str = localStorage.getItem(mobilephone);
                    var contact = JSON.parse(str);
                    result += "<tr><td>"+contact.user_name+"</td><td>"+contact.mobilephone+"</td><td>"+contact.company+"</td></tr>";
                }
                result += "</table>";
                list.innerHTML = result;
            }else{
                list.innerHTML = "目前数据为空，赶紧开始加入联系人吧";
            }
        }

效果如下：

作者：hbcui1984 发表于2013-1-5 0:41:00 原文链接

阅读：0 评论：0 查看评论

[3]Regexper：牛逼的 JavaScript 正则可视化工具

来源: 发布时间: 2013-10-16

　　正则表达式通常被用来检索或替换符合某个模式的文本内容，编写正则是开发人员的必备技能。简单的正则表达式一下就能看懂含义，但是复杂的正则理解起来就很困难了。

　　Jeff Avallone 开发了一款 JavaScript 正则表达式可视化工具——Regexper，是 GitHub 上的开源项目，它能够让正则表达式字符串以 Railroad 形式图形化，便于阅读和理解。同时推荐一款 JavaScript 正则在线测试工具——Regexpal，可以和 Regexper 配合使用。

测试正则：^[a-zA-Z][a-zA-Z0-9_]{4,15}$

测试正则：^13[0-9]{9}|14[0-9]{9}|15[0-9]{9}|18[0-9]{9}$

Regexper：http://www.regexper.com/

您可能感兴趣的相关文章

10套精美的免费网站后台管理系统模板
精心挑选的优秀 jQuery Ajax 分页插件
十款精心挑选的在线CSS3代码生成工具
让人爱不释手的13套精美网页图标素材
Web前沿：那些让人惊叹的CSS3应用

本文链接：Regexper：牛逼的 JavaScript 正则可视化工具

编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源

本文链接