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>