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

随笔分类 -  EasyUI

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

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

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

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

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

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

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

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