# Jquery Easyui -- 入門
去[Jquery easyui中文官網](http://www.jeasyui.net/download/)下最新的壓縮包,解壓放入項目中。
<!DOCTYPE html>
<html>
<head>
<title>jQuery Easy UI</title>
<meta charset="UTF-8" />
//引入Jquery
<script type="text/javascript" src="easyui/jquery.min.js"></script>
//引入Jquery easyui(必須先引入Jquery)
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
//引入語言包
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js" ></script>
//引入默認的主題樣式
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" />
//引入圖標樣式
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" />
</head>
<body>
<div id="box" style="width:400px;height:200px">我是內容</div>
<script>
$(function(){
$('#box').dialog({
title:'我是標題',
collapside:true,
iconCls:'icon-ok',
onOpen:function(){
console.log('open');
},
});
});
</div>
</body>
</html>
- 1、入門案例
- 2、Jquery Easyui 使用方式
- 3、Draggable 拖動組件
- 4、Droppable 放置組件
- 5、Resizable 調整大小組件
- 6、Tooltip 提示框組件
- 7、LinkButton 按鈕組件
- 8、ProgressBar 進度條組件
- 9、Panel 面板組件
- 10、Tab 選項卡組件
- 11、Accordion 分類組件
- 12、Layout 布局組件
- 13、Window 窗口組件
- 14、Dialog 對話框組件
- 15、Message 消息窗口組件
- 16、Menu 菜單組件
- 17、MenuButton 菜單按鈕組件
- 18、SplitButton 分割按鈕組件
- 20、Pagination 分頁組件
- 21、SearchBox 搜索框組件
- 22、ValidateBox 驗證框組件
- 23、Combo 自定義下拉框組件
- 24、NumberBox 數值輸入框組件
- 25、Calendat 日歷組件