1. 程式人生 > >jquery dialog api

jquery dialog api

對話方塊是一個懸浮視窗,包括一個標題欄和一個內容區域。對話方塊視窗可以移動,重新調整大小,預設情況下通過 'x' 圖示關閉。

如果內容長度超過最大高度,一個滾動條會自動出現。

一個底部按鈕欄和一個半透明的模式覆蓋層是常見的新增選項。

焦點

當開啟一個對話方塊時,焦點會自動移動到滿足下面條件的第一個專案:

  1. 帶有autofocus屬性的對話方塊內的第一個元素
  2. 對話方塊按鈕面板內的第一個:tabbable元素
  3. 對話方塊的關閉按鈕
  4. 對話方塊本身

當開啟時,對話方塊部件(Dialog Widget)確保通過 tab 切換對話方塊內元素間的焦點,不包括對話方塊外的元素。模態對話方塊防止滑鼠使用者點選對話方塊外的元素。

當關閉對話方塊時,焦點自動返回到之前對話方塊開啟時獲得焦點的元素上。

隱藏關閉按鈕

在一些情況下,您可能想要隱藏關閉按鈕,例如,在按鈕面板中已經有一個關閉按鈕的情況。最好的解決方法是通過 CSS。作為例項,您可以定義一個簡單的規則,比如:

1 2 3
.no-close .ui-dialog-titlebar-close {  display: none;}

然後,您可以新增no-closeclass 到任意的對話方塊,用來隱藏關閉按鈕:

1 2 3 4 5 6 7 8 9 10 11
$( "#dialog" ).dialog({  dialogClass: "no-close",  buttons: [    {      text: "OK",      click: function() {        $( this ).dialog( "close" );      }    }  ]});

主題

對話方塊部件(Dialog Widget)使用jQuery UI CSS 框架來定義它的外觀和感觀的樣式。如果需要使用對話方塊指定的樣式,則可以使用下面的 CSS class 名稱:

  • ui-dialog:對話方塊的外層容器。
    • ui-dialog-titlebar
      :包含對話方塊標題和關閉按鈕的標題欄。
      • ui-dialog-title:對話方塊文字標題周圍的容器。
      • ui-dialog-titlebar-close:對話方塊的關閉按鈕。
    • ui-dialog-content:對話方塊內容周圍的容器。這也是部件被例項化的元素。
    • ui-dialog-buttonpane:包含對話按鈕的面板。只有當設定了buttons選項時才呈現。
      • ui-dialog-buttonset:按鈕周圍的容器。

此外,當設定了modal選項時,一個帶有ui-widget-overlayclass 名稱的元素被追加到<body>

依賴

相關推薦

jquery dialog api

對話方塊是一個懸浮視窗,包括一個標題欄和一個內容區域。對話方塊視窗可以移動,重新調整大小,預設情況下通過 'x' 圖示關閉。 如果內容長度超過最大高度,一個滾動條會自動出現。 一個底部按鈕欄和一個半透明的模式覆蓋層是常見的新增選項。 焦點 當開啟一個對話方塊時,焦點會自動移動到

jQuery formValidator API

ips 轉義字符 one 沒有 數據 ssd 輸入 錯誤提示 borde jQuery formValidator插件的API幫助 目前支持5種大的校驗方式,分別是:inputValidator(針對input、textarea、select控件的字符長度、值範圍、選擇個數

jQuery Jcrop API參數說明(中文版)

api tools eof lib 其中 object gets 格式 cells Jcrop是一個jQuery圖片裁剪插件,它能為你的WEB應用程序快速簡單地提供圖片裁剪的功能。特點如下: 對所有圖片均unobtrusively(無侵入的,保持DOM簡潔) 支持寬高比例

對於Jquery Dialog外掛在frameset中的使用

最近一直忙於對公司原先專案的改造,在改造主頁面時遇到一個問題,原先主頁面是frameset標籤,其中有個頁面有使用者登入和修改密碼對話方塊,原先頁面處理比較粗糙,想換成Jquery UI中的dialog外掛。但是彈出對話方塊無法覆蓋整個frameset框架,只能覆蓋使用者登

自制一個 簡易jQueryAPI

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>簡易jQuery</title> <style> .blu

jquery dialog 引數使用

Jquery ui的dialog使用文件概述 一個浮動的視窗,包含標題和內容兩部分。可以移動,調整大小,以及關閉圖示'×'。如果內容長度超過了對話方塊內容區域的顯示,則會自動出現滾動條。除此之外,還有一些常用的選項,如:新增底部按鈕欄、模式視窗遮蔽層等。 ·引數(名稱 : 引

jquery dialog屬性的簡單配置

記錄是為了更好的成長! <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-w

jQuery EasyUI API 中文文件

Tabs  標籤頁/選項卡 用$.fn.tabs.defaults重寫defaults。 依賴 panellinkbutton用法示例 建立tabs 1. 經由標記建立Tabs 從標記建立Tabs更容易,我們不需要寫任何JavaScript程式碼。記住把 'easyui

jquery dialog開啟時,焦點自動在第一個text框上

今天在用jqueryui的日曆功能,datepicker時碰到一個問題。輸入框在一個彈出的jquery dialog中,每次dialog(“open”)的時候,對話方塊的焦點自動focus到第一個<input type="text"/>框,正好這個input框

jquery.Jcrop API詳解

Jcrop是一個jQuery圖片裁剪外掛,它能為你的WEB應用程式快速簡單地提供圖片裁剪的功能。特點如下: 對所有圖片均unobtrusively(無侵入的,保持DOM簡潔) 支援寬高比例鎖定 支援

Jquery dialog( 'destroy' ) 後還有快取

使用jQuery的Dialog控制元件時,jQuery會將建立的dialog快取到頁面上,生成一些隱藏的div,當再次建立dialog時,由於id相同總會呼叫快取中的Dialog,導致無法顯示想要顯示的內容。查了dialog有destroy方法,依然沒有作用。 baidu一

通過jquery dialog為什麼提交不了form表單 和 $("#Form").ajaxSubmit(options) is not a function 的原因

1.jquery dialog為什麼提交不了form表單  $("#dialog").dialog({                 autoOpen: false,                 height: 500,                 width:

jquery dialog iframe簡單例子

<divid="dialog">    <iframeid="myIframe"src=""></iframe></div><buttonid="dialogBtn">Open Dialog</button&

隱藏jQuery Dialog的關閉圖示

$("#div1").dialog({ closeOnEscape: false, open: function(event, ui) { $(".ui-dialog-titlebar-c

jquery dialog 屬性詳解

http://hi.baidu.com/vevoly/blog/item/d61c7189a7eb73bb0e2444f7.html 還是先看例子吧。另外如果要拖動、改變dialog的大小的話要加上ui.draggble.js和ui.resizable.js <!DO

動畫效果 詳情請看 jQuery api 動畫收放 slideUp slideDown 通過id class 來設置 jQuery實現效果

color ada htm border order style borde query list <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8">

jquery ui dialog 內部使用asp.net控件

end 問題 textbox 代碼 jquer dto click serve form dialog中只要加上 appendTo:"form", 就能解決後端無法獲取asp.net控件的值,同時解決了 modal: true, 啟動模式對話框時無法

jQuery-全屏滾動插件【fullPage.js】API 使用方法總結

ide fixed uart 移動 alc add 兩個 電子 寬度 jQuery-全屏滾動插件fullPage.js使用方法總結   作者github及下載地址:https://github.com/alvarotrigo/fullPage.js   今天說下jQuer

jQuery AjaxUpload中文使用API和demo示例

tle response 正常 動態數據 處理 down log 帶來 所有 1、AjaxUpload上傳插件   瀏覽器迫使我們使用文件輸入控件(<input type=”file” />)做上傳,然而此控件的樣式是不能修改的。此外,基於表單上傳在流行的Aja

JQuery常用的 api

con .com post text elements rst each jquer clas text http://api.jquery.com/text/ Get the combined text contents of each element in the