jQuery輕量級組件Rhui


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。
Button

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!')
}
}]
});

Toolbar

Loading

Loading實現加載等待效果,支持整個頁面或者指定元素的加載等待。給元素或者頁面添加Loading效果有兩種方法:Rhui.loading(target, options)和$(‘#id’).rhui(‘loading’, options),取消Loading方法Rhui.unloading(target)。

Loading

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>

Panel

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();
}
}]
});

Window

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

alert

confirm

confirm

prompt

prompt

Form

Form1

Form2


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com