JS中artdialog彈出框控制項提交表單思路詳解_javascript技巧

artDialog是一個基於javascript編寫的對話框元件，它擁有精緻的介面與友善的介面。

前言：

自適應內容

artDialog的特殊UI框架能夠適應內容變化，甚至連外部程式動態插入的內容它仍然能自適應，因此你不必去考慮訊息內容尺寸使用它。它的訊息容器甚至能夠根據寬度讓文字居中或居左對齊——這一切全是XHTML+CSS原生實作。

完善的介面

它的介面完善，可以輕易與外部程式搭配使用。如非同步寫入訊息、控制位置、尺寸、顯示與隱藏、關閉等。

細緻的體驗

如果不是在輸入狀態，它支援Esc快捷鍵關閉；可指定在元素附近彈出，讓操作更便捷；智能給按鈕添加焦點；黃金比例垂直居中；超大響應區域特別為ipad等觸控設備優化；預先快取皮膚圖片更快回應…

跨平台相容

相容：IE6+、Firefox、Chrome、Safari、Opera以及iPad等行動裝置。且IE6下方也能支援現代瀏覽器的靜止定位(fixed)、覆蓋下拉控制、alpha通道png背景。

步入正題：

artdialog 不錯的彈出框控制

接觸artdialog已經有一段時間了，覺得其用起來還不錯，比較輕量級，javascript的插件我比較喜歡輕量級的，加載速度快。

其功能也很不錯，功能很齊全，相對於其它彈出插件，這個插件不僅還在維護，而且bug也少，用起來也挺方便，是國內比較出眾的插件之一。

呼叫方法如下：

//说明下面是一段通过artdialog弹出form表单，并通过ajaxform来提交的js（表单可以采用jquery validate验证控件来验证表单）
$(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: '关闭',
callback: function () {
}
}
]
});
});
function showResponse(data){
if(alt !=null){
alt.close();
}
if(data=='success'){
artDialog.alert('保存成功');
}else{
art.dialog.close();
artDialog.alert('保存失败');
}
}
});

以上所述是小編給大家介紹的JS中artdialog彈出框控件之提交表單思路詳解，希望對大家有幫助！