a dialog plugin based on jQuery
Config
- con[string:selector] - a expression of selector for container
- bgCls[string] - background of class, it's none background if is null or undefined.
- holderCls[string] - dialog of class.
- titleCls[string] - title of class.
- contentCls[string] - content of class.
- barCls[string] - line of class in content.
- bottomCls[string] - bottom of class.
- buttonCls[string] - button of class.
- tipCls[string] - tip of class.
- unselectCls[string] - a class for preventing user to select text.
- bgClose[boolean] - it's true if dialog will close on clicking background.
- drag[boolean] - it's true if dialog can be dragged.
- fix[boolean] - it's true if dialog fixed scroll.
- width[number] - dialog of width.
- height[number] - dialog of height.
- top[number] - dialog of top.
- left[number] - dialog of bottom.
//simple init
$.dialog({
con: '#dialog'
});
API
-
init - initializing dialog.
- param void
- return this
- build dialog of DOM and put in container.
var _dialog = $.dialog().init();
-
title - setting title text.
- param p_text[string] a text for title.
- return this
- setting a text for title and return the title of jQuery Object.
_dialog.title('This is title');
-
content - setting content.
- param p_html[htmlString]
- param p_style[object] style || [number] padding of top and bottom.
- return this || jQuery object when the method haven't accepted any parameters.
- add a bar or line put in the content and setting style. It's will set padding of top and bottom if the parameter of type is number.
_dialog.content('some texts and others', 20);//padding of top and bottom is 20 pixel.
-
clear - clear dialog
- param null
- return this
- clear content,title and button.
_dialog.title('This is title').clear().title('a New title');
-
input - add a input push in content.
- param p_attr[object || string] setting the input of attributes, id is default attribute if a string type of parameter.
- param p_label[string] the label for input.
- param p_input[boolean] it's true if you want to add a textarea not input.
- param p_enter[function] callback the function when enter in the input.
- return this
- It's a special method that wrapped content for input.
_dialog.input('input_id', 'usernameļ¼', false, function () {sure();});
-
button - add a button push in the bottom.
- param p_set[object || string || function] configuring the button.
- name[string] button of text, default is 'Ok'.
- cls[string] button of class, default is conf.btnCls.
- id[string] button of id, default is null.
- events[function] to run the function when click corresponding button. Default is closing dialog.
- return this
- To add a button and set its text,class,id and event on click.
_dialog.input('please input text', {id: 'content'}, false).button(function () {//submit});
- param p_set[object || string || function] configuring the button.
-
tip - setting tip.
- param p_tip[string] tip of text.
- return this
- setting a text for dialog in bottom.
_dialog.input('please input text', {id: 'content'}, false).button(function () {_dialog.tip('content is error!')});
-
show - to show dialog.
- param null
- return this
- To show dialog and background.
_dialog.show();
-
hide - to hide dialog
- param null
- return this
- To hide dialog and background.
_dialog.button({name: 'close', events: function () {_dialog.hide();}).show();
-
lock - to lock dialog.
- param null
- return this
- to lock dialog and prevent any operations.
_dialog.lock();
-
unlock - to unlock dialog
- param null
- return this
- to unlock dialog and cancel lock.
_dialog.unlock();
-
size - setting size
- param p_w[number]dialog of width.
- param p_h[number]dialog of height.
- param p_t[number]dialog of top.
- param p_l[number]dialog of left.
- param p_timeout[number]the animation of duration for resize. Zero indicate direction and its unit is milliseconds.
- param p_callback[function] the function will be ran after animation has finished.refer to
jQuery.fn.animate
. - return this
- To set dialog of size including width,height,top and left.And it can set a timeout for animation. The unit is percent if it less than 1. Then unit is pixel if it greater than 1. But the value is
auto
if it's 0.
_dialog.lock().size(400, 0, 200, 0.5, 1000, function () {_dialog.unlock();});
Example
var _dialog = $.dialog().init().title('title').content('please click ok');
_dialog.button({
name: 'ok',
cls: 'one_button',
id: 'theButton',
events: function () {
_dialog.lock().size(200, 0, 100, 0.5, 1000, function () {
_dialog.unlock();
});
});
}).show();