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图标显示问题/问题

回答

相关问题