Question

我的智慧结束了！我正在尝试做一些（我相信）是一个非常简单的jQuery UI过程，但我无法让它工作。我不确定该引起问题的变量是什么。

可能是：

我的代码
Visual Studio 2012 RC
jQuery UI 1.8.22

我要做的是创建一个jQuery按钮并在其上放置一个图标。我想要的图标是plus-thick图标。

以下是页面的css和js“导入”（他们的订单不正确???）：

<link rel="stylesheet" type="text/css" href="Content/Default.css" />
<link rel="stylesheet" type="text/css" href="Content/themes/cupertino/jquery-ui-1.8.22.custom.css" />
<script type="text/javascript" src="Scripts/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="Scripts/jquery-ui-1.8.22.custom.min.js"></script>

这是我用来尝试执行此操作的代码：

$('.headerButtonsDiv > a')
.button()
.button("option", "icons", { primary: 'ui-icon-plus-thick' })
.click(function () {
    var text = $(this).text();
    alert(text + ' clicked!');
    return false;
});

这是我的第一次尝试（顺便说一句，结果如上所述）：

$('.headerButtonsDiv > a')
.button( { icons: { primary: 'ui-icon-plus-thick' } } )
.click(function () {
    var text = $(this).text();
    alert(text + ' clicked!');
    return false;
});

此代码会影响三个按钮。

结果如下：

<a>元素已正确转换为jQuery按钮。
每个按钮在按钮左侧都有正确的图标。
每个按钮都没有carat-1-n图标而不是plus-thick。

当我进入页面检查器（使用IE和/或Chrome）时，我向下钻取到button（转换后的<a>元素）并查看它及其2 <span>子-elements。虽然图标已经的<span>元素应用了ui-icon-plus-thick类，但没有任何background-position已应用。

因此，尽管 IS 类存在，但它实际上并未应用。当我手动添加background-position属性（background-position: -32px -128px;），“神奇地”时，会出现正确的图标; - ）。

我想我可以找出一种解决方法，我创建按钮，然后尝试选择正确的<span>子元素然后“手动”自己应用background-position，但不是完全 jQuery库应该做什么？

无论如何，如果有人能看到我离开的地方，我真的很感激！这真的是一个小问题，但如果我不能这个工作，我对更复杂的问题没有信心。

Answer 1

我很高兴在其他任何人指出我的愚蠢之前我看到了这个答案！

我想要的课程非常：ui-icon-plusthick。

USED 的内容是：ui-icon-plus-thick。

我盯着这看了2个小时，从未注意到一个短划线（“ - ”）的区别。

Arrrrrrrghhhhhh !!!!!

Visual Studio 2012 RC + jQuery UI = Bug？

1 个答案: