カスタムアイコンの使用

クイックスタートの例を基に、icons オプションを使用し、css スタイルで画像を指定することで、アイコンに表示される画像を変更できます。

HTML ファイルの <head> セクションで、ドキュメントの ready 関数を含むスクリプトを以下のスクリプトに置き換えます。このスクリプトは、ratingMode を設定して１つのアイコンを選択し、アイコンのサイズを設定し、各アイコンの状態ごとに使用するクラスを指定します。

ドロップダウンからスクリプトをコピーして、<head> セクション内に貼り付けます

スクリプト	コードのコピー
<script id="scriptInit" type="text/javascript"> $(document).ready(function () { $('#ratingDiv').wijrating({ ratingMode: 'single', iconWidth: 150, iconHeight: 150, icons: { iconsClass: ['wijrating-icon-normal-1', 'wijrating-icon-normal-2', 'wijrating-icon-normal-3', 'wijrating-icon-normal-4', 'wijrating-icon-normal-5'], ratedIconsClass: ['wijrating-icon-rated-1', 'wijrating-icon-rated-2', 'wijrating-icon-rated-3', 'wijrating-icon-rated-4', 'wijrating-icon-rated-5'], hoverIconsClass: ['wijmo-wijrating-hover-1', 'wijmo-wijrating-hover-2', 'wijmo-wijrating-hover-3', 'wijmo-wijrating-hover-4', 'wijmo-wijrating-hover-5'] } }); }); </script>

HTML ファイルの <head> セクションで、ドキュメントの ready 関数を含むスクリプトの下に、これらのスタイルを貼り付けます。これで、カスタムアイコンを表示できます。ここでは、画像にリンクしますが、任意のリンク画像またはローカルにホストされた画像を使用できます。表示するレーティングアイコンごとに、normal、hover、および rated アイコンクラスを設定します。デフォルトの５つのアイコンを表示するため、クラスごとに５つのアイコンを定義する必要があります。

ドロップダウンからスタイルをコピーして、<head> セクション内に貼り付けます

スクリプト	コードのコピー
<style type="text/css"> .wijrating-icon-normal-1 { background: transparent url("http://cdn.wijmo.com/images/chrome.png") no-repeat !important; opacity: 0.50; } .wijrating-icon-hover-1{ background: transparent url("http://cdn.wijmo.com/images/chrome.png") no-repeat !important; opacity: 1; } .wijrating-icon-rated-1 { background: transparent url("http://cdn.wijmo.com/images/chrome.png") no-repeat !important; opacity: 1; } .wijrating-icon-normal-2 { background: transparent url("http://cdn.wijmo.com/images/firefox.png") no-repeat !important; opacity: 0.50; } .wijrating-icon-hover-2{ background: transparent url("http://cdn.wijmo.com/images/firefox.png") no-repeat !important; opacity: 1; } .wijrating-icon-rated-2 { background: transparent url("http://cdn.wijmo.com/images/firefox.png") no-repeat !important; opacity: 1; } .wijrating-icon-normal-3 { background: transparent url("http://cdn.wijmo.com/images/ie.png") no-repeat !important; opacity: 0.50; } .wijrating-icon-hover-3{ background: transparent url("http://cdn.wijmo.com/images/ie.png") no-repeat !important; opacity: 1; } .wijrating-icon-rated-3 { background: transparent url("http://cdn.wijmo.com/images/ie.png") no-repeat !important; opacity: 1; } .wijrating-icon-normal-4 { background: transparent url("http://cdn.wijmo.com/images/opera.png") no-repeat !important; opacity: 0.50; } .wijrating-icon-hover-4{ background: transparent url("http://cdn.wijmo.com/images/opera.png") no-repeat !important; opacity: 1; } .wijrating-icon-rated-4 { background: transparent url("http://cdn.wijmo.com/images/opera.png") no-repeat !important; opacity: 1; } .wijrating-icon-normal-5 { background: transparent url("http://cdn.wijmo.com/images/safari.png") no-repeat !important; opacity: 0.50; } .wijrating-icon-hover-5{ background: transparent url("http://cdn.wijmo.com/images/safari.png") no-repeat !important; opacity: 1; } .wijrating-icon-rated-5 { background: transparent url("http://cdn.wijmo.com/images/safari.png") no-repeat !important; opacity: 1; } </style>

スクリプト

コードのコピー

<style type="text/css">
   .wijrating-icon-normal-1 {
            background: transparent url("http://cdn.wijmo.com/images/chrome.png") no-repeat !important;
            opacity: 0.50;
        }
    .wijrating-icon-hover-1{
            background: transparent url("http://cdn.wijmo.com/images/chrome.png") no-repeat !important;
            opacity: 1;
        } 
    .wijrating-icon-rated-1 {
            background: transparent url("http://cdn.wijmo.com/images/chrome.png") no-repeat !important;
            opacity: 1;
        }
  
    .wijrating-icon-normal-2 {
            background: transparent url("http://cdn.wijmo.com/images/firefox.png") no-repeat !important;
            opacity: 0.50;
        }
    .wijrating-icon-hover-2{
            background: transparent url("http://cdn.wijmo.com/images/firefox.png") no-repeat !important;
            opacity: 1;
        } 
    .wijrating-icon-rated-2 {
            background: transparent url("http://cdn.wijmo.com/images/firefox.png") no-repeat !important;
            opacity: 1;
        }  
         
    .wijrating-icon-normal-3 {
            background: transparent url("http://cdn.wijmo.com/images/ie.png") no-repeat !important;
            opacity: 0.50;
        }
    .wijrating-icon-hover-3{
            background: transparent url("http://cdn.wijmo.com/images/ie.png") no-repeat !important;
            opacity: 1;
        } 
    .wijrating-icon-rated-3 {
            background: transparent url("http://cdn.wijmo.com/images/ie.png") no-repeat !important;
            opacity: 1;
        }
         
    .wijrating-icon-normal-4 {
            background: transparent url("http://cdn.wijmo.com/images/opera.png") no-repeat !important;
            opacity: 0.50;
        }
    .wijrating-icon-hover-4{
            background: transparent url("http://cdn.wijmo.com/images/opera.png") no-repeat !important;
            opacity: 1;
        } 
    .wijrating-icon-rated-4 {
            background: transparent url("http://cdn.wijmo.com/images/opera.png") no-repeat !important;
            opacity: 1;
        }
         
    .wijrating-icon-normal-5 {
            background: transparent url("http://cdn.wijmo.com/images/safari.png") no-repeat !important;
            opacity: 0.50;
        }
    .wijrating-icon-hover-5{
            background: transparent url("http://cdn.wijmo.com/images/safari.png") no-repeat !important;
            opacity: 1;
        } 
    .wijrating-icon-rated-5 {
            background: transparent url("http://cdn.wijmo.com/images/safari.png") no-repeat !important;
            opacity: 1;
        }
</style>

HTML ファイルの <body> セクションで、基本的な <div> タグを変更してレーティングを作成します。

ドロップダウンからスクリプトをコピーして、<head> セクション内に貼り付けます
スクリプト
コードのコピー

<div id="ratingDiv"></div>
HTML ファイルを保存し、それをブラウザで開きます。このレーティングは、実際のウィジェットで次のように表示されます。アイコンとして５つの主要なブラウザのロゴが表示されます。クリックすると、１つのアイコンにレーティング画像が表示されます。

関連トピック

参照