OpenLayers学习笔记5——使用jQuery UI实现查询并标注（UI篇）

标签：javascript   openlayers   webgis   地理信息   二维   

最近事情很多，老板给的压力也很大，经常出差，另外项目和个人研究还都要跟上，本月要交论文，还要写专利，只能抽时间来学习其他的东西了。关于OpenLayers的在博客中不会写太多具体的实现（网上有很多openlayers的博客，关于加载wms、标记、量测的，我这里就不再重复了），只是记录自己的开发学习经验和一些需要注意的问题，真正做开发的都知道，要想学好开发只能通过自己默默的多磨。。关于WW的学习和开发已经搁置了好久了，等过去这段时间，打算好好学一下jogl，争取做一些粒子模拟出来，另外打算采用rcp来做界面，swing做的界面实在是太丑了。废话不多说，先看本文的实现效果：

这里还是采用的jquery UI来实现的，jquery UI提供了常用的八大组件，这里使用了折叠面板（Accordion）和对话框（Dialog），在运用这些组件时，可以根据自己的需求来自由组合以达到美观的效果。

html代码

<div id="queryDialog">
    <div id="queryAccordion">
        <h3>欠税公告</h3>

        <div id="taxAnnounce">
            <div id="taxpayerIdDiv">
                <label for="taxpayerID">纳税人识别号：</label><input type="text" name="type" value="" id="taxpayerID">
            </div>
            <div id="taxpayerNameDiv">
                <label for="taxpayerName">纳税人名称：</label><input type="text" name="type" value="" id="taxpayerName">
            </div>
            <div id="taxpayerAddressDiv">
                <label for="taxpayerAddress">企业地址：</label><input type="text" name="type" value="" id="taxpayerAddress">
            </div>
        </div>
        <h3>未申报限改</h3>

        <div id="taxModify">
            <div id="taxpayerIdDiv2">
                <label for="taxpayerID2">纳税人识别号：</label><input type="text" name="type" value="" id="taxpayerID2">
            </div>
            <div id="taxpayerNameDiv2">
                <label for="taxpayerName2">纳税人名称：</label><input type="text" name="type" value="" id="taxpayerName2">
            </div>
            <div id="taxpayerAddressDiv2">
                <label for="taxpayerAddress2">企业地址：</label><input type="text" name="type" value="" id="taxpayerAddress2">
            </div>
        </div>
    </div>
</div>

  //查询
            $("#Query").click(function ()
            {
                //查询对话框
                $("#queryDialog").dialog(
                        {
                            open : function ()
                            {
                                //查询对话框中嵌入自动折叠面板
                                $('#queryAccordion').accordion(
                                        {
                                            collapsible : true
                                        }
                                );

                            } ,
                            beforeClose : function ()
                            {

                            } ,
                            title : "预警税源户籍跟踪" ,
                            resizable : false ,
                            buttons : {
                                "确定" : function ()
                                {
                                    $(this).dialog("close");
                                } ,
                                "取消" : function ()
                                {
                                    $(this).dialog("close");
                                }
                            }

                        }
                );

            });
        });

OpenLayers学习笔记5——使用jQuery UI实现查询并标注（UI篇）

标签：javascript   openlayers   webgis   地理信息   二维   

原文地址：http://blog.csdn.net/giser_whu/article/details/46420629