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。

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

版权声明:本文为博主原创文章,未经博主允许不得转载。

时间: 2024-10-20 22:46:31

jQuery轻量级组件Rhui的相关文章

【ASP.Net MVC】在AspNet Mvc使用JQuery AutoComplete组件

官方文档: http://api.jqueryui.com/autocomplete/#entry-examples 要使用JQuery AutoComplete组件,需要引用: [1].jquery.js [2].jquery-ui.js [3].jquery.ui.autocomplete.css 然后这样使用即可: var submitAutoCompleted = function(event, ui) { var $input = $(this); $input.val(ui.item

Jquery轻量级插件--操作URL

调用: > "?action=view&section=info&id=123&debug&testy[]=true&testy[]=false&testy[]"var test= $.query.get('section'); "info" jquery.query.js new function(settings) {   // Various Settings  var $separator = setti

jQuery轻量级京东图片轮播代码等

http://sc.chinaz.com/jiaoben/jiaodiantu.html jQuery轻量级京东图片轮播代码 查看全图点击预览 顶(17)踩(4)报错评论(0)下载地址 更新时间:2016-07-11 09:18 类别:脚本 0 更多相关 jQuery缩略图数字按钮图片切换 所属专题:焦点图代码 脚本简介 jQuery轻量级京东图片轮播代码是一款带左右按钮控制,带缩略图的图片轮播代码.

使用jQuery进行组件开发(完整例子)

使用jQuery进行组件开发和使用纯JavaScript脚本(不使用框架)原理基本类似,特别是公共方法的组织是一样的. 不同点是,jQuery使用了插件机制,通过$()直接进行操作对象(DOM元素)绑定,然后对DOM元素或HTML代码进行绑定事件等的操作. 另一个不同点则是把jQuery当做工具来使用,用来创建DOM对象,快速查找指定DOM对象等. 例子测试通过. 初级简单示例,只实现了增加页和选择页功能. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML

Web jquery表格组件 JQGrid 的使用 - 全部代码

系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件及方法 Web jquery表格组件 JQGrid 的使用 - 5.Pager翻页.搜索.格式化.自定义按钮 Web jquery表格组件 JQGrid 的使用 - 6.准备工作 & Hello JQGrid Web jquery表格组件 JQGrid 的使用 - 7.查询数据.编辑数据.删除数据

Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数、ColModel API、事件及方法

系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件及方法 Web jquery表格组件 JQGrid 的使用 - 5.Pager翻页.搜索.格式化.自定义按钮 Web jquery表格组件 JQGrid 的使用 - 6.准备工作 & Hello JQGrid Web jquery表格组件 JQGrid 的使用 - 7.查询数据.编辑数据.删除数据

Web jquery表格组件 JQGrid 的使用 - 8.Pager、新增数据、查询、刷新、查看数据

系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件及方法 Web jquery表格组件 JQGrid 的使用 - 5.Pager翻页.搜索.格式化.自定义按钮 Web jquery表格组件 JQGrid 的使用 - 6.准备工作 & Hello JQGrid Web jquery表格组件 JQGrid 的使用 - 7.查询数据.编辑数据.删除数据

Web jquery表格组件 JQGrid 的使用 - 11.问题研究

系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件及方法 Web jquery表格组件 JQGrid 的使用 - 5.Pager翻页.搜索.格式化.自定义按钮 Web jquery表格组件 JQGrid 的使用 - 6.准备工作 & Hello JQGrid Web jquery表格组件 JQGrid 的使用 - 7.查询数据.编辑数据.删除数据

Web jquery表格组件 JQGrid 的使用 - 5.Pager翻页、搜索、格式化、自定义按钮

系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件及方法 Web jquery表格组件 JQGrid 的使用 - 5.Pager翻页.搜索.格式化.自定义按钮 Web jquery表格组件 JQGrid 的使用 - 6.准备工作 & Hello JQGrid Web jquery表格组件 JQGrid 的使用 - 7.查询数据.编辑数据.删除数据