jQuery EasyUI 简介

jQuery EasyUI 是一个基于 jQuery 的框架,集成了各种用户界面插件。 什么是 jQuery EasyUI jQuery EasyUI 框架提供了创建网页所需的一切,帮助您轻松建立站点。 easyui 是一个基于 jQuery 的框架,集成了各种用户界面插件。 easyui 提供建立现代化的具有交互性的 javascript 应用的必要的功能。 使用 easyui,您不需要写太多 javascript 代码,一般情况下您只需要使用一些 html 标记来定义用户界面。 ...

jQuery EasyUI 应用 – 创建 CRUD 应用

数据收集并妥善管理数据是网络应用共同的必要。CRUD 允许我们生成页面列表,并编辑数据库记录。本教程将向你演示如何使用 jQuery EasyUI 框架实现一个 CRUD DataGrid。 我们将使用下面的插件: datagrid:向用户展示列表数据。 dialog:创建或编辑一条单一的用户信息。 form:用于提交表单数据。 messager:显示一些操作信息。 步骤 1:准备数据库 我们将使用 MySql 数据库来存储用户信息。创建数据库和 ...

jQuery EasyUI 应用 – 创建 CRUD 数据网格(DataGrid)

在上一章节中,我们使用对话框(dialog)组件创建了 CRUD 应用来创建和编辑用户信息。本教程我们将告诉您如何创建一个 CRUD 数据网格(DataGrid)。 我们将使用 可编辑的数据网格(DataGrid)插件 来完成这些 CRUD 操作动作。 步骤 1:在 HTML 标签中定义数据网格(DataGrid) <table id="dg" title="My Users" style="width:550px;height:250px" toolbar="#toolbar" idField="id" rownumbers="tru...

jQuery EasyUI 应用 – 创建展开行明细编辑表单的 CRUD 应用

当切换数据网格视图(datagrid view)到 'detailview',用户可以展开一行来显示一些行的明细在行下面。这个功能允许您为防止在明细行面板(panel)中的编辑表单(form)提供一些合适的布局(layout)。在本教程中,我们使用数据网格(datagrid)组件来减小编辑表单(form)所占据空间。 步骤 1:在 HTML 标签中定义数据网格(DataGrid) <table id="dg" title="My Users" style="width:550px;height:25...

jQuery EasyUI 应用 – 创建 RSS Feed 阅读器

在本教程中,我们将通过 jQuery EasyUI 框架创建一个 RSS 阅读器。 我们将使用以下插件: layout:创建应用的用户界面。 datagrid:显示 RSS Feed 列表。 tree:显示 feed 频道。 步骤 1:创建布局(Layout) <body class="easyui-layout"> <div region="north" border="false" class="rtitle"> jQuery EasyUI RSS Reader Demo </div> <div region="west" title="Channels Tre...

jQuery EasyUI 拖放 – 基本的拖动和放置

本教程向您展示如何使 HTML 元素可拖动,在本例中,我们将创建三个 DIV 元素然后启用他们的拖动和放置。 首先,我们创建三个 <div> 元素: <div id="dd1" class="dd-demo"></div> <div id="dd2" class="dd-demo"></div> <div id="dd3" class="dd-demo"></div> 对于第一个 <div> 元素,我们通过默认值让其可以拖动。 $('#dd1').draggable(); 对于第二...

jQuery EasyUI 拖放 – 创建拖放的购物车

如果您能够通过您的 Web 应用简单地实现拖动和放置,您就会知道一些特别的东西。通过 jQuery EasyUI,我们在 Web 应用中可以简单地实现拖放功能。 在本教程中,我们将向您展示如何创建一个启用用户拖动和放置用户想买的商品的购物车页面。购物篮中的物品和价格将更新。 显示页面上的商品 <ul class="products"> <li> <a href="#" class="item"> <img src="images/shirt1.g...

jQuery EasyUI 拖放 – 创建学校课程表

本教程将向您展示如何使用 jQuery EasyUI 创建一个学校课程表。 我们将创建两个表格:在左侧显示学校科目,在右侧显示时间表。 您可以拖动学校科目并放置到时间表单元格上。 学校科目是一个 <div class="item"> 元素,时间表单元格是一个 <td class="drop"> 元素。 显示学校科目 <div class="left"> <table> <tr> <td><div class="item">English<...

jQuery EasyUI 菜单与按钮 – 创建链接按钮(Link Button)

通常情况下,使用 <button> 元素来创建按钮,而链接按钮(Link Button)则是使用 <a> 元素来创建的。所以实际上一个链接按钮(Link Button)就是一个显示为按钮样式的 <a> 元素。 为了创建链接按钮(Link Button),所有您需要做的就是添加一个名为 'easyui-linkbutton' 的 class 属性到 <a> 元素: <div style="padding:5px;background:#fafafa;width:500px;border:1px soli...