JQuery.Boxy
2011年10月5日彈出層之1：JQuery.Boxy (二)在
《彈出層之1：JQuery.Boxy (一)》中講到了JQuery.Boxy的基本用法，本次講下手動(dòng)創(chuàng)建實(shí)例，new一個(gè)boxy對(duì)象是很容易的，傳遞一些參數(shù)對(duì)象就能滿足不同的需求了。
4.1、手動(dòng)創(chuàng)建實(shí)例
<script type="text/javascript">
$(function() {
$("#a1").click(function() {
//實(shí)例化一個(gè)Boxy對(duì)象
var box1 = new Boxy("<h3>這個(gè)參數(shù)是顯示的內(nèi)容</h3>" //顯示內(nèi)容
,
{
title: "標(biāo)題", //對(duì)話框標(biāo)題
modal: false, //是否為模式窗口
afterHide: function(e) { alert("dialog hide"); }, //隱藏時(shí)的回調(diào)函數(shù)
afterShow: function(e) { alert("dialog show"); }, //顯示時(shí)的回調(diào)函數(shù)
closeText: "X", //關(guān)閉功能按鈕的標(biāo)題文字
draggable: true //是否可以拖動(dòng)
});
box1.resize(300, 100); //設(shè)置對(duì)話框的大小
});
});
</script> <p>
<a href="#" id="a1">4.1、手動(dòng)創(chuàng)建一個(gè)實(shí)例</a>
</p>
測(cè)試發(fā)現(xiàn)modal為true為模式窗口，也就是背景被遮罩時(shí)就算設(shè)置 draggable: true拖動(dòng)也是無效的。
5.1、常用對(duì)話框—提問框
//提問框
$("#a2").click(function() {
Boxy.ask("鳳姐最漂亮的部分是？", //問題
["臉皮", "小嘴巴", "知識(shí)淵博"], //可選項(xiàng)按鈕
function(val) { alert(val) }, //回調(diào)方法
{title:"測(cè)試",modal:false} //boxy屬性設(shè)置
);
}); <p>
<a href="#" id="a2">5.1、彈出提問框</a>
</p>
Boxy.ask(question, answers, callback, options)方法的4個(gè)參數(shù)question表示提問；answers提問選擇項(xiàng)，一般為數(shù)組；callback為回調(diào)方法；options是boxy彈出框的的屬性對(duì)象，見4.1。
5.2、常用對(duì)話框—警告框
//警告框
$("#a3").click(function() {
Boxy.alert("這是警告信息", //提示信息
function(val) { alert(val); }, //回調(diào)方法
{title:"提示"}); //boxy屬性
}); <p>
<a href="#" id="a3">5.2、警告框</a>
</p>
Boxy.alert(message, callback, options)方法的3個(gè)參數(shù)message表示警告信息；callback為回調(diào)方法；options是boxy彈出框的的屬性對(duì)象，見4.1。
5.3、常用對(duì)話框—確認(rèn)框
//確認(rèn)框
$("#a4").click(function() {
Boxy.confirm("你確認(rèn)要看鳳姐的照片嗎？", //確認(rèn)提示信息
function() { alert("上當(dāng)了") }, //點(diǎn)擊確認(rèn)后的回調(diào)信息
{ title: "測(cè)試", modal: false }); //boxy屬性設(shè)置
}); <p>
<a href="#" id="a4">5.3、確認(rèn)框</a>
</p>
Boxy.confirm(message, callback, options)方法的3個(gè)參數(shù)message表示確認(rèn)提示信息；callback為回調(diào)方法,只有點(diǎn)擊確認(rèn)時(shí)才會(huì)執(zhí)行；options是boxy彈出框的的屬性對(duì)象，見4.1。
6、API參數(shù)
方法：
Boxy.load(url, options)
以一個(gè)URL加載內(nèi)容并以Boxy對(duì)話框的形式展現(xiàn)。支持以下的一些選項(xiàng)參數(shù)：
類型 - HTTP方法，默認(rèn)為GET
緩存 - 如果是true，緩存內(nèi)容連續(xù)通話。相當(dāng)于緩存選項(xiàng)傳遞到j(luò)Query的Ajax方法。默認(rèn)：false。
過濾 - jQuery的表達(dá)式，用于過濾遠(yuǎn)程內(nèi)容。
（任何其他指定的選項(xiàng)將被傳遞到boxy的構(gòu)造函數(shù)中）
Boxy.get(element)
返回包含元素的實(shí)例，例如：<a href="#" onclick="Boxy.get(this).hide();">關(guān)閉對(duì)話框</a>
Boxy.ask(question, answers, callback, options)
顯示模式，即非可關(guān)閉對(duì)話框，允許用戶選擇選項(xiàng)。問題是要顯示給用戶的信息。答案是一個(gè)數(shù)組或一切可能的回答的數(shù)列。回調(diào)函數(shù)將收到選定的回答，這是否是需要的值或相應(yīng)的密鑰要根據(jù)一個(gè)數(shù)組或答案數(shù)列是否已經(jīng)提供了。options是一種額外的可選設(shè)置選項(xiàng)傳遞給對(duì)話框的構(gòu)造函數(shù)。
Boxy.alert(message, callback, options)
顯示模式，非可關(guān)閉對(duì)話框顯示消息給用戶。
注意：此方法并不是為了取代瀏覽器本地window.alert()函數(shù)提供，因?yàn)樗鼪]有能力阻止程序執(zhí)行，在對(duì)話框是可見的時(shí)候。
Boxy.confirm(message, callback, options)
顯示模式，非可關(guān)閉對(duì)話框顯示的含有確定和取消按鈕的消息?；卣{(diào)只會(huì)在用戶選擇了“確定”時(shí)被調(diào)用。
注意：此方法并不是為了取代瀏覽器提供的本地window.confirm()函數(shù)，因?yàn)樗鼪]有能力在對(duì)話框可見時(shí)阻止程序執(zhí)行的。
Boxy.linkedTo(ele)
返回已通過執(zhí)行器構(gòu)造函數(shù)選項(xiàng)連接DOM元素的boxy實(shí)例。
Boxy.isModalVisible()
返回true如果任何模式對(duì)話框是當(dāng)前可見的，否則返回false。
new Boxy(element, options)
構(gòu)造函數(shù)；創(chuàng)建一個(gè)新的boxy對(duì)話框。element是對(duì)話框的內(nèi)容；任何有效的參數(shù)，jQuery的$()函數(shù)在這里也是有效的。options是一個(gè)配置選項(xiàng)的散列，見下面詳細(xì)的資料。
estimateSize()
當(dāng)對(duì)話框不可見的時(shí)候估計(jì)其大小。如果當(dāng)前對(duì)話框可見，不要使用此方法，使用getSize()代替。
getSize()
以數(shù)組的形式[width, height]返回對(duì)話框的大小。
getContentSize()
返回對(duì)話框內(nèi)容區(qū)域的大小。默認(rèn)情況下，指在對(duì)話框框架里的一切，不包括標(biāo)題欄。
getPosition()
以[x,y]數(shù)組形式返回最頂層對(duì)話框的左上角坐標(biāo)。
getCenter()
以[x,y]數(shù)組形式返回最頂層對(duì)話框的中心點(diǎn)的坐標(biāo)。
getInner()
返回一個(gè)jQuery對(duì)象包裝對(duì)話框的內(nèi)部區(qū)域-框架內(nèi)包括標(biāo)題欄一切。
getContent()
返回一個(gè)jQuery對(duì)象包裝對(duì)話框的內(nèi)容區(qū)域-框架內(nèi)的一切，不包括標(biāo)題欄。
setContent(newContent)
設(shè)置對(duì)話框中的內(nèi)容，任何對(duì)$()有效的參數(shù)也對(duì)設(shè)置的新內(nèi)容有效?？涉溄印?div style="height:15px;">
moveTo(x,y)
移動(dòng)對(duì)話框到左上角為(x,y)的位置，可鏈接。
centerAt(x,y)
把對(duì)話框移動(dòng)到中心坐標(biāo)為(x,y)的位置上。
center(axis)
移動(dòng)對(duì)話框，使其在視野的中央?？蛇x參數(shù)axis可以是"x","y"中的任意一個(gè)中心軸?？涉溄?。
resize(w,h,after)
重新調(diào)整對(duì)話框的高寬到[w,h]，完成后執(zhí)行回調(diào)函數(shù)，回調(diào)函數(shù)將接受Boxy實(shí)例作為參數(shù)?？涉溄?。
tween(w,h,after)
動(dòng)畫補(bǔ)間對(duì)話框高寬到[w,h]，完成后執(zhí)行回調(diào)函數(shù)，回調(diào)函數(shù)將接受Boxy實(shí)例作為參數(shù)?？涉溄印?div style="height:15px;">
isVisible()
如果當(dāng)前對(duì)話框可見，則返回true，否則返回false。
show()
顯示對(duì)話框，可鏈接。
hide(after)
隱藏對(duì)話框，after為可選回調(diào)函數(shù)，完成后執(zhí)行。可鏈接。
toggle()
觸發(fā)對(duì)話框的顯隱屬性?？涉溄?。
hideAndUnload(after)
在隱藏后立即執(zhí)行卸載。在卸載之前執(zhí)行after回調(diào)函數(shù)。可鏈接。
unload()
從DOM中刪除對(duì)話框，切斷其與執(zhí)行機(jī)構(gòu)的聯(lián)系，如果有的話。一旦出現(xiàn)一個(gè)對(duì)話框已被卸載它的任何進(jìn)一步行動(dòng)都是未定義的。
toTop()
將當(dāng)前對(duì)話框移動(dòng)到其他所有對(duì)話框的上部?？涉溄印?div style="height:15px;">
getTitle()
以HTML的形式返回對(duì)話框的標(biāo)題。
setTitle(t)
設(shè)置對(duì)話框的標(biāo)題為t，可鏈接。
屬性:
CSS選擇器
.boxy-wrapper .title-bar
div包裝的自動(dòng)生成的標(biāo)題欄
.boxy-wrapper .title-bar h2
標(biāo)題欄的內(nèi)容
.boxy-wrapper .title-bar.dragging
拖拽時(shí)候的標(biāo)題欄
.boxy-wrapper .title-bar .close
默認(rèn)的關(guān)閉對(duì)話框的執(zhí)行器
.boxy-inner
內(nèi)部區(qū)域，包括標(biāo)題欄
.boxy-content
內(nèi)部區(qū)域，不包括標(biāo)題欄。這個(gè)class類將被自動(dòng)添加到傳遞給Boxy的構(gòu)造函數(shù)的任何元素。
.boxy-wrapper .question
通過Boxy.ask()創(chuàng)建的，包含問題文字
.boxy-wrapper .answers
通過Boxy.ask()創(chuàng)建的，包含應(yīng)答的按鈕
.close
這一class類的任何內(nèi)容的單擊事件將關(guān)聯(lián)到關(guān)閉對(duì)話框上。
選擇器的外框圓角效果是使用png圖片實(shí)現(xiàn)的，如果想更改透明程度，可以使用ps修改圖片；如果不考慮IE6的話，可以使用另一種常用的圓角方法(不用圖片只用css樣式)。
官網(wǎng)：
http://onehackoranother.com/projects/jquery/boxy/譯文：
http://www.zhangxinxu.com/wordpress/?p=318本文示例posted @ 2011-10-05 09:48 張果 閱讀(217) 評(píng)論(0)
編輯彈出層之1：JQuery.Boxy (一)Boxy是一個(gè)基于JQuery的彈出層插件，它有相對(duì)漂亮的外觀，功能齊全，支持iframe，支持模式窗口但相對(duì)于同樣的彈出層插件BlockUI它明顯笨重，但使用不那么方便。
1、下載并修改插件
可以在官網(wǎng)上下載到最新版(
http://plugins.jquery.com/files/boxy-0.1.4.zip)，到我寫這些文字的時(shí)候最新版為0.1.4版，下載解壓后有1個(gè)主要的js文件：jquery.boxy.js;1個(gè)css文件;還有4個(gè)圖片用于構(gòu)成彈出層的4個(gè)圓角。將文件引入系統(tǒng)中，修改boxy.css，將下面的圖片路徑修改為項(xiàng)目中實(shí)際的位置，如果設(shè)置不對(duì)會(huì)引起圖片失效，那時(shí)就難看了。
/* 將此處的圖片修改為相對(duì)于css文件的圖片文件的路徑 */
.boxy-wrapper .top-left { background: url('../images/boxy-nw.png'); }
.boxy-wrapper .top-right { background: url('../images/boxy-ne.png'); }
.boxy-wrapper .bottom-right { background: url('../images/boxy-se.png'); }
.boxy-wrapper .bottom-left { background: url('../images/boxy-sw.png'); }
/* 注意:下面的路徑必須使用絕對(duì)路徑或url的形式 */
/*絕對(duì)路徑以‘/’開始表示域名，使用時(shí)要注意虛擬目錄,沒有可以省略，/域名/圖片在站點(diǎn)中的路徑*/
/*url則是指http://www.xxx.com/xxx.png的形式出現(xiàn)*/
.boxy-wrapper .top-left { #background: none; #filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/boxy-nw.png'); }
.boxy-wrapper .top-right { #background: none; #filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/boxy-ne.png'); }
.boxy-wrapper .bottom-right { #background: none; #filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/boxy-se.png'); }
.boxy-wrapper .bottom-left { #background: none; #filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/boxy-sw.png'); }
2、將插件引用到頁面中
<script src="http://www.cnblogs.com/Contents/JS/jquery-1.5.js" type="text/javascript"></script>
<link href="boxy.css" rel="stylesheet" type="text/css" />
<script src="jquery.boxy.js" type="text/javascript"></script>
3、給匹配的元素綁定boxy行為
<script type="text/javascript">
$(function() {
$(".boxy").boxy();
});
</script>
<a href="#m1" class="boxy" title="這是超鏈接的標(biāo)題">3.1、點(diǎn)我就會(huì)彈出一個(gè)對(duì)話框</a>
<div id="m1" style="display: none"> 我是超鏈接彈出來的</div>
a標(biāo)簽中的 title如果不設(shè)置，彈出的框?qū)]有標(biāo)題且不能拖動(dòng);href后面的錨記m1為對(duì)應(yīng)的要彈出的元素id;顯示的元素默認(rèn)如果設(shè)置為none時(shí)彈出將設(shè)置顯示。
3.2、彈出顯示指定的頁面內(nèi)容
<script type="text/javascript">
$(function() {
$(".boxy").boxy();
});
</script> <a href="../default.aspx" class="boxy" title="提示">3.2、加載一個(gè)文檔，顯示為提示信息</a>
href超鏈接到要彈出顯示內(nèi)容的文件。
3.3、提交時(shí)以確認(rèn)框形式彈出
<script type="text/javascript">
$(function() {
$(".boxy").boxy();
});
</script>
<form class="boxy" action="Default.html" method="post">
<input id="Submit1" type="submit" value="3.3、提交時(shí)顯示彈出層"/>
</form>
說明：
1、boxy對(duì)話框自動(dòng)計(jì)算出您的內(nèi)容區(qū)域內(nèi)本身的大小和位置，沒有必要明確規(guī)定了包裝集的尺寸;
2、上面的簡(jiǎn)單使用方法中其實(shí)是在間接指定boxy中message屬性的內(nèi)容，該屬性為彈出框的顯示信息，默認(rèn)為：“請(qǐng)確認(rèn)：”
3、每個(gè)匹配錨title屬性將被用來作為其相應(yīng)的對(duì)話框的標(biāo)題
4、message的內(nèi)容的display屬性都將設(shè)置為block(顯示為塊)
下載本文示例posted @ 2011-10-05 09:27 張果 閱讀(642) 評(píng)論(1)
編輯2011年10月1日彈出層之2：JQuery.BlockUIJQuery.BlockUI是眾多JQuery插件彈出層中的一個(gè)，它小巧（原版16k，壓縮后10左右）,容易使用, 功能齊全，支持Iframe，支持Modal，可定制性高也意味他默認(rèn)謙虛的外表。
jQuery的BlockUI插件可以讓你在使用AJAX時(shí)模擬同步行為，鎖定瀏覽器(模式窗口)。當(dāng)被激活時(shí)，它會(huì)防止用戶活動(dòng)的頁面（或頁面的一部分），直到它被禁用。 BlockUI添加元素的DOM，給它的外觀和阻止用戶交互行為。
1、首先引入插件
<script src="jquery.min.js" type="text/javascript"></script>
<script src="JQuery.BlockUI.min.2.39.js" type="text/javascript"></script>
2、調(diào)用
<!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><title></title>
<script src="jquery.min.js" type="text/javascript"></script>
<script src="JQuery.BlockUI.min.2.39.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('#Button1').click(function() {
//阻止頁面的用戶的活動(dòng)
$.blockUI();
});
$('#Button2').click(function() {
//自定義信息內(nèi)容
$.blockUI({ message: '<h3><img src="busy.gif" /> Just a moment...</h3>' });
});
$('#Button3').click(function() {
//自定義樣式
$.blockUI({ css: { backgroundColor: '#f00', color: '#fff'} });
});
$('#Button4').click(function() {
//定義彈出的信息為頁面的某一個(gè)元素
$.blockUI({ message: $('#domMessage') });
});
$('#btnClose').click(function() {
//關(guān)閉彈出層
$.unblockUI();
});
$('#Button5').click(function() {
//設(shè)置淡入，淡出，自動(dòng)關(guān)閉時(shí)間
$.blockUI({ fadeIn: 700, fadeOut: 700, timeout: 2000 });
});
//簡(jiǎn)單的氣泡提示
$.growlUI('提示', '刪除成功!');
});
</script>
</head>
<body>
<ol>
<li>阻止頁面的用戶的活動(dòng),不會(huì)自動(dòng)消失，請(qǐng)刷新： $.blockUI();
<input id="Button1" type="button" value="測(cè)試" />
</li>
<li>自定義消息：
<input id="Button2" type="button" value="測(cè)試" />
</li>
<li>自定義樣式：
<input id="Button3" type="button" value="測(cè)試" />
</li>
<li>彈出指定的元素，并關(guān)閉彈出層(該層可以為隱藏)：
<input id="Button4" type="button" value="測(cè)試" />
</li>
<li>設(shè)置淡入，淡出，自動(dòng)關(guān)閉時(shí)間：
<input id="Button5" type="button" value="測(cè)試" />
</li>
</ol>
<div id="domMessage" style="text-align: center; width: 200px; height: 50px; border;
1px solid #9cf; padding: 25px; display: none;">
<h3>
Message</h3>
<input id="btnClose" type="button" value="關(guān)閉" />
</div>
</body>
</html>
3、樣式修改
jQuery blockUI 提供的默認(rèn)樣式過于樸素, 可以在每一次調(diào)用blockUI() 函數(shù)時(shí)進(jìn)行修改. 也一次直接修改庫文件 jquery.blockUI.js, 修改$.blockUI.defaults 對(duì)象相關(guān)的代碼：
顯示源碼 // 重寫defaults對(duì)象中的屬性
$.blockUI.defaults = {
//彈出的信息
message: '<h1>Please wait...</h1>',
//定義消息框樣式
// $.blockUI.defaults.css = {};
//默認(rèn)定義消息框樣式Css樣式
css: {
padding: 0,
margin: 0,
width: '30%',
top: '40%',
left: '35%',
textAlign: 'center',
color: '#000',
border: '3px solid #aaa',
backgroundColor:'#fff',
cursor: 'wait'
},
// 遮罩樣式
overlayCSS: {
backgroundColor: '#000', //顏色
opacity: 0.6 //透明度
},
// 使用$.growlUI完成自動(dòng)氣泡時(shí)的樣式
growlCSS: {
width: '350px',
top: '10px',
left: '',
right: '10px',
border: 'none',
padding: '5px',
opacity: 0.6,
cursor: null,
color: '#fff',
backgroundColor: '#000',
'-webkit-border-radius': '10px', //貌似是圓角
'-moz-border-radius': '10px'
},
// 是否在非IE瀏覽器中使IFrame獲得焦點(diǎn)，未驗(yàn)證的
forceIframe: false,
// 遮罩層的Z-Index值，越大越在上面
baseZ: 1000,
// 是否居中
centerX: true,
centerY: true,
//是否允許拉大
//短的網(wǎng)頁上。禁用如果你想防止車身高度的變化
allowBodyStretch: true,
//遮罩時(shí)是否禁用鍵盤和鼠標(biāo)事件
bindEvents: true,
// be default blockUI will supress tab navigation from leaving blocking content
// (if bindEvents is true)
//遮罩內(nèi)容的Tab導(dǎo)航是否可用
constrainTabKey: true,
//淡入時(shí)間
fadeIn: 200,
//淡出時(shí)間
fadeOut: 400,
// time in millis to wait before auto-unblocking; set to 0 to disable auto-unblock
//自動(dòng)淡出時(shí)間
timeout: 0,
//disable if you don't want to show the overlay
//是否自動(dòng)遮罩
showOverlay: true,
// if true, focus will be placed in the first available input field when
// page blocking
//自動(dòng)獲得焦點(diǎn)
focusInput: true,
//抑制FF/Linux的疊加樣式的使用（由于具有不透明的性能問題）
applyPlatformOpacityRules:true,
//調(diào)用解封已完成時(shí)回調(diào)方法;
// onUnblock(element, options)
onUnblock: null
總結(jié)：上面的文字個(gè)人認(rèn)為寫的比較爛，但基本的使用沒有問題，詳盡的支持是官網(wǎng)：
http://www.malsup.com/jquery/block/,這個(gè)站還有一些其它插件也值得看看。
本文示例下載posted @ 2011-10-01 23:01 張果 閱讀(478) 評(píng)論(0)
編輯2011年9月27日彈出層之3：JQuery.tipswindowtipswindow是一個(gè)很一般的JQuery彈出層插件，但使用簡(jiǎn)單，有相對(duì)漂亮的外觀，代碼比較通俗。下面介紹使用方法：
1、首先引入該插件相關(guān)文件，分別是樣式，JQuery庫，該插件
<link href="tipswindown.css" rel="stylesheet" type="text/css" />
<script src="../Contents/JS/jquery-1.5.js" type="text/javascript"></script>
<script src="tipswindown.js" type="text/javascript"></script>
2、修改tipswindow.css文件中圖片的路徑，默認(rèn)與css文件在同一個(gè)目錄下。
3、編寫代碼，如在圖片上設(shè)置單擊事件后放大顯示圖片：
<!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>
<link href="tipswindown.css" rel="stylesheet" type="text/css" />
<script src="../Contents/JS/jquery-1.5.js" type="text/javascript"></script>
<script src="tipswindown.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("#imgTest").click(function() {
tipsWindown("標(biāo)題：風(fēng)景", "img:" + this.src, "640", "480", "true", "", "true", "img");
});
/*
function tipsWindown(title, content, width, height, drag, time, showbg, cssName)
title: 窗口標(biāo)題
content: 內(nèi)容(可選內(nèi)容為){ text | id | img | url | iframe }
width: 內(nèi)容寬度
height: 內(nèi)容高度
drag: 是否可以拖動(dòng)(ture為是,false為否)
time: 自動(dòng)關(guān)閉等待的時(shí)間，為空是則不自動(dòng)關(guān)閉
showbg: [可選參數(shù)]設(shè)置是否顯示遮罩層(0為不顯示,1為顯示)
cssName: [可選參數(shù)]附加class名稱
*/
});
</script>
</head>
<body>
<img src="../Contents/Images/wallpager/Autumn_A_1.jpg" width="400" height="300" id="imgTest" />
</body>
</html>
其它用法網(wǎng)友總結(jié)如下：
1.彈出文本信息提示：
tipsWindown("提示","text:提示信息內(nèi)容","250","150","true","","true","msg")
2.彈出頁面中的某個(gè)ID的html：
tipsWindown("標(biāo)題","id:testID","300","200","true","","true","id")
3.彈出圖片：
tipsWindown("圖片","img:圖片路徑","250","150","true","","true","img")
4.get加載一個(gè).html文件（也可以是.php/.asp?id=4之類的）：
tipsWindown("標(biāo)題","url:get?test.html","250","150","true","","true","text");
5.加載一個(gè)頁面到框架顯示：
tipsWindown("標(biāo)題","iframe:http://leotheme.cn","900","580","true","","true","leotheme");
6.彈出一個(gè)不能拖動(dòng)且沒有遮罩背景的文本信息層：
tipsWindown("提示","text:提示信息內(nèi)容","250","150","false","","false","msg")
7.彈出一個(gè)不能拖動(dòng)，三秒鐘自動(dòng)關(guān)閉的層：
tipsWindown("提示","text:提示信息內(nèi)容","250","150","false","3000","true","msg")
1、下載本文示例2、下載官方最新示例與框架（推薦）官網(wǎng)：
http://leotheme.cn/javascript/jquery-plugins-tipswindow-2-0.htmlposted @ 2011-09-27 21:31 張果 閱讀(340) 評(píng)論(0)
編輯2011年9月5日JQuery擴(kuò)展插件Validatejquery.validate是基于jquery的一個(gè)B/S客戶端驗(yàn)證框架，借助jquery的優(yōu)勢(shì)，我們可以迅速驗(yàn)證一些常見的輸入,大大提高了開發(fā)效率，下面是本人做的學(xué)習(xí)筆記：
JQuery擴(kuò)展插件Validate—1基本使用方法JQuery擴(kuò)展插件Validate—2通過參數(shù)設(shè)置驗(yàn)證規(guī)則JQuery擴(kuò)展插件Validate—3通過參數(shù)設(shè)置錯(cuò)誤信息JQuery擴(kuò)展插件Validate—4設(shè)置錯(cuò)誤提示的樣式JQuery擴(kuò)展插件Validate—5添加自定義驗(yàn)證方法JQuery擴(kuò)展插件Validate—6radio、checkbox、select的驗(yàn)證示例
源碼下載注意：validate只是使驗(yàn)證變得方便，簡(jiǎn)單，本質(zhì)還是使用js，不論多么強(qiáng)大的js驗(yàn)證，當(dāng)用戶把js禁用或使用機(jī)器直接發(fā)起請(qǐng)求時(shí)都不能確保數(shù)據(jù)的完整性，所有不要把希望寄托在客戶端驗(yàn)證，個(gè)人認(rèn)為每一個(gè)客戶端驗(yàn)證都要服務(wù)器進(jìn)行再次驗(yàn)證。
posted @ 2011-09-05 18:06 張果 閱讀(1574) 評(píng)論(3)
編輯JQuery擴(kuò)展插件Validate—6radio、checkbox、select的驗(yàn)證radio、checkbox、select的驗(yàn)證其實(shí)方法與前面提到?jīng)]有太大的區(qū)別，但問題是錯(cuò)誤信息會(huì)顯示在同一組的第一個(gè)元素后面，效果如下所示：
解決這個(gè)問題的辦法是將錯(cuò)誤信息指定到一個(gè)特定的位置，validate()方法的參數(shù)中可以進(jìn)行自定義，示例代碼如下:
View Code <script type="text/javascript">
jQuery.validator.addMethod("regex", //addMethod第1個(gè)參數(shù):方法名稱
function(value, element, params) { //addMethod第2個(gè)參數(shù):驗(yàn)證方法，
//驗(yàn)證方法參數(shù)（被驗(yàn)證元素的值，被驗(yàn)證元素，參數(shù)）
var exp = new RegExp(params); //實(shí)例化正則對(duì)象，參數(shù)為用戶傳入的正則表達(dá)式
return exp.test(value); //測(cè)試是否匹配
},
"格式錯(cuò)誤");
$(function() {
$("#signupForm").validate(
{
rules: {
txtPassword1: "required", //密碼1必填
txtPassword2: { //密碼2的描述多于1項(xiàng)使用對(duì)象類型
required: true, //必填，這里可以是一個(gè)匿名方法
equalTo: "#txtPassword1", //必須與密碼1相等
rangelength: [5, 10], //長度5-10之間
regex: "^\\w+$" //使用自定義的驗(yàn)證規(guī)則
},
txtEmail: "email", //電子郵箱必須合法
sex: "required"
},
messages: { //對(duì)應(yīng)上面的錯(cuò)誤信息
txtPassword1: "您必須填寫",
txtPassword2: {
required: "您必須填寫",
equalTo: "密碼不一致",
rangelength: "長度必須介于{0} 和 {1} 之間的字符串",
regex: "密碼只能是數(shù)字、字母與下劃線"
}
},
//在上例中新增的部分
errorPlacement: function(error, element) { //指定錯(cuò)誤信息位置
if (element.is(':radio') || element.is(':checkbox')) { //如果是radio或checkbox
var eid = element.attr('name'); //獲取元素的name屬性
error.appendTo(element.parent()); //將錯(cuò)誤信息添加當(dāng)前元素的父結(jié)點(diǎn)后面
} else {
error.insertAfter(element);
}
},
debug: false, //如果修改為true則表單不會(huì)提交
submitHandler: function() {
alert("開始提交了");
}
});
});
</script> <p>
<label for="sex">
性別</label>
<input type="radio" id="rdoFemale" name="sex" />男
<input type="radio" id="rdoMale" name="sex" />女
</p>
運(yùn)行結(jié)果如下：
此外：如果在參數(shù)中加上debug:true則只用于調(diào)試表單不會(huì)提交到服務(wù)器; submitHandler: function() {}將會(huì)在表單提交到服務(wù)器前執(zhí)行一些操作;用remote可以進(jìn)行Ajax驗(yàn)證,好像有個(gè)小bug;在使用ASP.NET與validate組合使用時(shí)會(huì)有一些
問題可以參考網(wǎng)友文。
1、在ASP.NET中按鈕都會(huì)解析成submit所有都會(huì)觸發(fā)驗(yàn)證，如果想讓某個(gè)按鈕不觸發(fā)驗(yàn)證可以加上這個(gè)樣式：class="cancel"
源碼下載posted @ 2011-09-05 17:35 張果 閱讀(297) 評(píng)論(0)
編輯JQuery擴(kuò)展插件Validate—5添加自定義驗(yàn)證方法從前面的示例中不難看出validate中自帶的驗(yàn)證方法足以滿足一般的要求，對(duì)于特別的要求可以使用addMethod(name,method,message)添加自定義的驗(yàn)證規(guī)則，下面的示例中添加了一個(gè)用于正則表達(dá)式驗(yàn)證的擴(kuò)展驗(yàn)證的方法，示例如下： <script type="text/javascript">
jQuery.validator.addMethod("regex", //addMethod第1個(gè)參數(shù):方法名稱
function(value, element, params) { //addMethod第2個(gè)參數(shù):驗(yàn)證方法，參數(shù)（被驗(yàn)證元素的值，被驗(yàn)證元素，參數(shù)）
var exp = new RegExp(params); //實(shí)例化正則對(duì)象，參數(shù)為傳入的正則表達(dá)式
return exp.test(value); //測(cè)試是否匹配
},
"格式錯(cuò)誤"); //addMethod第3個(gè)參數(shù):默認(rèn)錯(cuò)誤信息
$(function() {
$("#signupForm").validate(
{
rules: {
txtPassword1: "required", //密碼1必填
txtPassword2: { //密碼2的描述多于1項(xiàng)使用對(duì)象類型
required: true, //必填，這里可以是一個(gè)匿名方法
equalTo: "#txtPassword1", //必須與密碼1相等
rangelength: [5, 10], //長度5-10之間
regex: "^\\w+$" //使用自定義的驗(yàn)證規(guī)則,在上例中新增的部分
},
txtEmail: "email" //電子郵箱必須合法
},
messages: {
txtPassword1: "您必須填寫",
txtPassword2: {
required: "您必須填寫",
equalTo: "密碼不一致",
rangelength: "長度必須介于{0} 和 {1} 之間的字符串",
regex: "密碼只能是數(shù)字、字母與下劃線"
}
},
debug: false, //如果修改為true則表單不會(huì)提交
submitHandler: function() {
alert("開始提交了");
}
});
});
</script>
運(yùn)行結(jié)果：
注意,如果參數(shù)有多個(gè)可以使用數(shù)組，如regex:[1,3,5],方法中可以使用下標(biāo)訪問：params[0]
網(wǎng)友提供的一些擴(kuò)展驗(yàn)證方法:
// 手機(jī)號(hào)碼驗(yàn)證
jQuery.validator.addMethod("mobile", function(value, element) {
var length = value.length;
var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/
return this.optional(element) || (length == 11 && mobile.test(value));
}, "手機(jī)號(hào)碼格式錯(cuò)誤");
// 電話號(hào)碼驗(yàn)證
jQuery.validator.addMethod("phone", function(value, element) {
var tel = /^(0[0-9]{2,3}\-)?([2-9][0-9]{6,7})+(\-[0-9]{1,4})?$/;
return this.optional(element) || (tel.test(value));
}, "電話號(hào)碼格式錯(cuò)誤");
// 郵政編碼驗(yàn)證
jQuery.validator.addMethod("zipCode", function(value, element) {
var tel = /^[0-9]{6}$/;
return this.optional(element) || (tel.test(value));
}, "郵政編碼格式錯(cuò)誤");
// QQ號(hào)碼驗(yàn)證
jQuery.validator.addMethod("qq", function(value, element) {
var tel = /^[1-9]\d{4,9}$/;
return this.optional(element) || (tel.test(value));
}, "qq號(hào)碼格式錯(cuò)誤");
// IP地址驗(yàn)證
jQuery.validator.addMethod("ip", function(value, element) {
var ip = /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
return this.optional(element) || (ip.test(value) && (RegExp.$1 < 256 && RegExp.$2 < 256 && RegExp.$3 < 256 && RegExp.$4 < 256));
}, "Ip地址格式錯(cuò)誤");
// 字母和數(shù)字的驗(yàn)證
jQuery.validator.addMethod("chrnum", function(value, element) {
var chrnum = /^([a-zA-Z0-9]+)$/;
return this.optional(element) || (chrnum.test(value));
}, "只能輸入數(shù)字和字母(字符A-Z, a-z, 0-9)");
// 中文的驗(yàn)證
jQuery.validator.addMethod("chinese", function(value, element) {
var chinese = /^[\u4e00-\u9fa5]+$/;
return this.optional(element) || (chinese.test(value));
}, "只能輸入中文");
// 下拉框驗(yàn)證
$.validator.addMethod("selectNone", function(value, element) {
return value == "請(qǐng)選擇";
}, "必須選擇一項(xiàng)");
// 字節(jié)長度驗(yàn)證
jQuery.validator.addMethod("byteRangeLength", function(value, element, param) {
var length = value.length;
for (var i = 0; i < value.length; i++) {
if (value.charCodeAt(i) > 127) {
length++;
}
}
return this.optional(element) || (length >= param[0] && length <= param[1]);
}, $.validator.format("請(qǐng)確保輸入的值在{0}-{1}個(gè)字節(jié)之間(一個(gè)中文字算2個(gè)字節(jié))"));
源碼下載posted @ 2011-09-05 17:31 張果 閱讀(275) 評(píng)論(0)
編輯JQuery擴(kuò)展插件Validate—4設(shè)置錯(cuò)誤提示的樣式我們先來使用firebug查看在前面的示例中JS產(chǎn)生的html錯(cuò)誤提示:
從圖中我們發(fā)現(xiàn)錯(cuò)誤信息是被放在了一個(gè)label標(biāo)簽中，且有一個(gè)類樣式error，只要為signupform下面的
label標(biāo)簽中的error定css樣式，應(yīng)該就可以修改顯示結(jié)果了,添加的css代碼如下：
<style type="text/css">
*
{
font-size: 14px;
}
#signupForm label.error
{
color:Red;
font-size:13px;
margin-left:5px;
padding-left:16px;
background:url("error.png") left no-repeat;
}
</style>
運(yùn)行時(shí)顯示結(jié)果：
源碼下載posted @ 2011-09-05 17:19 張果 閱讀(220) 評(píng)論(0)
編輯JQuery擴(kuò)展插件Validate—3通過參數(shù)設(shè)置錯(cuò)誤信息最終顯示在頁面上的錯(cuò)誤分為兩種：第一種是默認(rèn)錯(cuò)誤信息，該信息已經(jīng)被定義在插件中了，可以手動(dòng)修改。
第二種是通過參數(shù)指定的錯(cuò)誤信息，如果沒有指定則會(huì)使用默認(rèn)的錯(cuò)誤信息。將上個(gè)示例的js修改如下：
顯示源碼 <script type="text/javascript">
$(function() {
$("#signupForm").validate(
//在上例中新增的部分
{
rules: {
txtPassword1: "required", //密碼1必填
txtPassword2: { //密碼2的描述多于1項(xiàng)使用對(duì)象類型
required: true, //必填，這里可以是一個(gè)匿名方法
equalTo: "#txtPassword1", //必須與密碼1相等
rangelength: [5, 10] //長度5-10之間
},
txtEmail: "email" //電子郵箱必須合法
},
messages: {
txtPassword1: "您必須填寫",
txtPassword2: {
required: "您必須填寫",
equalTo: "密碼不一致",
rangelength: "長度必須介于{0} 和 {1} 之間的字符串"
}
}
});
});
</script>
html與前面的示例相同
在上一個(gè)示例的基礎(chǔ)上添加了一個(gè)messages項(xiàng)，為其指定了一個(gè)對(duì)象類型的值，與rules基本對(duì)應(yīng),特意沒有指定email的錯(cuò)誤信息，運(yùn)行結(jié)果如下：
源碼下載posted @ 2011-09-05 17:13 張果 閱讀(187) 評(píng)論(0)
編輯JQuery擴(kuò)展插件Validate—2通過參數(shù)設(shè)置驗(yàn)證規(guī)則在前面示例中使用的的方法簡(jiǎn)單方便，但沒有完全將js與頁面結(jié)構(gòu)完全分離，也就是說js依賴了class,下面通過validate()方法的參數(shù)設(shè)置驗(yàn)證規(guī)則將js與頁面結(jié)構(gòu)完全分離，代碼如下：
顯示源碼 <script type="text/javascript">
$(function() {
$("#signupForm").validate(
//在上例中新增的部分
{
rules: {
txtPassword1: "required", //密碼1必填
txtPassword2: { //密碼2的描述多于1項(xiàng)使用對(duì)象類型
required: true, //必填，這里可以是一個(gè)匿名方法
equalTo: "#txtPassword1", //必須與密碼1相等
rangelength: [5, 10] //長度5-10之間
},
txtEmail: "email" //電子郵箱必須合法
}
});
});
</script>
<form id="signupForm" method="get" action="">
<fieldset>
<legend>用戶注冊(cè)</legend>
<p>
<label for="txtPassword1">
密碼1</label>
<input id="txtPassword1" name="txtPassword1" type="password" />
</p>
<p>
<label for="txtPassword2">
密碼2</label>
<input id="txtPassword2" name="txtPassword2" type="password" />
</p>
<p>
<label for="txtEmail">
郵箱</label>
<input id="txtEmail" name="txtEmail" />
</p>
<p>
<input type="submit" value="提交" />
</p>
</fieldset>
</form>
遠(yuǎn)行結(jié)果：
注意：在ASP.NET中使用這種JS驗(yàn)證方法最好將服務(wù)器控件Id替換成客戶端Id,如：<%=控件Id.ClientId %>,<%=控件Id.UniqueId>
源碼下載posted @ 2011-09-05 17:07 張果 閱讀(211) 評(píng)論(0)
編輯公告
昵稱：
張果園齡：
2年7個(gè)月粉絲：
11關(guān)注：
0+加關(guān)注
