Openlaszlo实现简单的标签菜单

代码:

<? xml version="1.0" encoding="GB2312"  ?>
< canvas  fontsize ="12" >
     < script >
        // 当前选项卡上被选的项目
        var selectitem = 0;
        // 每条间的间距(没时间算居中, 手工找齐吧)
        var space = 82;
     </ script >
     < dataset  name ="ds_dist"  src ="temp.xml"   />
     <!--  内部选择框  -->
     < view  id ="selectrect"  width ="70"  height ="23" >
         < handler  name ="oninit" >
            this.setSource("rect.gif");
         </ handler >
     </ view >
    
     <!--  外部菜单  -->
     < view >
         < view  width ="750"  x ="15"  y ="2" >
             < simplelayout  axis ="x"  spacing ="50" />
             < view  id ="v_menu"  width ="30"  height ="30"  datapath ="ds_dist:/Root/City/dist" >
                 < wrappinglayout  axis ="x"  spacing ="50"   />
                 <!--  初始化  -->
                 < handler  name ="oninit" >
                    ds_dist.doRequest();
                 </ handler >
                 < handler  name ="ondata" >
                    var dp = new LzDatapointer();
                    dp.setPointer(this.datapath.p);
                    var distname = dp.xpathQuery("text()");
                    this.subviews[0].setText(distname);
                 </ handler >
                 < text  name ="dist"  align ="center"  fontstyle ="bold"  fgcolor ="blue" ></ text >
             </ view >
            

         </ view >
         <!--  鼠标事件代理  -->
         < attribute  name ="moustracker_del"  value ="$once{ new LzDelegate( this, 'trackmouse' )}"   />
         < handler  name ="onmouseover" >
            // 注册实时监控代理
            moustracker_del.register(LzIdle,'onidle');
         </ handler >

         < handler  name ="onmouseout" >
            // 取消注册
            moustracker_del.unregisterAll();
         </ handler >
         < handler  name ="onclick" >
            // 跳转页面
            LzBrowser.loadURL("http://test.aspx?id="+selectitem,"_blank");
         </ handler >
         < method  name ="trackmouse" >
             <![CDATA[
                // 实现鼠标监控
                var mou_x = this.getMouse('x')
                // var mou_y = this.getMouse('y');
            
                // 记录的个数
                var count = ds_dist.childNodes[0].childNodes[0].childNodes.length;
                // 判断区间并执行动画
                for(var i=0;i<count;i++) {
                    if(mou_x > i * space && mou_x < (i+1) * space) {
                        selectrect.animate("x",space* i,1000,false,{motion:'easeboth'});
                        selectitem = i;
                    }
                }                
             ]]>
         </ method >
     </ view >
</ canvas >

 

temp.xml

 

< Root >
     < City >
         < dist > 西岗区 </ dist >
         < dist > 沙河口区 </ dist >
         < dist > 中山区 </ dist >
         < dist > 干井子区 </ dist >
         < dist > 旅顺口区 </ dist >
        
     </ City >
</ Root >