快捷導(dǎo)航

JS中artdialog彈出框控件之提交表單思路詳解

更新時(shí)間：2016年04月18日 09:54:51 作者：黑♂白

artDialog是一個(gè)基于javascript編寫(xiě)的對(duì)話框組件，它擁有精致的界面與友好的接口。本文給大家介紹JS中artdialog彈出框控件之提交表單思路詳解，對(duì)本文感興趣的朋友一起學(xué)習(xí)吧

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ì)大家有所幫助！

您可能感興趣的文章: