jQuery添加图标到按钮问题

问题描述：

一直试图添加一个图标到按钮，但似乎无法让它工作。jQuery添加图标到按钮问题

$(document).ready(function(){ 

    $("button, input:submit, input:reset, input:button", "#customer_wrapper").button(); 

    $("#save_customer").button({ 
     icons: {primary: 'ui-icon-disk'} 
    }); 

});

HTML

<button name="save_customer" id="save_customer" value="Save" />Save</button>

第一个按钮显示没有图标和所述第二图标和文本是不是内联。什么是添加图标的最佳方式？

感谢

修订它

好部分是我没有关闭按钮标记错误。它在下一行加载带有文本的图标。从浏览器

HTML

<button id="save_customer" name="save_customer" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary" role="button" aria-disabled="false"> 
    <span class="ui-button-icon-primary ui-icon ui-icon-disk"> </span> 
    <span class="ui-button-text">Save</span> 
</button>

CSS

.ui-icon-disk { 
    background-position: -96px -112px; 
} 
.ui-button .ui-button-text { 
    display: block; 
    line-height: 1.4; 
}

你不应该有两个具有相同ID的元素。另外，你的.ui-icon-disk CSS类是什么样的？ – 2011-03-18 03:31:20

@optus - 我已经使用浏览器的CSS和HTML输出更新了我的帖子。 – tomitank 2011-03-18 03:59:29

答

你与图标按钮HTML代码应该是这样的：

<button name="save_customer" id="save_customer">Save</button>

http://jsfiddle.net/ynhat/fWkbv/

请确保你不要有2个元素相同的ID。

没有关闭按钮标签，这就是为什么图像没有加载。但是现在文本在图标下。 – tomitank 2011-03-18 03:58:32

它适合我。看起来你的按钮受其他CSS代码的影响。 – YNhat 2011-03-18 04:09:14

我似乎无法找到冲突，任何想法我可以做什么来覆盖它？ – tomitank 2011-03-18 04:32:04

答

默认情况下，主题中的图像必须在CSS文件下方的图片目录。确保它们存在于正确的目录中。

图像目录正确放置。 – tomitank 2011-03-18 03:57:23

jQuery添加图标到按钮问题

相关推荐