0

私は一般的にjQueryとjavascriptにまったく慣れていないので、2つの異なるjQuery-uiスタイルシートを使用してテストするために単純な.htmlファイルを作成しました。

私が達成しようとしているのは、サンプルダイアログが「フリック」スタイルシートで開き、このダイアログ内の日付ピッカーが「ui-lightness」スタイルシートで開くことです。

ユーザーがダイアログのテキストボックスをクリックしたときに、選択したスタイルシートを追加しようとしましたが、「フリック」スタイルシートがまだ使用されています。

私のhtmlファイルのコードは次のとおりです。

<!doctype html>

<html>

<head>
<meta charset="utf-8">
<title>jQuery Multiple Themes</title>
<link rel="stylesheet" type="text/css" href="css/flick/jquery-ui-1.9.0.custom.css">

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>

<script type="text/javascript">

    function openDialog() {
        $("#dialog").dialog();
    }

    function loadDatePicker() {

        $('head').append('<link rel="stylesheet" type="text/css" href="css/ui-lightness/jquery-ui.1.8.24.custom.css">');

        $("#date").datepicker({});
    }

</script>

</head>

<body>

<input type="button" value="Open Dialog" onclick="openDialog()">

<div id="dialog" title="Test Mutiple Themes" style="display: none">
    Click to open a date picker in a different CSS theme
    <input id="date" type="text" size="8" onclick="loadDatePicker()">
</div>

</body>

</html>

これらのスクリプトの経験が不足しているため、単純な構文エラーではないことを願っています。

4

2 に答える 2

2 
<ul id="nav">
<li><a href="#" rel="/path/to/style1.css">Default CSS</a></li>
<li><a href="#" rel="/path/to/style2.css">Larger Text</a></li>
<li><a href="#" rel="/path/to/style3.css">Something Different</a></li>
</ul>

jQuery

$(document).ready(function() { 
$("#nav li a").click(function() { 
    $("link").attr("href",$(this).attr('rel'));
    return false;
});
});

ここでの説明: http://www.cssnewbie.com/simple-jquery-stylesheet-switcher/

于 2012-10-15T11:35:20.343 に答える
1

テーマローラーのダウンロードページで、テーマの「CSS SCOPE」を設定できます。これにより、スタイルシート内のすべての UI クラスの前に、選択したクラスがプレフィックスとして追加されます。

これにより、マークアップ内のダイアログのスコープ クラスを使用してダイアログを設定したり、datepicker のような別のウィジェットをスコープ クラスで設定したりできます。

于 2012-10-15T12:32:49.237 に答える