13

Tutorial

Intruduction 介绍

This tutorial aims to use easyui framework to demonstrate how to create your web page easily.
First of all, you need to include some js and css file:
(本教程旨在演示如何轻松利用easyui框架来的创建自己的网页。
首先,你需要加入一些js和css文件:)
<link rel=“stylesheet” type=“text/css” href=“../themes/default/easyui.css”>
<script type=“text/javascript” src=“../jquery-1.4.2.min.js”></script>
<script type=“text/javascript” src=“../jquery.easyui.min.js”></script>
easyui predefines some icon CSS class which can show background image(16×16). If you wish to use it you need to include:
(easyui CSS类预定义一些图标,可以显示背景图片(16像素 x 16像素)。如果你想使用它,你必须加入:)
<link rel=”stylesheet” type=”text/css” href=”../themes/icon.css”>

Contents (教程内容索引)

  1. 拖拽和释放 Drag and Drop
    • 基本拖拽和释放 Basic Drag and Drop   -EN- -中文-
    • 创建拖拽购物车 Building a drag-drop shopping cart -EN- -中文-
    • 创建课程表 Creating a School Timetable   -EN- -中文-
  2. 菜单与按钮 Menu and Button
    • 创建简单菜单 Create a simple menu -EN- -中文-
    • 创建链接按钮 Create a Link Button  -EN- -中文-
    • 创建菜单按钮 Create a Menu Button  -EN- -中文-
    • 创建分割按钮 Create a Split Button  -EN- -中文-
  3. 布局 Layout
    • 为网页创建边框布局 Build border layout for Web Pages  -EN- -中文-
    • 面板上的复杂布局 Complex layout on Panel  -EN- -中文-
    • 创建Accordion Create Accordion  -EN- -中文-
    • 创建Tabs Create Tabs  -EN- -中文-
    • 动态增加Tabs Dynamically add tabs  -EN- -中文-
    • 创建XP样式的左侧面板 Create XP style left panel  -EN- -中文-
  4. 数据表格 DataGrid
    • 转化HTML表格为数据表格 Convert a HTML table to DataGrid  -EN- -中文-
    • 为数据表格添加分页组件 Add a pagination to DataGrid  -EN- -中文-
    • 获取数据表格中选中行的数据 Get selected row data from DataGrid  -EN- -中文-
    • 为数据表格添加工具栏 Add a toolbar to DataGrid  -EN- -中文-
    • 冻结数据表格列 Frozen columns for DataGrid  -EN- -中文-
    • 动态改变数据窗口列 Dynamic change DataGrid columns  -EN- -中文-
    • 格式化数据窗口列 Formatting DataGrid columns  -EN- -中文-
    • 为数据表格添加排序功能 Add sorting to DataGrid  -EN- -中文-
    • 为数据表格添加列分组功能 Create column groups in DataGrid  -EN- -中文-
    • 数据表格复选操作 CheckBox select on DataGrid  -EN- -中文-
    • 自定义数据表格分页 Custom DataGrid Paging  -EN- -中文-
    • 启用数据表格内部编辑功能 Enable DataGrid Inline Editing  -EN- -中文-
  5. 窗口 Window
    • 第一个窗口 My first window  -EN- -中文-
    • 自定义窗口工具 Custom window tools  -EN- -中文-
    • 窗口和布局 Window and Layout  -EN- -中文-
    • 创建对话框 Create Dialog  -EN- -中文-
  6. 树 Tree
    • 通过标签创建树 Create Tree from markup  -EN- -中文-
    • 创建异步树 Create Async Tree  -EN- -中文-
    • 为树添加节点 Append nodes to tree  -EN- -中文-
    • 创建带有复选框的树节点 Create Tree with CheckBox Nodes  -EN- -中文-
  7. 表单 Form
    • 通过Ajax提交表单 Submit a form with Ajax  -EN- -中文-
    • 为表单添加下拉树选择域 Add ComboTree field to a form  -EN- -中文-
    • 表单验证 Form Validation  -EN- -中文-

官方原文: jQuery EasyUI: Tutorial

英文文档为官方网站上的原文,中文文档将会在本站进行翻译并逐步发布在本站上。如果你也是EasyUI的兴趣爱好者,希望你也一起加入进来,发表更多的中文资料。

您可能会喜欢这些文章

9 Responses to “jQuery EasyUI: Tutorial 教程 及中文教程 索引列表”

  1. 北京礼品公司 Says:

    不错的教程 我保存到电脑,以备后用,谢谢先

  2. 北京礼品公司 Says:

    很详细 谢谢

  3. kingwrcy Says:

    启用数据表格内部编辑功能 Enable DataGrid Inline Editing -EN- -中文

    这个demo我弄下来为什么点edit无效?求高手

    引的js和css绝对没有问题。

  4. King Says:

    您好,我有一个页面是放在iframe中的,这样在子页面中使用dialog时,如何使dialog居中显示?谢谢

  5. merry3602 Says:

    您好!我想问下,为什么这个上面的实例资源都下载不了的啊???

  6. 兴宏程建造师 Says:

    说的挺清楚的

  7. 释怀 Says:

    你好,我想问一下,当我使用一个表单的加载事件的时候。我如何知道 表单加载数据成功。我想捕获加载成功之后的方法,可是我使用了 loadsuccess: 没有用。请教高手…… QQ 475806380

  8. 分隔符2!@@@ Says:

    撒打死打伤的

  9. 霁月 Says:

    挺不错的

Leave a Reply