Themeroller (v1.11.4) 不适用于页面

Question

我正在使用 jquery-ui 制作一个将由网页工具使用的 themeroller 主题。问题是，即使内联样式适用，主题也不适用于页面。我已经完成了 here and here 的说明，这让我有点困惑。第一个讨论将一行添加到 <head> 标记，而第二个讨论额外的两行。在我看来，额外的两行是为了添加功能，第一行是为了页面主题。

我仔细研究了他们的变更日志，发现自定义和 prebuilt 主题的命名约定和文件结构从 1.11.0 版开始发生了变化。可能与此有关，我还没有在此处（或其他地方）找到任何反映新变化及其实施意义的帖子。

我已经尝试使用我计算机上所有内容的本地下载版本以及 google 托管的 CDN 版本，两者都没有应用。

如果我犯了一些愚蠢的错误或者我在文档中遗漏了什么，我会接受任何回答这个问题的人，而不是直接回答这个问题，这会把我推向正确的方向。否则，我会卡住，需要一些帮助。

（值得一提的是，这是我第一次使用 css 和 jquery）

这就是我的。

文件结构布局：

Test
  |-external
    |-jquery
      |-jquery.js (Source said v1.10.2)
  |-images
    |- a whole bunch of png files
  |-index.html
  |-jquery-ui.css
  |-jquery-ui.js
  |-jquery-ui.structure.css
  |-jquery-ui.theme.css
There are minified versions of the css and js files as well

我的<head>:

 <head>
    <title>Decision</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link type="text/css" href='jquery-ui.css' rel='stylesheet'>
    <script src="external/jquery/jquery.js"></script>
    <script src="jquery-ui.js"></script>
    <style>
        body{
            font: 62.5% "Segoe UI", sans-serif;
            margin: 50px;
        }
        .demoHeaders {
            margin-top: 2em;
        }
        #dialog-link {
            padding: .4em 1em .4em 20px;
            text-decoration: none;
            position: relative;
        }
        #dialog-link span.ui-icon {
            margin: 0 5px 0 0;
            position: absolute;
            left: .2em;
            top: 50%;
            margin-top: -8px;
        }
        #icons {
            margin: 0;
            padding: 0;
        }
        #icons li {
            margin: 2px;
            position: relative;
            padding: 4px 0;
            cursor: pointer;
            float: left;
            list-style: none;
        }
        #icons span.ui-icon {
            float: left;
            margin: 0 4px;
        }
        .fakewindowcontain .ui-widget-overlay {
            position: absolute;
        }
        select {
            width: 200px;
        }
    </style>

</head>

和我的底部 <body>

<script>
$( "#accordion" ).accordion();



var availableTags = [
    "ActionScript",
    "AppleScript",
    "Asp",
    "BASIC",
    "C",
    "C++",
    "Clojure",
    "COBOL",
    "ColdFusion",
    "Erlang",
    "Fortran",
    "Groovy",
    "Haskell",
    "Java",
    "JavaScript",
    "Lisp",
    "Perl",
    "PHP",
    "Python",
    "Ruby",
    "Scala",
    "Scheme"
];
$( "#autocomplete" ).autocomplete({
    source: availableTags
});



$( "#button" ).button();
$( "#radioset" ).buttonset();



$( "#tabs" ).tabs();



$( "#dialog" ).dialog({
    autoOpen: false,
    width: 400,
    buttons: [
        {
            text: "Ok",
            click: function() {
                $( this ).dialog( "close" );
            }
        },
        {
            text: "Cancel",
            click: function() {
                $( this ).dialog( "close" );
            }
        }
    ]
});

// Link to open the dialog
$( "#dialog-link" ).click(function( event ) {
    $( "#dialog" ).dialog( "open" );
    event.preventDefault();
});



$( "#datepicker" ).datepicker({
    inline: true
});



$( "#slider" ).slider({
    range: true,
    values: [ 17, 67 ]
});



$( "#progressbar" ).progressbar({
    value: 20
});



$( "#spinner" ).spinner();



$( "#menu" ).menu();



$( "#tooltip" ).tooltip();



$( "#selectmenu" ).selectmenu();


// Hover states on the static widgets
$( "#dialog-link, #icons li" ).hover(
    function() {
        $( this ).addClass( "ui-state-hover" );
    },
    function() {
        $( this ).removeClass( "ui-state-hover" );
    }
);

Answer 1

所以，像往常一样，答案很简单，我是愚蠢的。

我没有正确地通过 ID 引用我的元素。我认为导入 themeroller 主题会自动为页面设置主题，但您必须确保在正文底部的脚本中引用了您的元素。

例如，我有：

<button id="myButton"></button>
...
$(#button).button({
    label: "ClickMe"
});

并且该按钮将显示为没有名称，也没有主题。我需要像这样正确引用 ID：

<button id="myButton"></button>
...
$(#myButton).button({
    label: "ClickMe"
});

Themeroller (v1.11.4) 不适用于页面

Themeroller (v1.11.4) not applying to page

jquery

jquery-ui

themeroller