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彈出框控件之提交表單思路詳解,希望對大家有幫助!