jQuery轻量级组件Rhui
2015-08-09 10:10
766 查看
Rhui是一个轻量级的jQuery组件集合,提供Button、Loading、Toolbar、Panel、Window和Dialog等一些常用的Web开发组件,支持IE7/8/9/10/11、Firefox和Chrome。Rhui下载地址
按钮大小默认有4个级别 rhui-btn-large、 rhui-btn、 rhui-btn-small和 rhui-btn-min,其中 rhui-btn是默认级别。
按钮仿bootstrap提供几种常用颜色 rhui-btn-primary、 rhui-btn-success、 rhui-btn-info、 rhui-btn-warning和 rhui-btn-danger。
![](http://img.blog.csdn.net/20150809095201272)
![](http://img.blog.csdn.net/20150809095315800)
![](http://img.blog.csdn.net/20150809095411730)
![](http://img.blog.csdn.net/20150809095930622)
![](http://img.blog.csdn.net/20150809100202422)
![](http://img.blog.csdn.net/20150809100430371)
![](http://img.blog.csdn.net/20150809100519976)
![](http://img.blog.csdn.net/20150809100536368)
![](http://img.blog.csdn.net/20150809100640183)
Button
只要给html元素添加添加按钮类rhui-btn即可使用rhui提供的按钮样式。 按钮样式支持IE7/8/9/10/11、Firefox和Chrome浏览器,由于IE7/8不支持CSS3,所以按钮在IE7/8下没有圆角等CSS3效果。按钮大小默认有4个级别 rhui-btn-large、 rhui-btn、 rhui-btn-small和 rhui-btn-min,其中 rhui-btn是默认级别。
按钮仿bootstrap提供几种常用颜色 rhui-btn-primary、 rhui-btn-success、 rhui-btn-info、 rhui-btn-warning和 rhui-btn-danger。
Toolbar
Toolbar工具栏可通过Rhui.toolbar(target, options)和$(‘#id’).rhui(‘toolbar’, options)方法创建。$('#toolbar1').rhui('toolbar', { width: 400, tools: [{ name: 'btn1', text: '文件', click: function(toolbar, associate){ alert('这里是按钮!') } }, { type: 'separator' }, { name: 'btn2', text: '复制', click: function(toolbar, associate){ alert('这里是按钮2!') } }, { type: 'separator' }, { name: 'btn3', text: '删除', click: function(toolbar, associate){ alert('这里是按钮2!') } }, { name: 'btn4', text: '导出', click: function(toolbar, associate){ alert('这里是按钮2!') } }, { type: 'separator' }, { name: 'btn5', text: '查询', click: function(toolbar, associate){ alert('这里是按钮2!') } }] });
Loading
Loading实现加载等待效果,支持整个页面或者指定元素的加载等待。给元素或者页面添加Loading效果有两种方法:Rhui.loading(target, options)和$(‘#id’).rhui(‘loading’, options),取消Loading方法Rhui.unloading(target)。Panel
Panel面板可通过Html和CSS创建,也可以通过Rhui.panel(target, options)或者$(‘#id’).rhui(‘panel’, options)创建。<!-- html创建panel --> <div class="rhui-panel" id="panel3" style="width:300px;height:200px;"> <div class="rhui-panel-header"> <div class="rhui-panel-header-title">Html创建的Panel</div> </div> <div class="rhui-panel-body">Panel内容</div> </div>
Window
Window在Panel的基础上增加了浮动和拖动功能,可通过Rhui.widnow(target, options)或者$(‘#id’).rhui(‘window’, options)创建。$('<div></div>').rhui('window', { title: 'window1', buttonAlign: 'center', content: 'Window1的内容', width: 400, height: 300, buttons: [{ text: '确定', cls: 'rhui-btn-primary', click: function(toolbar, win){ alert('你点击了确定!!'); } },{ text: '关闭', click: function(toolbar, win){ win.hide(); } }] });
Dialog
Rhui提供了alert、confirm和prompt三种Dialog对话框。对话框 | 初始化 |
---|---|
alert | Rhui.alert(msg, title, handler) |
confirm | Rhui.confirm(msg, title, handler) |
prompt | Rhui.prompt(msg, title, handler) |
alert
confirm
prompt
Form
相关文章推荐
- jQuery结合PHP+MySQL实现二级联动下拉列表[实例]
- MVC&JQuery如何根据List动态生成表格
- jQuery动画---显示隐藏(单击显示后文字出现 单击隐藏文字消失 两按钮组合相替换)
- JQuery中xxx is not a function或者can not find $
- 学习笔记——jQuery实现复选框效果
- jquery中的工具使用方法$.isFunction, $.isArray(), $.isWindow()
- jquery 函数,hide
- tab 菜单中 出现分页的情况下 twbs-pagination 解绑和重新绑定
- jQuery选择器(二)
- jquery代码阅读之jquery.type
- JQuery中如何处理键盘事件
- 编写jQuery插件
- JQuery中点击超链接动态修改url连接地址无效
- Jquery实现图片轮播功能
- jQuery 的 ready 函数是如何工作的?
- 在网页动态添加html代码时,使用jQuery调用隐藏的事件.
- jquery 实现可编辑div
- jq实现全选功能
- jQuery 加载等待 转圈
- jQuery实现Tab,滑动门,选项卡,图片切换