jQuery UI圖標顯示問題/問題

當我嘗試使用jQuery UI圖標時，看到了一些奇怪的東西。它看起來像顯示時，它指向一個位於兩個圖標中間的精靈位置，並且它們是錯誤的圖標。我只是想做到這一點：

<span id="test" class="ui-icon ui-icon-plusthick"></span>

和按鈕的代碼：

$("#test").button();

現在，上述工作得很好，如果說，我把span標記我的HTML的上面休息;例如，在頁面上的頂級div之上。但是，例如，如果我嘗試將其放入表格的「td」元素中，則會出現上述的奇怪的「半圖標」效果，它不會從精靈中顯示正確的圖標。

與此觀察有些相關（圖標修飾元素的顯示和行爲似乎取決於其包含的元素的CSS）;在ui-lightness主題附帶的漂亮示例頁面上，這些可愛的按鈕似乎取決於它們被包裝在ID爲「圖標」的「ul」元素中，然後跨度被包裹在「李「的元素，這也影響了按鈕的顯示;在這個例子中：

http://jquery-ui.googlecode.com/svn/tags/1.6rc5/tests/static/icons.html

我想我的按鈕看起來像那些;獲得漂亮的懸停效果;並具有相同的尺寸等。但似乎需要一些工作才能讓按鈕看起來像這樣。所以這讓我想知道，爲什麼這個例子設置得如此依賴於包裝？（顯然有很多圖標，所以他們不得不以某種方式顯示它們，但是......看到一個只是一個獨立按鈕的示例會很高興，看起來像這樣，但不需要所有的包裝器讓它看起來不錯，最終我會自己弄清楚，但希望能在這裏得到更好的理解）。

我不明白的另一件事是，我使用「ui-lightness」主題，並且有下載主題時的示例頁面，並且圖標看起來很好;但在我正在處理的頁面上，它指向圖標爲黑色的精靈圖像，而不是「ui-lightness」主題的漂亮橙色圖標。當我檢查Chrome的調試器中的元素時，我可以看到它指向的是與示例主題中的不同的sprite JPG。我的理解是，它是使用語義「UI圖標」告訴它該做什麼，它應該從正確的精靈中抓取圖標，因爲它知道它使用了ui-lightness主題。（其他元素正確顯示橙色ui-lightness主題元素，例如文本按鈕看起來像是主題的一部分）。但不知何故，它會將不需要的黑色圖標精靈優先於所需的橙色圖標。

來源

2013-08-25 David Barrows

http://jsfiddle.net/DavidBarrows/MYPLD/2/（這不顯示半圖標問題，但它確實顯示了其他問題。無論如何，我可能只是調整一些CSS和讓它工作，我只是覺得很奇怪，你必須將這些圖標包裝在兩個單獨的元素中以獲得所需的效果）。 –

我的問題是明顯圍繞jQuery UI的新手問題，但對於其他人與這些類型的問題苦苦掙扎，它的要點是：

顯示圖標似乎取決於父元素。
讓它與jQuery UI主題一起工作（即顯示正確的圖標顏色等）也取決於父元素。
它似乎不關心父項的HTML元素類型（例如，包含列表項的無序列表或包含TR/TD元素的表）。似乎很重要的是在父級引用的jQuery UI類。

下面是一個例子，我得到了一個MVC應用程序，其中UI顯示一個按鈕，這實際上是一個錨標記工作，並駐留在表格單元格：

<table> 

    <tr> 

     <td> 
      <div class="ui-widget ui-helper-clearfix ui-state-default ui-corner-all"> 
       <a class="ui-icon ui-icon-plusthick" href="@Url.Action("Create", "Widget")" title="Add a new widget"></a> 
      </div> 
     </td>

與jQuery的代碼當用戶將鼠標懸停在元素上時，可以更改顏色：

$('.ui-icon').hover(
     function() { 
      $(this).parent().addClass('ui-state-hover'); 
     }, 
     function() { 
      $(this).parent().removeClass('ui-state-hover'); 
     } 
    );

希望這可以幫助某人。乾杯-dB

來源

2013-08-27 14:31:39

jQuery UI圖標顯示問題/問題

回答

相關問題