博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

随笔分类 -  EasyUI

Javascript框架之EasyUI

EasyUI-Datagrid

摘要：DataGrid 是EasyUi框架中或者其他的框架中都比较重要的组件，这里我们就深入的介绍下。Datagrid是用来显示数据的，然后还可以对表中的数据进行编辑。上图就是datagrid的一个例子，我们可以从这里看出datagrid要比我们传统显示数据的方式要友好和漂亮的多哦。下面我们来从简单的datagrid开始学习1：创建一个简单的datagrid1.1： Name PassWord 上面的代码我们创建了... 阅读全文

posted @ 2014-03-02 08:34 星尘的天空 阅读(5726) 评论(0) 推荐(0)

EasyUI-LinkButton

摘要：EasyUI-LinkButton，带有超级链接的button上图就是 带有边框以及Icon图标的按钮参考代码： Add Remove Save Cut Text Button从上面的代码中我们可以看出，使用超链接按钮是非常的方便的，设置class="easyui-linkbutton" 通过 disable的属性我们还可以设置该超链接按钮是否处于可用状态。2：平铺类型的超链接按钮参考代码：Cancel我们只需要设置 plain 属性值就可以了哦3：按钮的icon位置的改变这里的icon排列再按钮的右侧，上面的icon排列再按钮的左侧，我... 阅读全文

posted @ 2014-03-01 15:31 星尘的天空 阅读(1626) 评论(0) 推荐(0)

EasyUI-Tree

摘要：这篇文章我简单介绍下easyui组件 tree先来看看 tree的效果图，然后我们就明白了什么是tree组件了我们可以看到tree组件其实很像一个层级的目录，可以折叠，可以展开。那么我们如何使用easyui来创建这样一个目录树呢。首先我们来看下HEML的元素参考代码如下： item-1 item-2 item-3 item-4 我们可以看到，我们用表现来展示一个垂直方面的一个列表，标签对表示该列表中一个成员，类似于IOS中UITableView中的每一个UITableViewcell，下一步，我们来看看，添... 阅读全文

posted @ 2014-03-01 09:43 星尘的天空 阅读(1507) 评论(0) 推荐(0)

EasyUI-Combobox

摘要：EasyUI-Combobox 下拉框篇1：基本下拉框如下图所示：点击右边按钮后展开选项然后我们就可以选择对应的结果了 使用的方式同样的是：指定 selection 的 class 属性2：动态添加combobox的数据 LoadData 这种数据填充的方式是基于JQuery框架的3： 阅读全文

posted @ 2014-02-28 22:25 星尘的天空 阅读(507) 评论(0) 推荐(0)

EasyUI-Calendar

摘要：EasyUI-Calendar 日历篇Calendar也是页面中经常用到的元素，easyui也为们提供了日历的组件，效果如下图所示：使用方法如下所示：Calendar组件留给我们定制的属性不多，在这里我们可以设置它的 宽和高即可。更多详细的内容请参考官网介绍Jason2014年2月28日 阅读全文

posted @ 2014-02-28 22:13 星尘的天空 阅读(502) 评论(0) 推荐(0)

EasyUI-Tabs

摘要：EasyUI-Tabs 选项卡篇Tabs我们可以理解为选项卡，那么什么才算是选项卡呢：从上图中一定就理解了啥叫选项卡了参考代码如下所示： Tabs的用法跟其他元素基本相似，也是指定Class的值 = "easyui-tabs" ，然后在指定的容器内添加子内容1：我们还可以为任何一个Tab项添加icon图片，参考代码如下：也是指定data-options中的iconCls属性的值，这个值指定为icon图片的名称即可2：我们还可以指定Tabs在容器中的位置，现在支持四个方向：top,bottom,right,left参考代码： ... 阅读全文

posted @ 2014-02-28 21:50 星尘的天空 阅读(1177) 评论(0) 推荐(0)

EasyUI-Accordion

摘要：EasyUI-AccordionAccordion英文翻译就是 手风琴活 或者 可折叠的参考效果图：从图中我们其实也可以将这种组件理解为手风琴式的组件。 该组件方便对数据进行分类管理，在有限空间内放置最多的内容。实现参考代码： AccordionComponet-1 AccordionComponet-2 AccordionComponet-3 对比上一篇说道的Layout组件，我们从中可以发现easyui组件使用的方法。 就是，如果想使用easyUI组件，我们必须先指定一个DIV实例作为一个容器，然后指定该DIV元素的 class... 阅读全文

posted @ 2014-02-28 21:06 星尘的天空 阅读(2354) 评论(0) 推荐(0)

EasyUI-Layout

摘要：EasyUI-Layout这是第一篇记录我学习我EasyUI的文章，为了就是记录我从一个菜鸟进阶的过程。Start我首先要明白，这个Layout是用来干嘛的。 Layout翻译为中文的意思是布局，他的作用是规划web页面的元素的布局，用白话说，就是用Layout来规定页面中每一类元素在页面中显示的位置。Layout将会对页面进行分割，然后在每个分割后的区域里面填入对应的内容即可。那么如何才能使用这个布局功能呢？1：引入EasyUI框架参考代码如下所示： 2：开始规划页面布局，这里我们先从一个简单的Demo入手先看下效果图这里我们将页面分割为两个部分，左边... 阅读全文

posted @ 2014-02-27 22:14 星尘的天空 阅读(1055) 评论(0) 推荐(0)