반응형
반응형

http://smashinghub.com/40-free-and-fresh-jquery-plugins-and-tutorials.htm

 

40+ Free and Fresh jQuery Plugins and Tutorials

 

 

Quake Slider

( Demo | Download )

A simple jQuery plugin for creating appealing and functional sliders for your websites.

jQuery Image / Content Slider Plugin: Quake Slider

Freetile.js

( Demo | Download )

This jQuery plugin lets you organize your content in a dynamic and responsive layout so that you can optimally use the screen space.

Freetile.js

Raccordion

( Demo | Download )

Raccordion is a multipurpose responsive accordion plugin that can adjust accordingly with the size of browser width.

jQuery Responsive Horizontal Accordion Image Slider: raccordion

3D Flipping Circle with CSS3 and jQuery

( Demo | Download )

This tutorial helps you learn how to create 3D flipping circles with CSS3 3D transforms and shadows/gradients and jQuery.

3D Flipping Circle with CSS3 and jQuery

jQuery Animated Bar Plugin: jqBar

( Demo | Download )

This plugin will let you create animated vertical and horizontal bars so that you create beautiful bar charts and present your data with some visual effects.

jQuery Animated Bar Plugin: jqBar

Mini Help System with jQuery

( Demo | Download )

This tutorial takes you through the process of creating a mini help system by means of jQuery.

Mini Help System with jQuery

Make a Google Powered Shopping Search Website

( Demo | Download )

With this tutorial, you can learn how to make Google powered shopping search website by using jQuery and PHP.

Make a Google Powered Shopping Search Website

How to Make a Mac OSX-like Animated Folder with CSS3

( Demo | Download )

This is a short tutorial on using CSS3, 3D transforms, gradient and box shadows to create a Mac OSX like animation folder.

How to Make a Mac OSX-like Animated Folder with CSS3

Create a Beautiful Password Strength Meter

( Demo | Download )

Create an appealing password strength meter with the help of this tutorial. The new Complexify jQuery plugin is used in this tutorial.

Create a Beautiful Password Strength Meter

How to Build a ToDo Application with Web SQL and jQuery

( Demo | Download )

Follow this tutorial and build a ToDo application with Web SQL and jQuery. This tutorial will help you understand transactions and let you get started with Web SQl.

How to Build a ToDo Application with Web SQL and jQuery

Responsive Carousel

( Demo | Download )

This carousel script lets you work with mouse, touch friendly devices and keyboard. It includes slide/drag transition that can be applied by adding a data attribute.

Responsive Carousel

iosSlider

( Demo | Download )

With this jQuery plugin, you can create a responsive, customizable and cross-browser content slider.

iosSlider

jQuery Interactive Cycle Slides Plugin: jQSlid

( Demo | Download )

This is another jQuery plugin for parallel sliding that can be used anywhere where sliding functionality is required.

jQuery Interactive Cycle Slides Plugin: jQSlid

gridster.js

( Demo | Download )

Create intuitive drag able layouts with this plugin that allows you dynamically add and remove elements from the grid.

gridster.js

tiltShift.js

( Demo | Download )

This jQuery plugin is designed to replicate the tilt-shift effect by using CSS3 image filters.

tiltShift.js

stickyMojo

( Demo | Download )

This plugin is compatible with Firefox, Chrome, Safari and IE8+, stickyMojo is a fast, lightweight and flexible sticky sidebar plugin.

stickyMojo

Complexify

( Demo | Download )

This jQuery plugin is designed so that your users can correctly estimate the quality of their password.

Complexify - a jQuery Plugin

jQuery Vector Maps

( Demo | Download )

With this jQuery plugin, you can render vector maps easily as it uses resizable Scalable Vector Graphics (SVG).

jQuery Vector Maps

FrameWarp

( Demo | Download )

This jQuery plugin helps you display pages in a neat overlay.

FrameWarp

Swatch Book with CSS3 and jQuery

( Demo | Download )

In this tutorial, you will learn creating a swatch book by using CSS transforms and transitions and jQuery plugin as well.

Swatch Book with CSS3 and jQuery

Triple Panel Image Slider

( Demo | Download )

This tutorial will walk you through the process of creating triple panel image slider with a 3D look.

Triple Panel Image Slider

Fullscreen Slit Slider with jQuery and CSS3

( Demo | Download )

Now, you can learn how to create a full screen slideshow by using jQuery and CSS animations.

Fullscreen Slit Slider with jQuery and CSS3

Build a Filterable Portfolio Using jQuery Isotope

( Demo | Download )

Here, you will see how to see jQuery Isotope plugin to create a filterable portfolio.

Build a Filterable Portfolio Using jQuery Isotope

Vertical Showcase Slider with jQuery and CSS Transitions

( Demo | Download )

Follow this tutorial to create a vertical showcase slider with jQuery and CSS transitions. You can create a full screen slider that can move its section in opposite directions.

 

Fullscreen Video Slideshow with Bigvideo.js

( Demo | Download )

This tutorial is about creating a full screen video slideshow by using a jQuery plugin called BigVideo.js that is mostly used for big background video.

Fullscreen Video Slideshow with Bigvideo.js

Custom DropDown List Styling

( Demo | Download )

With this tutorial, you can learn how to create a custom drop down list styling for various purposes.

Custom DropDown List Styling

3D Thumbnail Hover Effects

( Demo | Download )

Follow this tutorial if you want to learn how to create 3D thumbnail hover effect with the help of CSS 3D transforms and jQuery.

3D Thumbnail Hover Effects

Creative Web Typography Styles

( Demo | Download )

In this tutorial, the process of creating web typography styles with several CSS techniques and lettering.js.

Creative Web Typography Styles

Create a Parallax Scrolling Website Using Stellar.js

( Demo | Download )

Learn the use of parallax scrolling effects with this tutorial that uses Stellar.js and of course with some imagination.

Create a Parallax Scrolling Website Using Stellar.js

Responsive, Multi-Level Navigation

( Demo | Download )

By using media queries and jQuery, you can accommodate large, multi-level navigation menus while keeping external resources minimal and markup simple.

Big Menus, Small Screens: Responsive, Multi-Level Navigation

Adding a jQuery Countdown to Our “Coming Soon” Page

( Demo | Download )

Give your countdown timer some functionality to make your Coming Soon page look appealing.

Adding a jQuery Countdown to Our “Coming Soon” Page

Create a Customized HTML5 Audio Player

( Demo | Download )

This tutorial will walk you through the process of creating a customized HTML5 audio player.

Create a Customized HTML5 Audio Player

Make a jQuery Count Up Timer

( Demo | Download )

This tutorial helps you learn creating jQuery count up timer.

Quick Tip: Make a jQuery Count Up Timer

Make A Simple AJAX Note Taking App

( Demo | Download )

If you want to create an AJAX note taking app, then you should follow this tutorial that will teach you how to use PHP and jQuery to create a simple AJAX interaction.

Let’s Make A Simple AJAX Note Taking App

Bild a simple weather webapp

( Demo | Download )

Here, you will be shown how to use HTML5 geolocation API and Yahoo API along with jQuery to build an amazing weather app.

How to use Geolocation and Yahoo’s APIs to build a simple weather webapp

Growing Thumbnails Portfolio

( Demo | Download )

Follow this tutorial to see how you can use HTML5, jQuery and CSS3 to create growing thumbnail portfolio.

Growing Thumbnails Portfolio

How to grab Dribbble feed with jQuery and CSS3

( Demo | Download )

With this tutorial, you will be taught to grab dribbble’s API and integrate them with your designs.

How to grab Dribbble feed with jQuery and CSS3

Custom Login Form Styling

( Demo | Download )

A simple and easy to follow tutorial on creating custom login form styling by using CSS and HTML5.

Custom Login Form Styling

Slicebox Revised

( Demo | Download )

With this improved version of jQuery plugin, you can create 3D image slider.

Slicebox Revised

Photo Booth Strips with Lightbox

( Demo | Download )

Here is a tutorial on creating neat and scrollable booth strips with Lightbox 2, and later you will also be learnt how to make them responsive and touch friendly.

Photo Booth Strips with Lightbox

A Content Flip Plugin

( Demo | Download )

This jQuery plugin can be used to create booklet-like components in order to create a page flip navigation.

A Content Flip Plugin

Timeline Portfolio

( Demo | Download )

This is another jQuery plugin for showing a chronological series of events. With this plugin, you can easily embed al kind of media and therefore it is perfect for a portfolio.

Timeline Portfolio

Making a Page Flip Magazine with turn.js

( Demo | Download )

Another jQuery plugin called turn.js that is used to create a page flip effect is used in this tutorial along with PHP, CSS3 and jQuery to create a page flip magazine.

반응형
반응형

http://speckyboy.com/2012/12/10/jquery-plugins-2012/

 

50 Most Useful jQuery Plugins from 2012

Topics]Javascript / jQuery / Web DesignAuthor]

 

With hundreds upon hundreds (if not thousands) of new plugins being released this year – what a great jQuery year it has been. From that colossal total we have worked really hard filtering down all of the those plugins to bring you the 50 that we feel are the most innovative, most ground-breaking and, more importantly, the most useful.

Last year, we gave you a roundup of the top 50 jQuery plugins from 2011. And today, we have put together the top jQuery plugins of this year, that is, 2012.

We have split all of the plugins into the following categories: Web Page Layout Plugins, Navigation Plugins, Form Plugins, Slider & Carousel Plugins, Chart & Graph Plugins, Image Effect Plugins, Video Plugins, and finally, everything else in-between. And mixed in with all of that you will find plenty of plugins that will help with your responisve layouts.

Web Page Layout Plugins

equalize.js

equalize.js

equalize.js is a useful jQuery plugin for equalizing the height or width of any element.

equalize.js →

Freetile.js

Freetile.js

Freetile will organize your content in an efficient, dynamic and responsive layout. It can be applied to a container element and it will arrange it's children in a layout that makes optimal use of screen space, by "packing" them in tightly.

Freetile.js →

gridster.js

gridster.js

Gridster is a plugin thathelps you build intuitive draggable layouts from elements spanning multiple columns. You can even dynamically add and remove elements from the grid.

gridster.js →

Zoomooz.js

Zoomooz.js

Zoomooz.js is an easy-to-use plugin for making any web page element zoom. It supports 3D transformations, hides elements that are not shown while transforming, can have kinetic scrolling and eve works in Internet Explorer.

Zoomooz.js →

Wookmark

Wookmark

Wookmark is a plugin for creating a dynamic, multi-column layouts. It lays out a series of elements in a dynamic column grid.

Wookmark →

jQuery HiddenPosition

jQuery HiddenPosition

jQuery HiddenPosition is a plugin that lets you position any element to any element, even if they are hidden. This plugin works like the position plugin from jQuery UI, except for the addition of also being able to work with hidden elements.

jQuery HiddenPosition →

Stellar.js

Stellar.js

Stellar.js is a jQuery plugin that provides parallax scrolling effects to any scrolling element.

Stellar.js →

turn.js

turn.js

turn.js is a ightweight (only 15K) plugin for jQuery that adds a beautiful transition similar to real pages in a book or magazine for HTML5. It will work on tablets and smartphones.

turn.js →

Responsive Measure

Responsive Measure

Responsive Measure is a simple script that allows you to pass in a selector (ideally the container where your primary content will go) which generates the ideal font size needed to produce the ideal measure for your text.

Responsive Measure →

jQuery Scroll Path

jQuery Scroll Path

jQuery Scroll Path is a plugin that lets you define your own custom scroll path. It uses canvas flavored syntax for drawing paths, using the methods moveTo, lineTo and arc. To help with getting the path right, a canvas overlay with the path can be enabled when initating the plugin.

jQuery Scroll Path →

Navigation Plugins

HorizontalNav

HorizontalNav

HorizontalNav →

stickyMojo

stickyMojo

stickyMojo is a lightweight, fast and flexible sticky sidebar plugin. It is and compatible with Firefox, Chrome, Safari, and IE8+ and will degrade gracefully in older versions of IE.

stickyMojo →

ddSlick

ddSlick

ddSlick is lightweight plugin that allows you to create a custom drop down with images and descriptions.

ddSlick →

jQuery Collapse

jQuery Collapse

jQuery Collapse delivers an accessible and lightweight solution to a widely adopted interface pattern (known as progressive disclosure). It includes features like cookie persistence, ARIA compliance, and is designed to be flexible and modular enough to be used in many different scenarios.

jQuery Collapse →

jQuery Accordion

jQuery Accordion

The idea behind Akordeon is to provide a lightweight and customizable interface for collapsible panels that can hold any kind of data in a limited space.

jQuery Accordion →

Form Plugins

jQuery Complexify

jQuery Complexify

Complexify helps your users accurately gauge the quality of their password and then give them visual feedback to enforce a minimum level of security.

jQuery Complexify →

jQuery File Upload

jQuery File Upload

jQuery File Upload is a file upload widget with multiple file selection, drag & drop support, progress bars and preview images.

jQuery File Upload →

jQuery Credit Card Validator

jQuery Credit Card Validator

The jQuery Credit Card Validator detects and validates credit card numbers. It’ll tell you the detected credit card type and whether the number length and Luhn checksum are valid for the type of card.

jQuery Credit Card Validator →

Filtrify

Filtrify

Filtrify is an advanced tag filtering plugin. You can search tags within tags and filter items by multiple tags from different categories and get live feedback on the number of items containing related tags.

Filtrify →

mailcheck

mailcheck

Mailcheck is a jQuery plugin that suggests the right domain when your users misspell an email address.

mailcheck →

Slider & Carousel Plugins

Responsive Carousel

Responsive Carousel

responsive-carousel is a carousel script that will work with mouse, touch, and keyboard. The default package includes the slide/drag transition that you can apply by adding a data attribute and including some additional CSS. There are also other extensions available within the source folder, such as flip and fade transitions, autoplay, keyboard handling, pagination, and more.

Responsive Carousel →

iosSlider

iosSlider

iosSlider is a jQuery plugin for a responsive, customizable and cross-browser content slider. It can be used as a content slider, carousel, scrolling website banner, or an image gallery.

iosSlider →

RSlider

RSlider

RSlider is a full screen responsive image and content slider. With a nice and simple design it will adjust automatically to the width of your browser.

RSlider →

Fresco

Fresco

Fresco is a responsive lightbox plugin. It can be used to create stunning overlays that work great at any screen size, in all browsers on every device. It comes with fullscreen zoom, retina-ready skins, Youtube and Vimeo integration for HTML5 video and a powerful Javascript API.

Fresco →

BookBlock: A Content Flip Plugin

BookBlock: A Content Flip Plugin

BookBlock is a jQuery plugin that can be used for creating booklet-like components that allow a "page flip" navigation. Any content can be used, such as images or text.

BookBlock: A Content Flip Plugin →

Adaptor

Adaptor

Adaptor is a lightweight content slider that offers a simple interface to create cool 2D or 3D slide animation transitions. Currently, there is only 3D support for webkit and Firefox, all other browsers will fallback gracefully to a simple fade transition.

Adaptor →

rcarousel

rcarousel

rcarousel is a jQuery UI continuous carousel with some cool features. It is highly customizable and supports even older browsers (Not IE6 though).

rcarousel →

Rhinoslider

Rhinoslider

Rhinoslider is a flexible multiple effects slider/slideshow. It can be used as a simple fading or sliding jQuery slideshow or as a rich effects jQuery slider.

Rhinoslider →

Sequence.js

Sequence.js

"Sequence is a slider plugin with infinite style." It provides the complete functionality for a website slider without forcing you to use a set theme. In fact, Sequence has no in-built theme.

Sequence.js →

Glisse.js

Glisse.js

Glisse.js is a simple, responsive and fully customizable jQuery photo viewer.

Glisse.js →

µslider

µslider

µslider is a jQuery content slider plugin. It’s very easy to use because it only has a few essential options that can be configured straightforwardly.

µslider →

ResponsiveSlides.js

ResponsiveSlides.js

ResponsiveSlides.js is a tiny jQuery plugin that creates a responsive slideshow using images inside a single container.

ResponsiveSlides.js →

Chart & Graph Plugins

Morris.js

Morris.js

Morris.js is a lightweight library that uses jQuery and Raphaël to make drawing time-series graphs easy.

Morris.js →

jQuery Org Chart

jQuery Org Chart

jQuery OrgChart is a plugin that allows you to render structures with nested elements in a easy-to-read tree structure.

jQuery Org Chart →

Web Typography Plugins

Bacon

Bacon

Bacon is a jQuery plugin that allows you to wrap text around a bezier curve or a line.

Bacon →

Textualizer

Textualizer

Textualizer is a cool plugin that allows you to transition through blurbs of text.

Textualizer →

slabText

slabText

slabText is a jQuery plugin that splits headlines into rows before resizing each row to fill the available horizontal space.

slabText →

trunk8

trunk8

trunk8 is a text truncation plugin to jQuery. When applied to a large block of text, it will cut off just enough text to prevent it from spilling over.

trunk8 →

Image Effect Plugins

tiltShift.js

tiltShift.js

tiltShift.js is an awesome jQuery plugin that uses the CSS3 image filters to replicate the tilt-shift effect.

tiltShift.js →

jQuery Picture

jQuery Picture

jQuery Picture is a plugin that adds support for responsive images to your web pages. It supports both figure elements with some custom data attributes.

jQuery Picture →

ImageMapster

ImageMapster

ImageMapster lets you activate HTML image maps without using Flash. It works just about everywhere that Javascript does, including modern browsers, Internet Explorer 6, and mobile devices like iPads, iPhones and Androids.

ImageMapster →

Responsive Img

Responsive Img

Responsive Img is a jQuery plugin that swaps an image’s src attribute based on its container’s width when the DOM is ready and when the browser is resized. Using a PHP file, Responsive Img creates new images on the fly the first time they’re needed and puts them on your server. Therefore, you can add Responsive Img to any site, without creating new images.

Responsive Img →

Backstretch

Backstretch

Backstretch is a simple plugin that allows you to add a dynamically-resized background image to any page.

Backstretch →

And all the rest…

jQuery Transit

jQuery Transit

jQuery Transit creates super-smooth CSS3 transformations and transitions for jQuery.

jQuery Transit →

noty

noty

noty is a jQuery notification plugin that lets you easily create alert, success, error and confirmation messages.

noty →

jQuery Map Marker

jQuery Map Marker

The jQuery Map Marker Plugin makes it easy to put multiple markers on a map using Google Map API V3.

jQuery Map Marker →

jHERE

jHERE

jHERE is a lightweight (only 4kb &# 1.95kb Gzipped) jQuery plugin that allows you to easily add interactive maps to your website. You get a powerful map API, highly customizable markers, event handling and info bubbles and comes with KML support and data visualization via heatmaps.

jHERE →

jQuery Vector Maps

jQuery Vector Maps

JQVMap is a jQuery plugin that uses resizable Scalable Vector Graphics (SVG) to renders vector maps. It works in all modernern browsers and legacy support for older versions of IE 6-8 is provided via VML.

jQuery Vector Maps →

SocialCount

SocialCount

SocialCount is a lightweight (2.93KB after Min+GZip) and easy to use jQuery plugin for progressively enhanced, lazy loaded, mobile friendly social networking widgets. It currently supports Facebook, Twitter, and Google+.

SocialCount →

Tooltipster

Tooltipster

Tooltipster is a lightweight and easy to style jQuery plugin that helps you easily create clean HTML5 validated tooltips.

Tooltipster →

BigVideo.js

BigVideo.js

BigVideo.js makes it easy to add fit-to-fill background video to your website. It can play silent ambient background video, or a series of videos. you can also use it to show large background images.

BigVideo.js →

Calendario

Calendario

Calendario is an experimental jQuery plugin for trying out some grid layouts that can be applied to calendars. The aim is to provide a suitable layout for both, small and big screens and keeping the calendar structure fluid when possible.

Allofthelights.js →

반응형
반응형

http://visionmedia.github.com/uikit/

Modern UI components for the modern web

 

UIKit is a small collection of flexible, decoupled jQuery JavaScript components for the modern web. With an emphasis on structure-only styling it's easy to style UIKit to match your application, no preprocessor variables, just raw CSS structure! As a result most of the styling you see in this document is for demonstration only.

반응형
반응형

 jQuery Mobile Galley - http://www.jqmgallery.com/

반응형
반응형

14 Handy jQuery Code Snippets for Developers

The jQuery dev team has been releasing code updates frequently since the project began. JavaScript developers have never had an easier framework to code on frontend interfaces. For anybody just getting started in web development you can be certain to run into some jQuery code on the web.

I have put together a series of 14 helpful jQuery code snippets you may save and copy to use at your own discretion. These are merely blank templates you can edit to change variables and parameters matching your own script. I’m sure even experienced developers may find some of these snippets beneficial and shaving off time during code sessions.

1. Hover On/Off

$("a").hover(
  function () {
    // code on hover over
  },
  function () {
    // code on away from hover
  }
);

Source

The jQuery hover method is a quick solution for handling these events. You can determine whether the user is just hovering over your element, or if the user is just leaving the hover state. This allows for two custom functions where you can run two distinct sets of code.

2. Prevent Anchor Links from Loading

$("a").on("click", function(e){
  e.preventDefault();
});

Source

When you create JavaScript applications there are plenty of times where you need a link or button to just do nothing. This is often for triggering some type of dynamic effect, such as a hidden menu or Ajax call. By using the event object during any click, we can manipulate the data sent back to the browser URL. In this scenario I am stopping the whole href from loading anything at all!

3. Scroll to Top

$("a[href='#top']").click(function() {
  $("html, body").animate({ scrollTop: 0 }, "slow");
  return false;
});

Source

You have probably seen this functionality becoming popular on all the new social networking websites. I have definitely seen this technique appear on infinite-scrolling layouts such as Tumblr and Pinterest.

The code is very minimal but powerful in some layouts. You are offering a simple link or button display which behaves like a “back to home” link. By using the animate effect in jQuery users won’t notice the jump all at once, but instead over a brief period of milliseconds.

4. Ajax Template

$.ajax({
  type: 'POST',
  url: 'backend.php',
  data: "q="+myform.serialize(),
  success: function(data){
    // on success use return data here
  },
  error: function(xhr, type, exception) { 
    // if ajax fails display error alert
    alert("ajax error response type "+type);
  }
});

Source

Passing form data via Ajax is one of the most common uses for jQuery. As a web developer myself I can’t think how many times I am using the ajax method in each project. The syntax can be awfully confusing to memorize, and checking the documentation gets old after a while. Consider copying this small template for usage in any future Ajax-powered webapps.

5. Animate Template

$('p').animate({
    left: '+=90px',
    top: '+=150px',
    opacity: 0.25
  }, 900, 'linear', function() {
    // function code on animation complete
});

Source

As we saw the animate method earlier, this is very powerful for creating dynamic movement on your page. CSS3 transitions are a whole lot easier in some circumstances. But with animate you can manipulate multiple objects or CSS properties all at once!

It’s a very powerful library to get into and start playing with. If you haven’t used any of the jQuery UI library I suggest spending an hour or two practicing with demo stuff. You can animate any object on the page into almost any position or updated style.

6. Toggle CSS Classes

$('nav a').toggleClass('selected');

Source

Adding and removing CSS classes on HTML elements is another fairly common action. This is one technique you may consider with selected menu items, highlighted rows, or active input elements. This newer method is simply quicker than using .addClass() and .removeClass() where you can put all the code into one function call.

7. Toggle Visibility

$("a.register").on("click", function(e){
  $("#signup").fadeToggle(750, "linear");
});

Source

Fading objects out of the document is very common with modern user interfaces. You can always have small popup boxes or notifications which need to display and then hide after a few seconds. Using the fadeToggle function you can quickly hide and display any objects in your DOM. Keep this code handy if you will ever need such functionality in a website interface.

8. Loading External Content

$("#content").load("somefile.html", function(response, status, xhr) {
  // error handling
  if(status == "error") {
    $("#content").html("An error occured: " + xhr.status + " " + xhr.statusText);
  }
});

Source

Believe it or not you can actually pull external HTML code from a file right into your webpage. This doesn’t technically require an Ajax call, but instead we’re parsing the external files for whatever content they have. Afterwards this new content may be loaded into the DOM anywhere in the page.

9. Keystroke Events

$('input').keydown(function(e) {
  // variable e contains keystroke data
  // only accessible with .keydown()
  if(e.which == 11) {
     e.preventDefault();
  }
});

$('input').keyup(function(event) {
  // run other event codes here							  
});

Source

Dealing with user input is another grey area I have come across. The jQuery keydown and keyup event listeners are perfect for dealing with such experiences. Both of these methods are called at very different times during the keystroke event. So make sure you have the application planned out before deciding which one to use.

10. Equal Column Heights

var maxheight = 0;
$("div.col").each(function(){
  if($(this).height() > maxheight) { maxheight = $(this).height(); }
});

$("div.col").height(maxheight);

Source

This is a small jQuery snippet I ran into while surfing the web earlier in the year. While this is not the most recommended solution for your layout display, this code snippet may come in handy down the line. CSS column heights are not always matched and so this dynamic solution using JavaScript is worthy of some insight.

11. Append New HTML

var sometext = "here is more HTML";
$("p#text1").append(sometext); // added after
$("p#text1").prepend(sometext); // added before

Source

Using the .append() method we can quickly place any HTML code directly into the DOM. This is similar to .load() we saw earlier, except these functions can take HTML from any source. You could setup a brand new variable of HTML text or even clone HTML right from your webpage. These properties are often used in conjunction with Ajax response data.

12. Setting & Getting Attributes

var alink = $("a#user").attr("href"); // obtain href attribute value
$("a#user").attr("href", "http://www.google.com/"); // set the href attribute to a new value
$("a#user").attr({
  alt: "the classiest search engine",
  href: "http://www.google.com/"
}); // set more than one attribute to new values

Source

This property is relatively straightforward but I always see these problems in StackOverflow. You can pull the .attr() method on any HTML element and pass in the attribute string value. This will return the value of that attribute, whether it’s ID or class or name or maxlength. All HTML attributes may be accessed through this syntax and so it’s a very powerful method to keep in mind.

13. Retrieve Content Values

$("p").click(function () {
  var htmlstring = $(this).html(); // obtain html string from paragraph
  $(this).text(htmlstring); // overwrite paragraph text with new string value
});
	
var value1 = $('input#username').val(); // textfield input value
var value2 = $('input:checkbox:checked').val(); // get the value from a checked checkbox
var value3 = $('input:radio[name=bar]:checked').val(); // get the value from a set of radio buttons

Source

Instead of appending new HTML content into the document you may also pull out the current HTML content from any area in your webpage. This can be an entire list item block, or the contents of a paragraph tag. Also the .val() property is used on input fields and form elements where you cannot get inside the object to read anything further.

14. Traversing the DOM

$("div#home").prev("div"); // find the div previous in relation to the current div
$("div#home").next("ul"); // find the next ul element after the current div
$("div#home").parent(); // returns the parent container element of the current div
$("div#home").children("p"); // returns only the paragraphs found inside the current div

Source

This idea of traversing through object nodes is deep enough to be an article within itself. But for any intermediate or advance jQuery developers who understand this topic, I’m sure these quick snippets will help in future problem solving.

The goal is often to pull data from another element related to the currently active element(clicked, hovered, etc). This could be the container(parent) element or another inner(child) element, too. There are lots of tools for pulling data from around the DOM so don’t be afraid of experimentation.



 

반응형
반응형

jQuery 버전은 점점 올라가는데, 사용은 맨날 쓰던것만.

 

http://blog.jquery.com/2012/08/30/jquery-1-8-1-released/

 

http://blog.jquery.com/2012/11/13/jquery-1-8-3-released/

jQuery 1.8.3 Change Log

Ajax

  • #12583: IE8 HTML bug (Chinese translation)
  • #12635: jquery 1.8.2 fails ajax calls in IE9 because it assumes cross domain when default port is in ajax url

Attributes

  • #10943: JQuery 1.7.1 does not properly set tabindex property on cloned element in IE7

Core

  • #12690: Minimum JS File Contains non-ASCII Character

Css

  • #10227: $('body').show() does'nt work if body style is set to display:none
  • #12537: element.css('filter') returns undefined in IE9

Deferred

  • #12665: Callbacks objects with "unique" flag will iterate over a function's methods when it is added a second time

Effects

  • #8685: Animations should keep track of animation state in order to properly address stacked animations
  • #12497: jQuery 1.8.1 transitions crashing android 2.3.4 browser
  • #12837: All animations break after zooming a lightbox on the iPad

Selector

  • #12643: Upgrade from 1.3.2 to 1.8.2 gives an Uncaught TypeError
  • #12648: Can not correctly detect focus for DIVs with contenteditable in Chrome and Safari

Support

  • #12357: jQuery 1.8.0 Not parseable by XUL Runner Applications
반응형

+ Recent posts