toc

34 jQuery: Novice to Ninja Revealing Hidden Elements On with our task! The client has also specified that the user needs to be able to re­ trieve the disclaimer in case they close it by mistake. So let’s add another button to the HTML, this time with an id of showButton: chapter_02/13_revealing/index.html (excerpt) <input type=\"button\" id=\"showButton\" value=\"show\" /> We’ll also add another jQuery statement to our script file, to handle showing the disclaimer when the show button is clicked: chapter_02/13_revealing/script.js (excerpt) $('#showButton').click(function() { $('#disclaimer').show(); }); Toggling Elements Having separate buttons for hiding and showing the disclaimer seems like a waste of valuable screen real estate. It would be better to have one button that performed both tasks—hiding the disclaimer when it’s visible, and showing it when it’s hidden. One way we could do this is by checking if the element is visible or not, and then showing or hiding accordingly. We’ll remove the old buttons and add this nice new one: chapter_02/14_toggle_1/index.html (excerpt) <input type=\"button\" id=\"toggleButton\" value=\"toggle\" /> When it’s clicked, we check to find out if we should show or hide the disclaimer: chapter_02/14_toggle_1/script.js (excerpt) $('#toggleButton').click(function() { if ($('#disclaimer').is(':visible')) { $('#disclaimer').hide(); } else { jQuery: Novice to Ninja (www.sitepoint.com)





































Forms, Controls, and Dialogs 233The :input filter, for example, selects all elements that are inputs, select boxes,textareas, or buttons. You’d use it as you would any filter. Here’s how we’d give allof our form elements a lovely lemon chiffon background: $('#myForm:input').css('background-color', 'lemonchiffon')If you want to be more choosy about which elements you’re selecting, there are anumber of more specific form element filters: :text, :password, :radio, :checkbox,:submit, :button, :image (for image buttons), and :file. And remember, you’refree to apply multiple filters in a single selection.Furthermore, there are some additional filters that let you select form elementsbased on their state and value. The :enabled and :disabled filters will fetch ele­ments based on their disabled attribute, and :checked and :selected help youfind radio buttons, select box items, and checkboxes that are checked or selected. :checked and :selected in Conditional Logic These filters are particularly helpful when you need to perform different actions depending on the checked or selected state of a checkbox or radio button. For example, you can check to see if a box is checked with if($(this).is(':checked')).After you’ve selected your elements, it’s time to find their values so you can validatethem against your requirements. We’ve already used the val function enough toknow what it does: it returns the value of a form field. We can now perform somesimple validation—let’s test to see if any text boxes in a form are empty: chapter_07/01_simple_validation/script.js (excerpt) $(':submit').click(function(e) { $(':text').each(function() { if ($(this).val().length == 0) { $(this).css('border', '2px solid red'); } }); e.preventDefault(); }); Unleash your inner jQuery ninja today!





































252 jQuery: Novice to Ninja For the stars themselves, we will again rely on CSS sprites. This way our control will only be reliant on a single image (shown in Figure 7.5), which saves on HTTP requests and makes it easier for our graphic designers to edit. Figure 7.5. Star CSS sprite image Our CSS will apply the CSS sprite image to the links we create that represent half- stars. To move between the different image states, we just need to update the background-position property: chapter_07/11_star_ratings/stars.css (excerpt) .stars div a { background: transparent url(../../css/images/sprite_rate.png) ➥0 0 no-repeat; display: inline-block; height: 23px; width: 12px; text-indent: -999em; overflow: hidden; } .stars a.rating-right { background-position: 0 -23px; padding-right: 6px; } .stars a.rating-over { background-position: 0 -46px; } .stars a.rating-over.rating-right { background-position: 0 -69px; } jQuery: Novice to Ninja (www.sitepoint.com)