jQuery轻量级组件Rhui

最新推荐文章于 2023-10-06 09:03:26 发布

原创最新推荐文章于 2023-10-06 09:03:26 发布 · 2.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#rhui

JavaScript 同时被 3 个专栏收录

21 篇文章

订阅专栏

Web

9 篇文章

订阅专栏

Rhui

2 篇文章

订阅专栏

Rhui是一个轻量级的jQuery组件集合，包括Button、Loading、Toolbar、Panel、Window和Dialog等常用Web开发组件。文章详细介绍了如何使用这些组件，包括按钮样式、工具栏创建、加载等待、面板与窗口的实现，以及对话框的初始化。

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工具栏可通过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)。

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