如何防止按鈕突出顯示

我已經第一次進入javascript和jquery（mobile），但現在遇到了一些我無法解決的問題。如何防止按鈕突出顯示

我有一個簡單的4個按鈕的形式，當點擊一個命令提交給服務器（使用ajax）。事情與界面，點擊按鈕（lightgrey開始）變成藍色，並沒有回到原來的狀態。即使點擊了另一個按鈕，所以點擊幾下後，所有按鈕都會變成藍色。

Here is a link to a test page（使用Ajax命令禁用）

而這是頁;

<div id="mainPageHaard" data-role="page"> 

    <div data-role="header" data-position="fixed"> 
     <a href="index.html" data-icon="arrow-l" data-iconpos="notext" >Back</a> 
     <h1>Haard</h1> 
     <a href="index.html" data-icon="home" data-iconpos="notext" >Home</a> 
    </div><!-- /header --> 

    <div data-role="content"> 
     <a id="btnHaardMax" data-role="button" data-icon="arrow-u">Maximaal</a> 
     <a id="btnHaardUp" data-role="button" data-icon="plus">Harder</a> 
     <a id="btnHaardDown" data-role="button" data-icon="minus">Zachter</a> 
     <a id="btnHaardMin" data-role="button" data-icon="arrow-d">Waakvlam</a> 
    </div><!-- /content --> 

    <div data-role="footer" data-position="fixed"> 
     <a href="#configPageHaard" data-role="button" data-rel="dialog" data-transition="pop" data-icon="gear" data-iconpos="notext">Config</a> 
    </div><!-- /footer --> 
</div><!-- /page -->

和JavaScript

$(document).ready(function() { 

    $("#btnHaardMax").click(function(){ 
     //SendEvent("Gashaard_MAX", 18); 
     return true; 
    }); 
    $("#btnHaardUp").click(function(){ 
     //SendEvent("Gashaard_UP", 18); 
     return true; 
    }); 
    $("#btnHaardDown").click(function(){ 
     //SendEvent("Gashaard_DOWN", 18); 
     return true; 
    }); 
    $("#btnHaardMin").click(function(){ 
     //SendEvent("Gashaard_MIN", 18); 
     return true; 
    }); 
    $("#btnHaardStart").click(function(){ 
     //SendEvent("Gashaard_START", 18); 
     return true; 
    }); 
    $("#btnHaardStop").click(function(){ 
     //SendEvent("Gashaard_STOP", 18); 
     return true; 
    }); 

});

我懷疑這是愚蠢的東西，但如果有人能準確地在sillyness在我的代碼

THX點我將不勝感激！

來源

2011-05-10 Tieske

簡短回答： 你需要刪除css類ui-btn-active上的鼠標事件onclick完成。

如何？你說？

$().ready(function(){ 
    $('some-selector').mousedown(function(){ 
     $('some-selector').addClass('ui-btn-active'); 
    }) 
    $('some-selector').mouseup(function(){ 
     $('some-selector').removeClass('ui-btn-active'); 
    }) 
    })

來源

2011-05-10 10:17:59 netbrain

這並沒有直接解決我的問題，但你觸發了'_removeClass（'ui-btn-active'）_'，我找到了解決方案。它與jq-mobile 1.0a4中的一個bug有關，請參閱這篇文章[link]（http://forum.jquery.com/topic/alpha-1-0a4-1-button-bug-active-theme-applied-and -remains） – Tieske 2011-05-10 11:13:25

不，我從來沒有使用過jq-mobile，我也不知道你的應用程序的內部工作原理是什麼。所以我只能給你一個通用的解決方案。所以我提供了需要做什麼dom/html明智的答案，並提供了一個如何使用jquery完成這個任務的例子。無論如何，即時通訊快樂我的隨機按鍵導致你回答:) – netbrain 2011-05-10 11:56:42

我會建議，一旦你按下一個按鈕，禁用它，直到AJAX調用完成，以避免意外的雙重壓制，或者如果它沒有意義，再次按下按鈕，離開它被禁用。由於您的按鈕不是真正的按鈕，而是鏈接，請參閱how to disable/enable buttons and other form elements。您仍然需要擺弄鏈接的類名，以阻止它們看起來像是活動或啓用，如netbrain暗示。

恕我直言，我會用real HTML按鈕。

來源

2011-05-10 11:05:45 BoffinbraiN

禁用按鈕沒有意義，因爲服務器端代碼只在ajax調用返回後纔開始執行。所以用戶仍然沒有看到任何效果。儘管如此，它對於一個新手來說是一個有用的鏈接，Thx！ – Tieske 2011-05-10 11:15:18

因此，AJAX調用告訴服務器排隊將來某個時間執行的某些事情？如果是這樣，我想這沒什麼問題，但是在此期間發生某些事情仍然是一件很好的事情，例如通過使用微調器動畫或簡單地通過暫時禁用按鈕。 – BoffinbraiN 2011-05-10 11:24:25

對於大多數不想要這種默認行爲的人來說，這應該是一個非常通用的解決方案。注意你需要normalized vclick event。

$(document).bind("mobileinit", function(){ 
    $("div[data-role=footer] a").live('vclick', function (e) { 
    $(this).removeClass("ui-btn-active"); 
});

來源

2011-12-20 20:07:14 TMB

如何防止按鈕突出顯示

回答

相關問題