0

我之前使用过 jQuery UI 来设计按钮。但现在有了这段代码：

else if (ui.newTab.index() == 3) {
    $('#MediaContent').load('Content/TwainMedia.html');
    $('#MediaContent').css('background-color', '#000000');
    $('button').button();
    $("button:not(:ui-button)").button();
}

...按钮又大又丑：

在此处输入图像描述

HTML 是这样的：

<div class="yearBanner">FICTION</div>
<section class="wrapper"><a class="floatLeft" 
href="https://rads.stackoverflow.com/amzn/click/com/1456405721" rel="nofollow noreferrer" target="_blank"><img height="160" 
width="107" src="http://ecx.images-amazon.com/images/I/51AxVB0JilL._SL110_.jpg" alt="The Adventures of 
Huckleberry Finn book cover"></img></a>
    <br/><cite class="nobelTitle">The Adventures of Huckleberry Finn</cite>
    <br/>
    <br/>
    <button><a href="https://rads.stackoverflow.com/amzn/click/com/0448060000" rel="nofollow noreferrer" target="_blank" 
rel="nofollow">Hardcover</a>
    </button>
    <button><a href="https://rads.stackoverflow.com/amzn/click/com/1456405721" rel="nofollow noreferrer" target="_blank" 
rel="nofollow">Paperback</a>
    </button>
    <br/>
    <br/>
    <button><a href="https://rads.stackoverflow.com/amzn/click/com/B00L4Q7OA8" rel="nofollow noreferrer" target="_blank" 
rel="nofollow">Kindle</a>
    </button>
</section>
<section class="wrapper"><a class="floatLeft" 
href="https://rads.stackoverflow.com/amzn/click/com/0486400778" rel="nofollow noreferrer" target="_blank"><img height="160" 
width="107" src="http://ecx.images-amazon.com/images/I/51qa7A+vIsL._SL110_.jpg" alt="The Adventures of 
Tom Sawyer book cover"></img></a>
    <br/><cite class="nobelTitle">The Adventures of Tom Sawyer</cite>
    <br/>
    <br/>
    <button>
        <a href="https://rads.stackoverflow.com/amzn/click/com/0486400778" rel="nofollow noreferrer" target="_blank" 
rel="nofollow">Paperback</a>
    </button>
    <br />
    <br />
    <button>
        <a href="https://rads.stackoverflow.com/amzn/click/com/B008TVDBPI" rel="nofollow noreferrer" target="_blank" 
rel="nofollow">Kindle</a>
    </button>
    <button><a href="https://rads.stackoverflow.com/amzn/click/com/B00BM7ES7G" rel="nofollow noreferrer" target="_blank" 
rel="nofollow">Audible</a>
    </button>
</section>

在 _SiteLayout.cshtml 中，我引用了 jQueryUI .js 和 .css，如下所示：

<link href="~/css/excite-bike/jquery-ui-1.10.3.custom.min.css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="~/Scripts/jquery-ui-1.10.3.custom.min.js"></script>

我需要做什么才能取回我的酷蓝色较小的 jQuery-UI 按钮？

注意：jQuery-UI 幻想正在选项卡上运行，从尖叫镜头中可以看出（蓝色的“excite-bike”主题正在根据需要应用于选项卡）。

更新

我的网站现已上线；但是，媒体选项卡上的按钮仍然比一袋烟头丑 9 倍。

你可以在这里看到他们在以前的站点中的样子，我为这个站点蚕食了它的代码（事实上，我只是将整个站点复制到一个新文件夹并更改了必须更改的内容）：

在此处输入图像描述

同样，这是在上一个站点中使用 excite-bike 主题美化按钮的 jQuery：

$('button').button();

...并像这样引用 jQueryUI：

<link href="~/css/excite-bike/jquery-ui-1.10.3.custom.css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="~/Scripts/jquery-ui-1.10.3.custom.min.js"></script>

...（将“custom.min.css”更改为“custom.css”）但它仍然不再有效。为什么会这样？

4

1 回答 1

1

正如 Jake Cigar 在jQuery 论坛线程上所指出的那样，对 jQuery-UI 的调用将在 HTML 加载后需要的按钮进行按钮化，所以这可以解决问题：

$('#MediaContent').load('Content/TwainMedia.html',function(){
      $('button').button();
});
于 2015-03-27T20:55:53.640 回答