Mercurial > altnet-hispano

comparison Agendas/trunk/src/Agendas.Web/Scripts/subpanels-0.9.js @ 224:de6d206bd5c3

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Actualizando subpanels
author nelopauselli
date Sun, 25 Sep 2011 01:40:18 -0300
parents 42a1068e73c8
children c8f378272407
comparison
equal deleted inserted replaced
223:6f2213e949e4 224:de6d206bd5c3
1 jQuery.fn.subpanel = function () { 1 jQuery.fn.subpanel = function () {
2 var panel = $(this[0]); 2 var panel = $(this[0]);
3
3 var settings = arguments[0] || {}; 4 var settings = arguments[0] || {};
4 5
5 var closeLink = null; 6 var closeLink = null;
6 var openLink = null; 7 var openLink = null;
7 var main = null; 8 var main = null;
8 var loading = null; 9 var loading = null;
9 10
10 this.create = function () { 11 this.create = function () {
11 // botón para abrir el panel 12 // botón para abrir el panel
12 openLink = $('<a></a>').addClass('ajax-button ui-widget ui-state-default ui-corner-all').click(this.open).appendTo(panel); 13 openLink = $('<a></a>').addClass('ajax-button ui-state-default ui-corner-all').click(this.open).appendTo(panel);
13 var openSpan = $('<span></span>').addClass('ui-icon ui-icon-plusthick').appendTo(openLink);
14 14
15 closeLink = $('<a></a>').addClass('ajax-button ui-widget ui-state-default ui-corner-all').css('display', 'none').click(this.close).appendTo(panel); 15 var openSpan = $('<span></span>').addClass('ui-icon ui-icon-plusthick').html('open').appendTo(openLink);
16 var closeSpan = $('<span></span>').addClass('ui-icon ui-icon-minusthick').appendTo(closeLink); 16
17 //boton para cerrar el panel
18 closeLink = $('<a></a>')
19 .addClass('ajax-button ui-state-default ui-corner-tr ui-corner-tl')
20 .css('display', 'none')
21 .click(this.close).appendTo(panel);
22 var closeSpan = $('<span></span>').addClass('ui-icon ui-icon-minusthick').html('close').appendTo(closeLink);
17 23
18 var body = $('body'); 24 var body = $('body');
19 25
20 // panel principal 26 // panel principal
21 main = $('<div></div>') 27 main = $('<div></div>')
22 .addClass('ui-widget') 28 // .addClass('ui-accordion')
23 .addClass('ui-widget-content') 29 .addClass('sp-main ui-widget-content ui-corner-bottom')
24 .addClass('ui-corner-all')
25 .addClass('sp-main')
26 .width(settings.width || '400px') 30 .width(settings.width || '400px')
27 .css('display', 'none') 31 .css('display', 'none')
32 .css('padding', '5px 5px 5px 5px')
28 .appendTo(body); 33 .appendTo(body);
29 34
30 var o = openLink.offset(); 35 panel.show();
31 var top = o.top + openLink.height() * 1.2;
32 var left = o.left;
33 36
34 main.offset({ top: top, left: left }); 37 if (settings.created != undefined)
38 settings.created();
35 }; 39 };
36 40
37 this.close = function () { 41 this.close = function () {
38 if (loading !== undefined && loading !== null) { 42 if (loading !== undefined && loading !== null) {
39 loading.abort(); 43 loading.abort();
42 46
43 $(this).hide(); 47 $(this).hide();
44 openLink.show(); 48 openLink.show();
45 main.hide(); 49 main.hide();
46 main.html(''); 50 main.html('');
51
52 if (settings.closed != undefined)
53 settings.closed();
54
47 }; 55 };
48 56
49 this.open = function () { 57 this.open = function () {
58 var o = openLink.offset();
59 var top = o.top + openLink.outerHeight();
60 var left = o.left;
61
62 //main.offset({ top: top, left: left });
63 main.css('top', top);
64 main.css('left', left);
65
50 $(this).hide(); 66 $(this).hide();
51 closeLink.show(); 67 closeLink.show();
52 main.show(); 68 main.show();
53
54 // si hay título, creamos el header
55 if (settings.title !== undefined) {
56 var header = $('<div></div>')
57 .addClass('sp-header').addClass('ui-widget-header')
58 .appendTo(main);
59
60 var title = $('<span><span>')
61 .html(settings.title)
62 .appendTo(header);
63 }
64 69
65 // div que contendrá el html del panel 70 // div que contendrá el html del panel
66 var content = $('<div></div>') 71 var content = $('<div></div>')
67 .appendTo(main); 72 .appendTo(main);
68 73
69 var imgdiv = $('<div></div>').css('text-align', 'center').css('padding-top', '10px').appendTo(content); 74 var imgdiv = $('<div></div>').css('text-align', 'center').css('padding-top', '10px').appendTo(content);
70 var img = $('<img />').attr('src', '/Content/loader.gif').attr('alt', 'loading...').appendTo(imgdiv); 75 if (settings.imageLoding !== undefined) {
76 var img = $('<img />').attr('src', settings.imageLoding).attr('alt', 'loading...').appendTo(imgdiv);
77 }
71 78
72 // se invoca la acción con un GET para obtener el contenido del panel 79 // se invoca la acción con un GET para obtener el contenido del panel
73 loading = $.ajax({ 80 loading = $.ajax({
74 url: settings.action, 81 url: settings.url,
75 cache: false, 82 cache: false,
76 success: function (data) { 83 success: function (data) {
77 loading = null; 84 loading = null;
78 85
79 // cuando se recibe el contenido del panel, lo agregamos al div contenedor 86 // cuando se recibe el contenido del panel, lo agregamos al div contenedor
80 content.html(data); 87 content.html(data);
81 88
82 // form dentro del cual se ejecutará el panel, y del que luego se hará el POST 89 // buscamos el form que contiene el panel
83 var form = $('form', content); 90 var form = $('form', content);
84 91
85 form.submit(function (event) { 92 /*
86 // prevenimos que se ejecute el submit ya que lo haremos manualmente. 93 if ($('h3', content).length == 0)
87 event.preventDefault(); 94 form.before('<h3><h3>');
88 95 $('h3', content).each(function() {
89 var self = $(this); 96 $(this).addClass('ui-accordion-header ui-helper-reset ui-state-active');
90
91 /* preguntamos si el formulario es validable y válido, con esto tenemos un problema
92 ya que no se están generando los validadores por un problema entre jquery.validate
93 y ajax */
94 var valid = self.valid();
95 if (valid === undefined || valid) {
96
97 // tomamos la acción y serializamos el form
98 var action = self.attr("action");
99 var data = self.serialize();
100
101 // ejecutamos el POST
102 $.post(action, data, function (data) {
103 // cuando termina de ejecutarse el POST, ejecutamos la acción configurada
104 var r = settings.successful(data);
105
106 // si esta acción no devuelve false, cerramos el panel
107 if (r === undefined || r)
108 closeLink.click();
109 });
110 }
111 }); 97 });
112 98
113 $.validator.unobtrusive.parse(form); 99 // Agregamos un div que va a contener el form
100 var body = $('<div></div>');
101 body.addClass('ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active');
102 form.wrap(body);
103 */
114 104
115 $('input:submit', form).each(function () { $(this).button(); }); 105 // modificamos el evento submit
106 form.submit(dopost);
107
108 if ($.validator != undefined)
109 $.validator.unobtrusive.parse(form);
110
111 $(':submit', form).each(function () { $(this).button(); });
116 112
117 // y seteamos el foco en el primer input 113 // y seteamos el foco en el primer input
118 var nextInput = $("input:visible:first", form); 114 var nextInput = $("input:visible:first", form);
119 nextInput.focus(); 115 nextInput.focus();
116
117 if (settings.loaded != undefined)
118 settings.loaded();
120 }, 119 },
121 error: function (xhr, text) { 120 error: function (xhr, text) {
122 loading = null; 121 loading = null;
123 122
124 if (xhr.status !== 0) { 123 if (xhr.status !== 0) {
128 else { 127 else {
129 closeLink.click(); 128 closeLink.click();
130 } 129 }
131 } 130 }
132 }); 131 });
132 };
133
134 function dopost(event) {
135 // prevenimos que se ejecute el submit ya que lo haremos manualmente.
136 event.preventDefault();
133 137
134 /* 138 var self = $(this);
135 var buttons = $('<div></div>')
136 .addClass('sp-buttons')
137 .appendTo(form);
138 139
139 var confirm = $('<input/>') 140 // preguntamos si el formulario es validable y válido
140 .attr('type', 'submit') 141 var valid = true;
141 .attr('value', settings.confirmButton || 'Save') 142 if (self.valid !== undefined)
142 .button() 143 valid = self.valid();
143 .appendTo(buttons);
144 144
145 var x = $('<a></a>') 145 if (valid === undefined || valid) {
146 .html(settings.cancelButton || 'Cancel') 146 // tomamos la acción y serializamos el form
147 .button() 147 var action = self.attr("action");
148 .click(function (e) { 148 var data = self.serialize();
149 e.preventDefault();
150 closeLink.click();
151 settings.cancel();
152 })
153 .appendTo(buttons);
154 */
155 };
156 149
150 console.log(data);
151
152 // ejecutamos el POST
153 $.post(action, data, function (data) {
154 // cuando termina de ejecutarse el POST, ejecutamos la acción configurada
155 var r = true;
156 if (settings.success != undefined)
157 settings.success(data);
158
159 // si esta acción no devuelve false, cerramos el panel
160 if (r === undefined || r)
161 closeLink.click();
162 });
163 }
164 }
157 this.create(); 165 this.create();
158 } 166 }