您的位置:首页 > Web前端 > JQuery

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下载地址

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对话框。

对话框初始化
alertRhui.alert(msg, title, handler)
confirmRhui.confirm(msg, title, handler)
promptRhui.prompt(msg, title, handler)

alert



confirm



prompt



Form



内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: