Question

我正在使用jquery-ui创建一个将由网页工具使用的themeroller主题。问题是，即使内联样式，主题也不适用于页面。我已阅读了here和here的说明，这些说法让我更加困惑。第一部分讨论了一行添加到<head>标签，而第二行则讨论了另外一行。听起来像是两个额外的行用于添加功能，第一个用于主题化页面。

我正在挖掘他们的更改日志，并看到自1.11.0版本以来，自定义和预构建主题的命名约定和文件结构已更改。可能与此相关，我还没有在这里（或其他地方）发现任何反映新变化的帖子以及实现它的意义。

我尝试在我的计算机上使用本地下载的所有版本以及谷歌托管的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

所以，像往常一样，答案很简单，而且我很蠢。

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

例如，我有：

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

按钮将显示没有名称，而不是主题。我需要正确引用id：

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

Themeroller（v1.11.4）未适用于页面

1 个答案: