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

• 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();

Demo

http://www.tychio.net/dialog/

Test