Multislider"

From Documentation
(Created page with "{{ZKComponentReferencePageHeader}} = Multislider = *Demonstration: *Java API: [http://www.zkoss.org/javadoc/latest/zk/org/zkoss/zkmax/zul/Multislider.html Multislider] *JavaS...")
 
Line 2: Line 2:
  
 
= Multislider =
 
= Multislider =
−
 
 
*Demonstration:  
 
*Demonstration:  
 
*Java API: [http://www.zkoss.org/javadoc/latest/zk/org/zkoss/zkmax/zul/Multislider.html Multislider]  
 
*Java API: [http://www.zkoss.org/javadoc/latest/zk/org/zkoss/zkmax/zul/Multislider.html Multislider]  
 
*JavaScript API: [http://www.zkoss.org/javadoc/latest/jsdoc/zkmax/slider/Multislider.html Multislider]  
 
*JavaScript API: [http://www.zkoss.org/javadoc/latest/jsdoc/zkmax/slider/Multislider.html Multislider]  
−
*{{ZK EE}}
+
{{ZK EE}}
 +
since 9.0.0
  
 
= Employment/Purpose =
 
= Employment/Purpose =
−
 
+
A multislider component represents a slider with a few range value. It includes sliderbuttons, which can be used to let user select a start value and end value. A multislider accepts a range of value starting from 0 to certain maximum value. The default maximum value of multislider scale is 100. You could change the maximum allowed value by the max property. Notice that the value of max property is always larger than the value of min property.
−
This component synchronizes the scrolling position on a page or within ZK containers (Div, Window, etc.) with hyperlinks and buttons. It allows you both to navigate to desired ZK components in a page and highlight the current navigation link based on the current scroll position.
 
  
 
= Example =
 
= Example =
Line 16: Line 15:
 
<source lang="xml" >
 
<source lang="xml" >
 
<zk xmlns:ca="client/attribute">
 
<zk xmlns:ca="client/attribute">
−
   <anchornav name="a1" width="250px">
+
   <multislider>
−
         <listbox>
+
         <sliderbuttons startValue="10" endValue="70"/>
−
            <listitem><listcell><a ca:data-anchornav-target="$win1"> First Window </a></listcell></listitem>
+
         <sliderbuttons startValue="20" endValue="50"/>
−
            <listitem><listcell><a ca:data-anchornav-target="$win2"> Second Window </a></listcell></listitem>
+
        <sliderbuttons startValue="30" endValue="40"/>
−
            <listitem><listcell><a ca:data-anchornav-target="$win3"> Third Window </a></listcell></listitem>
+
     </multislider>
−
         </listbox>
 
−
    </anchornav>
 
−
  <window id="win1" title="1. First Window">
 
−
    Hello world.
 
−
  </window>
 
−
  <window id="win2" title="2. Second Window">
 
−
     Welcome to ZK world.
 
−
  </window>
 
 
</zk>
 
</zk>
 
</source>
 
</source>
  
−
By default, the Anchornav component will watch the scroll position of a page.
+
= Properties =
−
Other scrollable containers can be associated with a named Anchornav by setting the client-attribute: ca:data-anchornav-scroll.
+
 
 +
== Disabled ==
 +
If the multislider is disabled, then users can not drag the slider buttons.
  
−
For example:
+
== Orient ==
−
<source lang="xml" >
+
Sets the orient either "horizontal" or "vertical" to display multislider.
−
<div ca:data-anchornav-scroll="a1">
 
−
    <!-- other components -->
 
−
</div>
 
−
</source>
 
  
−
A or Button components can be used as links and targets are specified by the ZK client-attribute ca:data-anchornav-target=[selector].
+
== Marks ==
−
For example, in Line 3 and Line 4, $win1 / $win2 select widgets by zk component id, win1 / win2.
+
Sets the marks information for displaying value marks.
 +
(Default: "20")
 +
If there is only a number value, for example, 20.
 +
The value marks would be displayed every 20 start from the minimum value. (if min is 0, then display "0 20 40 ...")
 +
Another options for the marks can be specified as follows:
 +
<source lang="xml" ><multislider marks="10:10%, 20:20%, 50:50%, 80:80%" /></source>
 +
It means that each value mark could be displayed in different text.
  
−
The JQuery-based selector syntax (#domId / .class / elementName) is extended by ZK specific selectors as seen above using $componentId or @componentName.
+
== Max ==
 +
Multislider supports maximal position, which can be changed by the max property as follows.
 +
(Default: 100)
  
−
= Properties =
+
== Min ==
 +
Multislider supports minimal position, which can be changed by the min property as follows.
 +
(Default: 0)
  
−
== Name ==
+
== StartValue, EndValue ==
−
Set the name of Anchornav, it is only required when we want to spy scrolling in ZK containers instead of the whole page scrollbar.
+
Represent the range value of Multislider.
 +
(Default: 0)
  
−
== PositionFixed ==
+
== Step ==
−
Set whether to enable position fixed when anchornav is out of current view. When it is set to true, Anchornav will stay (float) on the same position of the page. (Default: true)
+
By default, the multislider will scroll to the position continuously when a user drags it. If you prefer to scroll a discrete fixed amount on each step, you can set the amount of value of the step property.
  
−
= Supported Events =
+
== TooltipVisible ==
 +
The tooltip displays the value of slider buttons in multislider.
 +
If the tooltipvisible is true, the tooltips of the slider buttons would be always visible.
 +
(Default: false)
  
−
*Inherited Supported Events: [[ZK_Component_Reference/Base_Components/LabelImageElement#Supported_Events | LabelImageElement]]
+
=Supported Events=
 +
*Inherited Supported Events: [[ZK_Component_Reference/Base_Components/XulElement#Supported_Events | XulElement]]
  
−
= Supported Children =
+
=Supported Children=
  
−
  *[[ZK_Component_Reference/Essential_Components/Nav | Nav]], [[ZK_Component_Reference/Essential_Components/Nav/Navitem  | Navitem]],[[ZK_Component_Reference/Essential_Components/Nav/Navseparator  | Navseparator]]
+
  *[[ZK_Component_Reference/Input/Sliderbuttons | Sliderbuttons]]
  
 
= Use Cases =
 
= Use Cases =
Line 81: Line 85:
 
| 9.0.0
 
| 9.0.0
 
| November, 2019
 
| November, 2019
−
| [http://www.zkoss.org/javadoc/latest/zk/org/zkoss/zkmax/zul/Anchornav.html Anchornav] was introduced.
+
| [http://www.zkoss.org/javadoc/latest/zk/org/zkoss/zkmax/zul/Multislider.html Multislider] was introduced.
 
|}
 
|}
  
 
{{ZKComponentReferencePageFooter}}
 
{{ZKComponentReferencePageFooter}}

Revision as of 04:03, 13 November 2019


DocumentationZK Component ReferenceInputMultislider
Multislider

Multislider

  • Available for ZK:
  • http://www.zkoss.org/product/zkhttp://www.zkoss.org/whyzk/zkeeVersion ee.png
since 9.0.0

Employment/Purpose

A multislider component represents a slider with a few range value. It includes sliderbuttons, which can be used to let user select a start value and end value. A multislider accepts a range of value starting from 0 to certain maximum value. The default maximum value of multislider scale is 100. You could change the maximum allowed value by the max property. Notice that the value of max property is always larger than the value of min property.

Example

<zk xmlns:ca="client/attribute">
  <multislider>
        <sliderbuttons startValue="10" endValue="70"/>
        <sliderbuttons startValue="20" endValue="50"/>
        <sliderbuttons startValue="30" endValue="40"/>
    </multislider>
</zk>

Properties

Disabled

If the multislider is disabled, then users can not drag the slider buttons.

Orient

Sets the orient either "horizontal" or "vertical" to display multislider.

Marks

Sets the marks information for displaying value marks. (Default: "20") If there is only a number value, for example, 20. The value marks would be displayed every 20 start from the minimum value. (if min is 0, then display "0 20 40 ...") Another options for the marks can be specified as follows: 

<multislider marks="10:10%, 20:20%, 50:50%, 80:80%" />

It means that each value mark could be displayed in different text.

Max

Multislider supports maximal position, which can be changed by the max property as follows. (Default: 100)

Min

Multislider supports minimal position, which can be changed by the min property as follows. (Default: 0)

StartValue, EndValue

Represent the range value of Multislider. (Default: 0)

Step

By default, the multislider will scroll to the position continuously when a user drags it. If you prefer to scroll a discrete fixed amount on each step, you can set the amount of value of the step property.

TooltipVisible

The tooltip displays the value of slider buttons in multislider. If the tooltipvisible is true, the tooltips of the slider buttons would be always visible. (Default: false)

Supported Events

Supported Children

* Sliderbuttons

Use Cases

Version Description Example Location
     

Version History

Last Update : 2019/11/13


Version Date Content
9.0.0 November, 2019 Multislider was introduced.



Last Update : 2019/11/13

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


Retrieved from "https://www.zkoss.org/_w/index.php?title=ZK_Component_Reference/Input/Multislider&oldid=49394"