ホームページ > ウェブフロントエンド > jsチュートリアル > JS_javascript スキルにおける artdialog ポップアップ ボックス コントロールの送信フォームのアイデアの詳細な説明

JS_javascript スキルにおける artdialog ポップアップ ボックス コントロールの送信フォームのアイデアの詳細な説明

WBOY
リリース: 2016-05-16 15:05:11
オリジナル
1599 人が閲覧しました

artDialog は、JavaScript に基づいて書かれたダイアログ コンポーネントであり、絶妙なインターフェイスとフレンドリーなインターフェイスを備えています。

序文:

アダプティブコンテンツ

artDialog の特別な UI フレームワークは、コンテンツの変更に適応でき、外部プログラムによって動的に挿入されたコンテンツにも適応できるため、使用する際にメッセージ コンテンツのサイズを考慮する必要はありません。そのメッセージ コンテナでは、幅に基づいてテキストを中央揃えまたは左揃えにすることもできます。すべて XHTML+CSS でネイティブに行われます。

完全なインターフェース

完全なインターフェイスを備えており、外部プログラムで簡単に使用できます。メッセージの非同期書き込み、位置、サイズ、表示と非表示、閉じるなどの制御など。

詳しい体験

入力状態でない場合は、Esc ショートカット キーを使用して要素の近くにポップアップするように指定でき、ボタンにフォーカスをインテリジェントに追加できます。中央に配置され、広い応答領域は iPad などのタッチ スクリーン デバイス向けに特別に最適化されており、より高速な応答を実現します。

クロスプラットフォーム互換

互換性: IE6+、Firefox、Chrome、Safari、Opera、iPad、その他のモバイルデバイス。また、IE6 は、最新のブラウザーの静的配置 (固定)、オーバーレイ ドロップダウン コントロール、アルファ チャネル PNG 背景もサポートできます。

本題:

artdialog は優れたポップアップ ボックス コントロールです

私はしばらく ArtDialog を使ってきましたが、これは非常に使いやすく、軽量で読み込み速度が速い JavaScript プラグインを好みます。

このプラグインは他のポップアッププラグインと比較して非常に優れており、まだメンテナンス中であるだけでなく、バ​​グも少なく、非常に使いやすいプラグインの1つです。中国でさらに優れたプラグインが登場しました。

呼び出し方法は次のとおりです:

//说明下面是一段通过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ポップアップボックスコントロールの投稿フォームアイデアについて詳しく説明しました。皆さんの参考になれば幸いです。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート