jQuery UI

Question

の評価レートウィジェットはjQuery UIのStar Rating widgetに導入されました。 私はもともとthis oneを使用していました。

2つの使用に違いはありますか？

よくjquery UIを使用しようとすると、入力ボタンが星印として表示されません。私は、これらのjsとcssファイルが含まれています：

<script src="jquery-1.3.2.min.js" type="text/javascript"></script> 
<script src="jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script> 
<script src="ui.stars.js" type="text/javascript"></script> 
<link href="ui.stars.css" type="text/css" rel="stylesheet" /> 

そして、私のコードのために、単に：

<form> 
    Rating: <span id="stars-cap"></span> 
    <div id="stars-wrapper1"> 
     <input type="radio" name="newrate" value="1" title="Very poor" /> 
     <input type="radio" name="newrate" value="2" title="Poor" /> 
     <input type="radio" name="newrate" value="3" title="Not that bad" /> 
     <input type="radio" name="newrate" value="4" title="Fair" /> 
     <input type="radio" name="newrate" value="5" title="Average" checked="checked" /> 
     <input type="radio" name="newrate" value="6" title="Almost good" /> 
     <input type="radio" name="newrate" value="7" title="Good" /> 
     <input type="radio" name="newrate" value="8" title="Very good" /> 
     <input type="radio" name="newrate" value="9" title="Excellent" /> 
     <input type="radio" name="newrate" value="10" title="Perfect" /> 
    </div> 
</form> 

すべてのファイルと画像が同じフォルダ内にあります。以前はjquery UIを使ったことがなかったので、必要なのはそのファイルだけです。私はそれがどちらか必要かどうか分からない、私が使用していた他の星評価プラグインはそれを必要としなかった。誰も私が何が欠けているか知っていますか？

Answer 1

通常、jquery ui cssファイルは、imagesという名前のフォルダから画像を参照し、cssファイルと同じディレクトリにあります。したがって、ui.stars.jsで参照画像のパスを変更する必要があります。

| 
    --images 
    | 
    ---image files are here 
    | 
    --ui.stars.css 

Answer 2

使用orkans'あなたは（私はjQuery.noConflictモードを使用）このように、明示的に星にラジオボタンを変換することを指示する必要がありstar_rating：

jQuery(document).ready(function($){ 
    $("#stars-wrapper1").stars(); 
} 

Answer 3

は、私は、その問題を見つけました私がダウンロードしたバージョンは、オブジェクトoは_init関数で初期化されていません（ui.star.jsの最後のデフォルトはロードされません）。このオブジェクトはCSS値（クラス）も設定します。解決策はまだ見つかりませんでしたが、簡単な回避策は、あなたのページの星の初期化時に値を入力することです：

<script type="text/javascript"> 
    $("#stars-wrapper1").stars({ 
    cancelClass: "ui-stars-cancel", 
    starClass: "ui-stars-star", 
    starOnClass: "ui-stars-star-on", 
    starHoverClass: "ui-stars-star-hover", 
    starDisabledClass: "ui-stars-star-disabled", 
    cancelHoverClass: "ui-stars-cancel-hover", 
    cancelDisabledClass: "ui-stars-cancel-disabled" 
    }); 
    </script>