騰網(wǎng)站建設(shè)谷歌google下載安卓版 app
1.什么是easyUI？
jQuery EasyUI是一組基于jQuery的UI插件集合體，而jQuery EasyUI的目標(biāo)就是幫助web開發(fā)者更輕松的打造出功能豐富并且美觀的UI界面。開發(fā)者不需要編寫復(fù)雜的javascript，也不需要對(duì)css樣式有深入的了解，開發(fā)者需要了解的只有一些簡單的html標(biāo)簽。
簡單地說，easyUI就是一種基于jQuery的用戶界面插件集合。使用easyUI你不需要寫很多代碼了，只需要通過編寫一些簡單的HTML標(biāo)記，就可以定義用戶界面。而且，easyUI是個(gè)完美支持HTML5網(wǎng)頁的完整框架，它可以節(jié)省您網(wǎng)頁開發(fā)的時(shí)間和規(guī)模。
2.下載easyUI
官網(wǎng)地址
接著，再點(diǎn)擊Download按鈕，正式進(jìn)入到easyUI的下載界面。
緊接著，點(diǎn)擊Download按鈕即可下載easyUI了
3.easyUI的快速入門
3.1.創(chuàng)建項(xiàng)目，并在項(xiàng)目中導(dǎo)入easyUI所需的樣式和js
新建一個(gè)動(dòng)態(tài)web工程，例如easyui，把解壓后的jquery-easyui-1.8.8目錄中的如下東東添加到項(xiàng)目中去
將以上這些目錄和文件拷貝到項(xiàng)目之后，就變成下面這個(gè)樣子
3.2.以linkbutton（按鈕）組件為例快速入門easyUI
3.2.1.在頁面中導(dǎo)入easyUI所需的js和css樣式文件
新建一個(gè)01-easyui.html頁面。引入必要的js和css樣式文件
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>easyUI的簡單入門</title><!-- 引入easyUI的css樣式文件和js文件 --><link rel="stylesheet" type="text/css" href="../themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="../themes/icon.css"><script type="text/javascript" src="../js/jquery.min.js"></script><script type="text/javascript" src="../js/jquery.easyui.min.js"></script></head><body></body>
</html>
注意：因?yàn)閑asyUI基于jQuery的，所以在引入js文件的時(shí)候必須先引入query.min.js再引入jqery.easyui.min.js。
3.2.2.easyUI使用的兩種方式
easyUI的使用主要有兩種方式，一種是在HTML標(biāo)簽中聲明class來使用easyUI樣式，一種是編寫js代碼。
- 第一種方式：在HTML標(biāo)簽中聲明class來使用easyUI樣式
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>easyUI的簡單入門</title><!-- 引入easyUI的css樣式文件和js文件 --><link rel="stylesheet" type="text/css" href="./js//themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="./js/themes/icon.css"><script type="text/javascript" src="./js/jquery.min.js"></script><script type="text/javascript" src="./js/jquery.easyui.min.js"></script></head><body><!-- easyUI的簡單入門(方式一：使用css的方式)--><!-- iconCls(屬性): 小圖標(biāo)樣式 --><a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'">超鏈接</a></body> </html>
可以看到超鏈接變成了一個(gè)還算好看的按鈕，而且按鈕前面還有一個(gè)加號(hào)的圖標(biāo)，這是由于將iconCls屬性的值設(shè)置為了’icon-add’，
當(dāng)然了，可以設(shè)置成其他的值，比如’icon-search’、'icon-remove’等。
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>easyUI的簡單入門</title><!-- 引入easyUI的css樣式文件和js文件 --><link rel="stylesheet" type="text/css" href="./js//themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="./js/themes/icon.css"><script type="text/javascript" src="./js/jquery.min.js"></script><script type="text/javascript" src="./js/jquery.easyui.min.js"></script></head><body><!-- easyUI的簡單入門(方式一：使用css的方式)--><!-- iconCls(屬性): 小圖標(biāo)樣式 --><a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'">超鏈接</a><a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">超鏈接</a><a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">超鏈接</a></body>
</html>
- 第二種方式：編寫js代碼的方式
首先，在01-easyui.html頁面中創(chuàng)建一個(gè)超鏈接，并編寫如下的一段js代碼
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>easyUI的簡單入門</title><!-- 引入easyUI的css樣式文件和js文件 --><link rel="stylesheet" type="text/css" href="./js//themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="./js/themes/icon.css"><script type="text/javascript" src="./js/jquery.min.js"></script><script type="text/javascript" src="./js/jquery.easyui.min.js"></script><script type="text/javascript">$(function () {$("#btn").linkbutton({iconCls: 'icon-search'})})</script></head><body><!-- easyUI的簡單入門(方式一：使用css的方式)--><!-- iconCls(屬性): 小圖標(biāo)樣式 --><a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'">超鏈接</a><a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">超鏈接</a><a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">超鏈接</a><!-- 方式二：編寫js代碼的方式 --><a href="#" id="btn">超鏈接</a></body>
</html>
