2008年12月4日，星期四，
沒有評論

jQuery的：一個確認窗口

我們仍然jQuery的實際用途的問題。 今天，我需要寫一個窗口，確認在管理面板的操作。 看似簡單的情況下，就可以解決這個問題，關於JavaScript（確認）或PHP遺忘，但樂趣在於怎麼做，以免造成，甚至認為是一個真正體面的結果嗎？
我會盡力呈現出樣品溶液的問題，假設我們想要的元素，是伴隨著由用戶確認，是一個鏈接。

第一 示例HTML文件

我們開始對我們履行我們的卑鄙的測試文件： 

  DOCTYPE HTML PUBLIC“ -  / / W3C / / DTD XHTML 1.0過渡/ / EN”“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
 <html xmlns="http://www.w3.org/1999/xhtml">
 <HEAD>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"
 <TITLE>確認對話框</ TITLE>
 </ HEAD>
 <BODY>
 <P>
 LOREM IPSUM的悲靜坐AMET，consectetur adipiscing精英。  quisque ultrices Orci nisl QUIS。  aliquam在悲。 華富consequat桑達交流利奧。  curabitur燕雀sodales SEM。  Praesent eleifend mauris AC事前aliquet格言。  SAPIEN Etiam空，consequat eget，consequat簡歷，molestie ID，Lectus。 在HAc habitasse platea dictumst。  aliquam feugiat奧迪奧交流Lectus。  suspendisse egestas nisl雜色山雀。  morbi空。  pellentesque aliquet interdum貓屬。 前庭的Libero luctus euismod。  suspendisse sodales interdum Enimem。  pellentesque Orcia的。  nulla馬薩NUNC，eleifend又名，eleifend雜色山雀，叢eget，獅子座。 前庭事前IPSUM primis在faucibus Orci等ultrices posuere luctus cubilia Curae; <br/>
 CRAS aliquet發酵dignissim華富ligula在ligula，QUIS ligula rutrum accumsan LOREM LOREM velit dignissim。  nulla的格言interdum普魯斯。  aenean奧迪奧。 前庭pretium。  phasellus Enimem Enimem，SEMPER aliquet的Tempus AC，rutrum孕婦，自由人。  ，Pellentesque scelerisque，suscipit又名etiam neque奧迪奧，blandit NEC公司，利奧。 在Metus ID。  vivamus rut​​rum。  nulla NEC velit。 尼絲紡UT普魯斯，在PORTA，tincidunt坐AMET，scelerisque枕，掃描電鏡。 桑達adipiscing Risus。 在暫準。 奧古斯丁等人。  phasellus ullamcorper QUIS的骨灰盒坦帕斯dapibus Lacus。  SED eget估。 得力士ERAT etiam，adipiscing NEC公司，placerat SED，ultricies，Orci。  CRAS交流Lectus。  curabitur NEC LOREM NIBH的馬蒂斯。  <a href="http://poslinski.net" class="confirm">梅塞納斯</ A> aliquet iaculis turpis。
 </ p>
 <div id="confirm"> </ DIV>
 </ BODY>
 </ HTML>

示例文本的發電機LOREM IPSUM的 ，裡面去了一個p。 前不久閉幕的身體標記，放置在div＃確認，內會有從我們的窗口代碼來確認。

第二 表示層

讓我們把目光集中在我們的窗口。 在我的情況下，HTML代碼，這將是負責整個窗口，將如下所示： 

  <div id="confirm">
 <DIV>
 <DIV>
 <H1>你確定要刪除這個項目嗎？</ H1>
 <P> <button onClick="location.href='TUTAJ將達到內容的HREF LINKU'"> YES </按鈕> <button>不</按鈕> </ P>
 </ DIV> < - 完＃確認的div的div  - >
 </ DIV> < - ！最終確認的div  - >
 </ DIV> < - 結束＃確認 - >

由JavaScript生成的代碼，裡面的＃確認。 但它是值得考慮，為什麼它看起來就像是，為什麼在頁面代碼的底部，是嗎？

讓我們開始與包括在最後的代碼的原因。 在確定的位置是：絕對的，＃確認沒有，從位置的對象序列的z-index參數：絕對的，它會在其中，他們是由瀏覽器產生的順序相匹配。 最後編譯，會有更比一摞層位置的：絕對的，所以如果例如，將具有相同的尺寸，屏蔽層，在代碼中出現較早。

為什麼確認裡面，我們把一個div兩次？ 為了澄清這一點，只是讀你的CSS代碼，你頭節內放置一節： 

  <style type="text/css">
 <！ - 
 * {保證金：0px，填充：0px;}
 {保證金：10px;}
 P {寬度：600px的;保證金：0汽車;線高度：25px;}

 / *確認* /
 ＃確認{顯示：無;位置：絕對高度：100％;寬度：100％;背景：＃000;頂：0;左：0;}
 ＃確認{身高：表達式（（[document.body.scrollHeight，document.documentElement.scrollHeight document.body.offsetHeight，document.documentElement.clientHeight（&& window.Enumerable的window.Enumerable.max）] MAX（）。 document.documentElement.scrollHeight）+'像素'）;寬度：表達式（（（&& window.Enumerable window.Enumerable.max）[document.body.scrollWidth，document.documentElement.scrollWidth，document.body.offsetWidth，文件。 documentElement.clientHeight] MAX（）：document.documentElement.scrollWidth）+“PX”）;}
 ＃確認[ID] {位置：固定;}
 ＃確認的div {填充：10px;保證金：200像素;}
 ＃確認的div的div {背景：＃900c0c;寬度：500px;保證金：0汽車;邊界：1px固體＃CCC認證;溢出：隱藏;}
 ＃確認H1的div的div {字體大小：18px;顏色：＃FFF;}
 ＃確認的div DIV P {填充：20像素;}
 - >
 </ STYLE>

＃定義在這裡證實，將“覆蓋”整個頁面的背景。 在第二線，（1奇怪的高度和寬度的一個），它是在Internet Explorer中的情況。＃確認[ID]是理解的只有現代的瀏覽器，這是在我們窗口的背景下計劃的100％到100％的大小和運行整個時間網站（IE瀏覽器在當前窗口的寬度和高度上根據每個案件計算）。

第一個div中心第二，採取從窗口上方的保證金頂距離是必要的。 第二個div已經提供了我們的窗口，以確認可為本，因為它裡面一個寬的塊元素是：100％（標準值與顯示元素：塊 -這是一個div）

第三 jQuery的時間

它仍然是我們上點擊鏈接出現在塊P，這把LOREM ipsum'a的反應： 

  <a href="http://poslinski.net" class="confirm">梅塞納斯</ A>

在我們的例子中，類確認的各個環節，將反應到腳本。 你可以申請我們承認所有環節，從數據庫中刪除一個值。

它需要的JavaScript代碼放在頁面底部： 

  SRC =“jquery.js”<script type="text/javascript"> </ SCRIPT>
 <script type="text/javascript">
 $（文件）。就緒（函數（）{
 $（“確認”）。點擊（函數（）{
 $（“＃確認”）
 CSS（{不透明：0.95}）
 。淡入（）
 HTML（“<DIV> <DIV> <H1>重定向</ H1> <P <按鈕的onClick = \”location.href = \'+ $（本）。的Attr（“HREF”）+“\ '\“>是</按鈕> <button>不</按鈕> </ P> </ DIV> </ DIV>'）;
返回false;
 }）;
 $（“＃確認”）點擊（函數（）{$（本）淡出（）;}）;
 }）;
 </ SCRIPT>

第一線負載jQuery的。

然後，我們的代碼$（文件）的主要分支。就緒，激活你的代碼，在頁面加載後。

我們響應元素類確認一下，在這種情況下，造成了一系列的元素ID =確認的方法。 開始，添加一個透明的（但仍然是一個元素被設置為顯示：無），然後使用方法淡入，jQuery的無縫移動從顯示：沒有透明度：0.95（在本例中）。 最後，裡面的元素＃確認，載入我們兩個divami，這裡面的H1頭按鈕和兩個按鈕放在HTML代碼。 正如你可能已經注意到了其中之一，再加上他們被宣布onClick事件，這將反應積極的用戶確認，przekierowywując他的地方，發現點擊鏈接。

為什麼在這個代碼塊結束時返回false？ 到瀏覽器，我們不重定向自動通過點擊鏈接，我們的函數必須返回false，否則將重定向窗口將被確認線程。

如果您單擊其他地方比在“YES”，請使用事件淡出（）按鈕，塊就會消失無縫地與我們確認，實現$（“＃確認”）。點擊（...）。

整個編寫的代碼應該看起來像這樣： 

  DOCTYPE HTML PUBLIC“ -  / / W3C / / DTD XHTML 1.0過渡/ / EN”“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
 <html xmlns="http://www.w3.org/1999/xhtml">
 <HEAD>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"
 <TITLE>確認對話框</ TITLE>
 <style type="text/css">
 <！ - 
 * {保證金：0px，填充：0px;}
 {保證金：10px;}
 P {寬度：600px的;保證金：0汽車;線高度：25px;}

 / *確認* /
 ＃確認{顯示：無;位置：絕對高度：100％;寬度：100％;背景：＃000;頂：0;左：0;}
 ＃確認{身高：表達式（（[document.body.scrollHeight，document.documentElement.scrollHeight document.body.offsetHeight，document.documentElement.clientHeight（&& window.Enumerable的window.Enumerable.max）] MAX（）。 document.documentElement.scrollHeight）+'像素'）;寬度：表達式（（（&& window.Enumerable window.Enumerable.max）[document.body.scrollWidth，document.documentElement.scrollWidth，document.body.offsetWidth，文件。 documentElement.clientHeight] MAX（）：document.documentElement.scrollWidth）+“PX”）;}
 ＃確認[ID] {位置：固定;}
 ＃確認的div {填充：10px;保證金：200像素;}
 ＃確認的div的div {背景：＃900c0c;寬度：500px;保證金：0汽車;邊界：1px固體＃CCC認證;溢出：隱藏;}
 ＃確認H1的div的div {字體大小：18px;顏色：＃FFF;}
 ＃確認的div DIV P {填充：20像素;}
 - >
 </ STYLE>
 </ HEAD>
 <BODY>
 <P>
 LOREM IPSUM的悲靜坐AMET，consectetur adipiscing精英。  quisque ultrices Orci nisl QUIS。  aliquam在悲。 華富consequat桑達交流利奧。  curabitur燕雀sodales SEM。  Praesent eleifend mauris AC事前aliquet格言。  SAPIEN Etiam空，consequat eget，consequat簡歷，molestie ID，Lectus。 在HAc habitasse platea dictumst。  aliquam feugiat奧迪奧交流Lectus。  suspendisse egestas nisl雜色山雀。  morbi空。  pellentesque aliquet interdum貓屬。 前庭的Libero luctus euismod。  suspendisse sodales interdum Enimem。  pellentesque Orcia的。  nulla馬薩NUNC，eleifend又名，eleifend雜色山雀，叢eget，獅子座。 前庭事前IPSUM primis在faucibus Orci等ultrices posuere luctus cubilia Curae; <br/>
 CRAS aliquet發酵dignissim華富ligula在ligula，QUIS ligula rutrum accumsan LOREM LOREM velit dignissim。  nulla的格言interdum普魯斯。  aenean奧迪奧。 前庭pretium。  phasellus Enimem Enimem，SEMPER aliquet的Tempus AC，rutrum孕婦，自由人。  ，Pellentesque scelerisque，suscipit又名etiam neque奧迪奧，blandit NEC公司，利奧。 在Metus ID。  vivamus rut​​rum。  nulla NEC velit。 尼絲紡UT普魯斯，在PORTA，tincidunt坐AMET，scelerisque枕，掃描電鏡。 桑達adipiscing Risus。 在暫準。 奧古斯丁等人。  phasellus ullamcorper QUIS的骨灰盒坦帕斯dapibus Lacus。  SED eget估。 得力士ERAT etiam，adipiscing NEC公司，placerat SED，ultricies，Orci。  CRAS交流Lectus。  curabitur NEC LOREM NIBH的馬蒂斯。  <a href="http://poslinski.net" class="confirm">梅塞納斯</ A> aliquet iaculis turpis。
 </ p>
 <div id="confirm"> </ DIV>
 SRC =“jquery.js”<script type="text/javascript"> </ SCRIPT>
 <script type="text/javascript">
 $（文件）。就緒（函數（）{
 $（“確認”）。點擊（函數（）{
 $（“＃確認”）
 CSS（{不透明：0.95}）
 。淡入（）
 HTML（“<DIV> <DIV> <H1>重定向</ H1> <P <按鈕的onClick = \”location.href = \'+ $（本）。的Attr（“HREF”）+“\ '\“>是</按鈕> <button>不</按鈕> </ P> </ DIV> </ DIV>'）;
返回false;
 }）;
 $（“＃確認”）點擊（函數（）{$（本）淡出（）;}）;
 }）;
 </ SCRIPT>
 </ BODY>
 </ HTML>

總結

工作的例子， 在這裡你可以看到。

此示例解決方案不要求所有的可能性。 我們可以擴展的代碼，從而影響確認的形式，你會再發送的形式控制，這也可以從內jQuery的。你也可以，上面的代碼創建一個jQuery插件的基礎上。 感到自由討論，在這篇文章的評論。

善於交際，分享！

相關條目

分類： jQuery的
標籤： jQuery的， ， ，
«
»
您可以按照任何反應，此項目通過飼料RSS 2.0 。 你也可以寫自己的意見 ，或在您的網頁鏈接到這個職位。
    • Obraz CAPTCHY
    刷新圖像

    垃圾郵件保護的渦噴SpamFree