|
Processing... Choose a color for a tag level.
Description & Source Code
Tag cloud is a popular component on Web 2.0 sites that displays
an array of tags in different styles. tag_cloud.zul
<zk xmlns:h="native"> <style> .main { margin: 0; padding: 5px; width: 100%; } .main .tag { list-style: none outside none; position: relative; float: left; padding-right: 10px; line-height: 25px; } .tagLevel-1, .tagLevel-1 .z-radio-cnt { font-size: 20px; font-weight: bold; color: #008BB6; } .tagLevel-2, .tagLevel-2 .z-radio-cnt { font-size: 18px; color: green; } .tagLevel-3, .tagLevel-3 .z-radio-cnt { font-size: 16px; color: darkorange; } .tagLevel-4, .tagLevel-4 .z-radio-cnt { font-size: 14px; } .tagLevel-5, .tagLevel-5 .z-radio-cnt { font-size: 12px; } .tagLevel-6, .tagLevel-6 .z-radio-cnt { font-size: 10px; color: gray;} </style> <div> <!-- Data From Server --> <zscript><![CDATA[ import org.zkoss.zk.ui.metainfo.*; //A simple Random method int getRandom() { return (int) (Math.random() * 6 + 1); } //Get All the components this ZK version Support ComponentDefinitionMap allCompMap = this.page.getLanguageDefinition().getComponentDefinitionMap(); Map tagMap = new HashMap(); for (Iterator it = allCompMap.getNames().iterator();it.hasNext();) { tagMap.put(it.next(), getRandom()); } Set tagSet = tagMap.entrySet(); ]]></zscript> <!-- Page Dom Structure --> <h:ul class="main"> <h:li forEach="${tagSet}" class="tag" val="${each.value}">${each.key}</h:li> </h:ul> <!-- Client Handling --> <script> zk.afterMount(function() { jq(".main > li").addClass(function() { return 'tagLevel-' + jq(this).attr('val'); }); }); </script> </div> </zk> tag_cloud_ctrl.zul
<zk xmlns:h="native" xmlns:c="client"> <style> .preview { margin: 0; padding: 0px; } .preview li { list-style: none outside none; } .preview li.high { background: #FFFFCC; } </style> <script><![CDATA[ var level = 1; function colorChange(color) { jq(".tagLevel-" + level + ".z-radio").css("color", color); jq("li.tagLevel-" + level).css("color", color); }; function hightlight(checked) { jq('.preview .tagLevel-' + level).parent().toggleClass('high'); jq('.preview .tagLevel-' + checked.getValue()).parent().toggleClass('high'); level = checked.getValue(); } ]]></script> <vlayout> Pick color : <colorbox id="colorbx" color="#008bb6" c:onChange="colorChange(this.getColor())" width="100px" /> </vlayout> <separator /> <groupbox closable="false" sclass="z-demo-config"> <caption>Tag Level</caption> <radiogroup id="levelGroup"> <h:ul class="preview"> <h:li class="high"> <radio class="tagLevel-1" value="1" c:onCheck="hightlight(this)" checked="true" label="Level 1 Text" /> </h:li> <h:li> <radio class="tagLevel-2" value="2" c:onCheck="hightlight(this)" label="Level 2 Text" /> </h:li> <h:li> <radio class="tagLevel-3" value="3" c:onCheck="hightlight(this)" label="Level 3 Text" /> </h:li> <h:li> <radio class="tagLevel-4" value="4" c:onCheck="hightlight(this)" label="Level 4 Text" /> </h:li> <h:li> <radio class="tagLevel-5" value="5" c:onCheck="hightlight(this)" label="Level 5 Text" /> </h:li> <h:li> <radio class="tagLevel-6" value="6" c:onCheck="hightlight(this)" label="Level 6 Text" /> </h:li> </h:ul> </radiogroup> </groupbox> </zk>
Copyright © 2005-2024 Potix Corporation All rights reserved.
|
Processing... |