Hi,
I wrote a light and simple popup rect window with auto resize mode and buttons.
Popup Options
- width, height = size of window
- top, left = position in px set 0 set center
- send_button = show send button
- send_button_caption = send button caption
- send_button_disabled = disbale send button
- cancel_button = show cancel button
- cancel_button_caption = disable cancel button
Popup Public Methods
- enable_auto_resize = enable auto resize mode by content, for auto resize use Ben Alman jQuery resize
event plugin from here: http://benalman.com/projects/jquery-resize-plugin/ - change_height = change height (height in px, is using transcation)
- set_content = send html content
- get_content = get content rect
- disbaled = disable and enable popup
- send_button_disabled = disable and enable send button
- add_click_event = add event to send and cancel buttons
- close = close window
jquery.popup_rect.js file
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 | /* (c) By Garry Lachman (http://www.garry-lachman.com), GPL License Options: * width, height = size of window * top, left = position in px set 0 set center * send_button = show send button * send_button_caption = send button caption * send_button_disabled = disbale send button * cancel_button = show cancel button * cancel_button_caption = disable cancel button Methods * enable_auto_resize = enable auto resize mode by content, for auto resize use Ben Alman jQuery resize event plugin from here: http://benalman.com/projects/jquery-resize-plugin/ * change_height = change height (height in px, is using transcation) * set_content = send html content * get_content = get content rect * disbaled = disable and enable popup * send_button_disabled = disbale and enable send button * add_click_event = add event to send and cancel buttons * close = close window */ if (typeof Object.create !== 'function') { Object.create = function (o) { function F() {} F.prototype = o; return new F(); }; } var popup_rect = { init: function(options, elem) { this.options = $.extend(true,{}, this.options, options); this.elem = elem; this.$elem = $(elem); this._build(); }, options: { width: 100, height: 100, top: 0, left: 0, send_button: true, send_button_caption: "Save", send_button_disabled: false, cancel_button: true, cancel_button_caption: "Cancel" }, _build: function() { var _this = this; this.$elem.hide(); this.$elem.addClass("popup_rect"); this.$elem.css({width: this.options.width, height: this.options.height, top: this.options.top, left: this.options.left-this.options.width}); this.$elem.append("<div id='popup_content' class='popup_rect_content'></div>"); this.$elem.append("<div class='popup_rect_buttons'></div>"); if (this.options.send_button) { this.$elem.find(".popup_rect_buttons").append("<div id='popup_rect_send_button' class='popup_rect_button'>"+this.options.send_button_caption+"</div>"); } if (this.options.cancel_button) { this.$elem.find(".popup_rect_buttons").append("<div id='popup_rect_cancel_button' class='popup_rect_button'>"+this.options.cancel_button_caption+"</div>"); } this.$elem.find(".popup_rect_buttons").children().addClass("hand_cursor"); }, change_height: function(_h, _no_fx) { var _this = this; if (_no_fx) { this.$elem.height(_h); if (_this.options.top ==0 && _this.options.left == 0) { _this.$elem.center({transition: 100}); } } else { this.$elem.animate({ height: _h }, 500, function(){ if (_this.options.top ==0 && _this.options.left == 0) { _this.$elem.center({transition: 100}); } }); } }, enable_auto_resize: function() { var _this = this; this.$elem.find("#popup_content").resize(function(_event){ _this.change_height(_event.target.clientHeight + 15 + _this.$elem.find(".popup_rect_buttons").height(),true); }); }, set_content: function(_content) { this.$elem.find("#popup_content").html(_content); this.$elem.show(); }, get_content: function() { return this.$elem.find("#popup_content"); }, add_click_event: function(_button, _function) { var self = this; switch (_button) { case "send": this.$elem.find(".popup_rect_buttons").find("#popup_rect_send_button").click(function(){ if (!self.options.send_button_disabled) { _function(); } }); break; case "cancel": this.$elem.find(".popup_rect_buttons").find("#popup_rect_cancel_button").click(_function); break; } }, show_rect: function() { this.$elem.show(); if (this.options.top ==0 && this.options.left == 0) { this.$elem.center({transition: 100}); } }, disbaled: function (is_disbaled) { if (is_disbaled) { this.$elem.prepend("<div class='popup_rect_disbaled'></div>"); this.$elem.find(".popup_rect_disbaled").css({width: this.options.width, height: this.options.height}); } else { this.$elem.find(".popup_rect_disbaled").remove(); } }, send_button_disabled: function(is_disbaled) { this.options.send_button_disabled = is_disbaled; var fadeVal = is_disbaled ? 0.5 : 1; this.$elem.find(".popup_rect_buttons").find("#popup_rect_send_button").fadeTo('slow', fadeVal); }, close: function(_this) { _this = _this ? _this : this; _this.$elem.fadeOut('fast', function(){ $(_this).empty(); }); } }; $.fn.extend({ center: function (options) { var options = $.extend({ // Default values inside:window, // element, center into window transition: 0, // millisecond, transition time minX:0, // pixel, minimum left element value minY:0, // pixel, minimum top element value withScrolling:true, // booleen, take care of the scrollbar (scrollTop) vertical:true, // booleen, center vertical horizontal:true // booleen, center horizontal }, options); return this.each(function() { var props = {position:'absolute'}; if (options.vertical) { var top = ($(options.inside).height() - $(this).outerHeight()) / 2; if (options.withScrolling) top += $(options.inside).scrollTop() || 0; top = (top > options.minY ? top : options.minY); $.extend(props, {top: top+'px'}); } if (options.horizontal) { var left = ($(options.inside).width() - $(this).outerWidth()) / 2; if (options.withScrolling) left += $(options.inside).scrollLeft() || 0; left = (left > options.minX ? left : options.minX); $.extend(props, {left: left+'px'}); } if (options.transition > 0) { $(this).animate(props, options.transition); } else { $(this).css(props); } return $(this); }); } }); |
jquery.popup_rect.css file
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | .popup_rect { background-color: #f7f7f7; border: 2px solid #949494; border-radius: 5px; position: absolute; z-index: 999999; } .popup_rect_content { padding: 20px; } .popup_rect_buttons { padding: 20px; position: absolute; bottom: 0px; right: 0px; } .popup_rect_button { float: right; margin-left: 15px; border-radius: 5px; color: #000; font-weight: bold; padding-top: 2px; padding-bottom: 2px; padding-left: 5px; padding-right: 5px; } .popup_rect_disbaled { position: absolute; background-color: white; z-index: 999; opacity: 0.6; filter: alpha(opacity=60); } |
test.html file
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <script type"text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="jquery.popup_rect.js"></script> <link href="jquery.popup_rect.css" rel="stylesheet" type="text/css" /> <div id="test_div"></div> <script> var rect = Object.create(popup_rect); rect.init({ height: 200, width: 300 }, $("#test_div")); rect.get_content().append("<span>The Content</span>"); rect.show_rect(); rect.add_click_event("cancel", function(){ alert("cancel"); }); rect.add_click_event("send", function(){ alert("send"); }); </script> |
Have fun,
Garry Lachman
jQuery Plugin Template
Hey,
I want to share some template that i usually use for starting new jQuery Plugin.
its base template that contains public methods, private methods, settings and custom events.
And here it come..
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
(c) By Garry Lachman (http://www.garry-lachman.com), GPL License
*/
var PluginCustomEvents = {
EVENT: "myPluginCustomEvent"
};
(function($) {
var plugin = this;
$.fn.pluginTemplate = function(method) {
var methods = {
init : function(options) {
this.pluginTemplate.settings = $.extend({}, this.pluginTemplate.defaults, options);
return this.each(function() {
var $self = $(this);
var self = this;
});
}
};
var privateMethods = {
privateMethod: function(){
}
};
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || !method) {
return methods.init.apply(this, arguments);
} else {
console.error("No Method: " + method);
}
}
$.fn.pluginTemplate.defaults = {
defaultProperty: "defaultValue"
};
$.fn.pluginTemplate.settings = {};
})(jQuery);
Init plugin:
2
3
4
5
6
// init with settings
$("#target").pluginTemplate({
property1: "value"
});
Call public methods:
Call private methods (inside the plugin):
Have Fun
Garry Lachman