jQuery EasyUI
jQuery EasyUI是一組基于jQuery的UI插件集合體抄腔，而jQuery EasyUI的目標就是幫助web開發(fā)者更輕松的打造出功能豐富并且美觀的UI界面。開發(fā)者不需要編寫復(fù)雜的javascript赫蛇，也不需要對css樣式有深入的了解，開發(fā)者需要了解的只有一些簡單的html標簽落蝙。
特點
jQuery EasyUI為提供了大多數(shù)UI控件的使用暂幼，如：accordion，combobox管行，menu邪媳，dialog，tabs雨效，validatebox，datagrid逗柴，window顿肺，tree等等渣蜗。
jQuery EasyUI有以下特點：
1旷祸、基于jquery用戶界面插件的集合
2、為一些當前用于交互的js應(yīng)用提供必要的功能
3骚烧、EasyUI支持兩種渲染方式分別為javascript方式（如：$('#p').panel({...})）和html標記方式（如：class="easyui-panel"）
4闰围、支持HTML5（通過data-options屬性）
5、開發(fā)產(chǎn)品時可節(jié)省時間和資源
6碧查、簡單校仑，但很強大
7、支持擴展稻扬，可根據(jù)自己的需求擴展控件
8羊瘩、目前各項不足正以版本遞增的方式不斷完善
使用EasyUI
在網(wǎng)站http://www.jeasyui.net/可得到全面的EasyUI使用內(nèi)容,包括EasyUI Demo,EasyUI教程,EasyUI文檔等學習內(nèi)容
在EasyUI Demo可查詢到多個EasyUI設(shè)計實例
在EasyUI 文檔中可查詢到其各種插件的使用示例
插件列表如下：
在Myeclipse中使用EasyUI
1.首先下載EasyUI的壓縮包
http://www.jeasyui.net/download選擇jQuery EasyUI 下載,此文章中下載的jquery-easyui-1.7.6版本
下載得到壓縮包,并解壓
2.在Myeclipse中新建web工程,在WebRoot文件夾中新建一個EasyUI文件夾用于存放EasyUI插件相關(guān)文件,將解壓后的文件復(fù)制到文件夾中
此處一創(chuàng)建一個登錄表單為例
新建一個login.jsp文件
打開EasyUI->demo->form->basic.html文件
如圖紅框所示向login.jsp文件的<head>標簽下添加相應(yīng)的引入文件語句
并修改引用路徑
<base href="<%=basePath%>">
<title>My JSP 'login.jsp' starting page</title>
<link rel="stylesheet" type="text/css" href="EasyUI/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="EasyUI/themes/icon.css">
<link rel="stylesheet" type="text/css" href="EasyUI/demo.css">
<script type="text/javascript" src="EasyUI/jquery.min.js"></script>
<script type="text/javascript" src="EasyUI/jquery.easyui.min.js"></script>
<script type="text/javascript" src="EasyUI/locale/easyui-lang-zh_CN.js"></script>
</head>
這里使用的是相對路徑形式
復(fù)制basic.html中<body>標簽下的內(nèi)容到login.jsp中根據(jù)需求進行修改
<body>
<div align="center">
<div style="margin:20px 0;"></div>
<div class="easyui-panel" title="用戶登錄" style="width:400px;max-width:400px;padding:30px 60px;">
<form id="ff" method="post">
<div style="margin-bottom:20px">
<input class="easyui-textbox" name="賬號:" style="width:100%" data-options="label:'賬號',required:true">
</div>
<div style="margin-bottom:20px">
<input class="easyui-passwordbox" name="密碼:" style="width:100%" data-options="label:'密碼',required:true">
</div>
</form>
<div style="text-align:center;padding:5px 0">
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()" style="width:80px">Submit</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()" style="width:80px">Clear</a>
</div>
</div>
</div>
<script>
function submitForm(){
$('#ff').form('submit');
}
function clearForm(){
$('#ff').form('clear');
}
</script>
</body>
開啟tomcat 7.0服務(wù)器,運行登錄網(wǎng)頁界面如下
