我如何定義Jquery按鈕樣式？

我已經工作一個jQuery Mobile的頁面上，並將其上有幾個按鈕，具有獨特的風格，例如：我如何定義Jquery按鈕樣式？

作爲一種客戶端「的jQuery驅動精靈」有一部分......

<button data-function="back" class="back">Back</button> 
<button data-function="next" class="next">Next</button> 
<button data-function="submit" class="submit">Submit</button>

...取決於您在嚮導中的位置，這些按鈕顯示/隱藏。

沒有問題...直到我到了風格。 JQuery的需要獨自去「換我按鈕，隱藏」，所以我最終的東西，看起來像......

<div class="ui-btn ...">  
    <span class="ui-btn-inner ...">Back</span> 
    <button class="back">Back</button> 
</div>

如上所述，它隱藏我的按鈕，我對後面的自定義樣式按鈕然後有效地丟失。我不想讓所有的按鈕都變成我自定義的按鈕。

我想過使用一些JQuery將我的自定義樣式作爲文檔就緒腳本的一部分移動到父「div」元素，但對於每個按鈕而言這似乎很愚蠢，而邏輯可能會變得相當複雜或冗長每當我想要一個不同的按鈕類型時，如果我必須這樣做，就會囉嗦。

有沒有標準的方式說「JQuery，我想這個類應用到您生成的按鈕元素（S）...」或這是一個錯誤？

我已經注意到了，別人完全避免使用這種形式給出，例如... http://m.nationalrail.co.uk/pj/home

上的按鈕訪問官方的jQuery Mobile的頁面似乎表現出相同的行爲： http://jquerymobile.com/demos//1.2.0/docs/buttons/buttons-types.html

（記得改您的瀏覽器代理訪問前的移動設備）

任何想法？理想情況下，我想避免使用我自己的一些JQuery將樣式「黑客入侵」到正確的元素，以避免減慢頁面放置速度並引入更多代碼，然後我必須維護，因爲我想要一個藍色和橙色按鈕相鄰。

麻煩的是，這是我們的企業主着陸頁，所以風格被認爲是相當重要的。

編輯爲@Gajotres：

添加另一個主題可以解決這個問題，但我對這個頁面職責是爲它儘快和裝載了多個主題的頁面執行將意味着更多的加載時間。

我也考慮過這樣的事情作爲一個可能的解決方案，但我認爲JQuery的應該是已經這樣做了，所以我的想法是，也許是我做錯了什麼......

<script type="text/javascript"> 
    var allButtons = $(button); 
    allButtons.each(function() { 
     var css = $(this).className; 
     $(this).prev().addClass(css); 
    }); 
</script>

這將導致在我將按鈕上的任何類應用到jquery生成的span標記，現在顯示在它的位置。然後，我需要附加一些進一步的功能，以確保我有選擇地複製某些類（只是愚蠢的IMO）。

以JQuery aproach在這裏我可以添加像...

data-customStyle="myClass"

...每個按鈕我要的風格，那麼使用類似...

<script type="text/javascript"> 
    var customButtons = $("data-customStyle"); 
    customButtons.each(function() { 
     $(this).prev().addClass($(this).data("customStyle")); 
    }); 
</script>

...的風格追加到「表示該按鈕的jQuery標籤」。

我對此的想法... WTF？！？！

JQuery是關於使生活更容易，不難確定嗎？我不應該「發佈黑客添加」的東西來做我基本上已經在服務器上做的事情，並且JQuery打破了。

這是JQuery中的錯誤嗎？

來源

2013-02-04 War

最後的答案落入了CSS中第一個c的域。

如果您以正確的順序將樣式表放在頁面上，則可以利用級聯來正確覆蓋事物。

JQuery非常具有侵略性，儘管它的「默認樣式」和一些持久性通常會帶來回報，儘管這可能意味着覆蓋了很多東西。

來源

2016-08-13 23:34:20 War

找到與jQuery關聯的css文件，並嘗試參考您需要的樣式和不需要樣式的div編輯該文件。否則，對於那些不需要樣式的按鈕，只需將類或ID更改爲不存在於css文件中的不同名稱即可。

有時即使你改變類（在CSS類名後是一個點的例子「.class」）或ID（在CSS ID名後面是一個散列「#id」），如果不是全部，背景顏色可能保持不變。爲此檢查對應於主屬性像或或（在CSS屬性名稱中的CSS文件放置在方括號示例「[title]」之間）。作爲參考，你可以檢查http://www.w3schools.com/css/

來源

2013-02-04 12:08:21

用他創建的自定義類創建另一個css文件是不是更好，它會覆蓋默認的css？ –

是的，你可以做到這一點，這就像編輯當前的一個並以不同的名字保存它一樣。而且，如果css包含在php或.js中，則必須將舊CSS包含到新的CSS中。 –

值得注意的是，我已經有了我的自定義按鈕風格的第二個樣式表，我試圖弄清楚如何將它應用到我的「jquery modified dom」父元素以及我的按鈕旁邊生成的span沒有包含我的自定義CSS樣式（jQuery不復制它到它生成的元素） – War

我如何定義Jquery按鈕樣式？

回答

相關問題