ria之家--RIA三部曲：jquery、ext、flex » jquery插件 http://www.36ria.com RIA三部曲：jquery、ext、flex Wed, 08 Feb 2012 12:19:26 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 Validation-Engine—jquery表单验证插件详解 http://www.36ria.com/4370 http://www.36ria.com/4370#comments Sat, 02 Jul 2011 07:33:47 +0000 明河 http://www.36ria.com/?p=4370
先道个歉，这二月明河工作太忙了，没多少时间更新博客，也很少捣鼓东西了。
（ps:RIA之家的全部demo，明河已经托管到github，如果要下载博客的全部demo，传送门在此：https://github.com/minghe/36ria-demo。）
今天明河将着重向各位朋友介绍个强大的jquery表单验证插件：Validation-Engine，明河在很早之前曾队Validation-Engine进行过介绍，传送门在此《validationEngine中文版 — jquery强大的表单验证插件》。那时候的validationEngine版本还是比较早的，目前最新的是2.2，跟以前相比改变了非常多，不少朋友给我留言希望更新下validationEngine的文章。所以写了这篇文章。

明河已经把验证规则的提示内容翻译成中文了，请看validation-engine-2.2\js\languages\jquery.validationEngine-cn.js。关于时间有二处提示没找到地方，目前没做修改。明河的英文太菜，翻译难免词不达意，欢迎纠正，O(∩_∩)O哈！
（ps：时间有限，demo没做翻译，请见谅。）

Validation-Engine的使用

Validation-Engine的调用跟旧版没什么太大区别，可以看《validationEngine中文版 — jquery强大的表单验证插件》，明河这里不再累述。这里对其中的二个点进行补充：ajax验证和钩子的使用。这二部分相对而言会难些，所以需要着重介绍下。

如何处理ajax验证？

典型场景：如何使用Validation-Engine验证用户名或email的存在性？
这个需求在大部分的注册页面都会用到，那如何使用Validation-Engine进行ajax验证呢？
Validation-Engine的ajax验证有二种模式：

  • Inline：表单元素即时验证，比如失去焦点后触发ajax验证请求
  • Submit：整个表单的验证
inline验证

inline验证当表单字段的值发生改变时会触发相应的ajax事件，比如用户名的输入框失去焦点后。
想要使用ajax验证，需要你在语言规则文件上加上相应的ajax验证规则，打开validation-engine-2.2\js\languages\jquery.validationEngine-cn.js，找到如下代码：

  1. "ajaxUserCallPhp": {
  2.                     "url": "phpajax/ajaxValidateFieldUser.php",
  3.                     // you may want to pass extra data on the ajax call
  4.                     "extraData": "name=eric",
  5.                     // if you provide an "alertTextOk", it will show as a green prompt when the field validates
  6.                     "alertTextOk": "* 恭喜你，此用户名可以使用",
  7.                     "alertText": "* 该用户名已经存在",
  8.                     "alertTextLoad": "* 正在验证中，请稍等..."
  9.                 }

上述是一套ajax的验证规则，url指向服务器端路径，alertText为验证提示，alertTextLoad为正在验证时显示的消息。alertTextOk即ajax验证成功时显示的消息。
然后你需要在表单字段上应用上这段规则。

  1. <input value="" class="validate[required,custom[onlyLetterNumber],maxSize[20],ajax[ajaxUserCallPhp]] text-input" type="text" name="user" id="user" />

留意这里的ajax[ajaxUserCallPhp] ，[]内部即时ajax的验证规则，是必须对应起来的。

Submit验证

直接ajax验证整个表单可以如下处理。

  1. jQuery("#formID").validationEngine({
  2. ajaxFormValidation: true,
  3. onAjaxFormComplete: ajaxValidationCallback,
  4. onBeforeAjaxFormValidation: beforeCall
  5. });
  • ajaxFormValidation：开启ajax表单验证
  • onAjaxFormComplete：ajax验证结束后执行的回调函数
  • onBeforeAjaxFormValidation：在ajax验证前执行的回调函数

具体demo可以看：http://www.position-relative.net/creation/formValidator/demos/demoAjaxSubmitPHP.html。

如何使用钩子？

Validation-Engine中的钩子是用来做啥？我们来看一个典型的使用场景：当你的表单字段存在错误时，你希望表单提交前，在表单头部打印出一行“你的表单存在错误，请修改！”。
也就是说Validation-Engine中的钩子其实可以理解为自定义事件。
具体来看个demo：http://www.position-relative.net/creation/formValidator/demos/demoHooks.html。

  1. $("#formID").bind("jqv.form.result", function(event , errorFound){
  2.                     if(errorFound) $("#hookError").append("There is some problems with your form");
  3.                 })

监听jqv.form.result事件，在提交表单前触发。
errorFound是错误标识符，当为false时，表示表单存在错误。

Validation-Engine目前支持的钩子（自定义事件）
  • jqv.form.validating:在表单开始验证前
  • jqv.field.result(event, field, errorFound, prompText) :一个表单字段验证后触发
  • jqv.form.result(event, errorFound) : 表单验证后触发

注意点

xiantao同学提了关于Validation-Engine的问题，有使用的朋友可以留意下：
“大家用的时候要注意一点，就是尽可能的把需要验证的框排的不要要密，或者说间距很小，要不会导致验证时弹出的层盖住其他的框，而这些框无法获得焦点，导致用户无法输入，而这个框有是必填的，结果就是用户的表单无法提交。我们整个项目都用的是这个，除了这一点，真的很完美”

]]> http://www.36ria.com/4370/feed 11 jquery分页插件—Smart Paginator http://www.36ria.com/4343 http://www.36ria.com/4343#comments Wed, 25 May 2011 06:52:52 +0000 明河 http://www.36ria.com/?p=4343

很久没介绍jquery相关的东西了，今天推荐一个分页工具条插件：Smart Paginator，这个插件用途还是很广的，而且可定制性相当不错，目前内置三种颜色，有需要的话，可以自己改css定制颜色，明河推荐使用。

1.如何使用Smart Paginator？

1.1引入以下几个文件
  1. <script src="jquery-1.4.4.min.js" type="text/javascript"></script>
  2.     <script src="smartpaginator.js" type="text/javascript"></script>
  3.     <link href="smartpaginator.css" rel="stylesheet" type="text/css" />
1.2添加一个分页容器层
  1. <div id="smart-paginator" > </div>
1.3初始化插件
  1. $(document).ready(function() {
  2.            $('#smart-paginator').smartpaginator({ totalrecords: 100, recordsperpage: 10, initval:0 , next: 'Next', prev: 'Prev', first: 'First', last: 'Last', theme: 'green', onchange: onChange
  3.  
  4. });
  5.  
  6.          function onChange(newPageValue) {
  7.              alert(newPageValue);
  8.          }

可以看到想要初始化Smart Paginator，需要配置不少参数，接下来来看下这些主要参数的含义。

2.参数说明

参数

默认值

类型

描述

totalrecords

0

Number

总的分页数

recordsperpage

0

Number

单页数据量

length

10

Number

这个参数很特殊，上一页、下一页、第一页、最后一页的显示控制依赖于这个参数，当length的值大于totalrecords/recordsperpage时，是不显示上一页、下一页、第一页、最后一页的

next

Next

String

下一页文本

prev

Prev

String

上一页文本

first

First

String

第一页文本

last

Last

String

最后一页文本

go

Go

String

跳转文本

theme

green

Stirng

模板

display

double

String

initval

1

Number

默认显示第几页

datacontainer

”

String

数据容器id，请看demo3

dataelement

”

String

数据元素，指的是容器下的对应的子元素的选择器，请看demo2

onchange

null

Function

分页改变后触发的函数

3.自定义颜色模板

  1. .green
  2. {
  3.     background-color: #4f7305;
  4. }
  5. .green.normal
  6. {
  7.     background-color: #588500;
  8.     color: White;
  9.     border: solid 1px #5f9000;
  10. }
  11. .green.active
  12. {
  13.     background-color: #344C00;
  14.     color: #F8EB00;
  15.     border: solid 1px #5f9000;
  16. }
  17. .green .btn
  18. {
  19.     background-color: #588500;
  20.     color: White;
  21.     border: solid 1px #5f9000;
  22. }
]]> http://www.36ria.com/4343/feed 11 使用jQuery和css进行更好的checkbox按钮设计 http://www.36ria.com/4203 http://www.36ria.com/4203#comments Tue, 03 May 2011 11:22:56 +0000 苏河 http://www.36ria.com/?p=4203 有很多场景需要我们用checkbox来进行诠释，比如一些开关配置的启用与否，当然，原始的checkbox已经深入人心，相信大多数的网站都会采用这种方式与用户进行交互，苏河今天要提出的就是一种不同的交互方式，我们姑且称它为开关式交互（请猛击这里查看demo），这种交互方式相信大家或多或少都能在一些网站上见到过，那么今天，苏河就采用jQuery插件对这种交互进行实现。

1. HTML

首先是文档结构，我们需要一个带有form标签的checkbox，我们还需要引入一个jQuery以及一个自定义的css样式。

index.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Better Check Boxes with jQuery and CSS | Tutorialzine Demo</title>
  6.  
  7. <link rel="stylesheet" type="text/css" href="css/styles.css" />
  8. <link rel="stylesheet" type="text/css" href="jquery.tzCheckbox/jquery.tzCheckbox.css" />
  9.  
  10. </head>
  11. <body>
  12.  
  13. <div id="page">
  14.  
  15.     <form method="get" action="./">
  16.         <ul>
  17.             <li>
  18.                 <label for="ch_effects">Display effects: </label>
  19.                 <input type="checkbox" id="ch_effects" name="ch_effects" data-on="Show effects" data-off="Hide effects" />
  20.             </li>
  21.             <li>
  22.                 <label for="ch_location">Enable location tracking: </label>
  23.                 <input type="checkbox" id="ch_location" name="ch_location" checked />
  24.             </li>
  25.             <li>
  26.                 <label for="ch_showsearch">Include me in search results: </label>
  27.                 <input type="checkbox" id="ch_showsearch" name="ch_showsearch" />
  28.             </li>
  29.             <li>
  30.                 <label for="ch_emails">Email notifications: </label>
  31.                 <input type="checkbox" id="ch_emails" name="ch_emails" data-on="ON" data-off="OFF" />
  32.             </li>
  33.         </ul>
  34.     </form>
  35.  
  36. </div>
  37.  
  38. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
  39. <script src="jquery.tzCheckbox/jquery.tzCheckbox.js"></script>
  40. <script src="js/script.js"></script>
  41.  
  42. </body>
  43. </html>

这段代码主容器page包含一个form元素，form元素里面用label诠释相应checkbox，checkbox通过data-on和data-off属性来定义勾选与否显示的文字。
下面一段代码是jQuery插件执行完之后用来替代checkbox显示开关的代码

  1. <span class="tzCheckBox checked">
  2.     <span class="tzCBContent">ON</span>
  3.     <span class="tzCBPart"></span>
  4. </span>

当插件被调用的时候，将做一次循环遍历checkbox的操作，然后在每个checkbox后插入上面这段代码，并隐藏checkbox以达到偷梁换柱的目的。

css


好了，接下来我们将注意力转移到样式上，苏河用一张透明的图片来显示开关的背景，这是一张会随着开关文字增加而自动延伸背景的sprites。

  1. .tzCheckBox{
  2.     background:url('background.png') no-repeat right bottom;
  3.     display:inline-block;
  4.     min-width:60px;
  5.     height:33px;
  6.     white-space:nowrap;
  7.     position:relative;
  8.     cursor:pointer;
  9.     margin-left:14px;
  10. }
  11.  
  12. .tzCheckBox.checked{
  13.     background-position:top left;
  14.     margin:0 14px 0 0;
  15. }
  16.  
  17. .tzCheckBox .tzCBContent{
  18.     color: white;
  19.     line-height: 31px;
  20.     padding-right: 38px;
  21.     text-align: right;
  22. }
  23.  
  24. .tzCheckBox.checked .tzCBContent{
  25.     text-align:left;
  26.     padding:0 0 0 38px;
  27. }
  28.  
  29. .tzCBPart{
  30.     background:url('background.png') no-repeat left bottom;
  31.     width:14px;
  32.     position:absolute;
  33.     top:0;
  34.     left:-14px;
  35.     height:33px;
  36.     overflow: hidden;
  37. }
  38.  
  39. .tzCheckBox.checked .tzCBPart{
  40.     background-position:top right;
  41.     left:auto;
  42.     right:-14px;
  43. }

这里的tzCheckBox用inline-block的行内的块元素进行定义，为的是tzCheckBox子元素的背景和文字在同一行，同时position的相对定位也为其子元素的背景元素的定位提供一个参考的标准，可以让tzCBPart显示剩余的背景。

jQuery插件

好了，接下来介绍jQuery插件，这个插件公布了一个可写属性labels供外部进行开关文字的定义，另外，将选择器作为this指针传入函数进行checkbox的遍历。

  1. (function($){
  2.     $.fn.tzCheckbox = function(options){
  3.  
  4.         //默认是ON和OFF:
  5.  
  6.         options = $.extend({
  7.             labels : ['ON','OFF']
  8.         },options);
  9.  
  10.         return this.each(function(){
  11.             var originalCheckBox = $(this),
  12.                 labels = [];
  13.  
  14.             // 检查data-on和data-off属性:
  15.             if(originalCheckBox.data('on')){
  16.                 labels[0] = originalCheckBox.data('on');
  17.                 labels[1] = originalCheckBox.data('off');
  18.             }
  19.             else labels = options.labels;
  20.  
  21.             // 生成开关HTML代码
  22.             var checkBox = $('<span>',{
  23.                 className    : 'tzCheckBox '+(this.checked?'checked':''),
  24.                 html:    '<span class="tzCBContent">'+labels[this.checked?0:1]+
  25.                         '</span><span class="tzCBPart"></span>'
  26.             });
  27.  
  28.             //插入开关代码，并隐藏原始的checkbox
  29.             checkBox.insertAfter(originalCheckBox.hide());
  30.  
  31.             checkBox.click(function(){
  32.                 checkBox.toggleClass('checked');
  33.  
  34.                 var isChecked = checkBox.hasClass('checked');
  35.  
  36.                 // 记录开关变化至原始的checkbox中
  37.                 originalCheckBox.attr('checked',isChecked);
  38.                 checkBox.find('.tzCBContent').html(labels[isChecked?0:1]);
  39.             });
  40.  
  41.             // 监听原始checkbox的改变，做开关模拟点击
  42.             originalCheckBox.bind('change',function(){
  43.                 checkBox.click();
  44.             });
  45.         });
  46.     };
  47. })(jQuery);

当然，针对开关的操作定义了click事件来进行一些响应，比如是否选中会记录到原始的checkbox（虽然它被隐藏了）中，比如开关文字的变化。有人会问为什么要记录到原始的checkbox中，因为这是一个表单，当提交的时候它就需要post一个正确的值了。
我们可以使用下面的代码来调用这段插件。

  1. $('input[type=checkbox]').tzCheckbox({
  2.     labels: [ 'Enable', 'Disable' ]
  3. });

这段代码的含义就是调用页面所有的checkbox，并写入开关对应的文字Enable和Disable。

到此为止，这个demo也结束了。

结束语

这个插件的用处就在于其取代了原来的checkbox，在某些场合能给用户更好的交互体验，相信大家一定在一些配置应用或者管理员页面中经常见到这样的交互吧，当然，当用户禁用了javascript的时候，展现给用户的就是原始的checkbox了。

]]> http://www.36ria.com/4203/feed 6 zoomy—jquery图片放大镜插件 http://www.36ria.com/3985 http://www.36ria.com/3985#comments Mon, 28 Mar 2011 10:28:25 +0000 明河共影 http://www.36ria.com/?p=3985
很久没介绍jquery方面的东西了，今天偶然发现了一个相当不错的jquery图片放大镜插件：zoomy，分享给给位。

使用上非常简单。

1.引入jquery和插件

  1. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
  2. <link type="text/css" rel="stylesheet" href="path-to/zoom1.0.css"/>
  3. <script type="text/javascript" src="path-to/zoomy1.0.js"></script>

2.建立类似如下的html结构

  1. <a href="zoomImg.jpg" class="zoom">
  2.     <img src="displayImg.jpg" />
  3. </a>

a的路径指向大图路径。

3.初始化

  1. $('.zoom').zoomy({
  2.     zoomSize: 200,
  3.     round: true,
  4.     glare: true,
  5.     zoomText: 'click to Zoom'
  6. });

4.原理简述

图片放大镜的原理并不复杂，当鼠标滑过图片时，不存在放大镜层，创建一个放大镜层，这个层的背景图片指向大图，当你的鼠标在图片移动时候，鼠标坐标改变了，同时改变放大镜层背景图片的位移。
当然，实际的情况会要复杂的多，你要处理下边界，不能让你的放大镜超越可视图片的边界。
zoomy有个有意思的放大镜层，是完全使用css3完成的，效果如下

圆形的放大镜层，是使用css3的圆角属性生成的，而圆形内部还有一个白色半透明的圆形层，再加上阴影，就形成了比较逼真的放大镜效果。

  1. .zoomy{
  2.     position: absolute;
  3.     display: none;
  4.     background-repeat: no-repeat;
  5.     -webkit-box-shadow: 0px 5px 10px #000;
  6.     -moz-box-shadow: 0px 5px 10px #000;
  7.     border: 1px solid #999;
  8.     line-height: 100px;
  9.     text-align: center;
  10.     background-image: url(loading.gif);
  11.     background-position: center;
  12.     background-color: #fff;
  13.     z-index: 1000;
  14.     overflow: hidden;
  15. }
  16.  
  17. .zoomy span{
  18.     display: block;
  19.     margin: 5px auto;
  20.     background: -moz-linear-gradient(top, rgba(255,255,255,.61) 0%, rgba(255,255,255,0) 24%, rgba(255,255,255,0) 71%, rgba(255,255,255,.61) 100%); /* firefox */
  21.     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.61)), color-stop(24%,rgba(255,255,255,0)), color-stop(71%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,.61))); /* webkit */
  22.  
  23. }
  24.  
  25. .zoomBar{
  26.     font-family: arial, helvetica;
  27.     color: #fff;
  28.     text-decoration: none;
  29.     display: block;
  30.     position: absolute;
  31.     bottom: 0px;
  32.     left: 0px;
  33.     background: #000;
  34.     border-width: 1px 1px 0 0;
  35.     border-style: solid;
  36.     border-color: #000000;
  37.     padding: 5px 10px;
  38.     -webkit-border-radius: 0 5px 0 0;
  39.     -moz-border-radius: 0 5px 0 0;
  40.     opacity: .8;
  41.     filter:alpha(opacity=80);
  42. }
]]> http://www.36ria.com/3985/feed 4 Picture Menu — 华丽的jquery滑动幻灯片插件 http://www.36ria.com/3829 http://www.36ria.com/3829#comments Wed, 19 Jan 2011 11:46:27 +0000 明河共影 http://www.36ria.com/?p=3829 明河上次推荐jquery插件，还要追溯到2010年9月了……现在基本上已经不写jquery代码了，但对jquery还有不可割舍的感情，会继续更新jquery的相关教程。今天给大家介绍一款相当不错的jquery滑动幻灯片插件：Picture Menu。滑动效果，明河也曾经完成过，有兴趣的朋友可以猛击《divSlider — jquery滑动门插件（明河作品）》，必须承认Picture Menu的功能比明河写的divSlider来的强，也更加好用。

这里明河以最复杂的demo5为例讲解下其API。

1.建立幻灯片html结构

  1. <div class="MainMenu5">
  2.                     <div>
  3.                         <img src="img/menu-1.png" />
  4.                         <img src="img/text-1.png" />
  5.                         <ul class="submenu light">
  6.                             <li><a href="#">Submenu 1.1</a></li>
  7.                             <li><a href="#">Submenu 1.2</a></li>
  8.                             <li><a href="#">Submenu 1.3</a></li>
  9.                             <li><a href="#">Submenu 1.4</a></li>
  10.                             <li><a href="#">Submenu 1.5</a></li>
  11.                             <li><a href="#">Submenu 1.6</a></li>
  12.                         </ul>
  13.                     </div>
  14.                     ......
  15.                 </div>

2.初始化pictureMenu

  1. $(".MainMenu5").pictureMenu({
  2.                 menuHeight: 200,
  3.                 animateTime: 600,
  4.                 menuInactiveHide: 0.2,
  5.                 menuWidthHover: 75,
  6.                 menuAutoOpen: 3,
  7.                 leaveActiveOpen: true,
  8.                 leaveActiveOpenCookie: true
  9.             });

3.API说明

参数 默认值 类型 描述
animateTime 350 Number 动画时间（动画速度）
menuHeight 150 Number 图片列表容器高度
menuWidth 75 Number 单个图片默认显示宽度（不是指容器宽度），当为空时自适应，需要设置useMenuWidth为true
useMenuWidth true Boolean 允许自定义单个图片显示宽度
menuWidthHover 40 Number 非激活图片的宽度
menuActiveWidth 500 Number 激活图片的宽度，需要设置useMenuActiveWidth为true时才有效
useMenuActiveWidth false Boolean 是否允许自定义激活图片显示宽度
menuInactiveHide 1 Number 激活图片的透明度
menuBorder 2 Number 二个图片之间的间隔
menuAutoOpen 0 Number 默认激活第几个图片，必须设置leaveActiveOpen为true
leaveActiveOpen false Boolean 是否6允许设置默认激活
leaveActiveOpenCookie false Boolean cookie记录最后激活图片
]]> http://www.36ria.com/3829/feed 9 2010年十佳jquery插件 http://www.36ria.com/3675 http://www.36ria.com/3675#comments Mon, 06 Dec 2010 14:02:58 +0000 明河共影 http://www.36ria.com/?p=3675 临近新年，WDL的Henry Jones评选出了2010年十大最佳jquery插件，来看看都是哪些好的应用。

1.Nivo Slider


推荐指数：
现在jquery的幻灯片插件太多了，Nivo Slider，明河倒不觉得非常突出，有兴趣的朋友可以看下《推荐5个jquery/flash幻灯片》、《五个jquery图片画廊插件》。

2.Quicksand


推荐指数：
Quicksand入选十佳jquery插件是无可争议的，很酷的动画方式，适合元素的排序，重新渲染的情况。

3.Spritely


推荐指数：
Spritely入选十佳jquery插件实至名归，利用背景图片的错位移动，产生类似flash式的运动效果。话说那二只眼睛的乌鸦，相当怪异…..

4.Lettering.js


推荐指数：
用于产生华丽排版和字体的东东的…..实际上明河还真不清楚这插件有何实际意义…..

5.Colortip


推荐指数：
关于Colortip，明河就有很多话要说了，因为明河曾拆解过Colortip，并写了个类似的，更为强大的yitip，有兴趣的朋友可以猛击《yitip—jquery工具提示插件（明河作品）》，哈有朋友反映bug，yitip明河只有明年再重构了。
明河还拿Colortip讲解过如何写一个jquery插件，请看http://www.36ria.com/2818。

6.Masonry


推荐指数：
可以理解为栅格系统，产生你所需要的布局方式。强悍的是可以产生一些诡异地凌乱的布局……

7.gvChart


推荐指数：
说到js图表，明河不得不强力推荐下《Highcharts – 超强javascript图表库》。

8.Animated table sort


这个插件，明河要推荐下，是个好插件，用于表格排序时的动画。

9.jQuery Image Scale Carousel


推荐指数：
图片滑动（旋转木马）插件，相当常见了，竞争非常激烈的一个插件种类，这款插件胜在细节。有兴趣的朋友还可以看《五个jquery图片滚动插件》，还可以看《再推荐5个jquery图片滚动插件》…..

10.YoxView


推荐指数：
颇为实用的灯箱效果插件，关于灯箱效果插件，那也是泛滥，有兴趣的朋友可以看《17个受欢迎的jquery灯箱效果插件》。

]]> http://www.36ria.com/3675/feed 14 17个受欢迎的jquery灯箱效果插件 http://www.36ria.com/3644 http://www.36ria.com/3644#comments Mon, 29 Nov 2010 11:07:23 +0000 明河共影 http://www.36ria.com/?p=3644 灯箱效果在图片展示上应用非常广，算是弹出层的变种，与弹出层不同的地方是灯箱插件一般都支持图片画廊模式。

1、Fancybox

2、Colorbox

3、jQuery Lightbox Plugin

4、prettyPhoto

5、Litebox

6、Slimbox

7、LightView

8、Shadowbox

9、LightWindows

10、Multibox

11、PiroBox

12、Super Box

13、CeeBox

14、NyroModal

15、imgBox

16、ClearBox

17、jQuery Tools

]]> http://www.36ria.com/3644/feed 9 10个受欢迎的ajax弹出层/对话框组件 http://www.36ria.com/3595 http://www.36ria.com/3595#comments Tue, 23 Nov 2010 14:30:15 +0000 明河共影 http://www.36ria.com/?p=3595 弹出层/对话框效果在web应用非常广，明河今天在浏览1stwebdesigner时，发现了这篇好文章，太精彩了，明河厚着面皮，将其翻译过来。以下组件明河没特别说明，都是基于jquery。

1、Facebox


源自facebook的弹出层效果，半透明的边框是不是很眼熟呢，是的，新浪微博经常看到的弹出层，就是类似这样的效果。

2、Thickbox


Thickbox是一款非常经典的弹出层插件，明河见到很多小网站都在用，也有相应的wordpress插件。明河个人觉得，Thickbox易用性和兼容性还是比较一般的。

3、jQuery Dialog


源自jquery UI的对话框组件，还是非常靠谱的，很好很强大，只是引入的文件有点多，调用有点繁琐。

4、Prototype Window


非常强大！应该说是这里所有的弹出层插件中最强大的！文档也是最全的，当然调用会复杂些，明河要提的一点是这款组件是基于prototype框架。

5、MochaUI


基于Mootools，这款弹出层的样式是最漂亮的！Mootools明河不懂，不做评价。

6、Boxy


Boxy明河用过，IE6有bug！不推荐使用。

7、ModalBox

8、SimpleModal


这是明河推荐使用的弹出层，非常实用，兼容性和易用性尚可。

9、 jqModal


相当简单的弹出层插件，不推荐使用。

10、 Greybox

原文：http://www.1stwebdesigner.com/resources/ajax-lightbox-modal-dialog-solutions/

]]> http://www.36ria.com/3595/feed 8 area2select—jquery地区联动插件（咖啡兔作品） http://www.36ria.com/3395 http://www.36ria.com/3395#comments Sat, 30 Oct 2010 10:55:07 +0000 明河共影 http://www.36ria.com/?p=3395

这是咖啡兔原创作品，明河第一时间测试了下，感觉还不赖，本着支持国人原创的原则，今天推荐给各位。明河曾经有写过jquery地区联动插件，不过后台是php版的，不少朋友问明河有没有其他服务器端语言的，很遗憾明河不会java和.net，所以没有。咖啡兔做的这个插件服务端语言使用的是java。

插件介绍首页：http://www.wsria.cn/archives/1237

咖啡兔的博客：http://www.wsria.cn/

demo页面：http://demo.wsria.cn:9900/wsria-demo，进入页面后在左侧的“地区信息”栏目中

下载页面：http://code.google.com/p/wsria/downloads/list

]]> http://www.36ria.com/3395/feed 10 推荐7个优秀的jquery自动完成插件 http://www.36ria.com/3280 http://www.36ria.com/3280#comments Thu, 14 Oct 2010 13:24:57 +0000 明河共影 http://www.36ria.com/?p=3280 1、autocomplete


说到jquery的自动完成插件，就不得不说这个autocomplete插件，此插件极为强大…….

2、Ajax AutoComplete

3、Ajax Autocomplete Script using jQuery

4、jQuery Autocomplete Plugin

5、AutoSuggest jQuery Plugin


严重推荐，样式相当不错。

6、Tokenizing Autocomplete Text Entry


也是一款非常不错的jquery自动完成插件。

7、Facebook Style Autosuggest

]]> http://www.36ria.com/3280/feed 6 推荐5个有用的jquery表单插件 http://www.36ria.com/2997 http://www.36ria.com/2997#comments Sat, 28 Aug 2010 00:53:39 +0000 明河共影 http://www.36ria.com/?p=2997 出了趟远门，上不了网，这几天都没更新博客，今天终于有网了，8点起来更新下…….
明河曾在上个月发了篇《推荐10个jquery表单增强插件》，介绍了十个实用的jquery表单插件，今天再推荐5个。

1、jQuery File Style Plugin

通过这个插件，你可以自由地修改文件域中的按钮样式。

明河备注：这个插件的原理很简单，即在文件域上嵌套一个层（层包含你自定义的上传按钮样式），然后设置文件域的透明度为0，就实现了这个功能。值得一提的是firefox和chome下样式并不统一，应该是bug。作者的想法还是很不错的。

2、jQuery ComboBox


顾名思义是类似ext中的ComboBox组件，优化版的选择框，而这款选择框的优势在于对选择框内部选择项样式的自由设置。可以呈现出类似树级效果。
明河备注：ComboBox的原理就是用层去模拟选择框的行为，从而规避选择框存在的诸多缺陷。这个ComboBox不算是最强大的、样式也很一般、API的名字还很别扭（太长）….但作者的思路还是没问题的。

3、jQuery AlphaNumeric


这个插件非常实用，用于限制输入框的输入（不止限制数字输入）。
明河备注：AlphaNumeric的原理本身并不复杂，关键在于对用户输入时的键盘监听，获取用户按下的键值，然后再去跟插件的“限制”参数做匹配，不匹配则加入输入框。

4、jQuery Validity


又一个表单验证插件，但跟validationEngine比还有非常明显的差距，不支持即时验证。
明河备注：现在的表单验证插件真是多，不过大同小异，明河最欣赏的还是validationEngine。

5、jQuery Color


力荐，颜色拾取插件明河之前还没推荐过。实际上颜色拾取插件非常少，而这款，是明河见过最优秀的，有需要的朋友，强烈推进下。

]]> http://www.36ria.com/2997/feed 1 ld—jquery多级联动插件（明河作品） http://www.36ria.com/2955 http://www.36ria.com/2955#comments Sat, 21 Aug 2010 13:35:32 +0000 明河共影 http://www.36ria.com/?p=2955 jquery多级联动插件明河曾经写过二个版本，期间得到各路朋友的不少反馈（特别是网名为Fox的朋友，提出的建议非常的详细而且很有建设性），不得否认seriesComboBoxs（jquery多级联动插件）存在诸多缺陷，比如：无法设置选择框的默认值。

于是明河决定重构query多级联动插件，由于相对于seriesComboBoxs变动相当大，所以明河将这个插件重新命名为ld，旧的seriesComboBoxs明河将不再做维护。

V1.2 更新：
  • 修正IE6下报“未指明的错误”
  • 修正IE6下无法选择默认值的问题
  • 修正取xml数据时出现“头部已经发送”的问题
ld V1.0相对于seriesComboBoxsV0.2的改进：
  • 可以设置选择框的默认值
  • 不再需要对联动的所有选择框添加id（需要有相同的样式名）
  • 新增几个新的使用方法
  • 简化了API
  • 使用新的事件机制

改动还是非常大的，建议使用ldV1.0。

使用教程

1、导入地区数据库（mysql）

数据库文件为teashop_region.sql，此数据库来源于ecshop，Fox曾告知明河此数据库并不全，很感谢Fox提供了一个新的数据库，下个版本将使用Fox提供的数据库。

2、连接数据库

请打开get_region.php，找到：

  1. $hostname = 'localhost';// 数据库服务器
  2.     $username = 'root';        // 数据库用户名
  3.     $password = '123';        // 数据库密码
  4.     $dbname   = 'ld';            // 数据库名

按照本地服务器的情况，自行修改。

3、引入jquery库、jquery.ld.js和示例css

  1. <link href="style/css/base.css" rel="stylesheet" type="text/css" />
  2. <link href="style/css/demo.css" rel="stylesheet" type="text/css" />
  3.  
  4. <script src="js/jquery-1.4.2.min.js"></script>
  5. <script src="js/jquery.ld.js"></script>

4、建立4个打算联动的选择框

  1. <table width="700" border="0" cellspacing="0" cellpadding="0" class="tab1">
  2.   <tr>
  3.       <td>国家</td>
  4.       <td><select  class="ld-select-1" name="country">
  5.             <option value="">请选择你的国家</option>
  6.         </select>
  7.    
  8.     </td>
  9.     <td>省份</td>
  10.     <td><select  class="ld-select-1" name="province">
  11.             <option value="">请选择你的省份</option>
  12.         </select>
  13.     </td>
  14.     <td>城市</td>
  15.     <td><select class="ld-select-1" name="city">
  16.             <option value="">请选择你的城市</option>
  17.         </select>
  18.     </td>
  19.     <td>区县</td>
  20.     <td><select class="ld-select-1" name="county">
  21.             <option value="">请选择你的区县</option>
  22.         </select>
  23.     </td>
  24.   </tr>
  25. </table>

联动的选择框，必须要有相同的样式名，比如这里的“ld-select-1”。

5、初始化插件

  1. $(".ld-select-1").ld({ajaxOptions : {"url" : "get_region.php"},
  2.                      style : {"width" : 120}
  3.                          });

ajaxOptions用于设置ajax获取数据的参数
style设置选择框的样式
留意这里的调用与明河之前写的seriesComboBoxs有明显差异。
seriesComboBoxs初始化：

  1. $.seriesComboBoxs({selects : ["#country","#province","#city","#county"],
  2.                             ajaxOptions : {"url" : "get_region.php"}     });

新的ld插件已经不存在selects参数。

6、ld参数设置

参数 默认值 类型 描述
ajaxOptions {
url : null,
type : ‘get’,
data : {},
dataType : ‘json’,
success : function(){},
beforeSend : function(){}
}

Object

ajax获取数据时的配置默认的数据源格式为json
defaultParentId 0 Number 默认父级id，设置为0，即获取parent_id为0的数据（示例中返回“中国”）
defaultLoadSelectIndex 0 Number 默认读取数据的选择框，尽量使用默认的，这个参数用于设置读取那个选择框的数据。
texts [] Array

默认选择框中的选中项，比如设置为：texts:['福建','福州','长乐']

那么三个选择框会分别加载数据，并且选中与texts中字符串相同的项
style null Object 选择框的样式
field {
region_id : "region_id",
region_name : "region_name",
parent_id : "parent_id"
}		 Object 前台处理后台返回的数据时所使用的字段名，一般采用默认的即可。

7、方法说明

使用ld的方法，先要获取ld的API，比如示例4：

  1. var $ld4 = $(".ld-select-4");                     
  2.     $ld4.ld({ajaxOptions : {"url" : "get_region.php"},
  3.                defaultParentId : 1,
  4.            style : {"width" : 120}
  5.              })    
  6.     var ld4_api = $ld4.ld("api");
方法1：texts

描述：用于获取联动选择框的字符串数据。
返回：数组，比如“['福建','泉州','丰泽']”

  1. var text = ld4_api.texts().join('');
方法2：selected

描述：用于设置选择框的选中值
参数：

  • t：数组，要选中的选择框的字符串
  • completeCallBack：回调函数，当选择框数据全部加载完毕后触发
  1. ld4_api.selected(['福建','泉州','丰泽'],function(){
  2.             var text = ld4_api.texts().join('');
  3.             alert(text);           
  4.         });
方法3：size

描述：获取联动选择框的数量

  1. ld4_api.size()
方法4：css

描述：设置选择框的样式

  1. ld4_api.css({"width" : 120})

作者结语

欢迎各路朋友反馈bug和建议，谢谢！

]]> http://www.36ria.com/2955/feed 26 cornerV2.0—jquery强大的圆角插件 http://www.36ria.com/2844 http://www.36ria.com/2844#comments Sun, 01 Aug 2010 13:58:13 +0000 明河共影 http://www.36ria.com/?p=2844

jquery.corner是一款强大的圆角插件（所产生的不止只是圆角效果），兼容包括IE6、IE7、IE8、firefox、Opera 、Safari、Chrome等主流浏览器。

原理说明：

产生圆角的技术很多，jquery.corner是利用产生十几个带有边框的层（宽度不同），来模拟四个不同的边角的效果，所以可以保证所有浏览器的兼容性。（具体可以用firebug查看其层的分布和样式）

初始化插件：

  1. $(".demo").corner();
]]> http://www.36ria.com/2844/feed 1 yitip—jquery工具提示插件（明河作品） http://www.36ria.com/2827 http://www.36ria.com/2827#comments Wed, 28 Jul 2010 02:44:09 +0000 明河共影 http://www.36ria.com/?p=2827 明河写yitip的灵感来自于 Tutorials写的Colortip ，明河上周曾以Colortip 为例详解了jquery插件开发，同时指出Colortip 的缺陷，于是明河对其进行了重构，写了这个新的插件，我将其命名为yitip。

使用教程

一、引入jquery库和yitip的js及其css

  1. <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
  2. <script type="text/javascript" src="js/jquery.yitip.js"></script>
  3. <link rel="stylesheet" type="text/css" href="style/css/base.css" />
  4. <link rel="stylesheet" type="text/css" href="style/css/jquery.yitip.css" />

二、创建如下的html结构

  1. <h2><a href="http://www.36ria.com/" title="这款的插件名为yitip">默认提示框</a></h2>

如果你想要改变提示框颜色可以加color属性（默认为黄色）：

  1. <h2><a href="http://www.36ria.com/" title="这款的插件名为yitip" color="blue">默认提示框</a></h2>

三、初始化插件

  1. $('[title]').yitip();

四、获取插件API

比如你有如下目标元素：

  1. <a href="http://www.36ria.com/" title="yitip的作者为明河共影" id="demo3-title">demo3：这是第三个标题</a>

初始化插件后，按如下代码获取API：

  1. var demo3Tip = $("#demo3-title").yitip("api");
  2.     demo3Tip.options.offest = {"left":10,"top":0};
  3.     demo3Tip.setPosition("rightMiddle");

这里重新设置该目标元素的提示框的位置。
（详见demo文件）

五、配置参数详解

参数

默认值

类型

描述

content

null

String | Object

提示框的内容

当为Object时，获取远程数据，需要传入一个ajax配置参数
position "topMiddle" String

提示框位置

目前开放四个位置：上中、下中、左中、右中
offest {"left":0,"top":0} Object 提示框位置偏移
color "yellow" String

提示框颜色

目前共有6种颜色：：黄色、蓝色、绿色、红色、黑色、白色
hideDelay 500 Number 隐藏延迟
showDelay 0 Number 显示延迟
showEvent "mouseover" String 显示事件，设置为"click"，即单击目标元素才显示提示框
hideEvent "mouseout" String 隐藏事件，阻止隐藏事件，将此参数设置为null即可
effect   Object

提示框动画效果配置，默认为：

{
show : {"speed":"slow","offest":10,"startOpacity":0,"endOpacity":1},
hide : {"speed":"slow","offest":10,"startOpacity":1,"endOpacity":0}
}

六、作者结语

yitip目前在IE下效果存在瑕疵，尤其是在IE8以下版本的IE浏览器，所以IE8以下明河做了特殊处理，没有开启偏移。日后明河将会予以修正，目前yitip的位置设置只有4个，下个版本，明河将更新左、右、上、下。
如果你有什么好的意见或发现了bug，欢迎给明河留言，谢谢！

]]> http://www.36ria.com/2827/feed 16 microgallery — jquery图片画廊插件 http://www.36ria.com/2815 http://www.36ria.com/2815#comments Sun, 25 Jul 2010 13:22:13 +0000 明河共影 http://www.36ria.com/?p=2815 明河好久没有推荐jquery插件了，今天发现了一款颇有意思的jquery图片画廊插件，有意思的地方在于它的迷你…….

使用教程

插件首页：http://tympanus.net/codrops/2010/04/19/micro-image-gallery-a-jquery-plugin-2/

所需的html结构如下：

  1. <div id="mG1" class="microGallery">
  2.     <img src="gallery/2.jpg"/>
  3.     <img src="gallery/3.jpg"/>
  4.     <img src="gallery/4.jpg"/>
  5.     <img src="gallery/5.jpg"/>
  6. </div>

初始化插件

  1. $("#mG1").microgallery();

这个jquery图片画廊插件的优势就是小，如果你希望你的侧边栏显示一个图片画廊，这款插件倒是可以考虑。
如果你想要大尺寸的图片画廊插件，不妨看下明河曾发的以下文章：

]]> http://www.36ria.com/2815/feed 7 Colortip代码实现—jquery插件实战教程（4） http://www.36ria.com/2808 http://www.36ria.com/2808#comments Fri, 23 Jul 2010 12:56:00 +0000 明河共影 http://www.36ria.com/?p=2808 jquery插件实战教程，明河已经发了三篇教程：

上一篇Colortip难点解析，明河主要讲解了如何使用border生成三角图形，其实这部分并不是jquery插件必须的内容，最关键还是第二篇教程关于jquery插件基础解析，特别是下面这个jquery插件模板：

  1. (function($){
  2.     $.fn.插件名 = function(settings){
  3.  
  4.         var defaultSettings = {
  5.            
  6.         }
  7.        
  8.         /* 合并默认参数和用户自定义参数 */
  9.         settings = $.extend({},defaultSettings,settings);
  10.         return this.each(function(){
  11.            
  12.         });
  13.        
  14.     }
  15.    
  16. })(jQuery);

接下来的教程重要讲解Colortip的代码实现。

1、设置参数

  1. var defaultSettings = {
  2.             //颜色
  3.             color        : 'yellow',
  4.             //延迟
  5.             timeout        : 500
  6.         }
  7.         /* 合并默认参数和用户自定义参数 */
  8.         settings = $.extend({},defaultSettings,settings);

我们需要提供2个参数：颜色和隐藏提示框的延迟时间。当然你可以提供更多的配置参数给用户。

2、创建个包含所有颜色信息的数组

  1. //提示框的颜色
  2.         var supportedColors = ['red','green','blue','white','yellow','black'];

3、定时器

我们需要一个定时器，这个定时器用途在于，当你鼠标移开目标容器时，多久隐藏提示框。

  1. /*
  2.     /    定时器类
  3.     */
  4.     function eventScheduler(){}
  5.    
  6.     eventScheduler.prototype = {
  7.         set    : function (func,timeout){
  8.             //添加定时器
  9.             this.timer = setTimeout(func,timeout);
  10.         },
  11.         clear: function(){
  12.             //清理定时器
  13.             clearTimeout(this.timer);
  14.         }
  15.     }

这里需要你具备javascript面向对象编程方面的一些知识。
eventScheduler类很简单，只有二个方法，set()：添加定时器，clear ()：清理定时器

4、创建提示框类

  1. /*
  2.     /    提示类
  3.     */
  4.  
  5.     function Tip(txt){
  6.         this.content = txt;
  7.         this.shown = false;
  8.     }
  9.    
  10.     Tip.prototype = {
  11.         generate: function(){
  12.             //产生提示框
  13.            
  14.             return this.tip || (this.tip = $('<span class="colorTip">'+this.content+
  15.                                              '<span class="pointyTipShadow"></span><span class="pointyTip"></span></span>'));
  16.         },
  17.         show: function(){
  18.             //显示提示框
  19.             if(this.shown) return;
  20.             this.tip.css('margin-left',-this.tip.outerWidth()/2).fadeIn('fast');
  21.             this.shown = true;
  22.         },
  23.         hide: function(){
  24.             //隐藏提示框
  25.             this.tip.fadeOut();
  26.             this.shown = false;
  27.         }
  28.     }

Tip也是个javascript类，具有三个方法：generate、show、hide。
值得一提的是，Tip和eventScheduler类是在$.fn.colorTip函数体外。

5、Colortip具体的代码实现

1）实例化Tip和eventScheduler类
  1. // 实例化eventScheduler（定时器）           
  2.             var scheduleEvent = new eventScheduler();
  3.             //实例化Tip(提示类，产生、显示、隐藏)
  4.             var tip = new Tip(elem.attr('title'));
2）产生提示框，将提示框加入到目标容器
  1. // 产生提示框，并给提示框父容器添加样式
  2.             elem.append(tip.generate()).addClass('colorTipContainer');
3）检查目标容器是否有颜色样式
  1. var hasClass = false;
  2.             for(var i=0;i<supportedColors.length;i++)
  3.             {
  4.                 if(elem.hasClass(supportedColors[i])){
  5.                     hasClass = true;
  6.                     break;
  7.                 }
  8.             }

我们只需给没有颜色样式的目标容器，加入默认的颜色样式（黄色）。

4）给目标容器添加鼠标滑过事件
  1. elem.hover(function(){
  2.  
  3.                 tip.show();
  4.                
  5.                 //清理定时器
  6.                
  7.                 scheduleEvent.clear();
  8.  
  9.             },function(){
  10.  
  11.                 //启动定时器
  12.                
  13.                 scheduleEvent.set(function(){
  14.                     tip.hide();
  15.                 },settings.timeout);
  16.  
  17.             });

鼠标滑过目标容器时显示提示框，并清理定时器；当鼠标移开时启动定时器。

6、完整代码如下

  1. (function($){
  2.     $.fn.colorTip = function(settings){
  3.  
  4.         var defaultSettings = {
  5.             //颜色
  6.             color        : 'yellow',
  7.             //延迟
  8.             timeout        : 500
  9.         }
  10.         //提示框的颜色
  11.         var supportedColors = ['red','green','blue','white','yellow','black'];
  12.        
  13.         /* 合并默认参数和用户自定义参数 */
  14.         settings = $.extend(true,defaultSettings,settings);
  15.         return this.each(function(){
  16.  
  17.             var elem = $(this);
  18.            
  19.             // 如果该对象不包含title属性，直接予以返回
  20.             if(!elem.attr('title')) return true;
  21.            
  22.             // 实例化eventScheduler（定时器）           
  23.             var scheduleEvent = new eventScheduler();
  24.             //实例化Tip(提示类，产生、显示、隐藏)
  25.             var tip = new Tip(elem.attr('title'));
  26.  
  27.             // 产生提示框，并给提示框父容器添加样式
  28.            
  29.             elem.append(tip.generate()).addClass('colorTipContainer');
  30.  
  31.             // 检查提示框父容器是否有颜色样式
  32.            
  33.             var hasClass = false;
  34.             for(var i=0;i<supportedColors.length;i++)
  35.             {
  36.                 if(elem.hasClass(supportedColors[i])){
  37.                     hasClass = true;
  38.                     break;
  39.                 }
  40.             }
  41.            
  42.             // 如果没有，使用默认的颜色
  43.            
  44.             if(!hasClass){
  45.                 elem.addClass(settings.color);
  46.             }
  47.            
  48.             // 鼠标滑过提示框父容器时，显示提示框
  49.             // 鼠标移出，则隐藏
  50.            
  51.             elem.hover(function(){
  52.  
  53.                 tip.show();
  54.                
  55.                 //清理定时器
  56.                
  57.                 scheduleEvent.clear();
  58.  
  59.             },function(){
  60.  
  61.                 //启动定时器
  62.                
  63.                 scheduleEvent.set(function(){
  64.                     tip.hide();
  65.                 },settings.timeout);
  66.  
  67.             });
  68.            
  69.             //删除title属性
  70.             elem.removeAttr('title');
  71.         });
  72.        
  73.     }
  74.  
  75.  
  76.     /*
  77.     /    定时器类
  78.     */
  79.  
  80.     function eventScheduler(){}
  81.    
  82.     eventScheduler.prototype = {
  83.         set    : function (func,timeout){
  84.             //添加定时器
  85.             this.timer = setTimeout(func,timeout);
  86.         },
  87.         clear: function(){
  88.             //清理定时器
  89.             clearTimeout(this.timer);
  90.         }
  91.     }
  92.  
  93.  
  94.     /*
  95.     /    提示类
  96.     */
  97.  
  98.     function Tip(txt){
  99.         this.content = txt;
  100.         this.shown = false;
  101.     }
  102.    
  103.     Tip.prototype = {
  104.         generate: function(){
  105.             //产生提示框
  106.            
  107.             return this.tip || (this.tip = $('<span class="colorTip">'+this.content+
  108.                                              '<span class="pointyTipShadow"></span><span class="pointyTip"></span></span>'));
  109.         },
  110.         show: function(){
  111.             //显示提示框
  112.             if(this.shown) return;
  113.             this.tip.css('margin-left',-this.tip.outerWidth()/2).fadeIn('fast');
  114.             this.shown = true;
  115.         },
  116.         hide: function(){
  117.             //隐藏提示框
  118.             this.tip.fadeOut();
  119.             this.shown = false;
  120.         }
  121.     }
  122.    
  123. })(jQuery);

至此Colortip的代码讲解全部结束，Colortip有个优点就是能够自由控制提示框颜色，但Colortip存在不少的局限性，只能满足基本的应用，下篇教程将对其局限性进行详述，从而进入进阶篇。

]]> http://www.36ria.com/2808/feed 4 推荐10个jquery表单增强插件 http://www.36ria.com/2787 http://www.36ria.com/2787#comments Tue, 20 Jul 2010 03:12:04 +0000 明河共影 http://www.36ria.com/?p=2787 这几天的文章都是讲述如下写个jquery插件，有些沉闷，不一定很多人感兴趣，今天发篇文章介绍十款不同用途的jquery表单增强插件。

1、validationEngine中文版 — jquery强大的表单验证插件

非常好的jquery表单验证插件，验证规则可以自定义，唯一不好的地方就是IE下的提示效果有些粗糙。

2、passwordStrength —jquery密码强度插件


此插件明河做了一点点的改造，原插件存在个小bug。

3、niceforms V2-表单美化

不少人向明河抱怨，niceforms会与其他插件冲突等，鱼与熊掌不得兼得，慎用。

4、boxy-仿facebook的弹出窗体jquery插件

当弹出框遇到表单…….

此插件在IE下存在bug，明河推荐使用：simplemodal — jquery弹出窗体插件

5、jQuery Keypad

模拟键盘插件，有点华丽…….

6、Uploadify

文件上传插件，这里明河推荐自写的一款上传组件：yijs.File — 基于flash多文件上传组件。

7、autocomplete-jquery最强大的自动完成插件

非常强悍的自动完成插件，该有的功能它都具备了，真要说有什么缺点的话，就是丑了点…….

8、seriesComboBoxs — jquery多级联动插件

这是明河自己写的一个多级联动插件，多级联动该有的功能叶齐了，欢迎反馈bug。

9、prettyCheckboxes

有点华丽的单选框和复选框，类似的美化插件，明河再推荐一款：geogoer_vchecks —jquery单选、复选框插件。

10、In-Field Labels jQuery Plugin

]]> http://www.36ria.com/2787/feed 3 Colortip难点解析—jquery插件实战教程（3） http://www.36ria.com/2776 http://www.36ria.com/2776#comments Mon, 19 Jul 2010 14:53:09 +0000 明河共影 http://www.36ria.com/?p=2776 上一篇教程，明河讲解了写jquery插件的基本模板，今天将对Colortip这个jquery文字提示插件实现进行详解，你可以到第一篇教程下载Colortip。
（原作者的Colortip在IE6下存在二个bug，三角错位和提示框错位，明河将在日后教程中附上新的插件代码。）

难点解析：如何实现可以自由控制颜色的提示框

要控制提示框主体的边框颜色和背景颜色自然不难，难在如何自由控制三角部分的颜色，请看下图：

留意高亮的倒三角部分，你可以用firebug查看倒三角容器，点此进入demo，你就会发现这部分的三角并不是图片，而是使用纯css制作而成的！也只有在三角是由css构成的情况下，才可以自由控制其颜色。

这里就出现了一个有趣的知识点：使用css中的border产生三角形状。

border即边框，可以产生三角？别急，来看demo:

示例中，明河做了个Colortip的提示框原型：

扩展阅读

知道了如何使用css产生三角，但又浮现出新的问题：如何给三角加上1像素的“边框”？
明河之所以给边框加上引号，是因为提示框的三角边框实际上不是边框，而是另外一个三角容器。
先回过头来，看下第一篇教程中明河曾说到当鼠标滑过容器时产生的提示款结构如下：

  1. <span class="colorTip" style="margin-left: -60px;">推荐9个jquery手风琴菜单插件
  2.         <span class="pointyTipShadow"></span> 
  3.         <span class="pointyTip"></span> 
  4.  </span>

留意下其中的：

  1. <span class="pointyTipShadow"></span> 
  2.         <span class="pointyTip"></span>

这二个空的容器起到的是什么作用呢？
原来这二个span都是三角，.pointyTip三角宽度为12px，颜色与提示框主体背景颜色一样，而. pointyTipShadow三角宽度为14px，放在.pointyTip的下面，颜色与提示框主体边框颜色一样，就产生边框了错觉！
这里贴出第四个demo的代码：

  1. <div class="l w-50-per pos-rel yitip-wrapper">
  2.             <a href="#" title="这个示例由明河制作">这是一个链接</a>
  3.             <div class="yitip">
  4.                 这个示例由明河制作
  5.                 <div class="pointyTipShadow"></div>
  6.                 <div class="pointyTip"></div>
  7.             </div>
  8.         </div>

（与Colortip有些不同，Colortip是把提示框放在a内部，明河为了方便放在了a之下，提示框的类名我改成yitip）

  1. .yitip{
  2.     position:absolute;   
  3.     left:-40px;
  4.     top:-14px;
  5.     padding:6px 12px;   
  6.     background-color:white;
  7.     font-size:12px;
  8.     line-height:1;
  9.     text-decoration:none;
  10.     text-align:center;
  11.     text-shadow:0 0 1px white;
  12.     white-space:nowrap;
  13.    
  14.     -moz-border-radius:4px;
  15.     -webkit-border-radius:4px;
  16.     border-radius:4px;
  17.    
  18.     background-color:#f9f2ba;
  19.     border:1px solid #e9d315;
  20.     color:#5b5316;   
  21. }
  22. .yitip .pointyTipShadow,.yitip .pointyTip{
  23.     position:absolute;
  24.     border:6px solid; border-color:#e9d315 transparent transparent transparent;
  25.     border-style:solid dashed dashed dashed;
  26.     bottom:-12px;
  27.     width:0;height:0;
  28.     left:50%;
  29.     margin-left:-6px;
  30.     overflow:hidden;
  31. }
  32. .yitip .pointyTip{
  33.     border-top-color:#f9f2ba;
  34. }
  35. .yitip .pointyTipShadow{
  36.     border-width:7px !important;
  37.     bottom:-14px;
  38.     margin-left:-7px;
  39. }

……代码看上去不少，其实你只要理解border生成三角，剩下的代码主要还是用于调整位置。

解决了颜色控制这个难点，Colortip接下来代码实现就难度不大了，明河在代码内页加了注释，下一篇教程，明河主要讲解思路，Colortip这个插件并不完美，还有很大改进空间，明河这二天在进行改写，日后将介绍jquery插件的高级技巧。

]]> http://www.36ria.com/2776/feed 1 jquery插件基础解析—jquery插件实战教程（2） http://www.36ria.com/2768 http://www.36ria.com/2768#comments Sat, 17 Jul 2010 03:10:17 +0000 明河共影 http://www.36ria.com/?p=2768 上一篇教程，明河只是简单的贴出了colortips这个插件的示例和代码，同时提取出了jquery插件的基础模板：

  1. (function($){
  2.     $.fn.插件名= function(settings){
  3.                 //默认参数
  4.         var defaultSettings = {
  5.  
  6.         }
  7.        
  8.         /* 合并默认参数和用户自定义参数 */
  9.         settings = $.extend(defaultSettings,settings);
  10.        
  11.         return this.each(function(){
  12.                       //代码
  13.         });
  14.        
  15.     }
  16.    
  17. })(jQuery);

今天明河将详解这个模板。

一、匿名函数和闭包

先来看模板中的第一行代码：

  1. (function($){
  2.    
  3. })(jQuery);

如果你对匿名函数和闭包不了解，将会对这种代码非常疑惑，所以明河严重建议阅读JavaScript中的匿名函数及函数的闭包这篇文章。
这行代码其实是用于创建一个匿名函数。

1、模板中匿名函数的作用

保护“$”这个变量，避免“$”这个变量与你页面中的全局变量冲突。
这点非常重要，“$”这个变量在编程语言中使用率非常高，你无法保证你所引入的其他js都是用“$”来代表“jQuery”。明河举个例子，有用过ecshop的朋友应该有遇到一个问题，就是如果你在页面中使用jquery插件，会报”$不是一个函数”的错误，究其原因就是ecshop有个js定义了“$”作为获取dom对象的函数，如果你的插件没有使用匿名函数做包装就会报错。很多朋友喜欢$(‘[title]‘).colorTip({color:’yellow’});这样的形式调用插件，实际上也会出现冲突问题，最好的习惯是，使用jQuery(‘[title]‘).colorTip({color:’yellow’});

2、$与jQuery

jQuery是jquery库定义的一个全局变量，而$这个变量相当于jQuery的简写，$的冲突率是非常高的，不同的js框架$有不同的含义，但如果都使用jQuery，那是非常繁琐的一件事，这就是

  1. (function($){
  2.    
  3. })(jQuery);

这行代码的用处，这个匿名函数创建了闭包，意味着在这个闭包内，你可以任意的使用$这个变量，不用担心冲突的问题。

3、匿名函数的函数体形式
  1. (function( x , y){  
  2.     alert( x + y);    
  3. })(2 ,3 );

你可以试运行下上面的代码，再对照下模板中的第一行代码，也许你就会大致明白其形式。

  1. (function($){   
  2. });

定义一个带有个名为“$”参数的匿名函数。

  1. (function($){
  2.    
  3. })(jQuery);

将jQuery这个全局变量传入匿名函数，并执行匿名函数。

$.fn的含义

  1. (function($){
  2.     $.fn.插件名= function(settings){
  3.  
  4.     }   
  5. });

$.fn或者jQuery.fn本质上可以等于jQuery.prototype。prototype(原型)出现了，prototype在js中极其重要，是在javascript实现面向对象编程的关键，真的展开说，估计明河可以写好几天，这里明河推荐二本书《javascript高级编程》和《javascript设计模式》都有对prototype进行详解，你也可以看网上的教程。
以colorTip为例

  1. (function($){
  2.     $.fn.colorTip= function(settings){
  3.          alert(1);
  4.     }   
  5. });

实际上你就给jQuery扩展了一个名为colorTip的方法，接下来你可以如下调用执行该方法:

  1. (function($){
  2.    $('a').colorTip();
  3. });

在$.fn.colorTip中this上下文就会指向$(‘a’)这个对象。

三、jquery的继承方法$.extend

  1. (function($){
  2.     $.fn.插件名= function(settings){
  3.                 //默认参数
  4.         var defaultSettings = {
  5.  
  6.         }       
  7.         /* 合并默认参数和用户自定义参数 */
  8.         settings = $.extend(defaultSettings,settings);
  9.        
  10.     }
  11.    
  12. })(jQuery);

$.extend在jquery插件开发中有个很重要的作用，就是用于合并参数。
还是以colorTip为例：

  1. (function($){
  2.     $.fn.colorTip= function(settings){
  3.         var defaultSettings = {
  4.             //颜色
  5.             color        : 'yellow',
  6.             //延迟
  7.             timeout        : 500
  8.         }
  9.        
  10.         /* 合并默认参数和用户自定义参数 */
  11.         settings = $.extend(defaultSettings,settings);
  12.                alert(settings.color);
  13.     }   
  14. });

插件调用：

  1. $('a').colorTip({color:'blue'});

如果你运行以上代码，就会发现弹出的值为blue，而不再是默认的yellow。
$.extend(defaultSettings,settings);的含义是，使用settings来覆盖defaultSettings（同名键值）。
实际上.extend不止接受二个参数，相对于模板上的写法，明河更喜欢下面的写法：

  1. settings = $.extend({},defaultSettings,settings);

即不去覆盖defaultSettings（默认参数），而是合并到一个空的Object。

深层拷贝

这个知识点不是必须的，你可以略过。当$.extend的第一个参数为true时，会开启深层拷贝，代码如下：

  1. settings = $.extend(true,{},defaultSettings,settings);

调用之后你会发现没什么差别。
接下来我们增加个animate参数（这个参数也是个Object）：

  1. var defaultSettings = {
  2.             //颜色
  3.             color        : 'yellow',
  4.             //延迟
  5.             timeout        : 500,
  6.             animate     :{type:"fade",speed:"fast"}
  7.         }

调用如下：

  1. $('a').colorTip({color:'yellow',animate:{type:"slide"}});

在

  1. settings = $.extend({},defaultSettings,settings);

下加上：

  1. alert(settings.animate.speed);

按理说，应该得到的是fast，实际上却是undefined！原因是：animate是Object，不开启深度拷贝，是直接覆盖。
你可以再试下：

  1. settings = $.extend(true,defaultSettings,settings);
  2.         alert(settings.animate.speed);

正确的得到fast。
推荐阅读：jQuery.extend 函数详解，这篇文章讲解的非常到位。

四、each

  1. return this.each(function(){
  2.                       //代码
  3.         });

要读懂这行代码，有三个问题需要解决：

  • 1、this指代什么？
  • 2、为什么使用return？
  • 3、为什么要使用each？

1、this指代什么？
插件的调用如下：

  1. $('[title]').colorTip({color:'yellow'});

那么这里this，实际上是指向$(‘[title]‘)。
2、为什么使用return？
基本上大部分的jquery插件教程都没有说到原因。明河觉得主要原因还是方便链式调用：

  1. return this.each(function(){
  2.                       //代码
  3.         });

this.each()执行完返回的是this，这时候再return this.each()，返回的依旧是this，而这个this上下文又是指代$(‘[title]‘)，意味着你可以在colorTip()后继续加其他方法，比如：

  1. $('[title]').colorTip({color:'yellow'}).size();

3、为什么使用each？
这个很容易理解。

  1. $('[title]').colorTip({color:'yellow'});

$(‘[title]‘)很明显是一个对象集合，我们希望所有的带有title属性的容器都能出现提示框，所以就需要遍历$(‘[title]‘)。

下一篇教程明河将讲解colorTip这个插件的代码实现，从而指出插件的不足之处，进而讲解jquery插件的高级技巧（如何开放API，如何创建自定义事件等）。

如果你遇到什么问题或发现文章有错误，可以给明河留言，谢谢！

]]> http://www.36ria.com/2768/feed 11 制作jquery文字提示插件—jquery插件实战教程（1） http://www.36ria.com/2765 http://www.36ria.com/2765#comments Fri, 16 Jul 2010 15:13:54 +0000 明河共影 http://www.36ria.com/?p=2765 很多朋友向明河请教如何写jquery插件，今天在浏览tutorialzine时候有篇教程讲解如何写个jquery文字提示插件，这插件很简单，很适合用于讲解jquery插件机制，明河也借此抛砖引玉先讲解具体一个插件，这个插件名为：Colortip，然后在下篇教程讲解jquery插件机制。

效果如下图，鼠标滑过链接出现文字提示，提示框的背景颜色可以自由控制。

制作教程

一、功能讲解

  • 1、鼠标经过带有”title”属性的容器，出现title中的内容（一般是链接、图片）
  • 2、可以控制提示框的背景颜色

二、创建html结构

  1. <a href="http://www.36ria.com/2741" class="blue" title="推荐9个jquery手风琴菜单插件">推荐9个jquery手风琴菜单插件</a>

最重要的是title属性，此属性用于控制提示框出现的内容。
class=”blue”用于控制提示框的背景颜色。
当你第一次滑过该容器时，会创建如下提示框容器：

  1. <a class="blue colorTipContainer" href="http://www.36ria.com/2741">推荐9个jquery手风琴菜单插件 
  2.   <span class="colorTip" style="margin-left: -60px;">推荐9个jquery手风琴菜单插件
  3.  
  4.  <span class="pointyTipShadow"></span> 
  5.  
  6.  <span class="pointyTip"></span> 
  7.  
  8.  </span> 
  9. </a>

css部分的内容不是讲解关键，明河予以略过。

三、插件代码colortip-1.0-jquery.js

  1. (function($){
  2.     $.fn.colorTip = function(settings){
  3.  
  4.         var defaultSettings = {
  5.             //颜色
  6.             color        : 'yellow',
  7.             //延迟
  8.             timeout        : 500
  9.         }
  10.         //提示框的颜色
  11.         var supportedColors = ['red','green','blue','white','yellow','black'];
  12.        
  13.         /* 合并默认参数和用户自定义参数 */
  14.         settings = $.extend(defaultSettings,settings);
  15.        
  16.         return this.each(function(){
  17.  
  18.             var elem = $(this);
  19.            
  20.             // 如果该对象不包含title属性，直接予以返回
  21.             if(!elem.attr('title')) return true;
  22.            
  23.             // 实例化eventScheduler（定时器）           
  24.             var scheduleEvent = new eventScheduler();
  25.             //实例化Tip(提示类，产生、显示、隐藏)
  26.             var tip = new Tip(elem.attr('title'));
  27.  
  28.             // 产生提示框，并给提示框父容器添加样式
  29.            
  30.             elem.append(tip.generate()).addClass('colorTipContainer');
  31.  
  32.             // 检查提示框父容器是否有颜色样式
  33.            
  34.             var hasClass = false;
  35.             for(var i=0;i<supportedColors.length;i++)
  36.             {
  37.                 if(elem.hasClass(supportedColors[i])){
  38.                     hasClass = true;
  39.                     break;
  40.                 }
  41.             }
  42.            
  43.             // 如果没有，使用默认的颜色
  44.            
  45.             if(!hasClass){
  46.                 elem.addClass(settings.color);
  47.             }
  48.            
  49.             // 鼠标滑过提示框父容器时，显示提示框
  50.             // 鼠标移出，则隐藏
  51.            
  52.             elem.hover(function(){
  53.  
  54.                 tip.show();
  55.                
  56.                 //清理定时器
  57.                
  58.                 scheduleEvent.clear();
  59.  
  60.             },function(){
  61.  
  62.                 //启动定时器
  63.                
  64.                 scheduleEvent.set(function(){
  65.                     tip.hide();
  66.                 },settings.timeout);
  67.  
  68.             });
  69.            
  70.             //删除title属性
  71.             elem.removeAttr('title');
  72.         });
  73.        
  74.     }
  75.  
  76.  
  77.     /*
  78.     /    定时器类
  79.     */
  80.  
  81.     function eventScheduler(){}
  82.    
  83.     eventScheduler.prototype = {
  84.         set    : function (func,timeout){
  85.             //添加定时器
  86.             this.timer = setTimeout(func,timeout);
  87.         },
  88.         clear: function(){
  89.             //清理定时器
  90.             clearTimeout(this.timer);
  91.         }
  92.     }
  93.  
  94.  
  95.     /*
  96.     /    提示类
  97.     */
  98.  
  99.     function Tip(txt){
  100.         this.content = txt;
  101.         this.shown = false;
  102.     }
  103.    
  104.     Tip.prototype = {
  105.         generate: function(){
  106.             //产生提示框
  107.            
  108.             return this.tip || (this.tip = $('<span class="colorTip">'+this.content+
  109.                                              '<span class="pointyTipShadow"></span><span class="pointyTip"></span></span>'));
  110.         },
  111.         show: function(){
  112.             //显示提示框
  113.             if(this.shown) return;
  114.             this.tip.css('margin-left',-this.tip.outerWidth()/2).fadeIn('fast');
  115.             this.shown = true;
  116.         },
  117.         hide: function(){
  118.             //隐藏提示框
  119.             this.tip.fadeOut();
  120.             this.shown = false;
  121.         }
  122.     }
  123.    
  124. })(jQuery);

关键代码注释明河已经翻译了，插件的制作思路，明河将在接下来的教程详解。

四、jquery插件模板

jquery插件是有固定的模板的，你大概大部分的jquery插件源码，会发现都有一套固定模板。
模板如下：

  1. (function($){
  2.     $.fn.插件名= function(settings){
  3.                 //默认参数
  4.         var defaultSettings = {
  5.  
  6.         }
  7.        
  8.         /* 合并默认参数和用户自定义参数 */
  9.         settings = $.extend(defaultSettings,settings);
  10.        
  11.         return this.each(function(){
  12.  
  13.         });
  14.        
  15.     }
  16.    
  17. })(jQuery);

这是最基础的jquery插件结构，明河将在下一篇教程详解jquery的插件机制。

]]> http://www.36ria.com/2765/feed 2 推荐9个jquery手风琴菜单插件 http://www.36ria.com/2741 http://www.36ria.com/2741#comments Tue, 13 Jul 2010 09:46:33 +0000 明河共影 http://www.36ria.com/?p=2741 1、jQuery UI accordion

jqueryUI包中手风琴菜单，堪称经典，优势在于多样化的皮肤。

2、initMen3.1

非常简单的一个jquery手风琴菜单插件，缺点是样式有点丑。

3、Making Accordion Menu Using jQuery


你可以控制采用何种事件改变菜单内容，同时增加了菜单上图标的变化。

4、jQuery Accordion Menu


5、jQuery – Horizontal Accordion


横向手风琴菜单，这个插件明河要推荐下，很完整的API。

6、jQuery Examples – Horizontal Accordion


简单的横向手风琴效果。

7、Regular and Hover Accordion Menus

8、Slide Out and Drawer Effect

9、Javascript Accordion Menu Wizard


类似RIA之家的导航区域的效果，有趣的是作者还提供了几个flash菜单，有兴趣的朋友可以看下。

原文：http://www.1stwebdesigner.com/resources/jquery-accordion-menus-tutorials/

]]> http://www.36ria.com/2741/feed 3 再推荐5个jquery图片滚动插件 http://www.36ria.com/2698 http://www.36ria.com/2698#comments Wed, 07 Jul 2010 02:41:35 +0000 明河共影 http://www.36ria.com/?p=2698 关于jquery图片滚动插件，明河曾经有发过推荐文章：五个jquery图片滚动插件，今天再补充几个jquery图片滚动插件。

1、jCarousel

这款jquery图片滚动插件用的人很多，功能上颇为强大，你可以控制是水平滚动还是垂直滚动。

2、jCarousel Lite

这款插件优势在于小巧，只有2K的js，当然功能上会差些。

3、jQuery Carousel

更像一个幻灯片，你可以控制图片滑动方向。

4、jQuery Infinite Carousel

5、LoopedCarousel

想要把图片滚动应用到你的站点中，不可避免要对这些jquery图片滚动插件的样式进行重写，接下来来推荐几个漂亮的应用图片滚动的站点。

1、Branded07

2、Deluge Studios

3、Golf Working

4、Dazzle Cat

5、Bret Glassett

6、What Is XV

原文：http://www.1stwebdesigner.com/resources/jquery-carousel-plugins-tutorials/

]]> http://www.36ria.com/2698/feed 2 verticalTab — jquery竖型选项卡插件（明河作品） http://www.36ria.com/2613 http://www.36ria.com/2613#comments Sun, 27 Jun 2010 04:53:10 +0000 明河共影 http://www.36ria.com/?p=2613 水平选项卡我想大家见得多了，网上的此类的jquery插件也很多，但竖型选项卡方面的插件却非常少，其实竖型选项卡的应用场合也不少，比如RIA之家的首页的幻灯片部分，其实也可以算是竖型选项卡。明河花了几个晚上的时间，写了这个jquery竖型选项卡插件，我将其命名为：verticalTab。
完成了二个部分的功能：

  • 1、竖型选项卡用于内容层的切换
  • 2、竖型选项卡用于幻灯片

2010-06-28 V0.12 更新如下：

  • 补上size属性
  • 增加一个新的demo，这个demo主要演示verticalTab的灵活性

在用于幻灯片部分，明河特意写了个gird格子图片切换特效，加强幻灯片的华丽程度。

图片幻灯片样式上仿造的是迅雷首页的幻灯片，迅雷首页的幻灯片在效果上实在乏味可陈，于是明河加强图片切换效果。

内容层切换示例：


采用的是RIA之家文章下的竖型选项卡样式。

ajax内容层切换示例：


选项卡切换当然少不了ajax的应用，明河也制作了相应的demo。

0.12新增示例：


使用教程

一、内容层切换

请打开示例包中demo-36ria文件夹下的index.html浏览。
1、引入必要的js和css

  1. <script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
  2. <script type="text/javascript" src="../js/jquery.verticalTab.js"></script>
  3. <link href="../style/css/base.css" rel="stylesheet" type="text/css" />
  4. <link href="css/36ria.css" rel="stylesheet" type="text/css" />

示例包中还引入了jquery.easing.1.3.js这个动画缓动插件，并非是必须的。
2、构建类似如下的html结构

  1. <div class="mar-t-10 clearfix" id="ria-home">
  2.     <div class="l" id="ria-home-titles">
  3.         <ul>
  4.             <li>相关文章</li> 
  5.             <li>最新文章</li>
  6.             <li>最热文章</li>                                                                                            
  7.         </ul>                           
  8.     </div>
  9.     <div class="l" id="ria-home-contents">
  10.         <ul>
  11.             <li>
  12.                <ul class="post-title-list">
  13.                     <li>
  14.                         <a href="http://www.ria-home.com/2058">使用jquery制作仿Skype的动画按钮</a>
  15.                     </li>
  16.                     .......
  17.                     
  18.                 </ul>                                                                      
  19.             </li>    
  20.             <li>
  21.                <ul class="post-title-list">
  22.                     <li>
  23.                         <a href="http://www.ria-home.com/2058">使用jquery制作仿Skype的动画按钮</a>
  24.                     </li>
  25.                     .......
  26.                     
  27.                 </ul>       
  28.  
  29.             </li>
  30.             <li>
  31.                <ul class="post-title-list">
  32.                     <li>
  33.                         <a href="http://www.ria-home.com/2058">使用jquery制作仿Skype的动画按钮</a>
  34.                     </li>
  35.                     .......
  36.                     
  37.                 </ul> 
  38.             </li>
  39.         </ul>                           
  40.     </div>
  41. </div>

看似代码挺多的，其实结构很简单，#ria-home为总的容器，#ria-home-titles为选项卡标题容器，#ria-home-contents为选项卡内容容器，二者的子容器为一个ul为真正的内容容器。
3、初始化插件

  1. $("#ria-home").verticalTab({titlesApplyTo:"#ria-home-titles",
  2.                                   contentsApplyTo : "#ria-home-contents",
  3.                       currentTitleCls : "ria-home-current-title",
  4.                       animateType : "fade"});

说明下这里的几个参数：

  • titlesApplyTo ：为选项卡标题部分的容器对象名
  • contentsApplyTo : 为选项卡内容部分的容器对象名
  • currentTitleCls ：为当前的选项卡上标题的样式
  • animateType ：动画效果类型，默认为fade（滑动），这里设置为渐隐

二、竖型选项卡应用于幻灯片

请打开demo-xunlei的index.html浏览。

在这个demo中明河不仅仅演示了简单的幻灯片切换，还演示了verticalTab的一些关键的API，比如自动切换，时间延迟等。
插件的引入和html的创建与上一个例子没什么区别，明河不再累述，重点来看插件的调用和API的使用。
插件初始化，并获取插件API接口

  1. var VT = $("#xunlei-images-slide").verticalTab({titlesApplyTo:"#xunlei-images-slide-titles",
  2.                              contentsApplyTo : "#xunlei-images-slide-contents",
  3.                              currentTitleCls : "xunlei-images-slide-current-title",
  4.                              auto:true})
  5.                     .verticalTab("api");

留意与上一个demo的区别，在插件初始化结束后，加了个.verticalTab(“api”)获取verticalTab的API接口，然后赋值于VT。
1、设置自动切换幻灯片

  1. VT.setAuto(true | false);

2、获取幻灯片是否自动切换

  1. VT.auto

3、改变切换延迟时间

  1. VT.delay = XXXX;

4、改变选项卡切换事件

  1. VT.setChangeEvent("mouseover" | "click" | "dblclick");

会不会觉得切换效果太单调？接下来来看加强切换效果的幻灯片。

三、幻灯片gird格子特效应用

请打开demo-xunlei/gird-animate.html浏览。
1、引入gird-animate动画插件

  1. <script type="text/javascript" src="../js/yijs.GridAnimate.js"></script>

4个晚上写verticalTab，至少有3个晚上是在写这个动画效果类，目前实现的效果有6个：从上至下、从下至上、从左至右、从右至左、从左上角到右下角、随机格子，以后将加入更多效果。
2、实例化yijs.GridAnimate

  1. var GA = new yijs.GridAnimate({});

3、在verticalTab插件中增加这个gird动画

  1. var VT = $("#xunlei-images-slide").verticalTab({titlesApplyTo:"#xunlei-images-slide-titles",
  2.                              contentsApplyTo : "#xunlei-images-slide-contents",
  3.                              currentTitleCls : "xunlei-images-slide-current-title",
  4.                              animateType : "grid",
  5.                              animatePlugin : {
  6.                                  "grid" : GA
  7.                              }})
  8.               .verticalTab("api");

animateType 设置为grid，然后将GA赋值于animatePlugin["grid"]。

verticalTab的所有方法、属性、事件，明河下周将发个汇总表格。

关于verticalTab，如果你在使用过程遇到问题，或发现问题，都可以给明河留言，明河将不断改进这个插件，谢谢！

]]> http://www.36ria.com/2613/feed 27 精选10个jquery表格增强插件 http://www.36ria.com/2504 http://www.36ria.com/2504#comments Fri, 18 Jun 2010 07:46:32 +0000 明河共影 http://www.36ria.com/?p=2504 全面加强型

1、Flexigrid

最为人所熟悉的jquery表格增强插件，Flexigrid的风格接近ext的grid组件，虽然功能上有所不如，但已经够用了。

关于Flexigrid，明河曾经发过一篇文章，想要详细了解的请点击：flexigrid教程（一）-jquery最好的grid插件。

2、DataTables

DataTables功能上很接近Flexigrid，比Flexigrid好的一点在于其UI的可定制性强，使用的jquery UI的界面。

这二个插件的确很全面，但比较臃肿，很多时候我们并不需要这么多的功能，接下来介绍应用于特定方面的表格增强插件。

简单增强型

1、Ingrid

2、jQuery Grid Plugin

表格排序增强型

1、Tablesorter

这个插件颇有名气，用的人不少，让表格支持排序。

与之类似的还有下面这款插件

2、TableSort

明河更喜欢这一款的样式，功能上不输于Tablesorter。

树形表格增强型

以上的表格插件，都没办法产生树形的表格，接下来推荐二款这方面功能的表格插件

1、jQueryTreeTable

可即时编辑型

1、TableEditor

2、Zentable

可拆合型

1、Expand table rows with jQuery – jExpand plugin

原文：http://www.1stwebdesigner.com/resources/enhance-tables-functional-jquery-plugins/

]]> http://www.36ria.com/2504/feed 3 推荐五个jquery图片画廊插件 http://www.36ria.com/2376 http://www.36ria.com/2376#comments Fri, 04 Jun 2010 01:21:34 +0000 明河共影 http://www.36ria.com/?p=2376 关于jquery图片画廊/幻灯片插件，明河之前已经介绍非常多款的，像：

今天再给大家推荐几款图片画廊插件。

1、Pikachoose – lightweight Jquery Image Gallery plugin

 


效果还算不错，当然跟以前推荐的几个画廊插件还是有一些差距。
推荐指数：

2、Sliding Boxes and Captions with jQuery

 


此画廊有意思的地方在于图片滑动效果（貌似IE下无效，原因不明）。
推荐指数：

3、Creating a polaroid photo viewer with CSS3 and jQuery

 


这个效果非常不错，图片乱序叠加，还可以拖拉图片
推荐指数：

4、E2 Photo Gallery

 


这个插件很牛！独有的视图切换模式，完备的API，与各后台脚本交互的demo…..问题是它是收费的-_-!
推荐指数：

5、ImageFlow 0.9

 


非常牛的图片画廊！明河强烈推荐！
推荐指数：

]]> http://www.36ria.com/2376/feed 3 6个最好的jquery提示插件 http://www.36ria.com/2353 http://www.36ria.com/2353#comments Tue, 01 Jun 2010 00:54:31 +0000 明河共影 http://www.36ria.com/?p=2353 1、jQuery Tools / Tooltip

推荐指数：

相当不错的图片文字提示，可惜没动画效果。

2、jQuery Tooltip


推荐指数：

3、Yet Another JQuery Tooltip Plugin


这个插件相当全面，值得推荐。
推荐指数：

4、ChillTip – Chill Web Designs

推荐指数：

5、clueTip – flexible, enhanced tooltip

推荐指数：

6、qtip


推荐指数：
明河强烈推荐，非常好的一个插件，有很完备的API和说明文档。

]]> http://www.36ria.com/2353/feed 4 seriesComboBoxs — jquery多级联动插件（明河作品） http://www.36ria.com/2274 http://www.36ria.com/2274#comments Fri, 28 May 2010 10:15:01 +0000 明河共影 http://www.36ria.com/?p=2274 去年明河曾写了个多级联动的类：使用jquery实现ajax省、市、县三级联动，有朋友向偶反应bug不少，于是这二天重构了之前写的类，写成了一个jquery插件。

示例依旧演示了省市县联动，这次明河加上了国家，组成了四级联动，其实这个插件一样可以作用于类别等的联动，而且还是不限级数的。

由于seriesComboBoxs存在明显缺陷，明河重构了个新的联动插件，请点此查看。

2010-07-14 V0.2 更新如下：
  • 修正最后一个选择框依旧请求数据的问题
  • 修正了选择框重复加载的问题
2010-05-12 V0.11 更新如下：
  • 支持json、xml二种数据源
  • 增加了事件
  • 修正了原来类的几个大bug
  • 对API做了调整，增加了新的便利API

使用教程

1、导入地区数据库（mysql）

数据库文件为region.sql，此数据库来源于ecshop，明河不再使用旧的数据库，ecshop的这份数据库还是非常全的。

2、连接数据库

请打开get_region.php，找到：

  1. $hostname = 'localhost';// 数据库服务器
  2.     $username = 'root';        // 数据库用户名
  3.     $password = '123';        // 数据库密码
  4.     $dbname   = 'ld';            // 数据库名

按照本地服务器的情况，自行修改。

接下来以第一个最简单的例子讲解调用

3、引入jquery、seriesComboBoxs 还有css

  1. <script src="js/jquery-1.4.2.min.js"></script>
  2. <script src="js/jquery.seriesComboBoxs.js"></script>
  3.  
  4. <link href="style/css/base.css" rel="stylesheet" type="text/css" />
  5. <link href="style/css/demo.css" rel="stylesheet" type="text/css" />

创建四个选择框

  1. <table width="700" border="0" cellspacing="0" cellpadding="0" class="tab1">
  2.   <tr>
  3.       <td>国家</td>
  4.       <td><select  class="comboBox" id="country" name="country" width="100">
  5.             <option value="">请选择你的国家</option>
  6.         </select>
  7.    
  8.     </td>
  9.     <td>省份</td>
  10.     <td><select  class="comboBox" id="province" name="province" width="100">
  11.             <option value="">请选择你的省份</option>
  12.         </select>
  13.     </td>
  14.     <td>城市</td>
  15.     <td><select class="comboBox"  id="city" name="city" width="100" >
  16.             <option value="">请选择你的城市</option>
  17.         </select>
  18.     </td>
  19.     <td>区县</td>
  20.     <td><select class="comboBox" id="county" name="county" width="100"  >
  21.             <option value="">请选择你的区县</option>
  22.         </select>
  23.     </td>
  24.   </tr>
  25. </table>

4、初始化插件

  1. $.seriesComboBoxs({selects : ["#country","#province","#city","#county"],
  2.                         ajaxOptions : {"url" : "get_region.php"}     });

这里用到二个参数：

  • selects 数组，选择框对象名数组，插件会根据数组一直循环下去
  • ajaxOptions ajax配置，最关键的是url，即是后台获取数据的脚本路径

5、参数说明

参数名 数据类型 默认参数 说明
selects Array  

选择框对象数组

ajaxOptions Object

ajax配置
defaultParentId Number 0 默认父级id
defaultLoadSelectIndex Number 0 默认读取数据的选择框的索引值，指的是在selects数组的索引值
jsonField Object 前端处理后台返回的json数据时所处理的字段（采用默认的即可）
xmlField Object 前端处理后台返回的xml数据时所处理的字段（采用默认的即可）
listeners Object   事件监听

6、事件说明

  • render 在组件调用完成后触发
  • optionClick 当点击选择框项时触发
  • afterLoad 在读取完数据后触发

事件的使用请看第三个例子

  1. var ComboBox = $.seriesComboBoxs({selects : ["#province3","#city3","#county3"],
  2.                       ajaxOptions : {"url" : "get_region.php"},
  3.                       defaultParentId : 1,
  4.                       listeners : {
  5.                             render : function(){
  6.                                 $(".select-column:not(:first)").hide();
  7.                             },
  8.                             optionClick : function(index,$option,aSelect){
  9.                                 var _i = index + 1;
  10.                                 $(aSelect[_i]).parent(".select-column").show();
  11.                                
  12.                             } 
  13.                       }});

这个例子演示了只有你点击选择框的项后才显示子级的选择框

明河还准备了一个属性aSelectText，包含了选择框的值，这是一个数组

  1. $("#getText").click(function(){
  2.         alert(ComboBox.aSelectText.join(""));
  3.     })

返回合并后的字符串。

7、get_region.php关键代码说明

后台接受2二个参数：

  • parent_id ：父级的id
  • data_type ： 生成的数据类型（默认是json）

留意输出json时我有用到网上的一个函数JSON()，参见include/JSON.php
之所以使用自定义的函数，原因在于php的原生json函数没办法显示中文。
用法如下：

  1. while ($row = mysql_fetch_array($result)) {
  2.         $json[] = JSON($row);
  3.     }

有问题或发现bug可以在此页面留言，谢谢。

]]> http://www.36ria.com/2274/feed 43 shareList — jquery收藏&分享插件（明河作品） http://www.36ria.com/2217 http://www.36ria.com/2217#comments Tue, 25 May 2010 02:34:21 +0000 明河共影 http://www.36ria.com/?p=2217 国内很多第三方提供收藏&分享的站点，比如jiathis、addthis等，这些站点提供的插件虽然引用方便，但都有个问题，点击收藏&分享按钮后事先跳转到该第三方的站点，然后才转向真正的分享插件，而且分享列表上面还是这第三方的logo之类的，而效果又是千篇一律，因此明河就想写一个没有任何第三方logo和中转而且效果出众的收藏&分享插件，我将其命名为$.shareList。

由于有用到了ajax，请在服务器端启动

2010-06-17 版本：0.12 更新如下：

  1. 美化分享站点的图标
  2. 修正更改站点配置无效的问题

2010-06-03 版本：0.11 更新如下：

  1. 增加feerbook、diglog、抽屉三个分享站点
  2. 修正九点分享路径

使用教程

1、引入jquery和$.shareList，还有css

  1. <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
  2. <script type="text/javascript" src="js/jquery.shareList.js"></script>
  3.  
  4. <link href="style/css/base.css" rel="stylesheet" type="text/css" />
  5. <link href="style/css/shareList.css" rel="stylesheet" type="text/css" />

2、初始化插件

  1. $(function(){
  2.     $("#share").shareList();
  3. })

3、关于IE6与其他浏览器效果不同的说明

由于IE6无法支持png，尽管可以通过其他方式修正，但由于我会动画修改阴影的宽度和透明度，导致修正后的效果会出问题，所以加了个判断在IE6下，无法显示阴影。

4、shareListData.js文件说明

shareListData.js是一个json数据源，存放着所有的分享列表的数据，数据结果类似如下：

  1. {
  2.     "localName": "豆瓣",
  3.     "name": "douban",
  4.     "href" : "http://www.douban.com/recommend/?url={url}&title={title}"
  5. }
  • name 非常重要，分享站点的英文名
  • localName 中文名
  • href 链接，这里我使用了模板{url}页面链接，{title}页面标题

有需要的朋友可以自行添加。

5、分享站点图标说明

分享站点图标我整成了一张图片，请看shareList.png，第一列为收藏书签类站点，第二列为微博站点，第三列为SNS站点
如何修改图标呢
请看shareList.css

  1. .icon-facebook{background-position:-101px -242px !important;}

移动图片的背景。
class的类名是有规律的，“icon-”+“站点的英文名”

6、如何控制显示的分享站点及其顺序？

需要用到一个参数： shareSites
使用举例：

  1. $("#share").shareList({shareSites : ["9dian","sinaminiblog","renren","zhuaxia","xianguo"]
  2.                           });

shareSites参数是个数组，排在越前面，显示也是越前面，你可以自由控制显示顺序和显示的站点，站点的英文名可以看shareListData.js

7、API参数说明

参数名 数据类型 说明
shareSites Array

分享站点列表

比如：

shareSites : ["9dian","sinaminiblog","renren","zhuaxia","xianguo"]
getListAjaxOptions Object

获取分享站点列表的ajax配置

比如：

getListAjaxOptions : {
type: "GET",
url : "js/shareListData.js",
dataType : "json"
}

 
allowSroll Boolean 是否允许列表随鼠标滚动
showShadow Boolean 是否显示阴影，此参数在IE6下无效
shadowSrc String 阴影图片路径
preloadImgSrc String 预加载动画图片
speed Number 动画速度
style Object 列表容器样式
effect Object 效果设置（采用默认即可)
cls Object 样式名集合（采用默认即可)
tpl Object 模板（采用默认即可)

有发现任何bug或有任何问题，可以给明河留言，明河在此谢过了！
目前收藏分享站点还不够丰富，有没加入的站点，可以给明河留言

]]> http://www.36ria.com/2217/feed 81 推荐5个jquery/flash幻灯片 http://www.36ria.com/2025 http://www.36ria.com/2025#comments Wed, 19 May 2010 02:17:57 +0000 明河共影 http://www.36ria.com/?p=2025 关于图片滚动、图片幻灯片、图片画廊等图片切换方面的jquery插件和flash，明河已经介绍很多了，比如：

  1. 五个优秀的jquery图片画廊插件
  2. 五个jquery图片滚动插件
  3. 使用jquery制作带有缩略图的幻灯片 （明河作品）
  4. 使用jquery制作滑动幻灯片 （明河作品）
  5. flash幻灯片源代码合集（不断更新中）

使用jquery制作的图片幻灯片和图片滑动

1、Coin Slider

非常优秀一个jquery图片幻灯片插件，强烈推荐，切换效果媲美flash，关于这款插件，下次讲详细讲解，同时制作个示例包（作者网站只提供js下载）

2、Horinaja Slider

使用flash制作的图片幻灯片

1、Dynamic Flash Gallery

非常强悍的图片滑动效果，采用了异步获取图片的方式。

2、Simpleviewer

一样是异步获取图片数据，非常实用的图片画廊，美中不足的是右侧的大图部分切换效果比较一般。

3、The PieceMaker

有些小强悍的图片切换效果，图片会变成几个块翻转切换。

]]> http://www.36ria.com/2025/feed 2 divSlider — jquery滑动门插件（明河作品） http://www.36ria.com/2012 http://www.36ria.com/2012#comments Mon, 17 May 2010 09:35:13 +0000 明河共影 http://www.36ria.com/?p=2012 去年明河曾写过一个仿全型男的幻灯片滑动门类，但效果有bug，算法不够准确。

正好这次改版blog，就想把菜单做成可滑动的形式，就重构成新的jquery插件，我命名为：divSlider。

效果参见网站的首页上的菜单。

示例包内，我还制作了一个简单的图片滑动效果：

使用过程非常简单：

  1. $("#images").divSlider({itemWidth:300});

itemWidth:300即将列表的每一个li宽度设置为300，如果你不想限制层的宽度，删除这个参数。

下个版本将加入更为细致的API控制，这个测试版先放出来，有问题的可以给明河留言，欢迎反馈bug，谢谢。

]]> http://www.36ria.com/2012/feed 16