阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

    教程列表

    数据库
    抓包专区
    测试专区

    EasyUI 教程

    EasyUI 教程

    easyui是一种基于jQuery、Angular.、Vue和React的用户界面插件集合。

    easyui为创建现代化,互动,JavaScript应用程序,提供必要的功能。

    使用easyui你不需要写很多代码,你只需要通过编写一些简单HTML标记,就可以定义用户界面。

    easyui是个完美支持HTML5网页的完整框架。

    easyui节省您网页开发的时间和规模。

    easyui很简单但功能强大的。

    在jQuery 和 HTML5 上轻松使用EasyUI

    jQuery EasyUI 提供易于使用的组件,它使 Web 开发人员能快速地在流行的 jQuery 核心和 HTML5 上建立程序页面。 这些功能使您的应用适合今天的网络。 有两个方法声明的 UI 组件:

    直接在 HTML 声明组件

    <div class="easyui-dialog" style="width:400px;height:200px"
        data-options="
            title:'My Dialog',
            iconCls:'icon-ok',
            onOpen:function(){}">
        dialog content.
    </div>
    

    编写 JS 代码来创建组件

    <input id="cc" style="width:200px" />
    $('#cc').combobox({
    	url: ...,
    	required: true,
    	valueField: 'id',
    	textField: 'text'
    });
    

    原生Angular组件

    EasyUI for Angular是基于原生的Angular 5之上构建的,不需要其他外部JavaScript库。

    <eui-datagrid [data]="data" [clickToEdit]="true" editMode="row" style="height:250px">
    	<eui-grid-column field="itemid" title="Item ID" [editable]="true"></eui-grid-column>
    	<eui-grid-column field="name" title="Name" [editable]="true"></eui-grid-column>
    	<eui-grid-column field="listprice" title="List Price" align="right" [editable]="true">
    		<ng-template euiEditTemplate let-row="row">
    			<eui-numberbox [(ngModel)]="row.listprice" precision="1"></eui-numberbox>
    		</ng-template>
    	</eui-grid-column>
    	<eui-grid-column field="unitcost" title="Unit Cost" align="right" [editable]="true">
    		<ng-template euiEditTemplate let-row="row">
    			<eui-numberbox [(ngModel)]="row.unitcost"></eui-numberbox>
    		</ng-template>
    	</eui-grid-column>
    	<eui-grid-column field="attr" title="Attribute" width="30%" [editable]="true"></eui-grid-column>
    	<eui-grid-column field="status" title="Status" align="center" [editable]="true">
    		<ng-template euiEditTemplate let-row="row">
    			<eui-switchbutton [(ngModel)]="row.status" style="max-width:80px" onText="true" offText="false"></eui-switchbutton>
    		</ng-template>
    	</eui-grid-column>
    </eui-datagrid>
    

    原生Vue组件

    <DataGrid :data="data" style="height:250px">
    	<GridColumn field="itemid" title="Item ID"></GridColumn>
    	<GridColumn field="name" title="Name"></GridColumn>
    	<GridColumn field="listprice" title="List Price" align="right"></GridColumn>
    	<GridColumn field="unitcost" title="Unit Cost" align="right"></GridColumn>
    	<GridColumn field="attr" title="Attribute" width="30%"></GridColumn>
    	<GridColumn field="status" title="Status" align="center"></GridColumn>
    </DataGrid>
    

    原生React组件

    import React from 'react';
    import { DataGrid, GridColumn } from 'rc-easyui';
    
    class App extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          data: this.getData()
        }
      }
      render() {
        return (
          <div>
            <DataGrid data={this.state.data} style={{height:250}}>
    		<GridColumn field="itemid" title="Item ID"></GridColumn>
    		<GridColumn field="name" title="Name"></GridColumn>
    		<GridColumn field="listprice" title="List Price" align="right"></GridColumn>
    		<GridColumn field="unitcost" title="Unit Cost" align="right"></GridColumn>
    		<GridColumn field="attr" title="Attribute" width="30%"></GridColumn>
    		<GridColumn field="status" title="Status" align="center"></GridColumn>
            </DataGrid>
          </div>
        );
      }
    }
    

    EasyUI 教程和演示

    有很多教程和演示应用帮助你了解这个框架。

    jQuery easyui提供您网页开发的一切需要。这些指南将教你如何一步一步的创建你的应用程序。希望你能从中得到帮助。

    所有插件

    jQuery easyui提供了一个完整的组件的集合,包括强大的DataGrid,树网格,面板。用户可以使用他们一起,或者只是用一些组件,组合和构建他想要的跨浏览器的网页应用。

    • Messager 消息框
    • Splitbutton 分割按钮
    • textbox(文本框)
    • tagbox(标签框)
    • Progressbar 进度条
    • Pagination 分页
    • Switchbutton 开关按钮
    • Calendar 日历
    • passwordbox(密码框)
    • maskedbox(掩码框)
    • Menubutton 菜单按钮
    • Combogrid 组合网格
    • Draggable 可拖动
    • Parser 解析器
    • Datagrid 数据网格
    • Layout 布局
    • Form 表单
    • Timespinner 时间微调器
    • Panel 面板
    • DateTimeSpinner 日期时间微调框
    • Datalist 数据列表
    • filebox(文件框)
    • checkbox(复选框)
    • Linkbutton 链接按钮
    • Numberbox 数字框
    • Sidemenu 侧栏菜单
    • Resizable 可调整尺寸
    • Menu 菜单
    • Spinner 微调器
    • Dialog 对话框
    • Numberspinner 数值微调器
    • Propertygrid 属性网格
    • Accordion 折叠面板
    • Combobox 组合框
    • Combotree 组合树
    • Droppable 可放置
    • Window 窗口
    • radiobutton(单选框)
    • Tooltip 提示框
    • Treegrid 树形网格
    • ComboTreeGrid(树形表格下拉框)
    • Tree 树
    • Searchbox 搜索框
    • Slider 滑块
    • Easyloader 加载器
    • Validatebox 验证框
    • Tabs 标签页/选项卡
    • Datebox 日期框
    • Combo 组合
    • Datetimebox 日期时间框
    • Mobile 移动端
    卖前端学习教程

    只需几十元,就能买到培训班的内部教程!开启高薪之路!

    零基础小白阿里P7的教程都有!

    同时长期收购所有培训班的前端教程

    目录
    目录