首页 > 软件开发 > JQUERY >

jQuery MiniUI 快速入门

来源:互联网 2023-03-17 00:52:18 274

前段时间由于工作的原因接触到MiniUI。感觉MiniUI很强大,使用起来也很舒服。下面我就带领大家快速的使用MiniUI。mym办公区 - 实用经验教程分享!

MiniUI - 专业WebUI控件库mym办公区 - 实用经验教程分享!

mym办公区 - 实用经验教程分享!

它能缩短开发时间,减少代码量,使开发者更专注于业务和服务端,轻松实现界面开发,带来绝佳的用户体验。使用MiniUI,开发者可以快速创建Ajax无刷新、B/S快速录入数据、CRUD、Master-Detail、菜单工具栏、弹出面板、布局导航、数据验证、分页表格、树、树形表格等典型WEB应用系统界面。mym办公区 - 实用经验教程分享!

mym办公区 - 实用经验教程分享!

jQuery MiniUI提供如下几个大类的控件:mym办公区 - 实用经验教程分享!

表格控件mym办公区 - 实用经验教程分享!

树形控件mym办公区 - 实用经验教程分享!

布局控件:标题面板、弹出面板、折叠分割器、布局器、表单布局器等mym办公区 - 实用经验教程分享!

导航控件:分页导航器、导航菜单、选项卡、菜单、工具栏等。mym办公区 - 实用经验教程分享!

表单控件:多选输入框、弹出选择框、文本输入框、数字输入框、日期选择框、下拉选择框、下拉树形选择框、下拉表格选择框、文件上传控件、多选框、列表框、多选框组、单选框组、按钮等mym办公区 - 实用经验教程分享!

富文本编辑器mym办公区 - 实用经验教程分享!

图表控件:柱状图、饼图、线形图、双轴图等。mym办公区 - 实用经验教程分享!

技术亮点:mym办公区 - 实用经验教程分享!

快速开发:使用Html配置界面,减少80%界面代码量。mym办公区 - 实用经验教程分享!

易学易用:简单的API设计,可以独立、组合使用控件。mym办公区 - 实用经验教程分享!

性能优化:内置数据懒加载、低内存开销、快速界面布局等机制。mym办公区 - 实用经验教程分享!

丰富控件:包含表格、树、数据验证、布局导航等超过50个控件。mym办公区 - 实用经验教程分享!

超强表格:提供锁定列、多表头、分页排序、行过滤、数据汇总、单元格编辑、详细行、Excel导出等功能。mym办公区 - 实用经验教程分享!

第三方兼容:与ExtJS、jQuery、YUI、Dojo等任意第三方控件无缝集成。mym办公区 - 实用经验教程分享!

浏览器兼容:支持IE6 、FireFox、Chrome等。mym办公区 - 实用经验教程分享!

跨平台支持:支持Java、.NET、PHP等。mym办公区 - 实用经验教程分享!

mym办公区 - 实用经验教程分享!

工具/原料

  • 电脑
  • 安装php开发环境

方法/步骤

  • 1

    下载MiniUImym办公区 - 实用经验教程分享!

    产品下载地址:http://www.miniui.com/download。mym办公区 - 实用经验教程分享!

    提醒:请根据不同的服务端后台,选择下载不同后台版本的MiniUI。mym办公区 - 实用经验教程分享!

    我是用PHP开发,下载PHP版本的MiniUImym办公区 - 实用经验教程分享!

    jQuery MiniUI 快速入门mym办公区 - 实用经验教程分享!

  • 1本页面未经授权抓取自百度经验
  • 2

    安装MiniUImym办公区 - 实用经验教程分享!

    mym办公区 - 实用经验教程分享!

    下载后,解压缩MiniUI。会有如图文件结构mym办公区 - 实用经验教程分享!

    提醒:新版本中开发者只需要引用scripts/boot.js即可。mym办公区 - 实用经验教程分享!

    jQuery MiniUI 快速入门mym办公区 - 实用经验教程分享!

  • 3

    开始第一个MiniUI程序mym办公区 - 实用经验教程分享!

    1、WEB服务器根目录下创建自己的项目目录miniui_hello,将下载的MiniUI目录下的scripts拷贝到项目目录下,即可使用miniui。见图:mym办公区 - 实用经验教程分享!

    2、编写HelloWorld.html程序。程序如图所示:mym办公区 - 实用经验教程分享!

    注意:mym办公区 - 实用经验教程分享!

    1、请注意相关javascript和css的路径是否正确。mym办公区 - 实用经验教程分享!

    说明mym办公区 - 实用经验教程分享!

    1、控件声明:class="mini-button" mym办公区 - 实用经验教程分享!

    2、属性设置:text="Hello" mym办公区 - 实用经验教程分享!

    3、事件绑定:onclick="onHelloClick" mym办公区 - 实用经验教程分享!

    4、事件处理函数:onHelloClick的e是事件对象,e.sender是事件激发者,本例中是button。mym办公区 - 实用经验教程分享!

    mym办公区 - 实用经验教程分享!

    jQuery MiniUI 快速入门mym办公区 - 实用经验教程分享!

    jQuery MiniUI 快速入门mym办公区 - 实用经验教程分享!

  • 4

    查看执行效果mym办公区 - 实用经验教程分享!

    在浏览器地址栏输入http://localhost/miniui_hello/HelloWorld.html。点击Hello按钮,即可看到使用miniui封装的弹框。mym办公区 - 实用经验教程分享!

    行文至此,我们已经会在项目中用MiniUI。想深入学习MiniUI看完持续关注我的后续经验。也可以直接通过官网http://www.miniui.com学习。mym办公区 - 实用经验教程分享!

    jQuery MiniUI 快速入门mym办公区 - 实用经验教程分享!

  • 注意事项

    • 新版本miniui的使用和旧版本有点小区别,如果没有boot.js文件。可以直接将需要是文件引入即可
    • MiniUI是基于jQuery开发的javascript控件库,所以依赖jquery.js。jQuery版本1.4 即可。

    以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!mym办公区 - 实用经验教程分享!


    标签: JQUERY

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号统计代码