metro4

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="twitter:site" content="@metroui"> <meta name="twitter:creator" content="@pimenov_sergey"> <meta name="twitter:card" content="summary"> <meta name="twitter:title" content="Metro 4 Components Library"> <meta name="twitter:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery."> <meta name="twitter:image" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:url" content="https://metroui.org.ua/v4/index.html"> <meta property="og:title" content="Metro 4 Components Library"> <meta property="og:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery."> <meta property="og:type" content="website"> <meta property="og:image" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:image:secure_url" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:image:type" content="image/png"> <meta property="og:image:width" content="968"> <meta property="og:image:height" content="504"> <meta name="author" content="Sergey Pimenov"> <meta name="description" content="Allow users to easily view and set ratings. The most popular HTML, CSS, and JS library in Metro style."> <meta name="keywords" content="HTML, CSS, JS, Metro, CSS3, Javascript, HTML5, UI, Library, Web, Development, Framework"> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> <link rel="icon" href="favicon.ico" type="image/x-icon"> <link href="metro/css/metro-all.css?ver=@@b-version" rel="stylesheet"> <link href="highlight/styles/github.css" rel="stylesheet"> <link href="docsearch/docsearch.min.css" rel="stylesheet"> <link href="css/site.css" rel="stylesheet"> <title>Rating - Metro 4 :: Popular HTML, CSS and JS library</title> </head> <body class="m4-cloak" data-role="htmlcontainer" data-html-source="header.html" data-insert-mode="prepend"> <div class="container-fluid"> <div class="row flex-xl-nowrap"> <div class="cell-md-3 cell-xl-2 pr-0 border-right bd-light" id="sidenav" data-role="htmlcontainer" data-html-source="sidenav.html" data-insert-mode="replace" data-on-load="initDocSearchEngine()"></div> <div class="d-none d-block-xl cell-xl-2 order-2 border-left bd-light toc-wrapper"> <h5>Table of contents</h5> <hr/> <ul class="toc-nav"> <li class="toc-entry"><a href="#">Rating</a></li> <li class="toc-entry"><a href="#_rating_about">About</a></li> <li class="toc-entry"> <a href="#_rating_options">Options</a> <ul> <li class="toc-entry"><a href="#_rating_options_stars">Stars count</a></li> <li class="toc-entry"><a href="#_rating_options_values">Value & Values</a></li> <li class="toc-entry"><a href="#_rating_options_message">Message</a></li> <li class="toc-entry"><a href="#_rating_options_colors">Colors</a></li> <li class="toc-entry"><a href="#_rating_options_static">Static rating</a></li> </ul> </li> <li class="toc-entry"><a href="#_rating_events">Events</a></li> <li class="toc-entry"><a href="#_rating_methods">Methods</a></li> <li class="toc-entry"><a href="#_rating_customize">Customize</a></li> </ul> </div> <main class="cell-md-9 cell-xl-8 order-1 pr-1-sx pl-1-sx pr-5-md pl-5-md"> <div class="place-right d-none d-block-lg" style="width: 200px;"> <img src="images/logo.png" class="w-100"> </div> <h1>Rating</h1> <p class="text-leader"> Allow users to easily view and set ratings that reflect degrees of satisfaction with content and services. </p>  <h3 id="_rating_about">About</h3> <p> Allow users to easily view and set ratings that reflect degrees of satisfaction with content and services. The <code>rating</code> control has several great features that provide flexibility and customization. To create <code>rating</code>, add role <code>rating</code> with attribute <code>data-role</code> to <code>input</code> element. </p> <div class="example"> <input data-role="rating"> </div> <pre><code class="html"> <input data-role="rating"> </code></pre> <h3 id="_rating_options">Options</h3> <p> The <code>rating</code> component has a number of options to setup it. </p> <h4 id="_rating_options_stars">Stars count</h4> <p> By default the rating is displayed with five stars. You can set your own number of stars with attribute <code>data-stars="..."</code>. Value for this attribute must be a valid integer value. </p> <div class="example"> <input data-role="rating" data-stars="10"> </div> <pre><code class="html"> <input data-role="rating" data-stars="10"> </code></pre> <h4 id="_rating_options_values">Value, values and round values</h4> <p> You can set rated value with attribute <code>data-value="..."</code>. Value for this attribute must be a valid number value and less or equal of count of stars. </p> <div class="example"> <input data-role="rating" data-value="3"> </div> <pre><code class="html"> <input data-role="rating" data-value="3"> </code></pre> <p> If your value is a float, you can use special attribute <code>data-round-func="round|ceil|floor"</code> to set round function. By default, used <code>round</code> function. </p> <div class="example"> <div class="row"> <div class="cell-md-4"> <p class="text-bold">round</p> <input data-role="rating" data-value="3.7" data-round-func="round"> </div> <div class="cell-md-4"> <p class="text-bold">ceil</p> <input data-role="rating" data-value="3.7" data-round-func="ceil"> </div> <div class="cell-md-4"> <p class="text-bold">floor</p> <input data-role="rating" data-value="3.7" data-round-func="floor"> </div> </div> </div> <pre><code class="html"> <input data-role="rating" data-value="3.7" data-round-func="round"> <input data-role="rating" data-value="3.7" data-round-func="ceil"> <input data-role="rating" data-value="3.7" data-round-func="floor"> </code></pre> <p> Each star has associated value, to determine the ranking. By default, this number is from 1 to the number of stars. You can set own set of values with attribute <code>data-values="..."</code>. Use <strong>comma separated</strong> string to set value for this attribute. </p> <div class="example"> <p class="text-bold mb-4"> Click on star to view associated value. </p> <div class="row"> <div class="cell-md-6"> <input data-role="rating" data-values="0.1, 0.2, 0.3, 0.4, 0.5" onchange="$('#input-for-values-number').val(this.value)"> </div> <div class="cell-md-6"> <input data-role="input" id="input-for-values-number" readonly data-clear-button="false"> </div> </div> <div class="row mt-2"> <div class="cell-md-6"> <input data-role="rating" data-values="A, B, C, D, E" onchange="$('#input-for-values-alpha').val(this.value)"> </div> <div class="cell-md-6"> <input data-role="input" id="input-for-values-alpha" readonly data-clear-button="false"> </div> </div> </div> <pre><code class="html"> <input data-role="rating" data-values="0.1, 0.2, 0.3, 0.4, 0.5"> <input data-role="rating" data-values="A, B, C, D, E"> </code></pre> <h4 id="_rating_options_message">Message</h4> <p> With attribute <code>data-message="..."</code> you can set additional information field for <code>rating</code>. </p> <div class="example"> <input data-role="rating" data-value="3" data-message="(3856)"> </div> <pre><code class="html"> <input data-role="rating" data-value="3" data-message="(3856)"> </code></pre> <h4 id="_rating_options_colors">Colors</h4> <p> You can set own colors for rating with attributes <code>data-star-color="..."</code> and <code>data-stared-color="..."</code>. Value for this attribute must be valid <strong>color hex value</strong> or Metro 4 color name. A color names a defined in <code>Metro.utils</code>, you can see all names in example below. </p> <div class="example"> <div class="row"> <div class="cell-md-3"> <input data-role="rating" data-value="3" data-star-color="cyan" data-stared-color="pink"> </div> <div class="cell-md-3"> <input data-role="rating" data-value="3" data-star-color="pink" data-stared-color="cyan"> </div> <div class="cell-md-3"> <input data-role="rating" data-value="3" data-star-color="green" data-stared-color="red"> </div> <div class="cell-md-3"> <input data-role="rating" data-value="3" data-star-color="yellow" data-stared-color="yellow"> </div> </div> </div> <pre><code class="html"> <input data-role="rating" data-value="3" data-star-color="cyan" data-stared-color="pink"> </code></pre> <pre><code> colors: { lime: '#a4c400', green: '#60a917', emerald: '#008a00', blue: '#00AFF0', teal: '#00aba9', cyan: '#1ba1e2', cobalt: '#0050ef', indigo: '#6a00ff', violet: '#aa00ff', pink: '#dc4fad', magenta: '#d80073', crimson: '#a20025', red: '#CE352C', orange: '#fa6800', amber: '#f0a30a', yellow: '#fff000', brown: '#825a2c', olive: '#6d8764', steel: '#647687', mauve: '#76608a', taupe: '#87794e' } </code></pre> <h4 id="_rating_options_static">Static rating</h4> <p> If you need create static rating, use attribute <code>data-static="true"</code> to set it. </p> <div class="example"> <input data-role="rating" data-value="3" data-message="(3856)" data-static="true"> </div> <pre><code class="html"> <input data-role="rating" data-value="3" data-message="(3856)" data-static="true"> </code></pre>  <h3 id="_rating_events">Events</h3> <p> When <code>rating</code> works, it generate the number of events. You can use callbacks for this events to interact with it. </p> <table class="table cell-border table-border options-table"> <thead> <tr> <th>Event</th> <th>Data</th> <th>Desc</th> </tr> </thead> <tbody> <tr> <td><code>onStarClick(value, star, element)</code></td> <td><code>data-on-star-click</code></td> <td>Fired when use click on the star on the not static rating</td> </tr> <tr> <td><code>onRatingCreate(element)</code></td> <td><code>data-on-rating-create</code></td> <td>Fired when the rating was created.</td> </tr> </tbody> </table> <div class="example"> <input id="rating-events" data-role="rating" data-on-star-click="alert('User rated this with value ' + arguments[0])"> </div> <pre><code class="html"> <input id="rating-events" data-role="rating" data-on-star-click=" alert('User rated this with value ' + arguments[0]) "> </code></pre> <h3 id="_rating_methods">Methods</h3> <p> Rating has the number of methods to interact with it. </p> <table class="table cell-border table-border options-table"> <thead> <tr> <th>Method</th> <th>Desc</th> </tr> </thead> <tbody> <tr> <td><code>val()</code></td> <td>Get current rating value</td> </tr> <tr> <td><code>val(val)</code></td> <td>Set rating value</td> </tr> <tr> <td><code>msg(m)</code></td> <td>Set rating info message</td> </tr> <tr> <td><code>static(mode)</code></td> <td>Set rating mode: static when true or not when false</td> </tr> </tbody> </table> <div class="example"> <input data-role="rating" id="rating-methods" data-message="Please rate"> <div class="mt-2"> <button class="button" onclick=" var v = Metro.utils.random(1, 5); var r = $('#rating-methods').data('rating'); r.val(v).msg('Your rate is: ' + v); ">Click me for rate</button> </div> </div> <pre><code class="html"> <input data-role="rating" id="rating-methods" data-message="Please rate"> <div> <button class="button" onclick=" var v = Metro.utils.random(1, 5); var r = $('#rating-methods').data('rating'); r.val(v).msg('Your rate is: ' + v); ">Click me for rate</button> </div> </code></pre> <h3 id="_rating_customize">Customize</h3> <p> You can customize cube component. For change cube visual style use attributes: <code>data-cls-rating</code> - additional class for rating component, <code>data-cls-stars</code> - additional class for stars list, <code>data-cls-result</code> - additional class for message field. Use these attributes to set additional classes to cube elements. </p> </main> </div> </div> <script src="docsearch/docsearch.min.js"></script> <script src="js/jquery-3.3.1.min.js"></script> <script src="metro/js/metro.js?ver=@@b-version"></script> <script src="highlight/highlight.pack.js"></script> <script src="js/clipboard.min.js"></script> <script src="js/site.js"></script>    </body> </html>