23 maj, 2011

Dynamiskt sätta knapptext i jQuery UI-dialoger

Dialog / JQuery / JQuery UI

jQuery UI är ett relativt trevligt bibliotek för att hantera grafiska gränssnitt på webben. Det är lite tungrott men har sina fördelar om man kör det helt ut. Dialogkomponenten är dock lite märklig vad gäller stöd för språk. Jag hittade en lösning för att dynamiskt kunna sätta etiketterna på knapparna beroende på vilket språk användaren använder, jag använder här internationaliseringsstandarden "i18n" där man lägger texterna i ett objekt och beroende på användarens språkval laddar olika språkfiler. Det är lite extra rörigt i jQuery UI eftersom etiketten används vid deklarationen av själva knapparna, och det måste vara en text. Jag låter den fortfarande heta "OK" i mitt fall nedan, men jag byter det som användaren ser på knappen.

Jag använder här callbacken "focus" som triggas när dialogrutan kommer i fokus, vilket den gör direkt när den visas. Då byter jag texten på första knappen (button:first-child), som i sin tur ligger i en  genom att sätta den till i18n.insert, vilket i det här fallet blir då blir "Infoga". 

Voilla!

 $("#dialog-add-product").dialog({
 	autoOpen: false,
 	minHeight: 200,
 	width: 400,
 	focus: function() {
 		$(this).find('div.ui-dialog-buttonset button:first-child span').html(i18n.insert); 			
	},
 	buttons: {
 		'OK': function() {
 			$(this).dialog('close');
 		},
 	}
 });

© 2017 webbyrån Bobolo. All rights reserved.