Let’s say you want to allow your dialog boxes to be close when the user press “esc.”
$("body").bind("keyup.myDialog", function(event){
// 27 == "esc"
if (event.which == 27) {
// TODO: close the dialog
// unbind the event
$("body").unbind("keyup.myDialog");
}
});
.ico{
background-image: url(images/my-sprites.png);
width: 16px;
height: 16px;
background-repeat: no-repeat;
display:inline-block;
}
/* Sometime alignment is better with a display block and float left */
.icoFL{
background-image: url(images/my-sprites.png);
width: 16px;
height: 16px;
background-repeat: no-repeat;
display:block;
float:left;
margin: 2px 4px 0 0;
}
/* This should be used when using the icoFL for the label on the right. */
.icoFL-lbl{
padding-bottom: 5px;
}
/* This is an example of an icon for a document */
.icoDocument{
background-position: 0 0;
}
/* This is the second icons. The icons are every 32px horizontally and veritically */
.icoFolder{
background-position: -32px 0;
}
The html code would look something like that:
<span class="ico icoDocument"></span> First Doc
To use the icoFL formatting, use something like:
<span class="icoFL icoDocument"></span> <span class="icoFL-lbl">First Doc</span>
background: #999; /* for non-css3 browsers */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* for IE */ background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); /* for webkit browsers */ background: -moz-linear-gradient(top, #ccc, #000); /* for firefox 3.6+ */
Great simple tutorial about cross browser gradient
background: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgba(0,0,0,.5)), color-stop(.49, rgba(0,0,0,.5)), color-stop(.5, rgba(29,29,29,.5)), color-stop(1, rgba(59,49,49,.5)));
To use the JsonpRequestBuilder, you need to inherit the following in your x.gwt.xml
<inherits name="com.google.gwt.jsonp.Jsonp" />
Sometime, the jQuery(”#xx”).click() does not work. So, here is a way to do it directly:
var e = document.createEvent('MouseEvents');
e.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
var r = $("#myElement").get(0).dispatchEvent(e);
Obviously, you can use the document.getElementById(”myElement”) if you do not want any jQuery dependency.
<a href="skype:echo123?call">Click</a>(make a call to echo123)
<a href="skype:echo123">Click</a>(default action - call)
<a href="skype:echo123?add">Click</a>(add echo123 to your contacts)
<a href="skype:+14035551111?call">SkypeOut call</a>
<a href="skype:user1?chat">Start a text chat with user1</a>
<a href="skype:user1;user2;user3?chat">(Start a multichat with 3 people)</a>
<a href="skype:user1;+14035551111?call">User and Phone conference</a>
<a href="skype:user1?userinfo">User Info</a>
<a href="skype:user1?sendfile">(Send a file to user1)</a>
[#list doc["book/chapter[title='Ch1']/para"] as p]
<p>${p}</p>
[/#list]
See XPath Freemarker doc for more info.
I will probably go with Drupal (seems more robust and complete).