jQueryダイアログダイアログボックスイベントの使用例分析_jquery

この記事の例では、jquery ダイアログ ダイアログ ボックス イベントの使用法について説明します。参考のために全員と共有してください。詳細は次のとおりです。

ダイアログダイアログイベント

ダイアログ アプリケーションのシナリオ

ダイアログ ボックスは、最も一般的に使用される実用的な機能です。

1) 静的プロンプト ダイアログ ボックス、ダイアログ ボックスの内容は固定されています
2) 動的プロンプト ダイアログ ボックス。ダイアログ ボックスの内容はイベント ソースに応じて変化します。
3) マスク ダイアログ ボックス。ダイアログ ボックスが表示されると、背景が灰色になり、選択できなくなります。

上記の 3 つの効果は、jquery ui の dialog コンポーネントを使用して簡単に実現できます。

dialog コンポーネントの主な機能は、ドラッグ (draggable) およびサイズ変更 (resizable) できることです。

ダイアログ ダイアログ ボックスの使用も非常に簡単です。要素を選択した後、その要素に「.dialog()」を使用してそれをダイアログ ボックスに変え、ダイアログ ボックスの各要素を渡すことで変更できます。さまざまなオプションの属性クラス、動作の種類。

通常、ダイアログ ボックスは div 要素です。

<div id="divtip" title="自定义标题">
  <p>弹出层</p>
</div>

次のステートメントは、デフォルトのオプション属性を使用してダイアログ ボックスを生成します。

jquery("#divtip").dialog();

上記のステートメントを実行すると、div 要素はドラッグおよび伸縮可能なダイアログ ボックスになります。

もちろん、これは最も単純なアプリケーションにすぎません。完全な例を使用して、ダイアログ ボックス コンポーネントをすぐに使い始めましょう。

ダイアログ コントロールを使用して、3 つの特定のポップアップ ボックスを実装します。

1 つは静的なポップアップ レイヤーです。つまり、ポップアップ レイヤーのコンテンツは固定されています。

1 つは動的ポップアップ レイヤーです。つまり、ポップアップ レイヤーのコンテンツはイベントのトリガーに応じて変化します。

もう 1 つは一般的なマスク ポップアップ レイヤーです。つまり、ポップアップ レイヤーが表示された後は、ポップアップ レイヤー以外のページ上の要素は操作できません。

まず、ページ上のいくつかの要素の html スニペットを見てください。

<!—demo 静态提示类弹出层—>
<div class="ui-widget ui widget-contentui-corner-all" style="width:700px;padding:5px">
  <h3 id="demo-共享同一个静态弹出层-弹出层内容固定">demo.共享同一个静态弹出层，弹出层内容固定：</h3>
  <div>
   <spanid="spanshowtip1">显示提示</span>  <span id="spanshowtip2">显示提示</span>  
   <spanid="spanshowtip3">显示提示</span>   <span id="spanshowtip4">显示提示</span>  
  </div>
  <br/>
  <br/>
<!—demo动态显示类弹出层-->
<div class="ui-widget ui-widget-contentui-corner-all" style="width:700px; padding:5px">
  <h3 id="demo-每个弹出层内容不同-弹出层内容存在事件源的元素属性中">demo.每个弹出层内容不同，弹出层内容存在事件源的元素属性中：</h3>
  <div>
   <spanid="spanshowdatatip1" data="颜色是红色">红色</span>     
<span id="spanshowdatatip2" data="颜色是绿色">绿色</span>    
</div>
</div>
<br />
<br />
<!—demo.遮罩类弹出层-->
<div class="ui-widget ui-widget-contentui-corner-all" style="width:700px;padding:5px">
  <h3 id="demo-弹出iframe">demo.弹出iframe</h3>
  <div>
   <inputtype="button" id="bunshowiframe" name=" bunshowiframe" value="显示弹出层" />
  </div>
</div>

要素ページに表示される要素は、ポップアップ レイヤーを表示するイベントをトリガーするために使用されます。

ポップアップ レイヤーの html コードは次のとおりです。

<!—提示类弹出层—>
<div id="divtip" title="自定义标题">
  <p>弹出层</p>
</div>
<!—遮罩类弹出层—>
<div id="diviframe" title="iframe 弹出层" style="text-align:center">
  <iframesrc="http://www.hbcsdn.tk" width="480px"height="250px" frameborder="0"></iframe>
</div>

ポップアップ レイヤーは div 要素です。必要に応じて表示または非表示になります。

html 要素の準備ができたら、次のステップは jquery ui ダイアログ コントロールを適用することです。まず、initializedom で、後で操作する必要があるページ要素を取得します。

initializeDom:function(){//初始化DOM
  this.$spanShowTip=$("span[id^=spanShowTip]");
  this.$spanShowDataTip=$("span[id^=spanShowDataTip]");
  this.$btnShowIframe=$("#btnShowIframe");
  this.$divTip=$("#divTip");
  tis.$divIframe=$("#divIframe");
}

さらに jquery 関連のコンテンツに興味がある読者は、このサイトの特別トピック「jquery スイッチングの特殊効果とテクニックの概要」を参照してください。 a>"、"jquery ドラッグ エフェクトとテクニックの概要"、"jquery 拡張機能のスキルの概要"、"jquery の一般的な古典的な特殊効果の概要"、"jquery アニメーションと特殊効果の使用法の概要"、"jquery セレクターの使用法の概要 》と《jquery の一般的なプラグインと使用法の概要》

この記事が jquery プログラミングのすべての人に役立つことを願っています。