Ajax表单提交插件jquery form

jQuery Form插件是一个优秀的Ajax表单插件，我们可以非常容易的使用它处理表单控件的值，清空和复位表单控件，附件上传，以及完成Ajax表单提交。jQuery Form有两个核心方法ajaxForm()和ajaxSubmit()，本文我们重点介绍ajaxSubmit()的应用。

在线演示：http://www.helloweba.com/demo/ajaxsubmit/

下载地址：http://www.helloweba.com/demo/downzip/ajaxsubmit.zip

HTML

首先我们载入jquery库和jquery.form.js插件。jquery.form.js插件的官网地址：http://www.malsup.com/jquery/form/ 

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

以上代码完成了表单提交前的验证以及提交后的处理。表单数据提交到submit.php后，我们可以根据实际情况通过submit.php检测数据、将数据写入数据库，返回操作结果等等操作，本文不再列出代码。

ajaxSubmit()选项设置

ajaxSubmit()提供了丰富的选项设置，我们根据使用的可能性大小进行列表，以供参考。

属性 描述
url Ajax请求将要提交到该url，默认是表单的action属性值
type 指定提交表单数据的方法（method）：“GET”或“POST”。默认值：表单的method属性值（如果没有找到默认为“GET”）。
dataType 期望返回的数据类型。null、“xml”、“script”或者“json”其中之一。dataType提供一种方法，它规定了怎样处理服务器的响应。这个被直接地反映到jQuery.httpData方法中去。下面的值被支持：
‘xml’：如果dataType == ‘xml’，将把服务器响应作为XML来对待。同时，如果“success”回调方法被指定， 将传回responseXML值。
‘json’：如果dataType == ‘json’， 服务器响应将被求值，并传递到“success”回调方法，如果它被指定的话。。
‘script’：如果dataType == ‘script’， 服务器响应将求值成纯文本。。
默认值：null（服务器返回responseText值）
target 指明页面中由服务器响应进行更新的元素。元素的值可能被指定为一个jQuery选择器字符串，一个jQuery对象，或者一个DOM元素。
默认值：null。
beforeSubmit 表单提交前被调用的回调函数。“beforeSubmit”回调函数作为一个钩子（hook），被提供来运行预提交逻辑或者校验表单数据。如果“beforeSubmit”回调函数返回false，那么表单将不被提交。“beforeSubmit”回调函数带三个调用参数：数组形式的表单数据，jQuery表单对象，以及传入ajaxForm/ajaxSubmit中的Options对象。
默认值：null
success 表单成功提交后调用的回调函数。如果提供“success”回调函数，当从服务器返回响应后它被调用。然后由dataType选项值决定传回responseText还是responseXML的值。
默认值：null
clearForm 表示如果表单提交成功是否清除表单数据。默认值：null
resetForm 表示如果表单提交成功是否进行重置。默认值: null

jquery.form插件还提供了formToArray()、formSerialize()、fieldSerialize()、fieldValue()、clearForm()、clearFields() 和 resetForm()等方法。通常我们可以使用表单验证插件和jquery.form插件一起使用，效果更好。 

<form id="my_form" action="submit.php" method="post">  
   <p>姓名：<input type="text" name="uname" id="uname" class="input"></p> 
   <p>性别：<input type="radio" name="sex" value="1" checked> 男 <input type="radio"  
   name="sex" value="2"> 女 </p> 
   <p>年龄：<input type="text" name="age" id="age" class="input" style="width:50px"></p> 
   <p style="margin-left:30px"><input type="submit" class="btn" value="提交"> 
   <span id="msg"></span></p> 
</form> 
<div id="output"></div>

表单中，要求输入姓名、性别和年龄，然后提交到submit.php处理，通常情况下，点击“提交”按钮后，页面会转到submit.php处理表单数据，而我们使用jquery.form插件后，页面并不会跳转，直接完成了一个ajax交互。

jQuery

我们很方便的调用jquery.form插件，利用ajaxSubmit()使得整个表单的ajax提交过程变得非常的简单。

$(function(){ 
    var options = {  
        beforeSubmit:  showRequest,  //提交前处理 
        success:       showResponse,  //处理完成 
        resetForm: true,  
        dataType:  'json'  
    };  
  
    $('#my_form').submit(function() {  
        $(this).ajaxSubmit(options);  
    });  
}); 
 
function showRequest(formData, jqForm, options) {  
    var uname = $("#uname").val(); 
    if(uname==""){ 
        $("#msg").html("姓名不能为空！"); 
        return false; 
    } 
     
    var age = $("#age").val(); 
    if(age==""){ 
        $("#msg").html("年龄不能为空！"); 
        return false; 
    } 
    $("#msg").html("正在提交..."); 
     
     
    return true;  
}  
  
function showResponse(responseText, statusText)  {  
    $("#msg").html('提交成功'); 
    var sex = responseText.sex==1?"男":"女"; 
    $("#output").html("姓名："+responseText.uname+" 性别："+sex+" 年龄："+responseText.age); 
}  

以上代码完成了表单提交前的验证以及提交后的处理。表单数据提交到submit.php后，我们可以根据实际情况通过submit.php检测数据、将数据写入数据库，返回操作结果等等操作，本文不再列出代码。

ajaxSubmit()选项设置

ajaxSubmit()提供了丰富的选项设置，我们根据使用的可能性大小进行列表，以供参考。

属性 描述
url Ajax请求将要提交到该url，默认是表单的action属性值
type 指定提交表单数据的方法（method）：“GET”或“POST”。默认值：表单的method属性值（如果没有找到默认为“GET”）。
dataType 期望返回的数据类型。null、“xml”、“script”或者“json”其中之一。dataType提供一种方法，它规定了怎样处理服务器的响应。这个被直接地反映到jQuery.httpData方法中去。下面的值被支持：
‘xml’：如果dataType == ‘xml’，将把服务器响应作为XML来对待。同时，如果“success”回调方法被指定， 将传回responseXML值。
‘json’：如果dataType == ‘json’， 服务器响应将被求值，并传递到“success”回调方法，如果它被指定的话。。
‘script’：如果dataType == ‘script’， 服务器响应将求值成纯文本。。
默认值：null（服务器返回responseText值）
target 指明页面中由服务器响应进行更新的元素。元素的值可能被指定为一个jQuery选择器字符串，一个jQuery对象，或者一个DOM元素。
默认值：null。
beforeSubmit 表单提交前被调用的回调函数。“beforeSubmit”回调函数作为一个钩子（hook），被提供来运行预提交逻辑或者校验表单数据。如果“beforeSubmit”回调函数返回false，那么表单将不被提交。“beforeSubmit”回调函数带三个调用参数：数组形式的表单数据，jQuery表单对象，以及传入ajaxForm/ajaxSubmit中的Options对象。
默认值：null
success 表单成功提交后调用的回调函数。如果提供“success”回调函数，当从服务器返回响应后它被调用。然后由dataType选项值决定传回responseText还是responseXML的值。
默认值：null
clearForm 表示如果表单提交成功是否清除表单数据。默认值：null
resetForm 表示如果表单提交成功是否进行重置。默认值: null

jquery.form插件还提供了formToArray()、formSerialize()、fieldSerialize()、fieldValue()、clearForm()、clearFields() 和 resetForm()等方法。通常我们可以使用表单验证插件和jquery.form插件一起使用，效果更好。

jQuery ui页面全屏滚动fullPage.js插件页面滚动时图文动画演示

如今我们经常能见到全屏网站，尤其是国外网站。

这些网站用几幅很大的图片或色块做背景，再添加一些简单的内容，显得格外的高端大气上档次。

比如
iPhone 5C 的介绍页面（查看），QQ浏览器的官网站（查看）。

如果你也希望你的网站能设计成全屏的，显得更上档次，你可以试试
fullPage.js。 

fullPage.js 是一个基于 jQuery 的插件，它能够很方便、很轻松的制作出全屏网站。

主要功能有： 

•支持鼠标滚动 

•支持前进后退和键盘控制 

•多个回调函数

•支持手机、平板触摸事件 

查看演示：http://www.dowebok.com/demo/2014/77/

下载地址：http://www.oschina.net/p/fullpage-js/similar_projects

juery有方向性的遮罩效果

<!DOCTYPE HTML>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title>label</title>
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
</head>
<body>
  <div id="main">
  
    <div class="items">
      <div class="img">
        <img src="http://sandbox.runjs.cn/uploads/rs/246/t7vul5gq/label_1.jpg" width="216" height="300">
        <div class="desc">这货是鸣人、这货是鸣人、这货是鸣人、这货是鸣人、这货是鸣人、这货是鸣人、这货是鸣人、</div>
      </div>
      <div class="title">鸣人</div>
    </div>
    
    <div class="items">
      <div class="img">
        <img src="http://sandbox.runjs.cn/uploads/rs/246/t7vul5gq/label_2.jpg" width="216" height="300">
        <div class="desc">这货是鸣人他爹、这货是鸣人他爹、这货是鸣人他爹、这货是鸣人他爹、这货是鸣人他爹、</div>
      </div>
      <div class="title">鸣人他爹</div>
    </div>
    
    <div class="items">
      <div class="img">
        <img src="http://sandbox.runjs.cn/uploads/rs/246/t7vul5gq/label_3.jpg" width="216" height="300">
        <div class="desc">这货是我爱罗、这货是我爱罗、这货是我爱罗、这货是我爱罗、这货是我爱罗、</div>
      </div>
      <div class="title">我爱罗</div>
    </div>
    
    <div class="items">
      <div class="img">
        <img src="http://sandbox.runjs.cn/uploads/rs/246/t7vul5gq/label_4.jpg" width="216" height="300">
        <div class="desc">这货是斑、这货是斑、这货是斑、这货是斑、这货是斑、这货是斑、这货是斑、</div>
      </div>
      <div class="title">斑</div>
    </div>
  
    <div class="items">
      <div class="img">
        <img src="http://sandbox.runjs.cn/uploads/rs/246/t7vul5gq/label_1.jpg" width="216" height="300">
        <div class="desc">这货是鸣人、这货是鸣人、这货是鸣人、这货是鸣人、这货是鸣人、这货是鸣人、这货是鸣人、</div>
      </div>
      <div class="title">鸣人</div>
    </div>
    
    <div class="items">
      <div class="img">
        <img src="http://sandbox.runjs.cn/uploads/rs/246/t7vul5gq/label_2.jpg" width="216" height="300">
        <div class="desc">这货是鸣人他爹、这货是鸣人他爹、这货是鸣人他爹、这货是鸣人他爹、这货是鸣人他爹、</div>
      </div>
      <div class="title">鸣人他爹</div>
    </div>
    
    <div class="items">
      <div class="img">
        <img src="http://sandbox.runjs.cn/uploads/rs/246/t7vul5gq/label_3.jpg" width="216" height="300">
        <div class="desc">这货是我爱罗、这货是我爱罗、这货是我爱罗、这货是我爱罗、这货是我爱罗、</div>
      </div>
      <div class="title">我爱罗</div>
    </div>
    
    <div class="items">
      <div class="img">
        <img src="http://sandbox.runjs.cn/uploads/rs/246/t7vul5gq/label_4.jpg" width="216" height="300">
        <div class="desc">这货是斑、这货是斑、这货是斑、这货是斑、这货是斑、这货是斑、这货是斑、</div>
      </div>
      <div class="title">斑</div>
    </div>
  
  </div>
</body>
</html>
    	<style>*{
	margin:0px;
	padding:0px;
	font:12px/2 微软雅黑;
}
#main{
	width:960px;
	margin:20px auto;
}
.items{
	width:216px;
	border:1px solid #dcdcdc;
	overflow:hidden;
	float:left;
	margin:15px 15px 0 0;
	background-color:#fff;
}
.items .img{
	height:300px;
	overflow:hidden;
	position:relative;
}
.items .desc{
	height:270px;
	width:186px;
	padding:15px;
	position:absolute;
	top:-300px;
	left:0px;
	color:#fff;
	background-image:url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAFoEvQfAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA1JREFUeNpjYmBgOAMAANsAzxM4pZ4AAAAASUVORK5CYII=);
}
.items .title{
	border-top:1px solid #dcdcdc;
	padding:7px 14px;
}</style>
	    		<script>/**
 * 效果来源于 http://www.jue.so/ 采用 KISSY 的 UI 实现
 * 以下是 jQuery 方法实现，当然原生 js 也不难实现、、
 */
$(function () {
  $(".items .img").hover(function (e) {
    var _this  = $(this), //闭包
        _desc  = _this.find(".desc").stop(true),
        width  = _this.width(), //取得元素宽
        height = _this.height(), //取得元素高
        left   = e.offsetX, //从鼠标位置，得到左边界
        top    = e.offsetY, //得到上边界
        right  = width - left, //计算出右边界
        bottom = height - top, //计算出下边界
        rect   = {}, //坐标对象，用于执行对应方法。
        _min   = Math.min(left, top, right, bottom), //得到最小值
        _out   = e.type == "mouseleave", //是否是离开事件
        spos   = {}; //起始位置

    rect[left] = function (epos) { //鼠从标左侧进入和离开事件
      spos = {"left": -width, "top": 0};
      if (_out) {
        _desc.animate(spos, "fast"); //从左侧离开
      } else {
        _desc.css(spos).animate(epos, "fast"); //从左侧进入
      }
    };

    rect[top] = function (epos) { //鼠从标上边界进入和离开事件
      spos = {"top": -height, "left": 0};
      if (_out) {
        _desc.animate(spos, "fast"); //从上面离开
      } else {
        _desc.css(spos).animate(epos, "fast"); //从上面进入
      }
    };

    rect[right] = function (epos) { //鼠从标右侧进入和离开事件
      spos = {"left": left,"top": 0};
      if (_out) {
        _desc.animate(spos, "fast"); //从右侧成离开
      } else {
         _desc.css(spos).animate(epos, "fast"); //从右侧进入
      }
    };
    
    rect[bottom] = function (epos) { //鼠从标下边界进入和离开事件
      spos = {"top": height, "left": 0};
      if (_out) {
        _desc.animate(spos, "fast"); //从底部离开
      } else {
        _desc.css(spos).animate(epos, "fast"); //从底部进入
      }
    };

    rect[_min]({"left":0, "top":0}); // 执行对应边界 进入/离开 的方法
  });
});</script>

在线预览：http://sandbox.runjs.cn/show/czgdrozy

代码地址：http://runjs.cn/code/czgdrozy

实例：jQuery弹性滑动导航菜单

jQuery弹性滑动导航菜单，导航下的标示横线随着鼠标经过移动。

代码如下： 

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<title>实例：jQuery弹性滑动导航菜单</title>
<style type="text/css">
body{ font-size:100%; font-family:"Microsoft YaHei","Arial"; background:#fff;}
#nav{ position:relative; width:832px; _width:835px; margin:100px auto 0 auto; border-bottom:2px #ddd solid;}
#nav .nav-menu{ height:50px;}
#nav .nav-menu a{ display:block; float:left; height:50px; padding:0 40px; line-height:50px; color:#666; font-size:16px; text-decoration:none;}
#nav .nav-current{ position:absolute; bottom:-2px; height:2px; overflow:hidden; background:#80b600;}
</style>
<script id="jquery_172" type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function(){

(function(){
var $navcur = $(".nav-current");
var $nav = $("#nav");
var current = ".current";
var itemW = $nav.find(current).innerWidth();	//默认当前位置宽度
var defLeftW = $nav.find(current).position().left;	//默认当前位置Left值

//添加默认下划线
$navcur.css({width:itemW,left:defLeftW});

//hover事件
$nav.find("a").hover(function(){
	var index = $(this).index();	//获取滑过元素索引值
	var leftW = $(this).position().left;	//获取滑过元素Left值
	var currentW = $nav.find("a").eq(index).innerWidth();	//获取滑过元素Width值
	$navcur.stop().animate({
		left: leftW,
		width: currentW
	},300);
	
},function(){
	$navcur.stop().animate({
		left: defLeftW,
		width: itemW
	},300)
})
})();

});
</script>
</head>
<body>
<div id="nav">
	<div class="nav-menu">
		<a href="#" class="current">首页</a>
		<a href="#">了解我们</a>
		<a href="#">产品展示</a>
		<a href="#">服务报价</a>
		<a href="#">最新消息</a>
		<a href="#">联系方式</a>
	</div>
	<div class="nav-current"></div>
</div>
</body>
</html>

使用google-code-prettify代码语法高亮显示

KindEditor中web文本编辑器中代码高亮使用的就是google-code-prettify ，它默认保存的时候，保存的内容是 

<pre class="prettyprint lang-html">
    /*代码文件...*/
</pre>

而不是 其他语法高亮插件的结构。 

<pre name="code">
    /*代码文件...*/
</pre>

所以用其他的语法提示比较麻烦，而我又比较的懒，所以直接用google-code-prettify了

使用说明：

首先添加文件 

<link rel="Stylesheet" type="text/css" href="prettify/prettify.css" />
<script type="text/javascript"  src="prettify/prettify.js"></script>

当然如果你觉得默认样式不好看，可以自己修改，这里我就直接在HTML页面修改了，因为它默认不换行，所以显得不是那么的友好

<style type="text/css">
        pre {
            white-space: pre-wrap; /* css-3 */
            white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
            white-space: -pre-wrap; /* Opera 4-6 */
            white-space: -o-pre-wrap; /* Opera 7 */
            word-wrap: break-word; /* Internet Explorer 5.5+ */
        }
</style>

默认不显示行号，这里我们可以写如下的代码，使之显示行号，但是貌似不完整，大家如果有更好的方法告诉我哦 

$(window).load(function () {
            $("pre").addClass("prettyprint linenums");
            prettyPrint();
})

google-code-prettify 下载地址：http://code.google.com/p/google-code-prettify/

jQuery.delay()方法简介

jQuery.delay()暂停的意思。例如：jQuery.delay(800) 代表暂停0.8秒。

这个方法从 jQuery 1.4 开始加入进来。中文文档中也早就有了，但是悄悄的添加进去的，很不起眼，不容易引起人的关注。

用法很简单，直接使用

$(‘#foo’).slideUp(300).delay(800).fadeIn(400);

这样的一句话，就可以在两次动画之间间隔800毫秒了。非常方便。 

$(document).ready(function() {
	//vendor script
	$('#header')
	.css({ 'top':-50 })
	.delay(1000)
	.animate({'top': 0}, 800);
	
	$('#footer')
	.css({ 'bottom':-15 })
	.delay(1000)
	.animate({'bottom': 0}, 800);
});

这是一个例子，开始的时候隐藏页面的header 和footer 等页面加载后成功1秒钟后 在显示 header 和 footer


他除了可以控制动画之外，还能控制自定义队列： 

delay(duration, [queueName])

第一个参数代表间隔时间 单位为毫秒。

第二个参数就是设置队列名的，如果不填，默认就是动画队列 fx。

介绍完啦，非常简单把？如果有兴趣，可以看看jQuery.delay()文档，以及jQuery中queue和dequeue的用法，或者看看如何自己写个控制队列来了解基本原理。

jQuery-1.4.1.chm手册下载地址

jQuery-1.4.1.chm手册下载地址

下载地址：

http://code.google.com/p/jquery-api-zh-cn/downloads/list

http://pan.baidu.com/s/1i3gGW9B

http://pan.baidu.com/s/1f9urW

在线地址：

http://shawphy.github.io/jquery-api/#delay

学习：

http://learn.jquery.com

CDN：

http://code.jquery.com/jquery-1.4.1.min.js

一个简单的jquery选项卡代码

<script language=”javascript” type=”text/javascript”>
<!–
$(function(){
$(“a[_for]”).click(function(){
$(this).parents().children(“a[_for]”).removeClass(“thisclass”).parents().children(“dd”).hide();
$(this).addClass(“thisclass”).blur();
$(“#”+$(this).attr(“_for”)).show();
});
$(“a[_for=ZboxB_5]”).click();
});
</script>

 

————————————华丽的分割线——————————————–

 

<dl>
<dt>
<span>
<a href=”javascript:void(0);” _for=”ZboxB_1″ class=’ sdfsf ‘>1</a>
<a href=”javascript:void(0);” _for=”ZboxB_2″>2</a>
<a href=”javascript:return false;” _for=”ZboxB_3″>3</a>
<a href=”javascript:return false;” _for=”ZboxB_4″>4</a>
<a href=”javascript:return false;” _for=”ZboxB_5″>5</a>
</span>
</dt>

<dd id=”ZboxB_1″>1</dd>
<dd id=”ZboxB_2″>2</dd>
<dd id=”ZboxB_3″>3</dd>
<dd id=”ZboxB_4″>4</dd>
<dd id=”ZboxB_5″>5</dd>
</dl>

JQUERY移动和复制元素

<!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”>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />

<title>无标题文档</title>

<script type=”text/javascript” src=”jquery-1.6.1.min.js”></script>

<script type=”text/javascript”>

$(function(){

//append,appendTo 追加到现有内容的末尾

$(‘#show’).append(“<b>我来看看</b>”);

$(“<i>我来看看</i>”).appendTo(‘#show’);

//prepend,prependTo 追加到现有内容的首部

$(‘#show’).prepend(“<b>我来看看</b>”);

$(“<i>我来看看</i>”).prependTo(‘#show’);

//after,insertAfter 追加到目标元素的后面紧挨着目标元素

$(‘#show’).after(“<b>我来看看</b>”);

$(“<i>我来看看</i>”).insertAfter(‘#show’);

//before,insertBefore 追加到目标元素的前面紧挨着目标元素

$(‘#show’).before(“<b>我来看看</b>”);

$(“<i>我来看看</i>”).insertBefore(‘#show’);

})

</script>

</head>

<body>

<div id=”show” style=”background:red”><div>slsl</div>sl</div>

</body>

</html>

提供 39种样式高亮语法的JQuery插件-Snippet

Snippet jQuery Syntax Highlighter 是一个建立在SHJS的 开源插件,Snippet提供了简单而且快捷的方法,可以方便的为你带来高亮语法的提示.可以在IE 6, IE 7, IE 8, FF 3.6, Chrome 6.0, Safari 5.0, Opera 10.62中运行.

先简单为你讲一讲它的用法.在官方的网站也已经有了详细的介绍,这里就稍微翻译一下它所提供的例子.

1.  在你的HTML中加载Snippet和JQuery

1. <script type=”text/javascript” src=”js/jquery.js”></script>
2. <script type=”text/javascript” src=”js/jquery.snippet.js”></script>

2.  加载Snippet的CSS

1. <link rel=”stylesheet” type=”text/css” href=”css/jquery.snippet.css” />

3.  重点是这一步,我们要把下面的代码写在<script>标记中,让Snippet对<pre>标记进行操作

1. $(document).ready(function(){
2. $(“pre.htmlCode”).snippet(“html”);
3. // 找到类名为htmlCode的<pre>标签
4. // 并且以HTML语法来高亮显示它
5. $(“pre.styles”).snippet(“css”,{style:”greenlcd”});
6. // 找到类名为styles的<pre>标签
7. // 并且以CSS语法来高亮显示它
8. // 显示的类型为greenlcd
9. $(“pre.js”).snippet(“javascript”,{style:”random”,transparent:true,showNum:false});
10. // 找到类名为js的<pre>标签
11. //并且以JavaScript语法来高亮显示它
12. // 显示的类型为在39中随机选择
13. // 选择背景为透明
14. // 不显示行号
15. });

4.  可以动态更新你的Snippet

1. $(document).ready(function(){
2. $(“pre#dynamic”).snippet(“php”,{style:”navy”,showNum:false});
3. // 找到类名为js的<pre>标签并把类型选为navy
4. // 隐藏行号
5. $(“pre#dynamic”).click(function(){
6. $(this).snippet({style:”vampire”,transparent:true,showNum:true});
7. // 改变snippet的类型为vampire
8. // 改变背景为透明
9. // 显示行号
10. });
11. });

关于更多的参数可以在Snippet的网站的找到,这里就不多说了.总之Snippet是一个比较全面的而且很好用的显示高亮代码的插件,有兴趣的 话,你也可以下来试试.下载地址和例子点这里.

基于jquery的 搜索框 默认文字，及select下拉框美化效果

搜索框select下拉框美化

基于jquery的 搜索框 默认文字，及select下拉框美化效果

下载地址：http://pan.baidu.com/share/link?shareid=2366705926&uk=1010090726

在线演示：http://demo.lrxin.com/jquery/form/jquery%20%b1%ed%b5%a5%c3%c0%bb%af%20input%20%bf%f2%c4%a3%c4%e2select%d1%a1%d4%f1%bf%f2%20%bb%f1%c8%a1%d1%a1%b6%a8%b5%c4value%d6%b5.html

这个jquery.pngFix.js在处理IE5.5和IE6png半透明方面已经超神了！

这个jquery.pngFix.js在处理IE5.5和IE6png半透明方面已经超神了！

在网上找个很多关于 处理 png图片在ie6下半透问题的方法，多多少少都有些限制或瑕疵。

例如有些仅支持： <img src=”pngtest.png” />

有些支持背景，但不支持背景位置定位 background-position 属性。
而这个完全支持，超神了！

<script type=”text/javascript” src=”jquery-latest.pack.js”></script>
<script type=”text/javascript” src=”jquery.pngFix.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(document).pngFix();
});
</script>

 

下载地址：http://pan.baidu.com/share/link?shareid=3635301467&uk=1010090726

官方网址：http://jquery.andreaseberhard.de/pngFix/index.html

 

一款小清新的jquery日期控件dpdemo.rar

一款小清新的jquery日期控件dpdemo

 

百度网盘： http://pan.baidu.com/share/link?shareid=39319182&uk=1010090726

JQuery获取浏览器窗口的高度和宽度

<script type=”text/javascript”>
$(document).ready(function()
{
alert($(window).height()); //浏览器时下窗口可视区域高度
alert($(document).height()); //浏览器时下窗口文档的高度
alert($(document.body).height());//浏览器时下窗口文档body的高度
alert($(document.body).outerHeight(true));//浏览器时下窗口文档body的总高度 包括border padding margin
alert($(window).width()); //浏览器时下窗口可视区域宽度
alert($(document).width());//浏览器时下窗口文档对于象宽度
alert($(document.body).width());//浏览器时下窗口文档body的高度
alert($(document.body).outerWidth(true));//浏览器时下窗口文档body的总宽度 包括border padding margin
}
)
</script>

用JQuery来监听浏览器改变窗口大小事件

做web开发的时候会遇到需要监听浏览器窗口大小改变事件，而进行相关操作。这里像大家介绍一下 JQuery浏览器窗口改变事件。

$(window).resize();

这里需要注意 这个事件不要写在页面加载完成事件（ $(function(){…} ）内部，而需要写在他外面。

<script type=”text/javascript”>
$(window).resize(function() {
var width = $(this).width();
var height = $(this).height();
alert(‘width’+width+’-height’+height);

});
</script>

 

 

jQuery ligerUI 基于jQuery的网站的UI控件框架

jQuery ligerUI 是一个基于jQuery的网站的UI控件框架，简单而又强大，用于快速搭建Web前端框架。 因为是前端控件，于服务器脚本无关，因而适合asp，php，，jsp，.net等web服务器脚本语言。目前全部插件的打包压缩JS只有100K左右,很轻巧。

 

jQuery ligerUI中文官方网站：http://www.ligerui.com/

jQuery LigerUI V1.2.0.7z 下载地址：http://pan.baidu.com/share/link?shareid=446608&uk=1010090726

JQuery双色表格

//双色表格
$(".TableA tbody tr:odd").addClass("bg");//奇数行
$(".TableA tbody tr:even").addClass("bg");//偶数行
$(".TableA tbody tr").mouseover(function(){ $(this).addClass("over"); }).mouseout(function(){$(this).removeClass("over");});//鼠标经过离开