javascript - 如何更改按钮的样式？

Question

在一个页面上，我试图让页面顶部的按钮变成方形和蓝色。有一个 jQuery 文件，但由于某种原因它不起作用。以下是代码:

 $(document).ready(function() {
$("button").button();
 });

还有 jQuery 文件:

<script src="/jquery_custom/js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="/jquery_custom/js/jquery-ui-1.8.7.custom.min.js" type="text/javascript"></script>
<link href="/jquery_custom/css/style.css" rel="stylesheet" type="text/css" />
<link href="/jquery_custom/css/fc-blue/jquery-ui-1.8.7.custom.css" rel="stylesheet" type="text/css" />

左边是我想要的外观，但我一直在右边看到标准按钮。我究竟做错了什么？ (文件路径也是正确的)

Answer 1

根据您定义按钮的标记，选择器可以是:

$("button").button();

或

$("input:submit").button()

您能告诉我们您使用什么标记来添加按钮吗？

刚刚检查了您页面的来源。

您有 jQueryUI 自定义包。您确定其中包含按钮小部件吗？

如果您检查页面错误，您会看到

Error: $("button").button is not a function
Source File: http://friendsconnect.org/scrapbook-booth/
Line: 25

这意味着 javascript，未加载定义的 button() 方法。确保您的自定义包包含按钮小部件。

你的启动函数写错了。用这个替换你的脚本:

$(function () {
    $("button").button();
    $("#radio").buttonset();
    $("input:button").button();
    $("textarea").elastic();

    // Start FriendsConnect rounded corners
    settings = {
        tl: { radius: 5 },
        tr: { radius: 5 },
        bl: { radius: 5 },
        br: { radius: 5 },
        antiAlias: true,
        autoPad: false,
        validTags: ["div"]
    }
    $('#search-main').corner(settings);
    $('#infobox_right').corner(settings);
    // End FriendsConnect rounded corners
  });

你现在有

$(document).ready(function(){
    //Some code
    $(function(){
        //other code
    });
});

$(document).ready(function(){})和$(function(){})是一样的，只能(更正:会是如果它只出现就好了)在页面上出现一次