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

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

WBOY

リリース： 2016-05-16 09:00:09

オリジナル

2614 人が閲覧しました

この記事の例では、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>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>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>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 プログラミングのすべての人に役立つことを願っています。