2011年7月最好的jQuery教程指南

     <div class="b-art">     <h3><a class="offSite" href="/misc/goto?guid=4958184454654400413" rel="nofollow" target="_blank">How to add admob to your jQuery Mobile app, the right way </a></h3>     <p><a class="offSite" href="/misc/goto?guid=4958184454654400413" rel="nofollow" target="_blank"><img title="admob.png" border="0" alt="admob.png" src="https://simg.open-open.com/show/7950afe08c2118fbab9803da0c07398b.jpg" /></a></p>     <p>This screencast will teach you how to add admob to jQuery mobile with multi page support.</p>     <h3><a class="offSite" href="/misc/goto?guid=4958184456077677065" rel="nofollow" target="_blank">Creating a dashboard view with jQuery Mobile </a></h3>     <p><a class="offSite" href="/misc/goto?guid=4958184456077677065" rel="nofollow" target="_blank"><img src="http://www.ajaxline.com/files/jqpmob.png" /></a></p>     <p>This screencast will teach you how to create a dashboard view similar to the 非死book iphone app. Learn how to style it for a different number of icons and how to create some custom css and add it to your jQuery Mobile application.</p>     <h3><a class="offSite" href="/misc/goto?guid=4958184457489333613" rel="nofollow" target="_blank">Custom jQuery Mobile Themes </a></h3>     <p><a class="offSite" href="/misc/goto?guid=4958184457489333613" rel="nofollow" target="_blank"><img src="http://www.ajaxline.com/files/jqmobtheme.png" /></a></p>     <p>Want to stand out from the crowd? Then, you might be wondering how to create your own custom jQuery Mobile theme. Well, this screencast will teach you how to do exactly that. You will learn how to edit a default jQuery Mobile theme and add your css and theme changes in order to customize it.</p>     <h3><a class="offSite" href="/misc/goto?guid=4958184458914217857" rel="nofollow" target="_blank">Fullscreen Slideshow with HTML5 Audio and jQuery</a></h3>     <p><a class="offSite" href="/misc/goto?guid=4958184458914217857" rel="nofollow" target="_blank"><img src="http://www.ajaxline.com/files/fullscreenSlideshowHtml5.jpg" /></a></p>     <p>In today's tutorial we'll create a fullscreen photo slideshow to illustrate a New York picture series. We will add sounds with the HTML5 audio element in order to give life to the gallery and try to recreate the ambient of this vibrant city.</p>     <h3><a class="offSite" href="/misc/goto?guid=4958184460336351193" rel="nofollow" target="_blank">Animated Text and Icon Menu with jQuery</a></h3>     <p><a class="offSite" href="/misc/goto?guid=4958184460336351193" rel="nofollow" target="_blank"><img src="http://www.ajaxline.com/files/AnimatedTextIconMenu.jpg" /></a></p>     <p>Today we want to show you how to create a slick menu with a nice animation feature on hover. The idea is to make some elements slide out, change and animate the background color of the item and then slide the elements back in with a different color.</p>     <h3><a class="offSite" href="/misc/goto?guid=4958184461748979700" rel="nofollow" target="_blank">Portfolio Image Navigation with jQuery</a></h3>     <p><a class="offSite" href="/misc/goto?guid=4958184461748979700" rel="nofollow" target="_blank"><img src="http://www.ajaxline.com/files/PortfolioImageNavigation.jpg" /></a></p>     <p>Today we want to create a portfolio image navigation template with jQuery. The idea is to show some portfolio items in a grouped fashion and navigate through them in all 2D ways (horizontal/vertical). Either the arrows or the little boxes below the current image can be used in order to navigate.</p>     <h3><a class="offSite" href="/misc/goto?guid=4958184463155842272" rel="nofollow" target="_blank">Cover Flow Remade with CSS and jQuery</a></h3>     <p><a class="offSite" href="/misc/goto?guid=4958184463155842272" rel="nofollow" target="_blank"><img src="http://www.ajaxline.com/files/2011-05-06-cover-flow-remade-with-css-and-jquery.jpg" /></a></p>     <p>Learn how to create an authentic 3D Cover Flow effect in a web browser using CSS and jQuery.</p>     <h3><a class="offSite" href="/misc/goto?guid=4958184464587206175" rel="nofollow" target="_blank">How to Create a jQuery Image Cropping Plugin from Scratch</a></h3>     <p><a class="offSite" href="/misc/goto?guid=4958184464587206175" rel="nofollow" target="_blank"><img src="http://www.ajaxline.com/files/crtuts.jpg" /></a></p>     <p>Web applications need to provide easy-to-use solutions for uploading and manipulating rich content. This process can create difficulties for some users who have minimal photo editing skills. Cropping is one of the most used photo manipulation techniques, and this step-by-step tutorial will cover the entire development process of an image cropping plug-in for the jQuery JavaScript library. </p>     <h3><a class="offSite" href="/misc/goto?guid=4958184466026460263" rel="nofollow" target="_blank">Display your Favorite Tweets using PHP and jQuery</a></h3>     <p><a class="offSite" href="/misc/goto?guid=4958184466026460263" rel="nofollow" target="_blank"><img src="http://www.ajaxline.com/files/1559.jpg" /></a></p>     <p>In this tutorial, we will be writing a PHP class that will fetch, cache, and display your favorite tweets in a beautiful CSS3 interface.</p>     <h3><a class="offSite" href="/misc/goto?guid=4958184467439028609" rel="nofollow" target="_blank">Bubble Slideshow Effect with jQuery</a></h3>     <p><a class="offSite" href="/misc/goto?guid=4958184467439028609" rel="nofollow" target="_blank"><img src="http://www.ajaxline.com/files/1551.jpg" /></a></p>     <p>Today we will be building a jQuery-powered bubble animation effect. It will be a great way to present a set of images on your website as a interesting slideshow. And as the code will be completely modular, you will be able to easily use it and modify it.</p>     <h3><a class="offSite" href="/misc/goto?guid=4958184468847354558" rel="nofollow" target="_blank">Having Fun With CSS3: Spinning Newspapers</a></h3>     <p><a class="offSite" href="/misc/goto?guid=4958184468847354558" rel="nofollow" target="_blank"><img src="http://www.ajaxline.com/files/1543.jpg" /></a></p>     <p>Imagine a cop drama taking place in the 1930s. After a streak of bank heists, a young detective is given the case of his life. He accepts the challenge, and after grueling months of hard work and life-threatening situations, he manages to bring the bad guys to justice.</p>     <p>What follows is a classical device used by film makers of the period - newspapers flashing and spinning towards the camera, praising the heroic feats of our protagonist.</p>     <p>So lets have some fun and build this classical scene using the CSS3 animations capabilities of the new versions of Firefox, Chrome and Safari, picking useful techniques along the way.</p>     <h3><a class="offSite" href="/misc/goto?guid=4958184470278959742" rel="nofollow" target="_blank">Image Upload and Cropping with PHP and Jquery </a></h3>     <p><a class="offSite" href="/misc/goto?guid=4958184470278959742" rel="nofollow" target="_blank"><img src="http://www.ajaxline.com/files/cropimage.jpg" /></a></p>     <p>Image cropping is the most important and required part in social media projects. In this post my friend Arun Kumar Shekar had implemented image cropping functionalities such as upload image file into physical location, cropping image using jquery and resizing image into small resolution. </p>     <h3><a class="offSite" href="/misc/goto?guid=4958184471690995590" rel="nofollow" target="_blank">Hover Image Zoom With JQuery</a></h3>     <p><a class="offSite" href="/misc/goto?guid=4958184471690995590" rel="nofollow" target="_blank"><img src="http://www.ajaxline.com/files/hzoom.png" /></a></p>     <p>In this article you will find little code snippet in JQuery, this time for zooming hovered image.</p>     <h3><a class="offSite" href="/misc/goto?guid=4958184473121096096" rel="nofollow" target="_blank">Sliding Stacked Images With JQuery</a></h3>     <p><a class="offSite" href="/misc/goto?guid=4958184473121096096" rel="nofollow" target="_blank"><img src="http://www.ajaxline.com/files/jquery_sliding_stacked_images_thumb.png" /></a></p>     <p>Tutorial about creating simple slider with jQuery.</p>     <h3><a class="offSite" href="/misc/goto?guid=4958184474533541604" rel="nofollow" target="_blank">Create Dynamic Tabs With JQuery</a></h3>     <p><a class="offSite" href="/misc/goto?guid=4958184474533541604" rel="nofollow" target="_blank"><img src="http://www.ajaxline.com/files/jqdt356.png" /></a></p>     <p>Tabs has become a common feature in web user interface, in this post I create an example creating a dynamic tab with JQuery. In JQuery UI there is already ready to use plugin to create tabbed content, but I did not find a way to adding dynamic tab function.</p>     <h3><a class="offSite" href="/misc/goto?guid=4958184475946023058" rel="nofollow" target="_blank">Create Simple One Page Profile With JQuery</a></h3>     <p><a class="offSite" href="/misc/goto?guid=4958184475946023058" rel="nofollow" target="_blank"><img src="http://www.ajaxline.com/files/jqport.png" /></a></p>     <p>This example create a company profile only using typographic, and just manipulating the type with CSS and JQuery.</p>     <h3><a class="offSite" href="/misc/goto?guid=4958184477365178347" rel="nofollow" target="_blank">Generating the pixellogo from TechCrunch in HTML</a></h3>     <p><a class="offSite" href="/misc/goto?guid=4958184477365178347" rel="nofollow" target="_blank"><img src="http://www.ajaxline.com/files/techcrunch_logo.png" /></a></p>     <p>This article will tell you how to generate this pixellogo with jQuery.</p>     <h3><a class="offSite" href="/misc/goto?guid=4958184478781350428" rel="nofollow" target="_blank">Uploading Files with AJAX </a></h3>     <p><a class="offSite" href="/misc/goto?guid=4958184478781350428" rel="nofollow" target="_blank"><img src="http://www.ajaxline.com/files/ajupoload.png" /></a></p>     <p>Today, I'm going to show you how to do something that - until the last while - has been almost unprecedented: uploading files via AJAX. </p>     <h3><a class="offSite" href="/misc/goto?guid=4958184480213799375" rel="nofollow" target="_blank">How to Submit a Form with Control + Enter </a></h3>     <p><a class="offSite" href="/misc/goto?guid=4958184480213799375" rel="nofollow" target="_blank"><img src="http://www.ajaxline.com/files/submce.png" /></a></p>     <p>You?ve probably seen it on 推ter, Google+, or 非死book. You?ve got a text box, where you write your status/message and then click a button to submit it. But, if you?re lazy like me, you don't like to switch to the mouse to click the button. These services help us out by allowing us to press control + enter to submit. Let's recreate this scenario for our own projects.</p>     <h3><a class="offSite" href="/misc/goto?guid=4958184481628605645" rel="nofollow" target="_blank">Create Cross-Browser Datepickers in Minutes </a></h3>     <p><a class="offSite" href="/misc/goto?guid=4958184481628605645" rel="nofollow" target="_blank"><img src="http://www.ajaxline.com/files/datepickerjqt.jpg" /></a></p>     <p>In this quick tip, I'll show you how to use the new HTML5 date input, and then provide a fallback jQuery UI solution for the browsers which don't yet support this new input type.</p>    </div>