JQueryUI: The different states

When you are working with the jQueryUI API you have some CSS classes to utilize when it comes to gadget designing. These classes can be used in order to create a unified, exchangeable design. The state classes represent different states a gadget, or anything else really, can be in (such as highlighted or in error). The states are:

 

  • ui-state-default
  • ui-state-active
  • ui-state-hover
  • ui-state-highlight
  • ui-state-error
  • ui-state-disabled

 

For more detailed information follow this link to the jqueryui official wiki.

Välj jQuery buttonset knapp programmatiskt

Jag hade ett problem idag. Jag hade skapat ett buttonset med jQuery och ville att en av knapparna alltid skulle vara förvald. Detta var dock enklare sagt än gjort. Det fanns ingen option (hoppas att det kommer) för att välja vilken knapp som skulle vara vald när sidan laddades.

Jag ville att det skulle se ut så här när jag laddade sidan:

Förvald knapp
Förvald knapp

Jag lyckades lösa detta på ett sätt som inte är optimalt, men det funkar.
Knepet är att utlösa Click() eventet på BÅDE labeln OCH radioknappen när sidan laddas.

Så här blev koden:

<html>
	<head>
		<link type="text/css" media="screen" rel="stylesheet" href="http://www.lundsbk.org/jquery_ui/css/theme/jquery-ui-1.8.9.custom.css" />
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
		<script type="text/javascript" src="jquery.easing.1.3.js"></script>
		<script type="text/javascript" src="jquery-ui-1.8.5.custom.min.js"></script>
		<title>Test!</title>
		<script type="text/javascript">
			$(document).ready(function()
			{
				//Create a buttonset
				$('#ButtonsDiv').buttonset();
 
				//Make sure the second button is always pre-selected 
				$('#Second').click(); 			//Click the second radio button
				$('#LabelForSecond').click();	//Click the second label
			});
		</script>
	</head>
	<body>
		<div>
			<div id="ButtonsDiv">
				<input type="radio" name="Buttons" id="First" /><label for="First" id="LabelForFirst">First</label>
				<input type="radio" name="Buttons" id="Second" /><label for="Second" id="LabelForSecond">Second</label>
				<input type="radio" name="Buttons" id="Third" /><label for="Third" id="LabelForThird">Third</label>
			</div>
		</div>
	</body>
</html>

JQueryUI broken theme

I realized something funny today about jqueryui. I’m using it on a site I’m working with and I was gonna change theme. I created a new theme with the tools on jqueryui.com and downloaded it. When I was going to download it I selected “Deselect all components” as I had no need for the javascript, I thought…
The problem is that you only get the CSS directly connected to the jquery components, so, if you’re gonna change theme, make sure you select all components you used last time

Using hosted jquery

En kort genomgång om hur och varför man ska använda googles jquery hosting istället för att ha filerna på den egna servern.

If you are using jquery or jqueryui then make sure that you don’t keep the library itself on your own server. Google, and other companies, are hosting the files you need to use jquery and jqueryui (google also hosts its own jquery-json library).

This has several advantages:

  • You don’t need to host the files yourself
  • You don’t need to care about users who can only download using a certain amount of connections to your server
  • Caching
  • The distance to your user (wherever your server is located, there is always a google server closer to your user)

This means that instead of writing like this:

<script type="text/javascript" src="/javascript/jquery-1.4.4.js"></script>

You write it like this:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

Now you never have to care where you keep your jquery libs. You’ll also know that you’ll be cutting down loading time on your page as most users hopefully have the libraries cached on their computers. So all you have to do is change the version number whenever you feel like upgrading you libraries.

JQuery:
http://code.google.com/intl/sv-SE/apis/libraries/devguide.html#jquery

JQuery – Google JSON Library:
http://code.google.com/p/jquery-json/

JQueryUI:
http://ajax.googleapis.com/ajax/libs/jqueryui/[UI-VERSION]/themes/[THEME-NAME]/jquery-ui.css

The JQueryUI must be used with a defined theme (in the URL there is a [THEME-NAME] section which must be replaced with a propert theme name and UI-VERSION must be changed to version). Here’s a couple of the themes available (all can be found on this google blog). In general any theme name from the jqueryui.com theme gallery can be used: