www.zambros.it

Saturday 19th of May 2012

Articoli Tecnici

Clicca qui per votare

JQuery UI dialog button PDF Stampa E-mail
Venerdì 01 Ottobre 2010 21:01

JQuery: creare pulsanti dialog con colori/classi customizzati

Durante il progetto del modulo planning di zetagest, ho avuto un'esigenza di poter inserire colori diversi nei tasti di un dialog creato dal framework JQueryUI. Purtroppo, nonostante la notevole capacità di realizzare magnifiche form con poco codice, è molto difficile poter customizzare il layout grafico (il tema) dei pulsanti.

Ecco come appare il classico form dialog con un tema impostato.

jquery-screen-capture-1-300x191

Per creare questo codice basterà una pagina HTML che contiene il seguente codice, ovviamente ci devono essere i riferimenti della libreria JQuery (1.4.2)e JQueryUI  (1.8.2)

<article id="dialogs">
    <a href="javascript: void(null);" id="dialogbutton">Open Dialog</a>
    <div title="this is my test this is my test " id="dialogtest">
       This is a div dialog test. This is a div dialog test. 
         This is a div dialog test. This is a div dialog test.
    </div>
</article>

 

Poi inserire il seguente codice Javascript

<script type="text/javascript">
	$(document).ready(function() {
		/* Create a dialog */
		$("#dialogtest").dialog({
                        title: "Alert!",
			modal: true,
			buttons: {
				"Ok": function() {
					$(this).dialog("close");
				},
				"Cancel": function() {
					$(this).dialog("close");
				}
			}
		});

		/* Add Dialog Button Functionality */
		$('#dialogbutton').click(function(){
			$('#dialogtest').dialog('open');
			return false;
		});
	});

</script>

 

Richiedi questo spazio pubblicitario. Contattami

 

Come già detto, tutto questo è fantastico ma ho l'esigenza di modificare i colori (ma anche il tema) di ogni singolo pulsante. Per esempio mettere in rosso il pulsante CANCEL o in VERDE il pulsante OK e così via. Immaginate di avere un form con 7-8 pulsanti. L'utente dovrà leggere per forza il testo, ma grazie a dei colori sarà tutto più user friendly.

 

Ecco come vorrei, per esempio, che diventasse il form dell'esempio precedente:

Richiedi questo spazio pubblicitario. Contattami

Navigation
Previous • Table of Contents • In alto • Succ.

jquery-screen-capture-2-300x203

 

Per far questo sarebbe opportuno che tutto fosse anche semplice da inserire via codice. Magari così:

 

buttons: {
	"Ok":  function() {
		$(this).dialog("close");
	},
	"Cancel": {
		action : function() {
			$(this).dialog("close");
		},
		type : "cancel"


 }

E inserire una classe nel foglio di stile che interpreta il type cancel:

 div.ui-dialog-buttonpane button.cancel { 
background:none; border:0px none;color:red; }

 

Richiedi questo spazio pubblicitario. Contattami

 

Come riesco a fare tutto questo?

Dobbiamo inserire questo codice alla fine della nostra libreria JQueryUI di solito nominata jquery-ui-1.8.2.custom.min.js 

 

 /* TorchUI dialog button fix */
 
(function($) {
	var _createButtons = $.ui.dialog.prototype._createButtons;
	$.ui.dialog.prototype._createButtons = function(buttons) {
		var self = this,
		hasButtons = false,
		uiDialogButtonPane = $('<div></div>')
			.addClass(
				'ui-dialog-buttonpane ' +
				'ui-widget-content ' +
				'ui-helper-clearfix'
			);
		// if we already have a button pane, remove it
		self.uiDialog.find('.ui-dialog-buttonpane').remove();

		if (typeof buttons === 'object' && buttons !== null) {
			$.each(buttons, function() {
				return !(hasButtons = true);
			});
		}
		if (hasButtons) {
			$.each(buttons, function(name, fn) {
                        /* Begin the code change here */
			// Check to see if fn is being passed in as a funciton, 
                        //assume it's an object if not.
			 	if(!$.isFunction(fn)) {
			 		var buttonclass=fn.type;var func=fn.action; }
			 	else {
			 		var func=fn; var buttonclass=""; }
				var button = $('<button type="button"></button>')
					.text(name)
				/* Add a class to the button, if there is a class */
					.addClass(buttonclass)
					.click(function() { func.apply(self.element[0], arguments); })
					.appendTo(uiDialogButtonPane);
				if ($.fn.button) {
					button.button();
				}
			});
			uiDialogButtonPane.appendTo(self.uiDialog);
		}
	}
})(jQuery);

 

Il gioco è fatto.

Ecco due screenshot (cliccate per ingrandire) fatti sul modulo planning, una volta implementata la modifica. Ho creato diverse classi che cambiano il colore del testo (verde, rosso, arancio)

 

jquery-planning

 

jquery-planning2

 

Lo script è stato preso da questo link

 

Navigation
Previous • Table of Contents • In alto • Succ.

 
Ultimo aggiornamento Venerdì 01 Ottobre 2010 22:30
 

Aggiungi commento


Codice di sicurezza
Aggiorna

Primo su Google

zetawriter_200
Il primo gestionale SEO online per il posizionamento su Google
Visita www.zetawriter.com

Richiedi subito il tuo preventivo Gratuito al 338.8835425

Articoli blog più letti


Ultime notizie

Free Software

DadoPubblicato online il simulatore del lancio di dadi. La versione è flash cioè non salva i dati.
Prossimamente ci sarà una versione dove si potranno visualizzare tutti i tiri eseguiti!
L'applicazione si trova a questo link.


I più letti

Twitter



P.IVA: 03864690239 - CF: ZMBMTT82A25A459W - Cell 338 8835425 - info@zambros.it