Rating"

From Documentation
 
(13 intermediate revisions by 2 users not shown)
Line 3: Line 3:
 
= Rating =
 
= Rating =
  
*Java API: <javadoc>org.zkoss.zkmax.zul.Rating</javadoc>
+
*Java API: <javadoc>org.zkoss.zul.Rating</javadoc>
*JavaScript API: <javadoc directory="jsdoc">zkmax.wgt.Rating</javadoc>
+
*JavaScript API: <javadoc directory="jsdoc">zul.wgt.Rating</javadoc>
[ since 8.6.0 ]
+
{{versionSince| 8.6.0}}
  
 
= Employment/Purpose =
 
= Employment/Purpose =
 
The rating component is a component that allows user selecting an rate that is smaller than the maximum number.
 
The rating component is a component that allows user selecting an rate that is smaller than the maximum number.
  
= Example =
+
= Examples =
 
 
[[File:ZKCompRef_Rating.png|500px]]
 
  
 +
[[File:rating.gif| center]]
 +
== Default ==
 +
<source lang="xml" >
 +
<rating rating="3"/>
 +
</source>
 +
== Custom Icon ==
 +
<source lang="xml" >
 +
<rating iconSclass="z-icon-bolt"/>
 +
</source>
 +
=== CSS ===
 
<source lang="xml" >
 
<source lang="xml" >
 
     <style>
 
     <style>
         .emoji .z-rating-hover {
+
         .myGiftIcon:before {
             -webkit-filter: hue-rotate(160deg);
+
            content: '🎁';
            filter: hue-rotate(160deg);
+
        }
 +
        .gift .z-rating-icon{
 +
             opacity: 0.5;
 
         }
 
         }
         .emoji .z-rating-selected {
+
         .gift .z-rating-selected, .gift .z-rating-hover{
            -webkit-filter: hue-rotate(180deg);
+
             opacity: 1;
             filter: hue-rotate(180deg);
 
 
         }
 
         }
 
     </style>
 
     </style>
     <rating max="14" rating="8"/>
+
     <rating iconSclass="myGiftIcon" sclass="gift" rating="3"/>
    <separator height="25px"/>
 
    <rating max="13" rating="7" symbol="z-icon-flag"/>
 
    <separator height="25px"/>
 
    <rating max="12" rating="6" symbol="\u260E"/>
 
    <separator height="25px"/>
 
    <rating sclass="emoji" max="10" rating="4" symbol="💩"/>
 
 
</source>
 
</source>
  
=Properties and Features=
+
=Properties=
  
  
==Symbol==
+
==IconSclass==
Specify unicode code points started with <tt>U+</tt>, font awesome icons prefixed with <tt>z-icon</tt>, emojis 💩 could change the icon of Rating.
+
Specify the CSS class name of the rating icon.
  
 
==Orient==
 
==Orient==
The orientation is default to <tt>horizontal</tt>, could be changed to vertical if <tt>vertical</tt> is specified.
+
The orientation is default to <code>horizontal</code>, could be changed to vertical if <code>vertical</code> is specified.
  
 
==Rating==
 
==Rating==
This is the rating value, will have a initial value if specified to an integer larger than 0.
+
This is the rating value, which has an initial value if specified to an integer larger than 0.
  
 
==Cancelable==
 
==Cancelable==
If true, by clicking the previous rated icon again, the rating will be canceled and set 0.
+
If true, by clicking the previously rated icon again, the rating will be canceled and set to 0.
  
 
==Max==
 
==Max==
Represents the maximum number of the rating. Also, icons will be rendered as the max size.
+
Represents the maximum number of ratings. Also, icons will be rendered as the max size.
  
 
==Disabled==
 
==Disabled==
Line 60: Line 63:
 
=Supported Events=
 
=Supported Events=
  
{| border="1" | width="100%"
+
{| class='wikitable' | width="100%"
 
! <center>Name</center>
 
! <center>Name</center>
 
! <center>Event Type</center>
 
! <center>Event Type</center>
 
|-
 
|-
| <center><tt>onChange</tt></center>
+
| <center><code>onChange</code></center>
 
| '''Event:''' <javadoc>org.zkoss.zk.ui.event.Event</javadoc>
 
| '''Event:''' <javadoc>org.zkoss.zk.ui.event.Event</javadoc>
 
Denotes user has rated.
 
Denotes user has rated.
Line 77: Line 80:
 
{{LastUpdated}}
 
{{LastUpdated}}
  
{| border='1px' | width="100%"
+
{| class='wikitable' | width="100%"
 
! Version !! Date !! Content
 
! Version !! Date !! Content
 
|-
 
|-

Latest revision as of 09:27, 19 September 2022

Rating

Since 8.6.0

Employment/Purpose

The rating component is a component that allows user selecting an rate that is smaller than the maximum number.

Examples

Rating.gif

Default

<rating rating="3"/>

Custom Icon

 <rating iconSclass="z-icon-bolt"/>

CSS

    <style>
        .myGiftIcon:before {
            content: '🎁';
        }
        .gift .z-rating-icon{
            opacity: 0.5;
        }
        .gift .z-rating-selected, .gift .z-rating-hover{
            opacity: 1;
        }
    </style>
    <rating iconSclass="myGiftIcon" sclass="gift" rating="3"/>

Properties

IconSclass

Specify the CSS class name of the rating icon.

Orient

The orientation is default to horizontal, could be changed to vertical if vertical is specified.

Rating

This is the rating value, which has an initial value if specified to an integer larger than 0.

Cancelable

If true, by clicking the previously rated icon again, the rating will be canceled and set to 0.

Max

Represents the maximum number of ratings. Also, icons will be rendered as the max size.

Disabled

If disabled is true, it's not allowed to be rated. (Is allowed to have an initial rating.)

Readonly

If true, the rating is only readable, not changeable. (Is allowed to have an initial rating.)

Supported Events

Name
Event Type
onChange
Event: Event

Denotes user has rated.

Supported Children

* none

Version History

Last Update : 2022/09/19


Version Date Content
     



Last Update : 2022/09/19

Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.