Question

我在jsp中使用jQuery 1.8.2，jQuery ui 1.9.1，Firefox 16.0.1，我试图获得一个显示图标的按钮。我试过的是：

$('button').button({ icons: {primary: "ui-icon-triangle-1-s" } });

并在div中：

<div id="buttonDiv" style="text-align: center;"> <button class="btn-primary"  type="button" id="confirmationButton" value="confirm">Confirmation</button> </div>

然后我尝试使用id，类，将类型设置为按钮等等，但由于某种原因它没有显示。

我知道如果我尝试将按钮设为输入按钮，那么在设计和使用

时这将不起作用

$('button').button()等..作为选择器，它工作正常。

以下是我的cdn声明：

<!-- Reference the theme's stylesheet on the Google CDN -->
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/ui-lightness/jquery-ui.css" rel="stylesheet" type="text/css"/>

    <!-- Reference jQuery and jQuery UI from the CDN. Remember that the order of these two elements is important -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js" type="text/javascript"></script>

我在这里缺少什么？

Answer 1

您确定没有遗漏任何其他资源吗？您是否包含了所需的CSS和图像？

具体来说是jquery-ui.css： http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css 和http://code.jquery.com/ui/1.9.1/themes/base/images/ui-icons_222222_256x240.png

修改

使用你的脚本标签，我很快写完了它就可以了。

<!doctype html> <html> <head> <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/ui-lightness/jquery-ui.css" rel="stylesheet" type="text/css"/> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $('button').button({ icons: {primary: "ui-icon-triangle-1-s" } }); }); </script> </head> <body> <div id="buttonDiv" style="text-align: center;"> <button class="btn-primary" type="button" id="confirmationButton" value="confirm">Confirmation</button> </div> </body> </html>

如何使用jQuery在按钮中设置默认图标

1 个答案: