3. 利用绝对坐标实现表单控件的位置布局。

本例采用绝对（坐标）地址法（position: absolute）确定控件在页面中的显示位置。在EasyUI中，控件绝对位置的设置采用top和left两个属性（标签），而与其他有些插件使用y和x有所不同。控件位置属性可以在HTML的style中设置，也可以通过样式CSS设置。本例通过jQuery语句设置EasyUI控件的位置、尺寸等属性。在EasyUI中，由于有些控件无法直接使用CSS布局定位，这时可在其外面先添加一个层<div>，然后再对层进行绝对位置布局，以确定控件显示的位置。

本例将实例2中定义位置布局的<p>…</p>换成>div>…</div>，将EasyUI-panel类型的外层容器myForm1的position设置为relative（在style中设置），在这个容器内添加的控件其style中的position设为absolute。每个控件及其label采用jQuery代码设置，所有label实现右对齐。

本实例程序运行界面如图2-3所示，主要代码如下见程序2-3。

移动android view 绝对坐标_移动android view 绝对坐标

图2-3. 利用绝对坐标实现表单控件位置布局程序运行界面

程序2-3. example03_absolutelayout.jsp

<body style="margin: 2px 2px 2px 2px;">
<div id="main" style="margin:2px 2px 2px 2px;">
<div class=“easyui-panel" id="myForm1" title=" 学生信息编辑" style="position:relative;
                   background:#fafafa;" data-options="iconCls:'panelIcon'" >
<fieldset id="myFieldset1" style="position:absolute; top:10px; left:10px; width:300px; height:210px;
padding: 2px 0px 0px 16px; border:1px groove" >
           <legend>基本信息</legend>
           <label id='stuid_label'>学号：</label>
<div id="stuid_div"><input class=“easyui-textbox" type="text" id="stuid"></input></div>
           <label id='stuname_label'>姓名：</label>
<div id="stuname_div"><input class=“easyui-textbox" type="text" id="stuname"></input></div>
           <label id='pycode_label'>拼音：</label>
<div id="pycode_div"><input class=“easyui-textbox" type="text" id="pycode"></input></div>
           <label id='gender_label'>性别：</label>
<div id="gender_div"><input class=“easyui-combobox" type="text" id="gender"></input></div>
           <label id='birthdate_label'>出生日期：</label>
<div id="birthdate_div"><input class=“easyui-datebox" type="text" id="birthdate"></input></div>
           <label id='weight_label'>体重：</label>
<div id="weight_div"><input class=“easyui-textbox" type="text" id="weight"></input></div>
           <label id='weightx_label'>KG</label>
</fieldset>
<fieldset id="myFieldset2" style="position:absolute; top:235px; left:10px; width:300px; height:180px;
           padding: 2px 0px 0px 16px; border:1px groove" >
           <legend>通信信息</legend>
           <label id='address_label'>家庭地址：</label>
<div id="address_div"><input class=“easyui-textbox" type="text" id="address"
style="padding:0px 2px 0px 4px"></input></div>
           <label id='mobile_label'>手机号码：</label>
<div id="mobile_div"><input class=“easyui-textbox" type="text" id="mobile"
style="padding:0px 2px 0px 4px"></input></div>
           <label id='homephone_label'>家庭电话：</label>
<div id="homephone_div"><input class=“easyui-textbox" type="text" id="homephone"
style="padding:0px 2px 0px 4px"></input></div>
           <label id='email_label'>Email：</label>
<div id="email_div"><input class=“easyui-textbox" type="text" id="email"
style="padding:0px 2px 0px 4px"></input></div>
           <label id='weixin_label'>微信号：</label>
<div id="weixin_div"><input class=“easyui-textbox" type="text" id="weixin"
style="padding:0px 2px 0px 4px"></input></div>
</fieldset>
</div>
</div>
<script>
$(document).ready(function(){
           //控件位置布局
           $("#stuid_label").css({position: "absolute", top:"23px", left:"10px", width:"65px",
           "text-align":"right", "z-index":2});
           $("#stuid_div").css({position: "absolute", top:"20px", left:"76px", "z-index":2});
           $("#stuname_label").css({position: "absolute", top:"53px", left:"10px", width:"65px",
           "text-align":"right", "z-index":2});
           $("#stuname_div").css({position: "absolute", top:"50px", left:"76px","z-index":2});
           $("#pycode_label").css({position: "absolute", top:"83px", left:"10px", width:"65px",
           "text-align":"right", "z-index":2});
           $("#pycode_div").css({position: "absolute", top:"80px", left:"76px", "z-index":2});
           $("#gender_label").css({position: "absolute", top:"113px", left:"10px", width:"65px",
           "text-align":"right", "z-index":2});
           $("#gender_div").css({position: "absolute", top:"110px", left:"76px", "z-index":2});
           $("#birthdate_label").css({position: "absolute", top:"143px", left:"10px", width:"65px",
           "text-align":"right", "z-index":2});
           $("#birthdate_div").css({position: "absolute", top:"140px", left:"76px", "z-index":2});
           $("#weight_label").css({position: "absolute", top:"173px", left:"10px", width:"65px",
text-align":"right", "z-index":2});
           $("#weight_div").css({position: "absolute", top:"170px", left:"76px", "z-index":2});
           $("#weightx_label").css({position: "absolute", top:"173px", left:"190px", width:"25px",
           "text-align":"right", "z-index":2});
           $("#address_label").css({position: "absolute", top:"23px", left:"10px", width:"65px",
           "text-align":"right", "z-index":2});
           $("#address_div").css({position: "absolute", top:"20px", left:"76px", "z-index":2});
           $("#mobile_label").css({position: "absolute", top:"53px", left:"10px", width:"65px",
           "text-align":"right", "z-index":2});
           $("#mobile_div").css({position: "absolute", top:"50px", left:"76px", "z-index":2});
           $("#homephone_label").css({position: "absolute", top:"83px", left:"10px", width:"65px",
           "text-align":"right", "z-index":2});
           $("#homephone_div").css({position: "absolute", top:"80px", left:"76px", "z-index":2});
           $("#email_label").css({position: "absolute", top:"113px", left:"10px", width:"65px",
           "text-align":"right", "z-index":2});
           $("#email_div").css({position: "absolute", top:"110px", left:"76px", "z-index":2});
           $("#weixin_label").css({position: "absolute", top:"143px", left:"10px", width:"65px",
           "text-align":"right", "z-index":2});
           $("#weixin_div").css({position: "absolute", top:"140px", left:"76px", "z-index":2});
           $("#myForm1").panel({width:345, height:465});
           $("#stuid").textbox({width:120});
           $("#birthdate").datebox({width:120});
           $("#weight").numberbox({width:120});
           $("#stuid").textbox('setValue','20143305001');
           $("#stuname").textbox('setValue','诸葛亮');
           $("#birthdate").datebox('setValue','2015-9-10');
           $("#weight").numberbox({precision:1, max:200, min:30});
           $("#weight").numberbox('setValue',65.5);
           $("#weight").numberbox('textbox').css('text-align','right');
           //设置combobox
           var gendersource=[{'gender':'男'},{'gender':'女'}];
           $("#gender").combobox({width:120, data:gendersource, valueField:'gender', textField:'gender'});
           var items = $('#gender').combobox('getData');
           $("#gender").combobox('select', items[0].gender);
           $("#address").textbox({width:230});
    });
</script>
</body>

主要知识点：

①在EasyUI中绝对坐标定位采用top和left属性，而不是有些插件库中使用y和x。

②数字框numberbox右对齐方式$("#weight").numberbox('textbox').css('text-align','right')。

③label标签和编辑型控件的CSS设置，设置其top、left、width等属性值，当然还有position值为absolute。

思考题：

1．如果在jQuery中不定义控件的CSS，页面显示的效果会怎样？

2．控件（包括一些如fieldset之类的容器）采用绝对坐标的定位显示方式虽然效果较好，但程序书写比较繁琐，如何简化？

3．如何动态定义页面中的控件？即不在HTML中事先定义控件，而在<script>…</script>之间使用jQuery语句定义。

作业题：

使用EasyUI插件及绝对地址定位方式，编写程序设计图2-4所示页面。

移动android view 绝对坐标_CSS_02

图2-4  使用绝对坐标定位作业题效果图