EasyUI初体验之登录

EasyUI的下载

EasyUI的导入

	<%--引入主题的样式--%>
    <link rel="stylesheet" href="easyui/themes/default/easyui.css">
    <%--映入图标集的样式--%>
    <link rel="stylesheet" href="easyui/themes/icon.css">
    <%--引入demo.css，可引可不引--%>
    <link rel="stylesheet" href="easyui/themes/demo.css">
    <%--先引入jquery.js,再引入easyui.js--%>
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>

注意 jquery.js的导入顺序先于jquery.easyui.min.js
因为jQuery是一个函数库， jquery.easyui.min.js是基于jQuery这个函数库的

EasyUI之登录界面

<div style="margin: 200px 450px">
    <div class="easyui-panel" title="登录"
         style="width:400px;height:300px;padding:10px;background:#fafafa;"
         data-options="iconCls:'icon-save',closable:true,
    collapsible:true,minimizable:true,maximizable:true">
        <div>
            <input id="uname" class="easyui-textbox" data-options="iconCls:'icon-search'" prompt="UserName" style="width:300px">
        </div>
        <div>
            <input id="pwd" class="easyui-passwordbox" prompt="Password" style="width:300px">
        </div>
        <div>
            <a id="sub" href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-search'">submit</a>
            <a id="clear" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-clear'">reset</a>
        </div>
 </div>

注意最外面一个div
如果把调整位置的代码style="margin: 200px 450px"放在这个div 中<div class="easyui-panel" title="登录">，会出现错误

EasyUI中需要注意的两个属性

1. class 表示css样式
2. data-options 后面加一些小组件