2012-02-07 8 views
1

私はHTMLページにボタンとdivを持っています。当初はRedmondのテーマを使用していましたが、Ui-lightnessテーマに変更しました。 div要素は、Ui-lightnessテーマを正しく示しています。しかしボタンはまだRedmondテーマを表示しています。どのように修正するのですか?jQueryのテーマは1つの要素のために変更されません - CSS Framework

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title></title> 

    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.4.js"></script> 
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.6/jquery-ui.js"></script> 

<%--redmond--%> 
<%--<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.13/themes/redmond/jquery-ui.css" 
    rel="stylesheet" type="text/css" />--%> 

<%--ui-lightness--%> 
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" type="text/css" /> 


</head> 
<body> 
    <form id="form1" runat="server"> 

<div> 
    <button id="cancel" type="button" 
      class="ui-state-default ui-corner-all"> 
      Cancel 
    </button> 
</div> 

<div id="mybox" 
    class="ui-widget ui-widget-content ui-corner-all" 
    style="margin-top: 20px; 
    width: 300px; 
    height: 150px;"> 

    <h3 class="ui-widget-header">Widget Heading Text</h3> 
    <p> 
     <span class="ui-icon ui-icon-comment" style="margin: 0 2px 0 2px; float: left;"></span> 
     This is a test sentence. 
    </p> 
</div> 

</form> 

+0

ブラウザのキャッシュをクリアしましたか? –

+0

はい、私はそれを試みました。 – Lijo

+0

偉大な、ちょうどそれを途中で取得します。それを超えると、Googleコード1を参照するのではなく、テーマと関連するすべての画像を実際にダウンロードすることをおすすめします。あなたの他の質問については、http://jqueryui.com/themeroller/に公式jQueryのすべてのテーマのギャラリーがあり、あなたが望むのであれば独自のカスタムテーマを作成してダウンロードすることもできます。 –

答えて

0

あなたは明確なブラウザのキャッシュをやっ述べたように、考えられる理由は、あなたがボタンに適用したスタイルが間違っている、それはui-button ui-widget ui-state-default ui-corner-all ui-button-text-onlyあるべきだろう。

ボタンは、jQueryのサイトによると

<button id="button" 
    class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" 
    role="button" aria-disabled="false"> 
    <span class="ui-button-text">A button element</span> 
</button> 

のようになります。

そして、jQuery Website.からテーマを確認、変更、ダウンロードしてください。

希望すると、これが役立ちます。

+0

レドモンド:http://jsfiddle.net/kskHX/ ui-lightness:http://jsfiddle.net/kskHX/1/ –

0

ボタンのスタイルを変更していない理由は、ブラウザのキャッシュ(ほとんどのブラウザでCTRL + R)したり、ページ上の何か他のものは、スタイルを上書きproboblyです。

例としては、ここで見つけることができます:

関連する問題