jQueryプラグインartDialog.jsの使い方と終了方法を詳しく解説-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

jQueryプラグインartDialog.jsの使い方と終了方法を詳しく解説

小云云

Dec 27, 2017 am 09:16 AM

javascriptjquery

この記事では、jQuery プラグイン artDialog.js の使用方法と終了方法を主に紹介し、jQuery ポップアップウィンドウプラグイン artDialog.js の簡単な使用方法と関連する注意事項を具体的な例に基づいて分析します。洗濯後の参考にしてください。

子ウィンドウアートダイアログを閉じるための究極の解決策:

window.parent.window.art.dialog({ id: &#39;qin123&#39; }).close();

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>art</title>
 <link id="artDialogSkin" href="skins/default.css" rel="external nofollow" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="artDialog.js"></script>
<script type="text/javascript" src="plugins/iframeTools.js"></script> <!-- 对iframe的新工具 -->
</head>
<body >
<script type="text/javascript">
 function a(){
    art.dialog({content:&#39;hello world!历史&#39;})
    }
 function b(){
  art.dialog(
  {
   content:&#39;欢迎你来到对话框世界！&#39;,
   lock:true,
   style:&#39;succeed noClose&#39;
  },
  function(){
   alert(&#39;你点了确定&#39;); //不管点了确定还是取消默认都会关闭artdialog，除非在这里面返回false
  },
  function(){
   alert(&#39;你点了取消&#39;);
  }
     );
    }
 function c(){
 art.dialog(
 {
 title:&#39;图片查看&#39;,
 fixed:true,
  content:&#39;<img  src="/static/imghwm/default1.png"  data-src="butterfly.jpg"  class="lazy"     style="max-width:90%"  style="max-width:90%"  / alt="jQueryプラグインartDialog.jsの使い方と終了方法を詳しく解説" >&#39;
     });
 //return false;
 };
 function d(){
 // art.dialog({title:&#39;dialog内嵌iframe&#39;, iframe:&#39;http://www.baidu.com&#39;, width:&#39;900&#39;, height:&#39;500&#39;});
 //已经没有了直接的iframe属性 通过下面的方式内嵌iframe 第二种效果不佳
 art.dialog.open("http://www.baidu.com", {width: 320, height: 400});
 // art.dialog({title:&#39;dialog内嵌iframe&#39;, width:&#39;900px&#39;,height:&#39;500px&#39;, content:"<iframe align=&#39;right&#39; src=&#39;http://www.baidu.com&#39; width:&#39;100%&#39; height:&#39;100%&#39; />"});
 return false;
 };
 function e(){
 art.dialog(
 {
 title:&#39;动画&#39;,
 fixed:true,
  content:&#39;<embed src="ddd.rm" type="audio/x-pn-realaudio-plugin" autostart="true" width="420" height="363"></embed>&#39;
     });
 }; //播放avi总是只有声音，没有画面，哎！
function f(){
 art.dialog({content:&#39;你人品稳定么？&#39;, fixed:true, yesText:&#39;我很稳定&#39;, style:&#39;confirm&#39;, id:&#39;bnt4_test&#39;},
 function(){
   art.dialog({id:&#39;bnt4_test&#39;}).content(&#39;你骗人！&#39;);
   return false;//这样对话框才不会关闭
  },
  function(){alert(&#39;你是坏人&#39;);}//按右上角的叉关闭对话框也会执行这个函数
  );
 };
 function g(){
 art.dialog({mouse:true, id:&#39;dg_test34243&#39;, content:&#39;您收到 <strong>2</strong> 条消息&#39;,left:&#39;right&#39;,width:&#39;15em&#39;, top:&#39;bottom&#39;, fixed:true});
 };
 function h(){
 art.dialog({id:&#39;dg_test34243&#39;}).close();
 };
 function i(){
  var _this = document.getElementById(&#39;btn7&#39;);
  if (document.getElementById(&#39;menu_4834783&#39;)) {//如果已经打开了对话框，按这个按钮还能把它关闭
  art.dialog({id:&#39;menu_4834783&#39;}).close();
  _this.innerHTML = &#39;弹出菜单&#39;; //button上显示的内容
  return;
  };
 art.dialog({id:&#39;menu_4834783&#39;, title:&#39;菜单&#39;, content:&#39;请输入：<input style="width:200px;" id="M_dfd" type="text" value="hello world!" />&#39;,
  button:[{name:&#39;确定&#39;,callback:function(){
    var a=document.getElementById(&#39;M_dfd&#39;).value;
    art.dialog({content:a, lock:true, time:1});
    }
  },
  {name:&#39;关闭我&#39;,callback:function(){_this.innerHTML = &#39;弹出菜单&#39;;}}
  ]
  }
  );
 _this.innerHTML = &#39;关闭菜单&#39;;
 return false;
 };
 </script>
<input type="button" style="width: 100px" onClick="a()" value="最简单的对话框"/><br/>
<button id="btn0" onClick="b()">基本示例</button><br/>
<button id="btn1" onClick="c()">显示图片</button><br/>
<button id="btn2" onClick="d()">外部页面</button><br/>
<button id="btn3" onClick="e()">视频</button><br/>
<button id="btn4" onClick="f()">询问</button><br/>
<button id="btn5" onClick="g()">广告</button>
<button id="btn6" onClick="h()">关闭</button><br/>
<button id="btn7" onClick="i()">弹出菜单</button><br/>
</body>
</html>

関連する推奨事項:

Jqueryプラグインを理解する方法

jqueryプラグインtablesorter htmlの実装方法テーブルの使用例の詳細な説明

jquery プラグインのデータテーブル属性の紹介と、ページングとソートの作成例の詳細な説明

以上がjQueryプラグインartDialog.jsの使い方と終了方法を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ブラウザを超えて：現実世界のJavaScriptApr 12, 2025 am 12:06 AM

現実世界におけるJavaScriptのアプリケーションには、サーバー側のプログラミング、モバイルアプリケーション開発、モノのインターネット制御が含まれます。 2。モバイルアプリケーションの開発は、ReactNativeを通じて実行され、クロスプラットフォームの展開をサポートします。 3.ハードウェアの相互作用に適したJohnny-Fiveライブラリを介したIoTデバイス制御に使用されます。

next.jsを使用してマルチテナントSaaSアプリケーションを構築する（バックエンド統合）Apr 11, 2025 am 08:23 AM

私はあなたの日常的な技術ツールを使用して機能的なマルチテナントSaaSアプリケーション（EDTECHアプリ）を作成しましたが、あなたは同じことをすることができます。まず、マルチテナントSaaSアプリケーションとは何ですか？マルチテナントSaaSアプリケーションを使用すると、Singの複数の顧客にサービスを提供できます

next.jsを使用してマルチテナントSaaSアプリケーションを構築する方法（フロントエンド統合）Apr 11, 2025 am 08:22 AM

この記事では、許可によって保護されたバックエンドとのフロントエンド統合を示し、next.jsを使用して機能的なedtech SaaSアプリケーションを構築します。 FrontEndはユーザーのアクセス許可を取得してUIの可視性を制御し、APIリクエストがロールベースに付着することを保証します

JavaScript：Web言語の汎用性の調査Apr 11, 2025 am 12:01 AM

JavaScriptは、現代のWeb開発のコア言語であり、その多様性と柔軟性に広く使用されています。 1）フロントエンド開発：DOM操作と最新のフレームワーク（React、Vue.JS、Angularなど）を通じて、動的なWebページとシングルページアプリケーションを構築します。 2）サーバー側の開発：node.jsは、非ブロッキングI/Oモデルを使用して、高い並行性とリアルタイムアプリケーションを処理します。 3）モバイルおよびデスクトップアプリケーション開発：クロスプラットフォーム開発は、反応および電子を通じて実現され、開発効率を向上させます。

JavaScriptの進化：現在の傾向と将来の見通しApr 10, 2025 am 09:33 AM

JavaScriptの最新トレンドには、TypeScriptの台頭、最新のフレームワークとライブラリの人気、WebAssemblyの適用が含まれます。将来の見通しは、より強力なタイプシステム、サーバー側のJavaScriptの開発、人工知能と機械学習の拡大、およびIoTおよびEDGEコンピューティングの可能性をカバーしています。

javascriptの分解：それが何をするのか、なぜそれが重要なのかApr 09, 2025 am 12:07 AM

JavaScriptは現代のWeb開発の基礎であり、その主な機能には、イベント駆動型のプログラミング、動的コンテンツ生成、非同期プログラミングが含まれます。 1）イベント駆動型プログラミングにより、Webページはユーザー操作に応じて動的に変更できます。 2）動的コンテンツ生成により、条件に応じてページコンテンツを調整できます。 3）非同期プログラミングにより、ユーザーインターフェイスがブロックされないようにします。 JavaScriptは、Webインタラクション、シングルページアプリケーション、サーバー側の開発で広く使用されており、ユーザーエクスペリエンスとクロスプラットフォーム開発の柔軟性を大幅に改善しています。

pythonまたはjavascriptの方がいいですか？Apr 06, 2025 am 12:14 AM

Pythonはデータサイエンスや機械学習により適していますが、JavaScriptはフロントエンドとフルスタックの開発により適しています。 1. Pythonは、簡潔な構文とリッチライブラリエコシステムで知られており、データ分析とWeb開発に適しています。 2。JavaScriptは、フロントエンド開発の中核です。 node.jsはサーバー側のプログラミングをサポートしており、フルスタック開発に適しています。

JavaScriptをインストールするにはどうすればよいですか？Apr 05, 2025 am 12:16 AM

JavaScriptは、最新のブラウザにすでに組み込まれているため、インストールを必要としません。開始するには、テキストエディターとブラウザのみが必要です。 1）ブラウザ環境では、タグを介してHTMLファイルを埋め込んで実行します。 2）node.js環境では、node.jsをダウンロードしてインストールした後、コマンドラインを介してJavaScriptファイルを実行します。

See all articles