jQuery的工具疊加 - 用不同的條件接近的兩個按鈕

我有以下的jQuery的工具疊加：jQuery的工具疊加 - 用不同的條件接近的兩個按鈕

<div id='editDescriptiontOverlay' class='overlay'> 
    <input type='text' class='description'/> 
    <button class='save'>Save</button> 
    <button class='close'>Cancel</button> 
</div>

背景信息：此疊加的HTML是靜態的。我有一個項目列表，每個項目都有自己的編輯鏈接。當點擊一個給定的鏈接時，通過調用：$('a[rel=#editDescriptionOverlay]').overlay({ ... });來生成覆蓋圖，並且輸入被填充相應的文本。

的保存按鈕需要驗證輸入元素的文本和密切當且僅當驗證成功覆蓋。否則，疊加層必須保持打開狀態。取消按鈕只是簡單地關閉覆蓋而不驗證。

驗證邏輯已經獨立驗證可以工作。

我已經嘗試在覆蓋圖生成期間設置onBeforeClose事件作爲驗證的一種手段。採取這種方法，保存和取消按鈕需要相同的類.close。不幸的是，該條件適用於覆蓋中的所有.close元素，所以即使取消按鈕也正在驗證中。

我也試着產生疊加後立即綁定一個click事件到保存按鈕，就像這樣：

$('.save', $('#editDescriptionOverlay')) 
    .unbind('click') 
    .bind('click', function() { 
    if (validateText) { 
     console.log("Validation passed."); 
     $('a[rel=#editDescriptionOverlay]').overlay().close(); 
    } 
    else { 
     console.log("Validation failed."); 
    } 
    });

的執行console.log的確認驗證工作，但沒有按覆蓋不結束。

任何洞察力表示讚賞，謝謝。。

來源

2012-07-23 kaspnord

jQuery的窗口小部件，如下公開的方法應該被稱爲：

$（ '一個[相對=＃editDescriptionOverlay]'）覆蓋（「關閉」）;

其中close是您希望調用的方法名稱。

如果一個方法接受參數，那麼應該在方法名稱後面添加這些參數作爲參數。

更新時間：

我很抱歉。我只是有時間檢查一下jQuery Overlay Tools是什麼，而且我錯了。這與任何jQuery小部件都不相似，因此，我上面的註釋對於這種情況也不起作用。我試過你的代碼，它的工作。覆蓋層已關閉。但是，當我嘗試了多個<a rel="#editDescriptionOverlay">，我認爲這是你所做的。它不起作用。我的建議是隻使用一個<a rel="#editDescriptionOverlay">，併爲編輯鏈接使用虛擬錨點元素，點擊時會觸發點擊至<a rel="#editDescriptionOverlay">。你可以這樣做：

<script type="text/javascript"> 

    $(document).bind("ready", function(e){ 
     $("a[rel]").overlay(); 
     $('.save', $('#editDescriptionOverlay')).unbind("click").bind("click", function(){ 
      if (validationValue){ 
       $("a[rel=#editDescriptionOverlay]").overlay().close(); 
      } 
     }); 
    }); 

    function clickThis(){ 
     $("a[rel=#editDescriptionOverlay]").trigger('click'); 
     return false; 
    } 
</script> 

<a href="#" onclick="return clickThis();">Edit1</a> 
<a href="#" onclick="return clickThis();">Edit2</a> 

<a rel="#editDescriptionOverlay">Dummy</a> 

<div id='editDescriptionOverlay' class='overlay'> 
    <input type='text' class='description'/> 
    <button class='save'>Save</button> 
    <button class='close'>Cancel</button> 
</div>

來源

2012-07-23 16:26:20

你能提供一個上述語句調用帶參數的方法的例子嗎？另外，這將如何鏈接到按鈕點擊？ – kaspnord 2012-07-23 17:01:56

我寧願綁定一個事件保存按鈕（你提到的第二個）。其實你的代碼看起來很好，除了你可能不需要將事件綁定到$('#editDescriptionOverlay')，並且你在上面的html標記中有錯字（<div id='editDescriptiontOverlay'應該是<div id='editDescriptionOverlay'）。

請參閱here for an example。

來源

2012-07-23 18:59:32 322896

jQuery的工具疊加 - 用不同的條件接近的兩個按鈕

回答

相關問題