OSS で利用できる機能

レーティング - カスタムスタイル

このサンプルは、カスタムテーマを JQuery レーティングコントロールに適用する方法を紹介します。

デフォルト動作がカスタマイズされた igRating コントロール

ホバーエフェクトがないカスタム igRating コントロール

連続ホバーエフェクトがあるカスタム igRating コントロール

選択している値およびホバーしている値のみを表示する igRating コントロール

カスタム背景付きの igRating コントロール

このサンプルは、より大きい画面サイズのためにデザインされました。

モバイルデバイスで画面を回転、フルサイズ表示、またはその他のデバイスにメールで送信します。

CSS を使用してさまざまな効果や視覚化を実現できます。

コードビュー

クリップボードへコピー

HTML

                    <!DOCTYPE html>
<html>
<head>
    <title></title>

    <!-- Ignite UI for jQuery Required Combined CSS Files -->
    <link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/structure/infragistics.css" rel="stylesheet" />

    <style type="text/css">
        .theme1 .ui-igrating {
        }

        .theme1 .ui-igrating-active {
        }

        .theme1 .ui-igrating-hover {
        }

        .theme1 .ui-igrating-vote {
            width: 20px;
            height: 20px;
            background-image: url("/images/samples/rating/ig-rating-red.png")!important;
            background-position: -75px 0;
        }

        .theme1 .ui-igrating-voteselected {
            background-position: 0 0;
        }

        .theme1 .ui-igrating-votehover {
            background-position: -25px 0;
            filter: alpha(opacity=40);
            opacity: 0.4;
        }

        .theme1 .ui-igrating-votedisabled {
            background-position: -100px 0;
        }

        .theme1 .ui-igrating-votedisabledselected {
            background-position: -50px 0;
        }

        .theme2 .ui-igrating {
        }

        .theme2 .ui-igrating-active {
        }

        .theme2 .ui-igrating-hover {
        }

        .theme2 .ui-igrating-vote {
            width: 20px;
            height: 20px;
            background-image: url("/images/samples/rating/ig-rating-red.png") !important;
            background-position: -75px 0;
        }

        .theme2 .ui-igrating-voteselected {
            background-position: 0 0;
        }

        .theme2 .ui-igrating-votehover {
            background-position: -25px 0;
            filter: alpha(opacity=0);
            opacity: 0.0;
        }

        .theme2 .ui-igrating-votedisabled {
            background-position: -100px 0;
        }

        .theme2 .ui-igrating-votedisabledselected {
            background-position: -50px 0;
        }

        .theme3 .ui-igrating {
        }

        .theme3 .ui-igrating-active {
        }

        .theme3 .ui-igrating-hover {
        }

        .theme3 .ui-igrating-vote {
            width: 20px;
            height: 20px;
            background-image: url("/images/samples/rating/ig-rating-red.png") !important;
            background-position: -75px 0;
        }

        .theme3 .ui-igrating-voteselected {
            background-position: 0 0;
        }

        .theme3 .ui-igrating-votehover {
            background-position: 0 0;
            filter: alpha(opacity=100);
            opacity: 1.0;
        }

        .theme3 .ui-igrating-votedisabled {
            background-position: -100px 0;
        }

        .theme3 .ui-igrating-votedisabledselected {
            background-position: -50px 0;
        }

        .theme4 .ui-igrating {
        }

        .theme4 .ui-igrating-active {
        }

        .theme4 .ui-igrating-hover {
        }

        .theme4 .ui-igrating-vote {
            width: 20px;
            height: 20px;
            background-image: url("/images/samples/rating/ig-rating-red.png") !important;
            background-position: -125px 0;
        }

        .theme4 .ui-igrating-voteselected {
            background-position: 0 0;
        }

        .theme4 .ui-igrating-votehover {
            background-position: -25px 0;
            filter: alpha(opacity=40);
            opacity: 0.4;
        }

        .theme4 .ui-igrating-votedisabled {
            background-position: -100px 0;
        }

        .theme4 .ui-igrating-votedisabledselected {
            background-position: -50px 0;
        }

        .theme5 .ui-igrating {
            border: 1px solid #000000;
            background-color: #2CBDF9;
        }

        .theme5 .ui-igrating-active {
            border: 1px solid #000000;
            background-color: #ffffff;
        }

        .theme5 .ui-igrating-hover {
        }

        .theme5 .ui-igrating-vote {
            width: 20px;
            height: 20px;
            background-image: url("/images/samples/rating/ig-rating-red.png") !important;
            background-position: -75px 0;
        }

        .theme5 .ui-igrating-voteselected {
            background-position: 0 0;
        }

        .theme5 .ui-igrating-votehover {
            background-position: -25px 0;
            filter: alpha(opacity=40);
            opacity: 0.4;
        }

        .theme5 .ui-igrating-votedisabled {
            background-position: -100px 0;
        }

        .theme5 .ui-igrating-votedisabledselected {
            background-position: -50px 0;
        }
    </style>

    <script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

    <!-- Ignite UI for jQuery Required Combined JavaScript Files -->
    <script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.core.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.lob.js"></script>

</head>
<body>

    <p>デフォルト動作がカスタマイズされた igRating コントロール</p>
    <div id="igRating1"></div>
    <br />
    <p>ホバー エフェクトがないカスタム igRating コントロール</p>
    <div id="igRating2"></div>
    <br />
    <p>連続ホバー エフェクトがあるカスタム igRating コントロール</p>
    <div id="igRating3"></div>
    <br />
    <p>選択している値およびホバーしている値のみを表示する igRating コントロール</p>
    <div id="igRating4"></div>
    <br />
    <p>カスタム背景付きの igRating コントロール</p>
    <div id="igRating5"></div>

    <script>

        $(function () {

            $("#igRating1").igRating({
                voteCount: 10,
                value: 0.5,
                theme: "theme1"
            });

            $("#igRating2").igRating(
            {
                voteCount: 10,
                value: 0.3,
                theme: "theme2"
            });

            $("#igRating3").igRating({
                voteCount: 10,
                value: 0.1,
                theme: "theme3"
            });
            $("#igRating4").igRating({
                voteCount: 10,
                value: 0.2,
                theme: "theme4"
            });
            $("#igRating5").igRating({
                voteCount: 10,
                value: 0.5,
                theme: "theme5"
            });

        });

    </script>

</body>
</html>

Ignite UI for jQuery | サンプル

検索結果

レーティング - カスタムスタイル

コードビュー

Ignite UI for jQuery | サンプル

検索結果

レーティング - カスタム スタイル

コード ビュー

レーティング - カスタムスタイル

コードビュー