Requirements
To use JQuery, you have to ensure the JQuery library is downloaded and part of the application.
To get the latest version, see here:
To use CDN’s:
Page Load Events
To setup the page, you generally want to hook into the page load event, after everything is ready:
//Handle the document ready event:
$(document).ready(function(){
//Search for all 'p' elements,
//attach an click event handler
//that hide's the elements:
$("p").click(function(){
$(this).hide();
});
Selectors
//Key Concepts of Selector Syntax (official: http://bit.ly/gVyoMp)
//p = element name (eg $('div'))
//. = class (eg: $('.myClass'))
//# = id (eg: $('#myId'))
//> = direct descendent (eg: $('li > a'))
//+ = next to (eg: 'div + button' gets buttons after divs)
//~ = sibling (eg 'li.main ~ li')
[] = contain the given attribute($('p[id]')
Selector Examples:
//Selector Examples:
//
//Attach an event handler everything:
$('*').click(function() {$(this).hide('slow');});
//
//Attach an event handler to all ‘p’ elements:
$('div').click(function() {$(this).hide('slow');});
//
//Attach an event handler to all ‘p’ elements of class ‘myClass’:
$('div.myClass').click(function(){$(this).hide('slow');});
//
//Attach an event handler to all elements of class ‘myClass’:
$('.myClass').click(function(){$(this).hide('slow');});
//
//Attach an event handler to an element with an id = of ‘myP’:
$('#myP').click(function(){$(this).hide('slow');});
//
//Do something to LI descendents of another element:
$('#myOL > li').addClass('Hoverable');
//
//All LI's no matter how nested:
$('div.myDiv li').css('background-color', '#C0C0FF');
//
//Directly nested LI's (note that div.myDiv > li won't cut it):
$('div.myDiv > ul li').css('background-color', '#C0C0FF');
//
//Directly nested LI's (note that div.myDiv > li won't cut it):
$('div.myDiv > ul > li').css('background-color', '#C0C0FF');
//
//Get the first directly nested LI:
$('.myDiv > ul li:first-child').css('background-color', '#C0C0FF');
//
//Get the third directly nested LI:
$('.myDiv > ul li:nth-child(2)').css('background-color', '#C0C0FF');
//
//Get the last directly nested LI:
$('.myDiv > ul li:last-child').css('background-color', '#C0C0FF');
//
//Get the even directly nested LI:
$('.myDiv > ul li:even-child').css('background-color', '#C0C0FF');
//
//Get the odd directly nested LI:
$('.myDiv > ul li:odd-child').css('background-color', '#C0C0FF');
//
//Get all directly nested LI elements after 3rd element:
$('.myDiv > ul li:gt(2)').css('background-color', 'blue');
//
//Get all directly nested LI elements after 3rd element:
$('.myDiv > ul li:lt(2)').css('background-color', 'blue');
//
//Gets div's that have a specific attribute:
$('div[id]').css('background-color', '#C0C0FF');
//
//Gets div's that have a specific attribute with a specific value:
$('input[id=uiEmail]').css('background-color', '#C0C0FF');
//
//All external anchors (start with...)
$('a[href^=\'http://\'').css('background-color', '#C0C0FF');
//
//All external anchorts (ends with...)
$('a[href$=pdf').css('background-color', '#C0C0FF');
//
//Gets divs that have LI children:
$('div:has(li)').css('background-color', '#C0C0FF');
//
//Get's divs that are empty:
$('td:empty').css('background-color', '#C0C0FF');
Some more examples, specific to form elements:
//All form elements of the page's first form:
$(document.forms[0].elements).css('background-color', '#C0C0FF');
//
//All text elements:
$('input:text').css('background-color', '#C0C0FF');
//
//All checkbox elements:
$('input:checkbox').css('background-color', '#C0C0FF');
//
//All textt elements that are part of #myForm:
$('#myForm input:text').css('background-color', '#C0C0FF');
//
//All input elements with a specific name:
$('input[name=uiAA]').css('background-color', '#C0C0FF');
//
//All text input elements with a specific name:
$('input:text[name=uiAA]').css('background-color', '#C0C0FF');
Some more selector examples, specific to tables:
//Table examples:
//
//Odd rows in a table with a striped class
$('table.striped > tr:odd')
//
//A Selected Column
$('table tr > td:nth-child(2)').css('background-color', 'pink');
Some more selector examples specific to links:
//Link examples:
//
//All external anchors (start with...)
$('a[href^=\'http://\'').css('background-color', '#C0C0FF');
//
//All external anchorts (ends with...)
$('a[href$=pdf').css('background-color', '#C0C0FF');
Attributes
Once you have something selected, you’ll probably want to apply attributes, styles, or css classes. Let’s start with attributes:
var hasAttribute ($('div').attr('mySpecial');
//Set it:
$('div').attr('mySpecial','x');
//Remove it:
$('div').attr('mySpecial', '');
Styles and Classes
Once you have something selected, and you want to apply styles, these examples may help:
//CSS
//Once you have elements, you're most probably moves are going to be to check/add/remove css classes:
//Add or remove a class:
var hoverable = $('div').hasClass('hoverable');
$('div').hover(function(){$(this).addClass('hovered');},function(){$(this).removeClass('hovered');});
$('div').hover(function () { $(this).css('background-color','orange'); }, function () { $(this).css('background-color',''); });
//Remove it:
$('div').removeClass('hovered');
$('div').css('background-color','');
Animations
A fun thing to do with div’s is to animate them. The basic fist steps are:
//fadeIn/fadeOut
$('div').hover(function () { $(this).fadeIn(); }, function () { $(this).fadeTo(1000,0.50(); });
//Hiding:
$('div').mouseleave(function () { $(this).hide('slow'); });
//Fading opacity over time:
$('div').mouseleave(function () { $(this).fadeTo(1000,0.50); });
Some more fun with slideDown and slideUp (like an accordion):
$('div').mouseleave(function () { $(this).slideUp(1000); });
More can be done with toggle() and slideToggle();
What a passage!
"I just quit, that's all," Franny Glass tells her boyfriend early in "Franny and Zooey," explaining why she gave up acting. " . . . I don't know. It seemed like such poor taste, sort of, to want to act in the first place. I mean all the ego. And I used to hate myself so, when I was in a play, to be backstage after the play was over. All those egos running around feeling terribly charitable and warm."
I code almost all of my production code with output documentation sent to XML + Show Warnings as Errors. It just ensures that I keep my code fully documented for the next guy who has to figure out what the heck I was thinking. This all works fine – until you get to WCF contracts that are auto-generated (or any other auto-generated code for that matter) by Visual Studio (and yes, there’s a whole school of thought that thinks one should hand craft contracts rather than leave it up to Visual Studio, but I wo ...
Read the rest of entry »
I was asked today why Silverlight doesn’t have a DataContextChanged event, or something similar, as it would be really useful.
The answer is -- of course -- (as usual) … nuanced …
The Purist’s Way
Let’s deal with the Purist’s answer first.
The Purist’s answer is…because you’re not supposed to be listening to it: DataContext is a property of the View, not the ViewModel.
Think about it for a second. We’re trying to separate UI layout, the pretty stuff, from not only the underlying BL, but now also the UIL.
Why?
Well, beyond simply untangling our mindsets in order to tackle problems more effectively (I’m talking about Separations of Concern) there is the goal of making lookless UI’s, where the UI that holds everything together has no idea of how/where the individual controls go, etc.
Ever notice how every 7 years or so they come up with a newer UI system? Console, Windows, ASP.NET, WPF, Silveright… And every time, we have to throw out the whole UI layer and start again. Wouldn’t it be nice if we could encapsulate the UIL – the behavior, the validation, etc -- in a layout-and-any-specific-control-architecture agnostic package that is usable across future platforms?
By making the logic deal with View values, and react to it, there is tight coupling between the View and the View Logic – whereas most probably this could all be these types of values can be reacted to, and produced changes in other values, in a lookless way, all in the ViewModel, and then simply bound to by the View.
Secondly, If you’re swapping a View’s DataContext, and you’re looking at it, it means two things:
a) to re-iterate: you’re looking at a property of the View, and not the Model…hum…That’s going to work now…but cause us problems later down the road (see above)...
b) your swapping the Model…and 9 (ok…maybe 7) times out of 10, that’s going to be because the Model you’re using is not a UI’s ViewModel, but actually not much more than a BL object in sheep’s clothhing. That, simply put, means that you’re too close to the BL.
Get away from the BL/Model. Take the time to make a disconnected VM, that has all the properties required for the View – and expose any properties that you plan to change(eg, Lists, etc.) as properties of the VM. (Which solves problem a).
And then there is the Pragmantic way…
Read the rest of entry »
Aha…Just spend this morning fighting with iTextSharp, getting it to merge the output from the ibex4 FO Document converter with the output of Aspose’s Word Doc to PDF converter. The are several little quirks that are not show stoppers, but can cause one to lose time. For example, the classes do not implement IDispose so you can’t use the handy using(){…} syntax to ensure everything is tidy when you leave. The second is that it is finicky with the way one opens documents – if you don’t explicitly say so, ...
Read the rest of entry »
This morning I’m was working on a grid that has a GridSplitter to split the panes, but needed a quick way to collapse the left side to get it out of the way – and when finished, restore it to its previous size. Something like the following scenario: The solution for that is trivially simple: DateTime lastClicked;
GridLength cachedColumnWidth;
void GridSplitter_MouseLeftButtonUp(
object sender, System.Windows.Input.MouseBu ...
Read the rest of entry »
Thought for the day: Never be afraid to try something new. Remember that a lone amateur built the Ark. A large group of professionals built the Titanic.
Dave Barry
Just came across this:
People who want to share their religious views with you almost never want you to share yours with them.
Just trying out the WLWriter Silveright plugin:
(does anyone know in which dir I can find the template for the stuff it spits out?)
This is one my pet peeves about Silverlight: that the UIElementCollection within Panel raises no events when its collection has changed.
I’ve looked into Binding to the Collection – doesn’t work.
I’ve looked into nesting the Panel – doesn’t work well.
I think I’m reduced to the following:
Read the rest of entry »