jquery Lightweight Components Rhui

Rhui is a lightweight collection of jquery components that provides common web development components such as button, Loading, Toolbar, Panel, window, and dialog, and supports IE7/8/9/10/11, Firefox, and Chrome. Rhui

Button

Just add the Add button class to the HTML element rhui-btn you can use the button style provided by Rhui. Button style support IE7/8/9/10/11, Firefox and Chrome browser, because IE7/8 does not support CSS3, so the button does not have rounded corners and other CSS3 effects under IE7/8.
The button size defaults to 4 levels Rhui-btn-large, RHUI-BTN, Rhui-btn-small, and Rhui-btn-min, where RHUI-BTN is the default level.
Button Imitation bootstrap offers several common colors rhui-btn-primary, rhui-btn-success, Rhui-btn-info, rhui-btn-warning, and Rhui-btn-danger.

Toolbar

The toolbar toolbar can be created by means of Rhui.toolbar (target, options) and $ (' #id '). Rhui (' toolbar ', options) method.

$(' #toolbar1 '). Rhui (' toolbar ', {width: -, tools: [{name:' BTN1 ', Text:' file 'Click: function(toolbar, associate){Alert' Here is the button! ')}}, {type:' Separator '}, {name:' btn2 ', Text:' Copy 'Click: function(toolbar, associate){Alert' here is button 2! ')}}, {type:' Separator '}, {name:' Btn3 ', Text:' Delete 'Click: function(toolbar, associate){Alert' here is button 2! ')}}, {name:' Btn4 ', Text:' Export 'Click: function(toolbar, associate){Alert' here is button 2! ')}}, {type:' Separator '}, {name:' Btn5 ', Text:' query 'Click: function(toolbar, associate){Alert' here is button 2! ')        }    }]});

Loading

The loading implements the load wait effect, supports the entire page or specifies the loading wait for the element. There are two ways to add loading effects to an element or page: rhui.loading (target, options) and $ (' #id '). Rhui (' Loading ', options), Cancels the loading method rhui.unloading (target).

Panel

Panel panels can be created via HTML and CSS, or via Rhui.panel (target, options) or $ (' #id '). Rhui (' Panel ', options).

< Create a panel!--HTML --<div class="Rhui-panel" id="Panel3" style="width : 300px;height:200px; " >    <div class="Rhui-panel-header">        <div class="Rhui-panel-header-title">Panel created by HTML</div>    </div>    <div class="Rhui-panel-body">Panel content</div></div>

Window

Window adds a float and drag function to the panel based on Rhui.widnow (target, options) or $ (' #id '). Rhui (' window ', options) created.

$(' <div></div> '). Rhui (' window ', {title:' Window1 ', Buttonalign:' Center ', Content:' content of Window1 ', Width: -, Height: -, buttons: [{text:' OK 'Cls:' Rhui-btn-primary 'Click: function(toolbar, win){Alert' You clicked OK!! '); }},{Text:' off 'Click: function(toolbar, win){Win.hide (); }    }]});

Dialog

Rhui provides three dialog dialog boxes for alert, confirm, and prompt.

dialog Box	Initialize
Alert	Rhui.alert (msg, title, handler)
Confirm	Rhui.confirm (msg, title, handler)
Prompt	Rhui.prompt (msg, title, handler)

Alert

Confirm

Prompt

Form

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

jquery Lightweight Components Rhui