www.zambros.it

Certificato Google Adwords

Google Partners - Certification piccolo


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>

 

 

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:

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

 

 

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

 

 

Ultimo aggiornamento Venerdì 01 Ottobre 2010 22:30
 

Aggiungi commento


Codice di sicurezza
Aggiorna

Richiedi subito il tuo preventivo Gratuito al 338.8835425

SimDice Tweet


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.


Twitter



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