[Java教程]jQuery的click事件在當前頁彈出層窗口(不打開新頁面)

0 2015-10-24 15:00:04

當給鏈接添加一個click事件，我們可能不希望Web瀏覽器按照其常規(guī)模式退出當前頁面并通過新頁面載入鏈接的目的地，而是在當前頁彈出層窗口(不打開新頁面)。例如，當單擊了一個縮略圖上的鏈接時，頁面會載入一幅較大的圖像。通常，單擊鏈接會退出頁面并在一個空白頁面上顯示圖像本身的較大版本。然而，在這個例子中，停留在同一頁面，較大的圖像在這里載入，而不是按照鏈接打開圖像。

有幾種方法可以阻止鏈接按照其慣例進行工作，可以返回一個false值或使用jQuery的preventDefault()函數(shù)。例如，假設(shè)有一個鏈接把訪問者帶到一個登錄頁面。為了讓站點給人感覺更具有響應(yīng)性，當訪問者單擊該鏈接的時候，我們希望使用JavaScript來顯示一個登錄頁面。換句話說，如果訪問者的鏈接支持JavaScript，當他單擊了該鏈接，該頁面上將會出現(xiàn)一個表單；如果瀏覽器關(guān)閉了JavaScript，單擊鏈接將會把訪問者帶到一個登錄頁面。

實現(xiàn)這一目標有幾個步驟：

1.選擇登錄鏈接。

2.附加一個click事件。

可以使用jQuery的click()函數(shù)觸發(fā)鼠標事件來做到這點。click()函數(shù)接收另一個函數(shù)作為參數(shù)。這個函數(shù)包含了當用戶單擊鏈接時發(fā)生的步驟。在這個例子中，只需要兩個步驟。

3.顯示登錄表單。

當頁面載入的時候，登錄表單應(yīng)該隱藏不可見，可能是位于鏈接之下的一個絕對定位的＜div＞標簽。可以使用show()函數(shù)或者jQuery的其他顯示效果之一來顯示該表單。

4.停止鏈接。

這是最重要的一步。如果沒有停止鏈接，Web瀏覽器將直接離開當前頁面而載入登錄Web頁面。

下面是如何使用“返回false”的方法來停止鏈接起作用。假設(shè)該鏈接的I D為showForm并且隱藏的帶有登錄表單的＜div＞標簽擁有一個ID為loginForm：$('#showForm').click(function(){

$('#loginForm').fadeIn('slow')；

return false；

})；

第1行完成上述步驟1和步驟2的任務(wù)，第2行顯示了隱藏的表單。第3行告訴瀏覽器“停下來，不要打開這個鏈接”。宅男社必須讓return false；語句作為該函數(shù)的最后一行，因為一旦JavaScript解釋器遇到了返回語句，它就會退出函數(shù)。

也可以使用jQuery的preventDefault()函數(shù)，如下所示：$('#showForm').click(function(evt){

$('#loginForm').fadeIn('slow')；

evt.preventDefault()；

})；

這個腳本的基本細節(jié)和前面的一個相同。主要區(qū)別在于，分配給click事件的函數(shù)現(xiàn)在接收一個參數(shù)：evt，它表示事件本身。事件有其自己的一組函數(shù)和屬性，preventDefault()函數(shù)直接停止了和事件相關(guān)的任何默認行為：對于鏈接上的一次單擊，它載入一個新的Web頁面。

轉(zhuǎn)載請注明出處：http://www.uphtm.com/js/171.html

本文網(wǎng)址：http://www.shaoqun.com/a/151793.html

*特別聲明：以上內(nèi)容來自于網(wǎng)絡(luò)收集，著作權(quán)屬原作者所有，如有侵權(quán)，請聯(lián)系我們：admin@shaoqun.com。

jquery

0

總結(jié)

以上是生活随笔為你收集整理的java弹窗点击事件_[Java教程]jQuery的click事件在当前页弹出层窗口（不打开新页面）...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。