Michael Gaigg: Über UI/UX Design

15Jun0

How to trigger “Edit Mode”

Posted by Michael Gaigg

In a recent discussion it occurred to me that there are really only 3 ways to trigger "edit mode", i.e. tell the map that I want to add/edit/remove something:

  • Binary
  • On
  • Selection

Binary

The edit mode is either turned on or off. Turned off is the default mode and requires explicit action by the user to turn it into edit mode with the advantage that user is aware of this switch, which might also trigger other behaviors to be turned off (map tips,...) or removed from the map (scalebar, overview map,...)

Use "binary" if editing is a major part of your app so that this distinction becomes crucial.

On

On is a subset of the binary case where the edit mode with all its functionality is always on by default and any interaction with the map allows users to select features to be edited or deleted, or add something new.
This case might conflict with other mouse events (e.g. a left mouse button up event usually triggers a map tip) and therefore needs to be very well thought-through before implementing.

Use "on" if you can fit it into your workflows and you can oversee and have control over most/all map functions.

Selection

Selecting an edit tool through a toolbar for example is the classical way of setting the map into edit mode. It speaks very loud GIS expert to me and seems to not being familiar to the average map user, i.e. it may be difficult to find the right tool from the sway of icons, learn (and remember) that this action is required AND know that the mode needs to be turned off again after being done.

Use "selection" if your map app already has a toolbar and you want to be on the safe side.

How do you prefer doing it?

What are your preferences/experiences?

29Mar0

jQuery: Handle Dropdown (select), Checkboxes and Radio selections

Posted by Michael Gaigg

Almost daily I work with lists, be it dropdown, checkbox or radio selections. I need to select values, submit selections, hide/show containers depending on the selection etc.

I tend to forget all these cool jQuery notations that make every programmers life easier. How nice would it be to have a little cheat sheet? So I decided to summarize my findings (and share them with you).

Obviously jQuery is powerful and gives you a multitude of possibilities so this list is neither exhaustive nor covers all possible application scenarios. Mix, match, combine and extend the samples as you wish and feel free to post your additional solutions in the comments section.

See the test page.

Dropdown

I'm using the following sample list:

<select id="ddlCategories"> 
   <option>- Select a category -</option>
   <option value="books" selected="selected">Books</option>
   <option value="videos">Videos</option>
   <option value="dvds">DVDs</option>
</select>

Get value of selected item

Pure and simple, despite what you might read in other tutorials:

alert("Selected value: " + $("#ddlCategories").val());

Change text of a particular item

Let's target item with value 'videos':

$("#ddlCategories option[value='videos']").text("Videos and tapes");

Change color of a particular item

This could be useful to show that the category is currently unavailable or a certain item is out of stock.

$("#ddlCategories option[value='videos']").css("color", "#CCC");

Get number of options

Don't forget to subtract options that don't count, e.g. the empty "- Select a category -" option.

alert("Number of options: " + ($("#ddlCategories option").length - 1));

Set a particular option

Set the option 'videos' to be the selected item.

$("#ddlCategories option[value='videos']").attr("selected", "selected");

Checkboxes

Our sample checkbox list:

<div id="chkCategoriesContainer">
	<input type="checkbox" name="chkCategories" value="none" checked="checked" />None<br/>
	<input type="checkbox" name="chkCategories" value="books" />Books<br/>
	<input type="checkbox" name="chkCategories" value="videos" />Videos<br/>
	<input type="checkbox" name="chkCategories" value="dvds" />DVDs<br/>
</div>

Check all items in the checkbox list

This could be invoked e.g. through a link named 'Check all'.

$("input[name='chkCategories']").attr("checked","checked");

Uncheck all items in the checkbox list

Same here, uncheck all, a very common requirement.

$("input[name='chkCategories']").removeAttr("checked");

Make the second item being checked

List is zero-based, so the second item is nth(1) 😉

$("input[name='chkCategories']:nth(1)").attr("checked","checked");

Show the value of each checked item (requires a container!)

In this case we simply alert the value, but we could might as well write it to another output field, container or whatever you may wish.

$('#chkCategoriesContainer :checkbox:checked').each(function() {
	alert($(this).val());
	//$('#outputField').append(', '+$(this).val());
});

Radio

Our sample list again:

<div id="rdoCategoriesContainer">
	<input type="radio" name="rdoCategories" value="none" checked="checked" />None<br/>
	<input type="radio" name="rdoCategories" value="books" />Books<br/>
	<input type="radio" name="rdoCategories" value="videos" />Videos<br/>
	<input type="radio" name="rdoCategories" value="dvds" />DVDs<br/>
</div>

Get value of checked item

alert("Selected value: " + $("input[name='rdoCategories']:checked").val());

Append item to container

The item will be added to the DOM and is available to jQuery immediately.

$('#rdoCategoriesContainer').append('<input type="radio" name="rdoCategories" value="tapes" />Audio tapes<br/>');