DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> JS中artdialog彈出框控件之提交表單思路詳解
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彈出框控件之提交表單思路詳解,希望對大家有所幫助!

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved