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...")
 
 
(29 intermediate revisions by 3 users not shown)
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}}
 +
{{versionSince| 9.0.0}}
  
 
= Employment/Purpose =
 
= Employment/Purpose =
−
 
+
A multislider component represents a slider with multiple ranges. It includes sliderbuttons, which can be used to let user select a start value and an end value. A multislider accepts a range of values starting from 0 to a maximum value you defined. The default maximum value is 100. You can change the maximum value by setting 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 =
 +
[[Image:ZKComRef_Multislider.png]]
  
 
<source lang="xml" >
 
<source lang="xml" >
−
<zk xmlns:ca="client/attribute">
+
  <multislider>
−
  <anchornav name="a1" width="250px">
+
    <sliderbuttons startValue="10" endValue="70"/>
−
        <listbox>
+
    <sliderbuttons startValue="20" endValue="50"/>
−
            <listitem><listcell><a ca:data-anchornav-target="$win1"> First Window </a></listcell></listitem>
+
    <sliderbuttons startValue="30" endValue="40"/>
−
            <listitem><listcell><a ca:data-anchornav-target="$win2"> Second Window </a></listcell></listitem>
+
  </multislider>
−
            <listitem><listcell><a ca:data-anchornav-target="$win3"> Third Window </a></listcell></listitem>
+
   <multislider min="5" max="120" orient="vertical">
−
        </listbox>
+
     <sliderbuttons startValue="5" endValue="100"/>
−
    </anchornav>
+
    <sliderbuttons startValue="20" endValue="50"/>
−
   <window id="win1" title="1. First Window">
+
   </multislider>
−
     Hello world.
 
−
  </window>
 
−
  <window id="win2" title="2. Second Window">
 
−
    Welcome to ZK world.
 
−
   </window>
 
−
</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 ==
 +
{{DefaultValue| false}}
 +
 
 +
If the multislider is disabled, users can not drag the slider buttons.
 +
 
 +
== Orient ==
 +
{{DefaultValue| horizontal}}
 +
 
 +
Sets the orientation to either "horizontal" or "vertical" to display the multislider.
  
−
For example:
+
== Marks ==
−
<source lang="xml" >
+
{{DefaultValue| null}}
−
<div ca:data-anchornav-scroll="a1">
+
 
−
    <!-- other components -->
+
Sets the marks information for displaying value marks.
−
</div>
+
 
−
</source>
+
It supports Map<Integer, String>. The key is represented as the value of multislider, and the value is represented as the displayed mark label.
 +
It means that each value mark could be displayed in different text.
 +
 
 +
== MarkScale ==
 +
{{DefaultValue| 20}}
 +
 
 +
Sets the marks information for displaying value marks.
 +
 
 +
By default, the value marks are displayed every 20 starting from the minimum value. (if min is 0, then it displays "0 20 40 60 ...")
  
−
A or Button components can be used as links and targets are specified by the ZK client-attribute ca:data-anchornav-target=[selector].
+
== Max ==
−
For example, in Line 3 and Line 4, $win1 / $win2 select widgets by zk component id, win1 / win2.
+
{{DefaultValue| 100}}
  
−
The JQuery-based selector syntax (#domId / .class / elementName) is extended by ZK specific selectors as seen above using $componentId or @componentName.
+
Defines the max value of the multislider. It can be changed by the max property.
  
−
= Properties =
+
== Min ==
 +
{{DefaultValue| 0}}
  
−
== Name ==
+
Defines the minimal value of the multislider. It can be changed by the min property.
−
Set the name of Anchornav, it is only required when we want to spy scrolling in ZK containers instead of the whole page scrollbar.
 
  
−
== 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)
+
{{DefaultValue| 1}}
  
−
= Supported Events =
+
By default, the multislider will scroll to the position continuously when a user drags it. If you prefer to scroll a discrete fixed amount at each step, you can set the Step property.
  
−
*Inherited Supported Events: [[ZK_Component_Reference/Base_Components/LabelImageElement#Supported_Events | LabelImageElement]]
+
== TooltipVisible ==
 +
{{DefaultValue| false}}
  
−
= Supported Children =
+
The tooltip displays the value of slider buttons in the multislider.
 +
If tooltipvisible is true, the tooltips of the slider buttons will always be displayed.
  
−
*[[ZK_Component_Reference/Essential_Components/Nav | Nav]], [[ZK_Component_Reference/Essential_Components/Nav/Navitem  | Navitem]],[[ZK_Component_Reference/Essential_Components/Nav/Navseparator  | Navseparator]]
+
=Supported Events=
 +
*Inherited Supported Events: [[ZK_Component_Reference/Input/Rangeslider#Supported_Events | Rangeslider]]
  
−
= Use Cases =
+
=Supported Children=
  
−
{| border='1px' | width="100%"
+
*[[ZK_Component_Reference/Input/Sliderbuttons | Sliderbuttons]]
−
! Version !! Description !! Example Location
 
−
|-
 
−
| &nbsp;
 
−
| &nbsp;
 
−
| &nbsp;
 
−
|}
 
  
−
= Version History =
 
  
−
{{LastUpdated}}
 
−
{| border='1px' | width="100%"
 
−
! Version !! Date !! Content
 
−
|-
 
−
| 9.0.0
 
−
| November, 2019
 
−
| [http://www.zkoss.org/javadoc/latest/zk/org/zkoss/zkmax/zul/Anchornav.html Anchornav] was introduced.
 
−
|}
 
  
 
{{ZKComponentReferencePageFooter}}
 
{{ZKComponentReferencePageFooter}}

Latest revision as of 07:02, 31 January 2024


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 multiple ranges. It includes sliderbuttons, which can be used to let user select a start value and an end value. A multislider accepts a range of values starting from 0 to a maximum value you defined. The default maximum value is 100. You can change the maximum value by setting the max property. Notice that the value of max property is always larger than the value of min property.

Example

ZKComRef Multislider.png 

  <multislider>
    <sliderbuttons startValue="10" endValue="70"/>
    <sliderbuttons startValue="20" endValue="50"/>
    <sliderbuttons startValue="30" endValue="40"/>
  </multislider>
  <multislider min="5" max="120" orient="vertical">
    <sliderbuttons startValue="5" endValue="100"/>
    <sliderbuttons startValue="20" endValue="50"/>
  </multislider>

Properties

Disabled

Default: false

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

Orient

Default: horizontal

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

Marks

Default: null

Sets the marks information for displaying value marks.

It supports Map<Integer, String>. The key is represented as the value of multislider, and the value is represented as the displayed mark label. It means that each value mark could be displayed in different text.

MarkScale

Default: 20

Sets the marks information for displaying value marks.

By default, the value marks are displayed every 20 starting from the minimum value. (if min is 0, then it displays "0 20 40 60 ...")

Max

Default: 100

Defines the max value of the multislider. It can be changed by the max property.

Min

Default: 0

Defines the minimal value of the multislider. It can be changed by the min property.

Step

Default: 1

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

TooltipVisible

Default: false

The tooltip displays the value of slider buttons in the multislider. If tooltipvisible is true, the tooltips of the slider buttons will always be displayed.

Supported Events

Supported Children

* Sliderbuttons




Last Update : 2024/01/31

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=56675"