📄 timeline.zul
字号:
<?xml version="1.0" encoding="UTF-8"?><!--timeline.zul{{IS_NOTE Purpose: Description: History: Thu Nov 13 16:07:16 TST 2008, Created by Flyworld}}IS_NOTECopyright (C) 2008 Potix Corporation. All Rights Reserved.{{IS_RIGHT}}IS_RIGHT--><window id="demo" apply="org.zkoss.zkdemo.userguide.DemoWindowComposer"> <html><![CDATA[ <h4>SIMILE Timeline</h4> <p><a href="http://simile.mit.edu/timeline/" target="zkdemo">Timeline</a> is a DHTML-based Ajax widget for visualizing time-based events developed by SIMILE project of MIT. It is like Google Maps for time-based information.</p> <p>In this demo, You can pan the upper "Month" timeline around Oct 2008 by dragging it horizontally. See how the bottom "Year" timeline is moved accordingly. Click on each occurence event to show the detail description.</p> ]]></html> <hbox> Take a look of the <toolbarbutton id="target" label="timeline_ex1.xml" popup="details"/>and see how to create event. </hbox> <separator /> <popup id="details" fulfill="target.onClick" width="480px"> <div style="border:1px solid #538BA2; background: #FFF; "> <html><![CDATA[<pre style='color:#000000;background:#ffffff;'><span style='color:#7f0055; '><</span><span style='color:#7f0055; '>data</span><span style='color:#7f0055; '>></span> <span style='color:#7f0055; '><</span><span style='color:#7f0055; '>event</span> start=<span style='color:#2a00ff; '>"</span><span style='color:#2a00ff; '>Oct 1 2008 00:00:00 GMT</span><span style='color:#2a00ff; '>"</span> end=<span style='color:#2a00ff; '>"</span><span style='color:#2a00ff; '>Oct 1 2008 00:00:00 GMT</span><span style='color:#2a00ff; '>"</span> title=<span style='color:#2a00ff; '>"</span><span style='color:#2a00ff; '>Friend's wedding</span><span style='color:#2a00ff; '>"</span><span style='color:#7f0055; '>></span> I'm not sure precisely when my friend's wedding is. <span style='color:#7f0055; '></</span><span style='color:#7f0055; '>event</span><span style='color:#7f0055; '>></span> <span style='color:#7f0055; '><</span><span style='color:#7f0055; '>event</span> start=<span style='color:#2a00ff; '>"</span><span style='color:#2a00ff; '>Oct 15 2008 11:00:00 GMT</span><span style='color:#2a00ff; '>"</span> end=<span style='color:#2a00ff; '>"</span><span style='color:#2a00ff; '>Nov 1 2008 09:00:00 GMT</span><span style='color:#2a00ff; '>"</span> isDuration=<span style='color:#2a00ff; '>"</span><span style='color:#2a00ff; '>true</span><span style='color:#2a00ff; '>"</span> title=<span style='color:#2a00ff; '>"</span><span style='color:#2a00ff; '>Writing Style Guide</span><span style='color:#2a00ff; '>"</span> link=<span style='color:#2a00ff; '>"</span><span style='color:#2a00ff; '>http://www.zkoss.org/doc/styleguide</span><span style='color:#2a00ff; '>"</span> image=<span style='color:#2a00ff; '>"</span><span style='color:#2a00ff; '>http://www.zkoss.org/img/ZK-Logo.gif</span><span style='color:#2a00ff; '>"</span> <span style='color:#7f0055; '>></span> <span style='color:#7f0055; '></</span><span style='color:#7f0055; '>event</span><span style='color:#7f0055; '>></span> <span style='color:#7f0055; '><</span><span style='color:#7f0055; '>event</span> start=<span style='color:#2a00ff; '>"</span><span style='color:#2a00ff; '>Oct 23 2008 06:12:33 GMT</span><span style='color:#2a00ff; '>"</span> title=<span style='color:#2a00ff; '>"</span><span style='color:#2a00ff; '>Trip to New York</span><span style='color:#2a00ff; '>"</span> link=<span style='color:#2a00ff; '>"</span><span style='color:#2a00ff; '>http://www.priceline.com/</span><span style='color:#2a00ff; '>"</span><span style='color:#7f0055; '>></span> Happy Coding ! <span style='color:#7f0055; '></</span><span style='color:#7f0055; '>event</span><span style='color:#7f0055; '>></span><span style='color:#7f0055; '></</span><span style='color:#7f0055; '>data</span><span style='color:#7f0055; '>></span></pre> ]]></html> </div> </popup>
<tabbox width="100%" tabscroll="false">
<tabs>
<tab id="demoView" label="Demo"/>
<tab id="srcView" label="View Source"/>
</tabs>
<tabpanels>
<tabpanel>
<window id="view">
</window>
</tabpanel>
<tabpanel>
<panel>
<panelchildren>
<textbox id="codeView" class="code" rows="20" width="95%">
<attribute name="value"><![CDATA[
<zk> <timeline height="300px" width="100%"> <bandinfo width="70%" id="b1" intervalUnit="month" intervalPixels="100" eventSourceUrl="misc/timeline_ex1.xml"> </bandinfo> <bandinfo width="30%" intervalUnit="year" intervalPixels="200" syncWith="b1" eventSourceUrl="misc/timeline_ex1.xml"> </bandinfo> </timeline></zk>
]]></attribute>
</textbox>
</panelchildren>
<toolbar mold="panel">
<button id="tryBtn" label="Try me!"/>
<button id="reloadBtn" label="Reload" height="18px"/>
</toolbar>
</panel>
</tabpanel>
</tabpanels>
</tabbox></window>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -