0

我可能只是缺少一两件事。

当我尝试使用 jQuery UI 图标时，我看到了一些奇怪的东西。看起来当它显示时，它指向精灵上位于两个图标中间的位置，并且它们是错误的图标。我只是想这样做：

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

和按钮代码：

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

现在，如果我将 span 标签放在我的 html 的其余部分之上，那么上面的工作正常；例如，在页面上的顶级 div 上方。但是，例如，如果我尝试将它放在表格的“td”元素中，那么它会产生我上面描述的奇怪的“半图标”效果，它不会显示精灵中的正确图标。

与此观察有些相关（图标装饰元素的显示和行为似乎取决于其包含元素的 CSS）；在 ui-lightness 主题附带的漂亮示例页面上，那些可爱的按钮似乎取决于它们被包裹在 ID 为“icons”的“ul”元素中，然后 span 被包裹在“ li" 元素，也会影响按钮的显示；如本例所示：

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

我希望我的按钮看起来像那些；获得漂亮的悬停效果；并且具有相同的尺寸等。但似乎需要一些工作才能让一个按钮看起来像那样。所以这让我想知道，为什么这个例子如此依赖于包装器？（显然有很多图标，所以他们必须以某种方式显示它们，但是......很高兴看到它只是一个独立按钮的示例，看起来像那些，但不需要所有这些包装器让它看起来不错。我最终会自己弄清楚，但希望在这里能得到更好的理解）。

我不明白的另一件事是，我正在使用“ui-lightness”主题，并且我有下载主题时出现的示例页面，那里的图标看起来不错；但在我正在处理的页面上，它指向一个图标为黑色的精灵图像，而不是“ui-lightness”主题的漂亮橙色图标。当我检查 Chrome 调试器中的元素时，我可以看到它指向不同的精灵 JPG 与示例主题中的精灵。我的理解是，它使用语义“ui-icon”告诉它该做什么，它应该从正确的精灵中获取图标，因为它知道它正在使用 ui-lightness 主题。（其他元素正确显示橙色 ui-lightness 主题元素，例如 文本按钮看起来像是主题的一部分）。但不知何故，它将不需要的黑色图标精灵优先于所需的橙色精灵。

4

1 回答 1

0

My questions were obviously newbie questions around jQuery UI, but for anybody else struggling with these types of issues, the gist of it is:

  • displaying an icon seems to depend on the parent elements.
  • getting it to work with a jQuery UI theme (i.e. display the correct icon color, etc) also depends on the parent elements.
  • it doesn't seem to matter what HTML element type the parent is (e.g. unordered lists which contain list items, or tables which contain TR / TD elements); what seems to matter is the jQuery UI classes that are referenced in the parent.

Here's an example I got to work for an MVC app, where the UI displays a button which is actually an anchor tag, and resides inside a table cell:

<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>

And the jQuery code to get the color to change when the user hovers the mouse over the element:

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

Hope this helps someone. Cheers -dB

于 2013-08-27T14:31:39.927 回答