jQuery Dialog對話方塊事件用法實例分析_jquery

本文實例講述了jquery dialog對話方塊事件用法。分享給大家參考，具體如下：

dialog對話框事件

對話方塊應用場景

對話框是最常用、最實用的功能。

1) 靜態提示類別對話框，對話框的內容是固定的
2) 動態提示類別對話框，對話框內容是根據事件來源變化的
3) 遮罩類別對話框，對話方塊彈出時背景變灰且不可選

使用jquery ui的dialog 元件可以輕鬆實現上面三種效果

dialog元件的主要特點是可以拖曳（draggable），可以改變大小（resizable）。

dialog對話框的使用也十分簡單，選中了一個元素後，可以透過這個元素使用".dialog()"讓其變成一個對話框，透過傳遞各種options屬性類別修改對話框的各種行為。

通常一個對話框是一個div元素：

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

下面的語句將使用預設的options屬性產生一個對話框。

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

執行完上面的語句後，這個div元素變成了一個可以拖曳、可以拉伸的對話框。

當然這只是最簡單的應用。下面透過一個完整的實例來快速上手dialog對話框元件。

使用dialog控制實現三種具體的彈出框。

一種是靜態彈出層，即彈出層的內容是固定的。

一種是動態彈出層，即彈出層的內容會根據事件的觸發者而不同。

另外一種是常見的遮罩類別彈出層，也就是彈出層顯示後，頁面上除了彈出層以外的元素都不能操作。

先看一下頁面上的幾個元素的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的dialog控制項。首先，在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切換特效與技巧總結》、 《jquery拖曳特效與技巧總結》、《jquery擴充技巧摘要》、《jquery常見經典特效總結》、《jquery動畫與特效用法總結》、《jquery選擇器用法總結 》及《jquery常用插件及用法總結》

希望本文所述對大家jquery程式設計有所幫助。