easyui使用介绍

时间:2023-03-09 20:39:09
easyui使用介绍
based on jQuery, Angular and Vue.
don't need to write many javascript code, you usually define user-interface by writing some HTML markups.
Freeware edition does not include source code (code is "compressed").
Each component of easyui has properties, methods and events. Users can extend them easily.
properties is defined in jQuery.fn.{plugin}.defaults
events(callback functions) is defined in jQuery.fn.{plugin}.defaults also. 一样
Methods defined in jQuery.fn.{plugin}.methods.
 Each method has two parameters: jq and param. 
调用:$('selector').plugin('method', parameter);
引入
  1. <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
  2. <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
  3. <script type="text/javascript" src="easyui/jquery.min.js"></script>
  4. <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
或可选的
//引入语言包 <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js" ></script>
窗口
Load window content via ajax.
  1. $('#win').window('refresh', 'get_content.php');
动态添加tabs
分页
折叠面板:个人感觉可以用作左侧导航, 布局也可以作左侧导航(region="west"和center)
布局:5部分,可以嵌套, 如果放在整个页面上,需要加在body上<body class="easyui-layout">,而不是<div id="cc" class="easyui-layout"
fit属性:尺寸适应它的父容器
有时<!DOCTYPE html> 这行代码会出现
easyui使用介绍
菜单
easyui使用介绍
sidemenu
easyui使用介绍
按钮有链接按钮,
easyui使用介绍
菜单按钮:可实现下拉式菜单,
easyui使用介绍
SplitButton跟菜单按钮差不多,区别是, splitbutton is split into two parts.When moving mouse over the splitbutton, a 'split' line will display. The menu only display when moving mouse over the right part of splitbutton.
easyui使用介绍
SwitchButton
easyui使用介绍
MaskedBox:结构化输入
easyui使用介绍
Combo:display a editable text box and drop-down panel
easyui使用介绍
DataGrid
easyui使用介绍
DataList:a special datagrid that displays data in one column.
easyui使用介绍
ComboBox:display an editable text box and drop-down list,user can select one or multiple values. 
easyui使用介绍
ComboTree: similar to combobox but replace the list with tree component.
easyui使用介绍
ComboGrid:an editable text box with drop-down datagrid panel
easyui使用介绍
TreeGrid
easyui使用介绍
ComboTreeGrid
easyui使用介绍
TagBox
easyui使用介绍
Spinner:
easyui使用介绍
Messager
easyui使用介绍
PropertyGrid
easyui使用介绍
Tree
easyui使用介绍
RTL (Right to Left) 
示例程序源码