位置: 编程技术 - 正文

jQuery EasyUI基础教程之EasyUI常用组件(推荐)(jquery ui和jquery easy ui)

编辑:rootadmin

推荐整理分享jQuery EasyUI基础教程之EasyUI常用组件(推荐)(jquery ui和jquery easy ui),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:jquery ui和jquery easy ui,jquery-easyui-1.3.3,jqueryui easyui,jquery ui和jquery easy ui,jquery easyui有哪些特点,jquery easyui 教程,jquery easy ui,jqueryui easyui,内容如对您有帮助,希望把文章链接给更多的朋友!

本文主要内容是介绍EasyUI的一些常用组件的使用,都是一些非常基础的知识,适合入门者学习,主要包括Base(基础)、Layout(布局)、菜单和按钮、表单、窗口、表格和树等的使用。要求完全掌握这些内容,学会查阅文档,了解开发基本思想。如果想进一步深入学习,可以直接去官网进行学习,查阅文档等 主要可以用于web的后台前端。jQuery EasyUI 提供易于使用的组件,它使 Web 开发人员能快速地在流行的 jQuery 核心和 HTML5 上建立程序页面。 这里介绍的都是一些基本组件,项目中需要将其装配起来,方可构建完整的web页面,EasyUI只是众多前端WEB组件之一。

作用:快速基于现成的组件创建自己的web页面。组件:指已经有第三方写好的,直接可以使用的功能界面,例如:form,layout,tree等。

二、开发步骤

1、先去官网下载相应的插件:2、在myeclipse中新建一个web工程

3、在WebRoot目录下创建js和themes目录,导入官方文件

4、新建一个helloword.html的网页,并引入下列文件:

文件引入的顺序不要错,那么到目前为止,开发的准备工作就已经完成了。

三、Base组件的使用

3.1 Pagination(分页)

使用$.fn.pagination.defaults重写默认值对象

.分页组件是一个比较常用的组件之一,我们可以有两种使用方式,一种是直接在标签上面添加相应的属性,另一种是通过js进行操作。

静态方式创建如下:

动态方式:

我这里是添加了一些事件和方法的,可以依据实际情况进行增加或删除或修改里面的小的部分组件。大大方便了我们的开发。

3.2 ProgressBar(进度条)

使用$.fn.progressbar.defaults重写默认值对象。

使用HTML标签或程序创建进度条组件。从标签创建更加简单,添加'easyui-progressbar'类ID到<div/>标签。

使用Javascript创建进度条。

四、Layout组件的使用

4.1 layout的使用

布局是最常用的组件了,官方提供的是拥有5个布局方向的:北、南、东、西、中.

基本的使用方式如下:

我们可以为其添加js的属性:

对于布局来说,当然也还是可以进行嵌套处理的,我们可以摘除掉我们不需要的部分,然后将需要的部分进行再次组装。

效果如下:

4.2 面板的使用

第一种方式:通过标签直接创建。

第二种方式:

4.3 Accordion(分类)

使用$.fn.accordion.defaults重写默认值对象。

分类空间允许用户使用多面板,但在同一时间只会显示一个。每个面板都内建支持展开和折叠功能。点击一个面板的标题将会展开或折叠面板主体。面板内容可以通过指定的'href'属性使用ajax方式读取面板内容。用户可以定义一个被默认选中的面板,如果未指定,那么第一个面板就是默认的。

4.4 Tabs(选项卡)

使用$.fn.tabs.defaults重写默认值对象。

选项卡显示一批面板。但在同一个时间只会显示一个面板。每个选项卡面板都有头标题和一些小的按钮工具菜单,包括关闭按钮和其他自定义按钮。

五、Menu 和Button组件的使用

LinkButton(按钮)

使用$.fn.linkbutton.defaults重写默认值对象。

按钮组件使用超链接按钮创建。它使用一个普通的<a>标签进行展示。它可以同时显示一个图标和文本,或只有图标或文字。按钮的宽度可以动态和折叠/展开以适应它的文本标签。

jQuery EasyUI基础教程之EasyUI常用组件(推荐)(jquery ui和jquery easy ui)

六、Form组件的使用

6.1 ValidateBox(验证框)

使用$.fn.validatebox.defaults重写默认值对象。

validatebox(验证框)的设计目的是为了验证输入的表单字段是否有效。如果用户输入了无效的值,它将会更改输入框的背景颜色,并且显示警告图标和提示信息。该验证框可以结合form(表单)插件并防止表单重复提交。

对于表单验证,我们可以对其进行自定义规则。这个时候如果加上正则验证,就完全可以写出一个非常好的验证功能的了。在上面的这个属性中,还可以对提示框的位置进行改变,可以使用的属性是left和right。下面图片中显示的就是一个提示框在left的情况,一般情况下使用默认的right就可以了。

6.2 ComboBox(下拉列表框)

扩展自$.fn.combo.defaults。使用$.fn.combobox.defaults重写默认值对象。

下拉列表框显示一个可编辑文本框和下拉式列表,用户可以选择一个值或多个值。用户可以直接输入文本到列表顶部或选择一个或多个当前列表中的值。

静态方法创建:

动态方法创建:

6.3 DateBox(日期输入框)

扩展自$.fn.combo.defaults。使用$.fn.datebox.defaults重写默认值对象。

日期输入框结合了一个可编辑的文本框控件和允许用户选择日期的下拉日历面板控件。选择的日期会自动转变为一个有效的日期然后填充到文本框中。选定的日期也可以被格式化为预定格式。

日期:

6.4 Slider(滑动条)

使用$.fn.slider.defaults重写默认值对象。

滑动条允许用户从一个有限的范围内选择一个数值。当滑块控件沿着轨道移动的时候,将会显示一个提示来表示当前值。用户可以通过设置其属性自定义滑块。

6.5 NumberSpinner(数字微调)

数字微调控件的创建是基于微调控件和数值输入框控件的。他可以转换输入的值,比如:数值、百分比、货币等。它也允许使用上/下微调按钮调整到用户的期望值。

商品数量:

七、窗口组件的使用

7.1 Window(窗口)

扩展自$.fn.panel.defaults。使用$.fn.window.defaults重写默认值对象。

窗口控件是一个浮动和可拖拽的面板可以用作应用程序窗口。默认情况下,窗口可以移动,调整大小和关闭。它的内容也可以被定义为静态html或要么通过ajax动态加载。

静态方法创建:

动态创建:

7.2 Dialog(对话框窗口)

该对话框是一种特殊类型的窗口,它在顶部有一个工具栏,在底部有一个按钮栏。对话框窗口右上角只有一个关闭按钮用户可以配置对话框的行为显示其他工具,如collapsible,minimizable,maximizable工具等。

7.3 Messager(消息窗口)

消息窗口提供了不同的消息框风格,包含alert(警告框), confirm(确认框), prompt(提示框), progress(进度框)等。所有的消息框都是异步的。用户可以在交互消息之后使用回调函数去处理结果或做一些自己需要处理的事情。

八、表格和树组件的使用

使用$.fn.tree.defaults重写默认值对象。

树控件在web页面中一个将分层数据以树形结构进行显示。它提供用户展开、折叠、拖拽、编辑和异步加载等功能。

我们还可以引入外部文件,使用json格式的文件来添加到这个tree中。

json格式为:

以上所述是小编给大家介绍的jQuery EasyUI基础教程之EasyUI常用组件(推荐),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对积木网网站的支持!

基于jQuery实现弹出可关闭遮罩提示框实例代码 jqueryCSS3遮罩弹出层动画效果,使用非常简单,就两个标签,里面自定义内容和样式,四种常见效果,懂的朋友还可以修改源代码修改成自己想要的效果

终于实现了!精彩的jquery弹幕效果 本文实例为大家分享了jquery弹幕效果,供大家参考,具体内容如下页面效果如下:html页面如下:!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""

基于jQuery.validate及Bootstrap的tooltip开发气泡样式的表单校验组件思路详解 表单校验是页面开发中非常常见的一类需求,相信每个前端开发人员都有这方面的经验。网上有很多成熟的表单校验框架,虽然按照它们默认的设计,

标签: jquery ui和jquery easy ui

本文链接地址:https://www.jiuchutong.com/biancheng/385045.html 转载请保留说明!

上一篇:jQuery 3.0中存在问题及解决办法(在jquery中fadein)

下一篇:基于jQuery实现弹出可关闭遮罩提示框实例代码(jquery自带的弹出框)

  • 所得税汇算清缴招待费扣除标准
  • 按适用税率征税销售额等于销售收入吗
  • 增值税加计扣除是什么意思啊
  • 利润10万企业所得税多少
  • 融资租赁购入固定资产的融资费用如何扣除
  • 上市公司股价变动谁受益
  • 技术推广服务包含什么 奇瑞汽车
  • 企业电子支付
  • 税务外管证取消了吗
  • 结转损益类费用科目的余额
  • 商业汇票的申请人是谁
  • 哪些科目需要计提资产减值损失
  • 未开收入下月开票怎样做分录
  • 考务费属于什么税目
  • 开办费转入管理费用分录
  • 非营利组织报销做账怎么做
  • 公司收到个人投资款没有备注
  • 已交税的无票收入后期怎么补开发票?
  • 股东放弃债权账务处理
  • 住房公积金是否全国联网
  • 公司买的理财产品怎么做账
  • PHP:oci_statement_type()的用法_Oracle函数
  • php23种设计模式
  • 非货币性资产对外捐赠企业所得税处理
  • 出口流程步骤
  • 印刷厂成本核算
  • php模拟表单提交
  • php生成验证码代码
  • 未确认融资费用报表填在哪个科目
  • thinkphp where or
  • 维多利亚国家艺术馆
  • uniapp scroll-view 上下滑动
  • 关于出售使用过的东西
  • vue3 响应式ui框架
  • 员工福利费怎样计提
  • 新准则印花税计提会计分录
  • 五险一金的会计怎么做账
  • 公司食堂开支如何记账
  • 新手搭建一个织布机
  • 批量替换多个word文档的同一内容
  • 下列项目的进项税额可以从销售税额中抵扣的是
  • 国债收益率如何查看
  • 企业哪些进项税抵扣
  • 关联方交易的税收问题
  • 关联表的作用
  • 小规模未开票收入按1%还是3%
  • 我国耕地占用税使用的税率为
  • 企业职工食堂就餐收费
  • 跨年收入如何做账
  • 上个月库存没用完的下个月怎么计算
  • 资产负债表期初余额和期末余额
  • 跨国企业在国外设立工厂的战略地位
  • 怎么判断win7还是win10
  • 下载win10 32位
  • 电脑开机一直显示windowsxp
  • centos安装插件
  • 深度操作系统中的生活服务类软件有
  • docker安装位置
  • 一键ghost U盘版
  • 华硕p8h61主板升级cpu
  • explore.exe进程占用cpu99%
  • 怎样禁用ie
  • win8电脑背景变成黑色的了是为什么
  • 硬盘xp系统
  • Android开发如何找到TextView指定文本
  • 安卓新创手势
  • html怎么下
  • javascript运行在什么的脚本语言
  • python 处理mp3
  • js实现滑块拖动
  • js获取时间精确到毫秒
  • nodejs+ts
  • shell遍历sql查询结果
  • 安卓框架是什么怎么用
  • python切片菜鸟教程
  • Android系统启动负载均衡
  • javascript面向对象吗
  • 广东省国家税务总局稽查局局长
  • 无锡地铁时速多少公里
  • 电子税务网上申报平台
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设