EasyUI中Base(基础)的基本用法

时间:2023-02-03 21:34:36

EasyUI中Base(基础)的用法

一、Base(基础)

1、parser 解析器

2、easyloader 简单加载

3、draggable 拖动

4、droppable 放置

5、resizable 调整大小

6、pagination 分页

7、searchbox 搜索框

8、progressbar 进度条

9、tooltip 提示框

步骤:

1、导入支持easyUI所需的文件

使用easyUi里面的插件,先要引入easyUi.css、icon.css、jquery.easyui.min.js和jquery.min.js

EasyUI中Base(基础)的基本用法

2、创建一个拖动元素(用easyUi标签)

EasyUI中Base(基础)的基本用法

属性:

handle:句柄,输入下面要移动元素的对象

效果如下:

EasyUI中Base(基础)的基本用法

所在文本的层是可移动的

3、创建一个放置区

EasyUI中Base(基础)的基本用法

属性:

accept: 确定哪些可拖拽元素将被接受

效果图如下:

EasyUI中Base(基础)的基本用法

4、创建一个可调整大小的窗体

EasyUI中Base(基础)的基本用法

属性:

maxWidth:设置最大可调整的宽度

maxHeight: 设置最大可调整的高度

width: 初始宽度

height: 初始的高度

效果图如下:

EasyUI中Base(基础)的基本用法

所在的元素是可调整大小(即宽度和高度)

5、创建一个分页控件

EasyUI中Base(基础)的基本用法

属性:

total: 总记录数

pageSize: 页面的大小

效果图如下:

EasyUI中Base(基础)的基本用法

6、创建一个查询框

EasyUI中Base(基础)的基本用法

EasyUI中Base(基础)的基本用法

属性:

searcher: 回车或点击搜索按钮调用的方法

prompt: 搜索框的提示信息

menu: 可选择的搜索类型菜单

selected: 为true时,默认选中

iconCls: 显示的图标

效果图如下:

EasyUI中Base(基础)的基本用法

7、创建一个进度条控件

EasyUI中Base(基础)的基本用法

属性:

value: 进度条进度的数值

效果图如下:

EasyUI中Base(基础)的基本用法

8、创建一个提示框控件

EasyUI中Base(基础)的基本用法

属性:

href: 要跳转的路径

title:要提示的信息

trackMouse: 为true,允许提示框跟着鼠标移动

效果图如下:

EasyUI中Base(基础)的基本用法