Zero Clipboard 的实现原理
Zero Clipboard 利用 Flash 进行复制，之前有 Clipboard Copy 解决方案，其利用的是一个隐藏的 Flash。但最新的 Flash Player 10 只允许在 Flash 上进行操作才能启动剪贴板。所以 Zero Clipboard 对此进行了改进，用了一个透明的 Flash ，让其漂浮在按钮之上，这样其实点击的不是按钮而是 Flash ，也就可以使用 Flash 的复制功能了。

Zero Clipboard 特点介绍：
兼容支持Flash 10
避免使用第三方浏览器插件（的Adobe Flash浏览器中的安全冲突）
无形的覆盖，无干扰，页面设计
支持CSS“悬停”和“活跃”状态
保留目标元素的“点击”，”mouseenter”和”mouseleave”的事件
供应回调函数“复制前”和“复制”
极轻的重量！ （7KB精缩）

首先下载 Zero Clipboard ，并解压缩。其中需要两个文件：ZeroClipboard.js 和 ZeroClipboard.swf ，将这两个文件放入到你的项目中。
点击下载：jquery.zclip.1.1.1

用法：

1.) 首先引入核心文件

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.zclip.js"></script>

2.) 在页面代码里写入功能模块，定义copy复制按钮元素属性信息

<script language="javascript">
$(document).ready(function(){

	$('a#copy-description').zclip({
		path:'js/ZeroClipboard.swf',
		copy:$('p#description').text()
	});

	// The link with ID "copy-description" will copy
	// the text of the paragraph with ID "description"


	$('a#copy-dynamic').zclip({
		path:'js/ZeroClipboard.swf',
		copy:function(){return $('input#dynamic').val();}
	});

	// The link with ID "copy-dynamic" will copy the current value
	// of a dynamically changing input with the ID "dynamic"

});
</script>

例一：

<a href="#" id="copy-description">点击复制效果预览</a>
<p id="description">文本源……</p>

例二：

<a href="#" id="copy-dynamic">点击复制效果预览:</a><input style="width:300px; margin-left:15px;" type="text" id="dynamic" value="Insert any text here." onfocus="if(this.value=='Insert any text here.'){this.value=''}" onblur="if(this.value==''){this.value='Insert any text here.'}" />

3.) 供应定制的回调函数。

<script language="javascript">
$(document).ready(function(){

    $("a#copy-callbacks").zclip({
        path:'js/ZeroClipboard.swf',
        copy:$('#callback-paragraph').text(),
        beforeCopy:function(){
            $('#callback-paragraph').css('background','yellow');
            $(this).css('color','orange');
        },
        afterCopy:function(){
            $('#callback-paragraph').css('background','green');
            $(this).css('color','purple');
            $(this).next('.check').show();
        }
    });

});
</script>

3.) 默认参数。

扩展介绍：
1.) 测试兼容IE6，IE7，IE8，FF 3.6，Chrome浏览器8，Safari 5的，歌剧11
2.) 适当的CSS特效：

/* zClip is a flash overlay, so it must provide */
/* the target element with "hover" and "active" classes */
/* to simulate native :hover and :active states. */
/* Be sure to write your CSS as follows for best results: */

/*大概意思就是说 ZeroClip是flash叠加……就是说flash叠加在了text文本上，其实显示文字可以根据css来定义*/
a:hover, a.hover {...}
a:active, a.active {...}

3.) ZeroClip的 显示/隐藏/移除

$('a.copy').zclip('show'); // 启用zClip所选元素

$('a.copy').zclip('hide'); // 隐藏zClip所选元素

$('a.copy').zclip('remove'); // 删除的zClip所选元素

在线演示：
1、http://help.mudbest.com/jquery/jquery_ZeroClipboard/demo1.html
2、http://help.mudbest.com/jquery/jquery_ZeroClipboard/demo2.html

至此，该插件使用方法已经介绍结束，对于使用者的开发者来说，剩下的扩展方面就要根据需求而定了。

首先包含主体的文件：

<script src="script/jquery.js" type="text/javascript"></script>
<script src="script/jquery.jcountdown1.3.js" type="text/javascript"></script>

然后在模板页面加上以下JQUERY代码

<script type="text/javascript">
$(document).ready(function() {
 
    $("#time").countdown({date:"july 1, 2011"}); //Just date
    $("#time").countdown({date:"july 1, 2011 18:00:00"}); //Date and Time (in 24 hour format)
 
    //More options
    $("#time").countdown({
        date: "july 1, 2011 19:24",
        onChange: function( event, timer ){
 
            /*
            Tips:
 
            event.target is DOM Element
            this is DOM element
            $(this) is jQuery Element
            timer is interval for countdown
 
            If a countdown should end early you could do:
 
            clearInterval( timer );
            $(this).trigger('complete');
            */
 
        },
        onComplete: function( event ){
 
            $(this).html("Completed");
        },
        minus: false //defaults to false anyway
        leadingZero: true
    });
});
</script>

在模板里增加一个ID。

<p id="time"></p>

例子CSS，可忽略。

p#time{
    color:#c21017;
    text-align: center;
}
p#time span{
    display:inline;
    color:#222222;
    font-size:0.8em;
}

配置里大概修改说明如下：

date: 'June 11, 2010', //Date to countdown to
 
updatetime: 1000, //Time to update timer (milliseconds)
 
//Replaces the following flags with date values
%{d} = day
%{h} = hour
%{m} = minutes
%{s} = seconds
 
//jquery.jcountdown1.3.js 主要修改在这里
htmlTemplate: "%{d} <span class="small">days</span> %{h} <span class="small">hours</span> %{m} <span class="small">mins</span> %{s} <span class="small">sec</span>"
 
//If countdown timer should go into minus values instead of 00:00:00:00 when countdown time has passed
minus: false
 
//Gets called each time the countdown timer updates
//Can access element with countdown timer on it, as well as the timer interval itself
onChange: function( event, timer ){}
 
//Gets called when countdown completes
onComplete: function( event ){} //Can access element with countdown timer on it
 
//Whether time should have a leading zero e.g 02 days 01 hours 09 seconds
leadingZero: falsecountdown1.3

JS时间处理部分代码一并带出：

var date = new Date();

//时间格式替换修改
var str = '2008-10-09 21:35:28';//PHP中对应的UNIX时间戳为1223559328
var new_str = str.replace(/:/g,'-');
new_str = new_str.replace(/ /g,'-');
var arr = new_str.split("-");
var datum = new Date(Date.UTC(arr[0],arr[1]-1,arr[2],arr[3]-8,arr[4],arr[5]));

//转换为英文时间格式
var dt = new Date();
var m=new Array("","Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Spt","Oct","Nov","Dec");
var w=new Array("Monday","Tuseday","Wednesday","Thursday","Friday","Saturday","Sunday");
var d=new Array("st","nd","rd","th");
mn=date.getMonth();
wn=date.getDay();
dn=date.getDate();

var dns;
if(((dn%10)<1) ||((dn%10)>3)){
	dns=d[3];
}else{
	dns=d[(dn%10)-1];
	if((dn==11)||(dn==12)){
	dns=d[3];
	}
}
document.write("<hr>"+m[mn]+" "+dn+dns+" " +w[wn-1]+" "+dt.getFullYear()+"<hr>");

首先需要在HTML页面加载JQEURY和idTabs的库。

<script type="text/javascript" src="http://img3.tieyou.com/js/jquery.idTabs.min.js"></script>

如果你细心的话，打开jquery.idTabs.min.js后你会发现在里面已经加载了JQUERY的latest类库了，这说明，这个插件是基于JQUERY的latest库编写的，如果使用就要引用
jquery-latest.min.js这个类库了，不过idTabs已经帮你引用进来了。

idTabs使用基本介绍如下：

<ul class="idTabs"> 
  <li><a href="#jquery">jQuery</a></li> 
  <li><a href="#official">Tabs 3</a></li> 
</ul> 
<div id="jquery">If you haven't checked out ...</div> 
<div id="official">idTabs is only a simple ...</div>

通常的使用方法如下：

<div id="usual1" class="usual"> 
  <ul> 
    <li><a class="selected" href="#tab1">Tab 1</a></li> 
    <li><a href="#tab2">Tab 2</a></li> 
    <li><a href="#tab3">Tab 3</a></li> 
  </ul> 
  <div id="tab1">This is tab 1.</div> 
  <div id="tab2">More content in tab 2.</div> 
  <div id="tab3">Tab 3 is always last!</div> 
</div> 
 
<script type="text/javascript"> 
  $("#usual1 ul").idTabs(); 
</script>

选择默认选项卡的示例如下：

<div id="usual2" class="usual"> 
  <ul> 
    <li><a href="#tabs1">Tab 1</a></li> 
    <li><a class="selected" href="#tabs2">Tab 2</a></li> 
    <li><a href="#tabs3">Tab 3</a></li> 
  </ul> 
  <div id="tabs1">This is tab 1.</div> 
  <div id="tabs2">More content in tab 2.</div> 
  <div id="tabs3">Tab 3 is always last!</div> 
</div> 
 
<script type="text/javascript"> 
  $("#usual2 ul").idTabs("tabs2"); 
</script>

更自由的使用方法如下：

<ul id="freedom" class="idTabs"> 
  <li>Freedom</li> 
  <li><a class="selected" href="#one">First</a></li> 
  <li><a href="#two">Second</a></li> 
  <li><a href="#three">Third</a></li> 
  <li><a href="#four">Fourth</a></li> 
</ul> 
 
<div class="tabContainer"> 
  <h3>Tab Container</h3> 
  <p id="one">This is my first tab.</p> 
  <p id="two">This is my second tab.</p> 
</div> 
 
<img id="three" src="jquery_logo.gif" alt="Even images can be a tab"> 
 
<span id="four">Message four over here!</span>

打破传统的列表的方法如下：

<div class="imagebox idTabs"> 
  <a class="selected" href="#img1">1</a> 
  <a href="#img2">2</a> 
  <a href="#img3">3</a> 
  <a href="#img4">4</a> 
  <img id="img1" src="http://www.sunsean.com/images/symbol/_brace.png"> 
  <img id="img2" src="http://www.sunsean.com/images/symbol/_lambda.png"> 
  <img id="img3" src="http://www.sunsean.com/images/symbol/_beta.png"> 
  <img id="img4" src="http://www.sunsean.com/images/symbol/_paren.png"> 
</div> 
 
<script type="text/javascript"> 
  $(".imagebox").idTabs("!mouseover"); 
</script>

带参数和URL的changing方法如下：

<div id="adv1" class="usual"> 
  <ul> 
    <li><a href="#t1">Tab 1</a></li> 
    <li><a class="selected" href="#t2">Tab 2</a></li> 
    <li><a href="#t3">Tab 3</a></li> 
  </ul> 
  <div id="t1">This is tab 1.</div> 
  <div id="t2">More content in tab 2.</div> 
  <div id="t3">Tab 3 is always last!</div> 
</div> 
 
<script type="text/javascript"> 
  var settings = { start:1, change:false }; 
  $("#adv1 ul").idTabs(settings,true); 
</script>

带渐隐效果的方法如下：

<div id="adv2"> 
  <ul> 
    <li><a class="selected" href="#ani1">1</a></li> 
    <li><a href="#ani2">2</a></li> 
    <li class="split"></li> 
    <li><a href="#ani3">3</a></li> 
    <li><a href="#ani4">4</a></li> 
  </ul> 
  <span> 
    <p style="display: block; opacity: 0.266035;" id="ani1">Click on the tabs to see a nice fade.</p> 
    <p id="ani2">You're not impressed?</p> 
    <p id="ani3">But it's so cool... in a nerdy way.</p> 
    <p id="ani4">Download idTabs and have your cake. You can eat it too.</p> 
  </span> 
</div> 
 
<script type="text/javascript"> 
  $("#adv2").idTabs(function(id,list,set){ 
    $("a",set).removeClass("selected") 
    .filter("[href='"+id+"']",set).addClass("selected"); 
    for(i in list) 
      $(list[i]).hide(); 
    $(id).fadeIn(); 
    return false; 
  }); 
</script>

自定义功能的方法如下：

<span id="adv3"> 
  <a class="selected" href="#cake">Cake</a> vs <a href="#pie">Pie</a> 
  <p id="cake">Cake is great</p> 
  <p id="pie">So is pie</p> 
  <div id="message">It's so delicous and moist!</div> 
</span> 
 
<script type="text/javascript"> 
  $("#adv3").idTabs(function(id){ 
    switch(id){ 
      case "#cake": $("#message").html("It's so delicous and moist!"); break; 
      case "#pie":  $("#message").html("Just the way mom makes it."); break; 
    } return true; 
  }); 
</script>

以上idTabs官方的使用方法都已列出。

以下是今天需求所编写的：

<div id="idTableAjax">
<div class="NavBox">
	<ul class="idTabs">
    	<li><a href="#shanghai" class="selected">上海</a></li>
    	<li><a href="#beijing">北京</a></li>
    	<li><a href="#tianjing">天津</a></li>
    	<li><a href="#guangzhou">广州</a></li>
    	<li><a href="#shenzhen">深圳</a></li>
    	<li><a href="#nanjing">南京</a></li>
    	<li><a href="#suzhou">苏州</a></li>
    	<li><a href="#hangzhou">杭州</a></li>
    	<li><a href="#wuxi">无锡</a></li>
    	<li><a href="#wuhan">武汉</a></li>
    	<li><a href="#changsha">长沙</a></li>
    	<li><a href="#qingdao">青岛</a></li>
    	<li><a href="#jinan">济南</a></li>
    	<li><a href="#chongqing">重庆</a></li>
    	<li><a href="#chengdu">成都</a></li>
    	<li><a href="#xian">西安</a></li>
    	<li><a href="#xiamen">厦门</a></li>
    	<li><a href="#hainan">海南</a></li>
    	<li><a href="#dalian">大连</a></li>
    	<li><a href="#zhengzhou">郑州</a></li>
    	<li><a href="#shenan">沈阳</a></li>
    </ul>
</div>
<div class="wrap">

    <div id="shanghai"></div>
    
    <div id="beijing"></div>
    
    <div id="tianjing"></div>
    
    <div id="guangzhou"></div>
    
    <div id="shenzhen"></div>
    
    <div id="nanjing"></div>
    
    <div id="suzhou"></div>
    
    <div id="hangzhou"></div>
    
    <div id="wuxi"></div>
    
 	<div id="wuhan"></div>
    
    <div id="changsha"></div>
    
    <div id="qingdao"></div>
    
    <div id="jinan"></div>
    
    <div id="chongqing"></div>
    
    <div id="chengdu"></div>
    
    <div id="xian"></div>
    
    <div id="xiamen"></div>
    
    <div id="hainan"></div>
    
    <div id="dalian"></div>
    
    <div id="zhengzhou"></div>
    
    <div id="shenan"></div>
</div>

</div>


<script type="text/javascript" language="javascript">
/**
* str 城市名
* type 类型
*/
function tableAjax(str,htmlId,message,type){
	var params = {};
	params['cityname'] = str;
	if(str == ''){
		return ;
	}
	
	$.ajax({
		url:"http://www.tieyou.com/index.php?param=/ajax/complexHotelSpecial",//AJAX地址
		type:'get',//提交方式
		dataType:'html', //返回数据格式
		data:params,//参数以及值
		timeout:1000, //超时时间
		beforeSend:function(){
			$('#'+htmlId).html(message);
			//表单提交的过程，加载中....	
		},

		success:function(data){
			$('#'+htmlId).html(data);
			//$('#beijing').html(data);
		},
		error:function(data) {
			//错误事件处理
		},
		complete:function(data) {
			//最后相应事件处理
		}		
		});
}

//根据点击的事件自动加载对应的AJAX
  $("#idTableAjax").idTabs(function(id,list,set){ 
	if(id != ''){
		//正则匹配id
		var reg = new RegExp(/^#(.*?)$/gi);
		//获取id
		if(reg.test(id))
		{
			//获取html值
			var str = this.innerHTML;
			//获取过滤后的ID参数
			var htmlId = RegExp.$1;
			//设定message状态文本
		
			//判断是否存在这个ID
			if(htmlId != '' && str != ''){
				//alert(htmlId);
				tableAjax(str,htmlId);
			}
		} 	
	}
 
    $("a",set).removeClass("selected") 
    .filter("[href='"+id+"']",set).addClass("selected"); 
	
    for(i in list){
		//由于正则替换后，原来的选项卡数组里会产生"#"这样的字符串，过滤掉这些字符串
		if(list[i] != "#"){
			//console.log(list);
			$(list[i]).hide();
		}
	}
    $(id).fadeIn(); 
    return false; 
  }); 
</script>

到此结束。

页面ajax.php

<?php
//首先定义一个全局变量用于AJAX跨域返回值获取
$strJsonCallBack = $_REQUEST["jsoncallback"];
//定义一个测试数组
array['data'] = array('测试','再测试');
//再将数组进行JSON格式化，并在最前面加上刚刚定义的AJAX跨域返回值的标示
echo $strJsonCallBack."(".json_encode(array['data']).")";
exit;
?>

页面index.html

<!--引入Jquery-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
//访问JSON服务端返回值
var url = 'http://www.mudbest.com/ajax.php'; 
//&jsoncallback用于跨域获取的标示
$.getJSON(url+'&jsoncallback=?', {},function(data){
        //获取返回的JSON字符串
        data = data.data;
  }
);
</script>

<!-- Dependencies -->
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.ui.draggable.js" type="text/javascript"></script>
<!-- Core files -->
<script src="jquery.alerts.js" type="text/javascript"></script>
<link href="jquery.alerts.css" rel="stylesheet" type="text/css" />

注意其中jquery.ui.draggable.js是用来实现拖拉的，如不需要这个功能不就不用引用。在目前最近的Jquery1.42下应用引用：

<script src="Scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-1.8.5.custom.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.alerts.js" type="text/javascript"></script>   
<link href="Content/Style/jquery.alerts.css" rel="stylesheet" type="text/css" />

主要方法有

jAlert(message, [title, callback]) 创建一个alert
jConfirm(message, [title, callback]) 创建一个确认allert,支持callback
jPrompt(message, [value, title, callback]) 创建一个提示框让用户输入值，支持callback如果你有提供

今天所用到的CODE：

JS部分

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>test</title>
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.ui.draggable.js" type="text/javascript"></script>
<script src="jquery.alerts.js" type="text/javascript"></script>
<link href="jquery.alerts.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
     $(document).ready(function () {
        
		 $("#btnAlert").click(function ()
           { jAlert('Pushed the alert button', 'Alert Dialog'); });
        
		
		 $("#btnPrompt").click(function () {
            jPrompt('Type some value:', '', 'Prompt Dialog', function (typedValue) {
                  if (typedValue) {
                      jAlert('You typed the following ' + typedValue);
                   }
             });
			 
         });
		 
	$("#confirm_button").click( function() {
		jConfirm('上传完成，是否继续上传', '操作提示', function(r) {
			if (r==false){
				jAlert('请完善文档相关资料', '操作提示',function(s) {
					if (s==true){
					top.location = "/Member-Users-Mydoc-T-C.html";
					}
				})
			}
		});
	});
});   
	  
</script>
</head>

HTML部分：

<body>
<div>
<form id="form1" runat="server">
<input type="button" value="Alert Me" id="btnAlert" />
<input type="button" value="Prompt Me" id="btnPrompt" />
<input type="button" value="Pss" id="confirm_button" />
</form>
</div>
</body>
</html>

有3个范例，其中一个alert效果图如下：

实例demo:
http://help.mudbest.com/jquery/jquery-alert/index_demo1.html
http://help.mudbest.com/jquery/jquery-alert/index_demo2.html

插件完整包：
jquery-alert

插件的核心思想就是把所有的验证条件及验证提示信息绑定到每个表单元素，让验证代码在执行时只是核对表单下各元素的值是否跟绑定的验证条件相符，这样你可以随便添加或者去掉任一表单元素而不必修改验证代码，从而使仅用一行代码去搞定整站的表单验证的梦想成为现实！

功能介绍：
1、支持一个页面多表单的检测。例如你给页面上的各form绑定同样的class名称“demoform”，只需在页面上写上一句 $(“.demoform”).Validform()，各表单便会独立检测；
2、两种信息提示效果，一个是元素右侧出现提示信息，一个是弹出信息框。另外还附加了$.Showmsg()、$.Hidemsg()全局弹出/关闭信息框方法以便整站有一个统一的信息提示效果；
3、指定表单下任一元素在单击时触发表单提交事件；
4、支持ajax提交表单数据，也支持ajax实时反馈验证结果（如常见的用户注册表单下的用户名检测）；
5、支持开启网速慢时的二次提交防御（有时连续的点击提交表单按钮会产生多次的表单提交结果）；
6、可检测多个文本框内容是否一致（例如常见的两次密码输入确认）；
7、囊括11种常见的格式验证形式。

使用方法：

$(".demoform").Validform({//指定具体参数，实现更多功能;
	btnSubmit:".btn_sub",
	tiptype:2,
	postonce:true,
	ajaxurl:"ajax_post.php",
        callback:function(data){            
            //这里执行回调操作;
        }
});

参数说明： 【所有参数均为可选项】
○ 必须是表单对象执行Validform方法，示例中“.demoform”就是绑定在form元素上的class名称；
○ btnSubmit：指定表单下的哪一个按钮触发表单提交事件，如果表单下有submit按钮可以省略。示例中“.btn_sub”是该表单下要绑定点击提交表单事件的按钮，程序会在btnSubmit所在表单下查找该对象;
○ tiptype：指定提示效果，可选值 1 | 2, 默认为1。 1=>弹出提示框,2=>表单元素右侧提示；
○ postonce：指定是否开启网速慢时的二次提交防御，true开启，不指定则默认关闭；
○ ajaxurl：指定处理ajax表单数据的后台文件，注意处理完数据输出相应反馈信息，这个页面输出的内容就是表单提交后前台页面所看到的反馈信息。
○ callback：在使用ajax提交表单数据时，数据提交后的回调函数。返回数据data是json格式，{“info”:”demo info”,”status”:”y”}，info: 输出提示信息，status: 返回提交数据的状态,是否提交成功，如可以用”y”表示提交成功，”n”表示提交失败，在ajax_post.php文件返回数据里自定字符，主要用在callback函数里根据该值执行相应的回调操作。你也可以在ajax_post.php文件返回更多信息在这里获取，进行相应操作；

怎样给表单元素绑定验证类型？

示例代码：

<!--ajax实时验证用户名-->
<input type="text" value="" name="name" datatype="s5-16" ajaxurl="valid.php" nullmsg="请输入用户名！" errormsg="昵称至少5个字符,最多16个字符！" />
 
<!--密码-->
<input type="password" value="" name="userpassword" datatype="*6-15" errormsg="密码范围在6~15位之间,不能使用空格！" />
<!--确认密码-->
<input type="password" value="" name="userpassword2" datatype="*" recheck="userpassword" errormsg="您两次输入的账号密码不一致！" />
 
<!--默认提示文字-->
<textarea tip="请在这里输入您的意见。" errormsg="很感谢您花费宝贵时间给我们提供反馈，请填写有效内容！"  datatype="s" altercss="gray" class="gray" name="msg" value="">请在这里输入您的意见。</textarea>
 
<!--单选按钮-->
<input type="radio" value="1" name="gender" id="male" datatype="radio" errormsg="请选择性别！" /><label for="male">男</label>
<input type="radio" value="2" name="gender" id="female" /><label for="female">女</label>
 
<!--复选框-->
<input name="shoppingsite2" id="shoppingsite21" type="checkbox"  value="1" datatype="checkbox" errormsg="请选择您常去的购物网站！" /><label for="shoppingsite21">淘宝网</label>
<input name="shoppingsite2" id="shoppingsite22" type="checkbox"  value="2" /><label for="shoppingsite22">当当网</label>
 
<!--下拉框-->
<select name="province" id="province" datatype="select" errormsg="请选择省份！" ><option value="">--请选择省份--</option><option value="1">江西省</option></select>

说明：

凡要验证格式的元素均需添加datatype属性，datatype可选值目前有11类，用来指定不同的验证格式【如果还不能满足您的验证需求，可以自行在regcheck方法中添加】。

datatype：* | *6-16 | n | s | s6-18 | p | m | e | radio | checkbox | select
*：检测是否有输入，可以输入任何字符，不留空即可通过验证；
*6-16：检测是否为6到16位任意字符；
n：数字类型；
s：字符串类型；
s6-18：6到18位字符串；
p：验证是否为邮政编码；
m：手机号码格式；
e：email格式；
radio：如果要验证的元素为单选框，datatype设置为radio；
checkbox：如果要验证的元素为复选框，datatype设置为checkbox；
select：如果要验证的元素为下拉框，datatype设置为select。

注意：radio，checkbox，select的value值为空时不能通过检测，要非空值才能通过。radio和checkbox元素只需给该组的第一个元素绑定datatype属性即可，请参看上面的示例代码。

其他的附加属性：

nullmsg：是指定没有填入内容时出现的提示信息，不指定默认是“请填入信息！”，另外当datatype为radio、checkbox或select时，因为这三种类型只要为空值就表示出错，提示errormsg所指定信息，所以这三类不需要绑定该属性；
errormsg：是指定验证格式不符时出现的提示信息，不指定默认是“请输入正确信息！”；
recheck：是用来指定两个表单元素值一致性检测的另外一个对象，赋给它另外一个对象的name属性值即可；
tip：是指定表单元素的提示信息;指定后该元素会有focus时提示信息消去，没有输入内容blur时出现提示信息的效果，请参看demo页的“备注”效果；
altercss：是指定有tip属性的元素默认提示文字显示时的样式，当该元素focus时程序会把这个样式去掉，blur时如果值为空或者跟提示文字一样则再加上该样式；
ajaxurl：指定ajax实时验证的后台文件路径，给需要后台数据库验证信息的对象绑定该属性。注意该文件输出的内容就是前台显示的验证出错的反馈信息，如果验证通过请输出小写字母”y”。

演示地址：Validform-beta3.0演示
下载地址：Validform-beta3.0下载

$(".container").hScrollPane({
	mover:".press"
});

功能介绍：
1、支持滚动内容时的滑动效果；
2、支持鼠标拖动效果及滑轮滚动效果；
3、拖动滚动条时可选择变换样式，实现高仿真滚动条效果；
4、可限定滚动条的最小宽度，默认滚动条宽度适应滚动内容的长短；
5、支持是否显示左右箭头。

使用方法:

$(".container").hScrollPane({
	mover:".press", //必需项;
	moverW:function(){return $(".press").width();}(),
	handleMinWidth:300, 
	showArrow:true, 
	dragable:false, 
	handleCssAlter:"draghandlealter",
	easing:true,
	mousewheel:{bind:true,moveLength:500} 
});

参数说明：
○ “.container”是需要添加滚动条的对象，该对象要包含一个被移动的对象。滚动条会append到该对象后面。如下面的html结构：

<div class="container">
	<div class="press">
             <p>致力于提供专业的各类网站开发服务；极富视觉享受的平面及动画设计制作服务；高效益的网站重构服务。我们是一群追求技术创造价值的青年，有着丰富的行业经验。</p>
        </div>
        <!--滚动条会append到这里-->
</div>

“.container”的position需要设置为relative或absolute；“.press”是被移动的对象，他的position属性需设置为absolute，因为脚本需要通过改变它的left值来实现内容滚动效果。给“.container”绑定脚本后，页面上所有的“.container”对象都能实现滚动条效果；
○ mover：必需项。指定container对象下的哪个元素需要滚动位置；
○ moverW：可选项。传入水平滚动对象的长度值，不传入的话默认直接获取mover的宽度值。对于滚动对象为li列表，而li又设置了margin-right值，要让滚动条滚动到最后时不出现多于的空白，可以指定该值，具体示例请参看demo页中的最后一个示例；
○ handleMinWidth：可选项。指定滚动条的最小宽度,要固定滚动条的宽度请在css中设定滚动条的width值（如width:28px!important;），不传入则不设定最小宽度，默认滚动条宽度是根据滚动内容的长短计算；
○ showArrow：可选项。指定是否显示左右箭头，默认不显示 ；
○ dragable：可选项。指定是否要支持拖动效果，默认拖动内容对象有滚动效果；
○ handleCssAlter：可选项。传入拖动鼠标时要给滚动条添加的class名，不传入该参数则滚动条不会有变化效果；
○ easing：可选项。滚动内容时是否需要滑动效果,默认有滑动效果；
○ mousewheel：可选项。mousewheel: bind->’true’,绑定mousewheel事件; ->’false’,不绑定mousewheel事件；moveLength是指定鼠标滚动一次移动的距离,默认值：{bind:true,moveLength:300}，例如想改变每次滑轮滑动内容移动的距离，该参数可以这样写：mousewheel:{moveLength:600}，注意该值也是点击drag bar时内容的移动距离；

演示地址：Jquery水平滚动演示
下载地址：Jquery水平滚动下载