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。
图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所示页面。
图2-4 使用绝对坐标定位作业题效果图