For each component will be provided a short description, all the options and some example
If you spot a bug please use the GithHub Issue Tracker, for info please email me at info[at]matteohetel.comThe purpose of this library is to provide a way to create interactive UI component such modal and toast in JavaScript without bother the developer to create the DOM element and insert HTML and CSS inside the JavaScript code, to make the code more readable, clean and have a HTML/CSS separate from the JS file or script.
Here some info about the UI.
Beacause it's awesome, you can create very complex UI element with a very few line of code, each component is highly configurable but with the default option you can create very cool stuff with one line of code, and the best part is: You can change the default configuration one time and every component create will be based on the new configurations!
MH_UI relies on two different dependencies: jQuery, Twitter's Bootstrap both CSS and JS
Of course not, it's just a simple library with one goal: make your life easier when you want to create interactive UI element in JavaScript
PLEASE! fork the github repo, play with it mess around with the component and send a pull request with your code, the more the merrier!
The modal is a component different from the other components, the default behavior is to be created, appended to the body and be displayed straightaway.
To create a modal use UI.modal({options}) no short hand is provided for this component
List of options:
| Name | Description | Example | Default value |
|---|---|---|---|
| title | string/object, html for the title(jQuey .append is used) | {title : "<h4>Modal Title</h4>"} | None |
| body | string/object, html for the body(jQuey .append is used) | {body : "<p>This is the modal content</p>"} | None |
| footer | string/object, html for the footer(jQuey .append is used) | {footer : UI.button("UI button")} | None |
| defaultFooter | boolean, if true is passed the default close button will be added to the modal | {defaultFooter : true} | true |
| id | string, an optional id can be passed, if none is provided a random id will be used | {id : "my_id"} | random generated ID |
| show | boolean, if true is passed the modal will automatically displayed, otherwise the .show() method is required to show the modal | {show : true} | true |
| callback | function, a callback function that will be executed once the modal is displayed | {callback : function(){console.log("Modal created")}} | None |
UI.modal({option}) return an array object with the following properties and method
| Name | Description | Usage | |
|---|---|---|---|
| index 0 ([0]) | the HTML of the modal | it can be appended like a common jQuery object | |
| title | any HTML passed to this function will replace the title of the modal | UI.modal({title:"<h4>Modal Title</h4>"}).title("<h4>New Title</h4>") | |
| titleAppend | any HTML passed to this function will be appended to the title of the modal | UI.modal({title:"<h4>Modal Title</h4>"}).titleAppend("<small>Subtitle</small>") | |
| body | any HTML passed to this function will replace the body of the modal | UI.modal({body:"<p>Modal content</p>"}).body("<p>New content</p>") | |
| bodyAppend | any HTML passed to this function will be appended to the body of the modal | UI.modal({body:"<p>Modal Content</p>"}).bodyAppend("<p>new paragraph </p>") | |
| footer | any HTML passed to this function will be appended to the footer of the modal | UI.modal({footer:"<p>Footer content</p>"}).footer(UI.button("button")) | |
| show | no parameters are required, if the function is called the modal is showed | UI.modal({show:false}).show() | |
| hide | no parameters are required, if the function is called the modal is hided and destroyed | UI.modal({show:true}).hide() | |
| data | object, an object with the the name as key and as value the value for the data- element | {data : {hello: "world", foo: "bar"}} | None |
Progressbars can be used to give a visual feedback of a pending opration or to a placeholder for a content not already loaded.
To create a progressbar use UI.progressbar({options}) for this component the short hand UI.progressbar(integer) is provided, the passed integer will
be the percentage of the progressbar, the default values are used to create the progressbar, check the Extra section to learn more about the default values
List of options:
| Name | Description | Example | Default value |
|---|---|---|---|
| level | string, the Twitter's Bootstrap level code(success, info, danger, warning) | {level : "success"} | None |
| percentage | integer, the percentage of the width of the progressbar | {percentage : 100} | 100 |
| striped | boolean, if true is passed the progressbar will be striped | {striped :true} | true |
| active | boolean, if true is passed the class active will be added to the progressbar | {active : true} | true |
| id | string, an optional id can be passed, if none is provided a random id will be used | {id : "my_id"} | random generated ID |
| class | string, the passed class will be added to the component | {class : "my_class"} | true |
| data | object, an object with the the name as key and as value the value for the data- element | {data : {hello: "world", foo: "bar"}} | None |
| callback | function, a callback function that will be executed once the modal is displayed | {callback : function(){console.log("Modal created")}} | None |
UI.progressbar({option}) or UI.progressbar(integer) return an array object with the following properties and method
| Name | Description | Usage |
|---|---|---|
| index 0 ([0]) | the HTML of the progressbar | it can be appended like a common jQuery object |
| animate | this function will animate the progressbar to the given percentage | UI.modal(0).animate(integer/object) |
| animate | the animte function accepts an integer or a object, the integer represent the millisecond to animate the width to 100% | UI.modal(0).animate(500) |
| animate | the animte function accepts an integer or a object, the object can contain: time: millisecond, percentage: widht in percentage, callback: function | UI.modal(0).animate({time: 500, percentage: 50, callback:function(){console.log("callback fired")}}) |
Buttons are basic component to intercat with the user.
To create a button use UI.button({options}) for this component the short hand UI.button(string) is provided, the passed string will
be the text of the button, the default values are used to create the button, check the Extra section to learn more about the default values
List of options:
| Name | Description | Example | Default value |
|---|---|---|---|
| level | string, the Twitter's Bootstrap level code(success, info, danger, warning, link) | {level : "success"} | None |
| text | string, the text of the button | {text : "Hello, World!"} | None |
| disabled | boolean, if true is passed the button will be disabled | {disabled :true} | false |
| default | boolean, if the value is false the default btn and btn- classes will not be added to the button | {default : false} | true |
| size | string, Twitter's Bootstrap button size (xs, sm, lg) | {size : "lg"} | None(normal size) |
| id | string, an optional id can be passed, if none is provided a random id will be used | {id : "my_id"} | random generated ID |
| class | string, the passed class will be added to the component | {class : "my_class"} | true |
| data | object, an object with the the name as key and as value the value for the data- element | {data : {hello: "world", foo: "bar"}} | None |
| actions | object, an object with the the action as key and as value the function that will be fired at that event | {actions : {click: function(){console.log("click")}, mouseleave:function(){$(this).addClass("disabled")}}} | None |
| callback | function, a callback function that will be executed once the modal is displayed | {callback : function(){console.log("Modal created")}} | None |
UI.button({option}) or UI.button(string) return an array object with the following properties and method
| Name | Description | Usage |
|---|---|---|
| index 0 ([0]) | the HTML of the progressbar | it can be appended like a common jQuery object |
| changeText | any HTML passed to this function will replace the text of the button | UI.button("Text").changeText("newText") |
| addActions | this function accept an object with the the action as key and as value the function that will be fired at that event | UI.button("click me").addActions({click: function(){alert("hello")}}) |
An alert is a banner that inform the user that something happened
To create an alert use UI.alert({options}) for this component the short hand UI.alert(string) is provided, the passed string will
be the HTML of the alert, the default values are used to create the alert, check the Extra section to learn more about the default values
List of options:
| Name | Description | Example | Default value |
|---|---|---|---|
| level | string, the Twitter's Bootstrap level code(success, info, danger, warning) | {level : "success"} | info |
| HTML | string, the html of the alert | {html : "<h4>Hello, World!</h4>"} | None |
| dismissable | boolean, if true is passed the "x" button to close the alert will be added | {dismissable :true} | true |
| id | string, an optional id can be passed, if none is provided a random id will be used | {id : "my_id"} | random generated ID |
| class | string, the passed class will be added to the component | {class : "my_class"} | true |
| data | object, an object with the the name as key and as value the value for the data- element | {data : {hello: "world", foo: "bar"}} | None |
| time | integer/object, if time is integer that value will be used to make the alert disappear after {time} seconds, in and object is passed it can contain: time: millisecond after the alert will be destroyed, effect: the jQuery effect like slideUp, FadeOut, effectTime: how long the effect will be performed | {time : {time: 1000, effect: "slideUp", efectTime: 500}} | None |
| callback | function, a callback function that will be executed once the modal is displayed | {callback : function(){console.log("Modal created")}} | None |
UI.alert({option}) or UI.alert(string) return an array object with the following properties and method
| Name | Description | Usage |
|---|---|---|
| index 0 ([0]) | the HTML of the progressbar | it can be appended like a common jQuery object |
| timeOut | integer/object can be passed, if time is integer that value will be used to make the alert disappear after {time} seconds, in and object is passed it can contain: time: millisecond after the alert will be destroyed, effect: the jQuery effect like slideUp, FadeOut, effectTime: how long the effect will be performed | UI.alert("Text").timeOut({time: 1000, effect: "slideUp", efectTime: 500}) |
| append | any HTML passed to this function will be added to the alert | UI.alert("<h4>Hello, World!</h4>").append("<p>I was added by the append functiony!</p>") |
A toast according to microsoft is :"A transient message to the user that contains relevant, time-sensitive information and provides quick access to related content in an app."
A toast is nothing more than an alert floating on the screen so all the options of an alert can be passed to UI.toast({options}) for this component the short hand UI.toast(string) is provided, the passed string will
be the HTML of the toast, the default values are used to create the alert, check the Extra section to learn more about the default values
List of options:
toast accepts another options
| Name | Description | Example | Default value |
|---|---|---|---|
| position | string/object, the position of the toast, there are 4 predefined position: top-left, top-right, bottom-left, bottom-right, if you want to create the toast in a different location you can pass on object with the css properties like right, top etc, every element will be passed to the jQuery .css() | {position : "bottom-left"} | top-right |
UI.toast({option}) or UI.alert(string) return an array object the same as UI.alert(), please see Alert documentation for more info
The default value for every component can be changed using the extend method
UI.extend("name", {options})
For example the toast as the default position to top-right on the screen and info as level, the developer can change that default value
by using UI.extend("toast", {level:"success", position:"bottom-left"})
Destroy all the coponent create via the UI
UI.destroy()
Since the library was just released no tips or tricks are available at the moment.
Please send me and email at info[at]matteohetel.com!