JS中artdialog彈出框控件之提交表單思路詳解
artDialog是一個(gè)基于javascript編寫(xiě)的對(duì)話框組件,它擁有精致的界面與友好的接口。
前言:
自適應(yīng)內(nèi)容
artDialog的特殊UI框架能夠適應(yīng)內(nèi)容變化,甚至連外部程序動(dòng)態(tài)插入的內(nèi)容它仍然能自適應(yīng),因此你不必去考慮消息內(nèi)容尺寸使用它。它的消息容器甚至能夠根據(jù)寬度讓文本居中或居左對(duì)齊——這一切全是XHTML+CSS原生實(shí)現(xiàn)。
完善的接口
它的接口完善,可以輕易與外部程序配合使用。如異步寫(xiě)入消息、控制位置、尺寸、顯示與隱藏、關(guān)閉等。
細(xì)致的體驗(yàn)
如果不是在輸入狀態(tài),它支持Esc快捷鍵關(guān)閉;可指定在元素附近彈出,讓操作更便捷;智能給按鈕添加焦點(diǎn);黃金比例垂直居中;超大響應(yīng)區(qū)域特別為ipad等觸屏設(shè)備優(yōu)化;預(yù)先緩存皮膚圖片更快響應(yīng)……
跨平臺(tái)兼容
兼容:IE6+、Firefox、Chrome、Safari、Opera以及iPad等移動(dòng)設(shè)備。并且IE6下也能支持現(xiàn)代瀏覽器的靜止定位(fixed)、覆蓋下拉控件、alpha通道png背景。
步入正題:
artdialog 不錯(cuò)的彈出框控件
接觸artdialog已經(jīng)有一段時(shí)間了,覺(jué)得其用起來(lái)還不錯(cuò),比較輕量級(jí),javascript的插件我比較喜歡輕量級(jí)的,加載速度快。
其功能也很不錯(cuò),功能很齊全,相對(duì)于其它彈出插件,這個(gè)插件不僅還在維護(hù),而且bug也少,用起來(lái)也挺方便,是國(guó)內(nèi)比較出眾的插件之一。
調(diào)用方法如下:
//說(shuō)明下面是一段通過(guò)artdialog彈出form表單,并通過(guò)ajaxform來(lái)提交的js(表單可以采用jquery validate驗(yàn)證控件來(lái)驗(yàn)證表單)
$(document).ready(function() {
var options = {
target: '#output2',
success: showResponse // post-submit callback
};
$('#myForm').ajaxForm(options);
var alt =null;
$("#addHname").click(function(){
alt=art.dialog({
title:'新增花名',
content: document.getElementById('g_cn'),
width:750,
button: [
{
name: '保存',
focus: true,
callback: function () {
$('#myForm').submit();
return false;
}
},
{
name: '關(guān)閉',
callback: function () {
}
}
]
});
});
function showResponse(data){
if(alt !=null){
alt.close();
}
if(data=='success'){
artDialog.alert('保存成功');
}else{
art.dialog.close();
artDialog.alert('保存失敗');
}
}
});
以上所述是小編給大家介紹的JS中artdialog彈出框控件之提交表單思路詳解,希望對(duì)大家有所幫助!
- 分享2個(gè)jQuery插件--jquery.fileupload與artdialog
- artdialog的圖片/標(biāo)題以及關(guān)閉按鈕不顯示的解決方法
- 給artDialog 5.02 增加ajax get功能詳細(xì)介紹
- artDialog 4.1.5 Dreamweaver代碼提示/補(bǔ)全插件 附下載
- artDialog雙擊會(huì)關(guān)閉對(duì)話框的修改過(guò)程分享
- jQuery validate+artdialog+jquery form實(shí)現(xiàn)彈出表單思路詳解
- artDialog+plupload實(shí)現(xiàn)多文件上傳
- plupload+artdialog實(shí)現(xiàn)多平臺(tái)上傳文件
- jQuery對(duì)話框插件ArtDialog在雙擊遮罩層時(shí)出現(xiàn)關(guān)閉現(xiàn)象的解決方法
- Jquery彈出窗口插件 LeanModal的使用方法
- 使用jQuery插件創(chuàng)建常規(guī)模態(tài)窗口登陸效果
- jQuery插件artDialog.js使用與關(guān)閉方法示例
相關(guān)文章
實(shí)例詳解JavaScript中setTimeout函數(shù)的執(zhí)行順序
關(guān)于javascript的運(yùn)行機(jī)制大家都應(yīng)該有所了解了吧,其實(shí)javascript是一個(gè)單線程的機(jī)制,但是因?yàn)殛?duì)列的關(guān)系它的表現(xiàn)會(huì)讓我們感覺(jué)是一個(gè)多線程的錯(cuò)覺(jué)。下面這篇文章通過(guò)實(shí)例主要給大家介紹了關(guān)于JavaScript中setTimeout函數(shù)執(zhí)行順序的相關(guān)資料,需要的朋友可以參考下。2017-07-07
淺析Javascript匿名函數(shù)與自執(zhí)行函數(shù)
的相關(guān)資料2016-02-02
一文詳解如何檢測(cè)并解決JS代碼中的死循環(huán)
這篇文章主要想和大家來(lái)一起探討一下能否通過(guò)靜態(tài)分析的方式檢測(cè)出死循環(huán),如果不能,我們又應(yīng)該如何在不借用其他線程的情況下,解決死循環(huán)卡住問(wèn)題,感興趣的可以了解下2023-09-09
JavaScript中reduce方法的用法及使用場(chǎng)景
reduce()方法對(duì)數(shù)組中的每個(gè)元素按序執(zhí)行一個(gè)提供的reducer函數(shù),每一次運(yùn)行 reducer會(huì)將先前元素的計(jì)算結(jié)果作為參數(shù)傳入,最后將其結(jié)果匯總為單個(gè)返回值,今天我們就介紹一下reduce的幾種簡(jiǎn)單使用場(chǎng)景,需要的朋友可以參考下2023-08-08
響應(yīng)式表格之固定表頭的簡(jiǎn)單實(shí)現(xiàn)
下面小編就為大家?guī)?lái)一篇響應(yīng)式表格之固定表頭的簡(jiǎn)單實(shí)現(xiàn)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08
JavaScript分步實(shí)現(xiàn)一個(gè)出生日期的正則表達(dá)式
本文把出生日期分割成幾個(gè)部分,分步地介紹了實(shí)現(xiàn)一個(gè)出生日期校驗(yàn)的完整過(guò)程。對(duì)出生日期正則表達(dá)式感興趣的朋友參考下吧2018-03-03

