반응형

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
반응형
반응형

jquery event bind delegate live on 비교분석

http://youtu.be/CafBcWxssgc

 

반응형
반응형

20 New Essential jQuery Plugins

Latest jQuery Plugins and scripts for web designers and developers. Today I selected 20 essential jQuery plugins, sliders, image galleries, slideshow plugins, jQuery navigation menus, interactive maps, mobile interfaces , accordion menus, tooltips plugins and many other useful jQuery scripts collected in one place.

jQuery plugin are constantly being released, and it’s no surprise since it’s insanely popular, and for good reason. The only problem is being able to sort through them all to find the good ones. That’s why we’re always on the lookout, and we will found some good ones for you.

You may be interested in the following modern trends related articles as well.

Please feel free to join us and you are always welcome to share your thoughts even if you have more reference links related to other tips and tricks that our readers may like.

Don’t forget to Subscribe to  our  RSS-feed subscribe to our RSS-feed and Follow  us on  Twitter follow us on Twitter — for recent updates and follow me on Google+ Googleplus

20 New jQuery Plugins

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript. (via jquery.com)

jQuery Lightweight Tooltip Plugin :Tooltipster

jQuery Lightweight Tooltip Plugin :Tooltipster

Tooltipster is a lightweight jQuery plugin that enables you to easily create clean, HTML5 validated tooltips. The plugin is small-in-size (4.8kb minified), works fast and can be customized with ease.

Its look can be changed with CSS (theme support) and the position of the arrow, following the mouse, delay/period of the appearance can all be defined.

Website: http://calebjacob.com/tooltipster/

RoyalSlider – Professional Image Gallery and Responsive Content jQuery Slider Plugin

RoyalSlider – Professional Image Gallery and Responsive Content jQuery Slider Plugin

Royal Slider is a professional touch-enabled jQuery plugin for displaying any HTML content (images, videos, text..) inside a slider interface and comes with awesome features.

The slider focuses on providing great user experience on every desktop and mobile device.

The slider is very customizable with 50+ options, 4 skins with PSD files, 9 pre-built templates (and more coming) and full CSS styling.

Compatibility: All Modern Browsers
Website: http://dimsemenov.com/plugins/royal-slider/
Demo: http://dimsemenov.com/plugins/royal-slider/templates/

Cross-Browser JavaScript Drag & Drop File Uploader: FileDrop

Cross-Browser JavaScript Drag and Drop File Uploader: FileDrop

FileDrop is a JavaScript cross-browser class for quickly creating drag & drop and AJAX (multiple) file uploader interfaces.

The class doesn’t require any JavaScript frameworks and works cross-browser, including IE6 (with iFrame fallback).

Compatibility: All Modern Browsers
Website: http://proger.i-forge.net/FileDrop_%E2%80%93_cross-browser_JavaScript_Drag_-amp_Drop_file_upload/7CC

Really Simple Slideshow: A Flexible Larger Slider jQuery Plugin

Really Simple Slideshow: A Flexible Larger Slider jQuery Plugin

Really Simple Slideshow is a flexible jQuery plugin for creating image sliders of any kind. Images are loaded dynamically as each one is required, allowing for larger slideshows without having to pre-load lots of images.

The plugin converts any list of images into a slideshow, it can display captions with each slide, include links and there are multiple transition effects.

Compatibility: All Modern Browsers
Website: http://reallysimpleworks.com/slideshow/
Download:https://github.com/reallysimple/Really-Simple-Slideshow

Responsive jQuery Slider: iView Slider

Responsive jQuery Slider: iView Slider

iView Slider is a responsive jQuery image slider plugin with animated captions, for featuring any type of content (images, HTML, video). Easily add unlimited number of slides and captions. Use it as image slider, image gallery, banner rotator, banner ads, or even presentation.

The plugin has support for responsive layouts down to mobile and it works well with touch interfaces.

Slider has 35 built-in transition effects which is completely compatible with all major browsers (including ie6 to ie9, Firefox, Chrome, Opera, Safari) and mobile platforms like iOS / Android.

Requirements: jQuery & Raphael
Website: http://iprodev.com/2012/07/iview/
Demo:http://iprodev.com/iview/

Lightweight Framework For Mobile Web Apps: Sidetap

Lightweight Framework For Mobile Web Apps: Sidetap

Sidetap is a lightweight framework for mobile web apps (2kb minified, gzipped).

The framework actually focuses on providing a flexible side-navigation similar to the one we know from Facebook’s mobile app, and, once the navigation part is solved, it is pretty easy to build a simple mobile web app.

Lightweight Sidetap only weighs 2k when minifyied and gzipped!

Device Support Sidetap aims to always deliver the best possible experience for all devices by starting with a basic experience and progressively enhancing it for more capable devices.

Less Decisions to Make By embracing convention over configuration, Sidetap lets you start building your mobile interfaces right away.

Simple Sidetap provides a flexible foundation for navigating between content panels on mobile devices using an easy-to-use syntax.

Requirements: jQuery or Zepto.js
Compatibility: All Modern Browsers
Website: http://sidetap.it/
Demo:http://sidetap.it/demo/stonehenge/index.html
Download:https://github.com/harvesthq/Sidetap

Javascript Slideshow For Flickr Images :Flickrshow

Javascript Slideshow For Flickr Images :Flickrshow

Flickrshow is a simple JavaScript slideshow for Flickr images.

The JavaScript slideshow doesn’t require any development expertise but, if jQuery is detected, it can function like any other jQuery plugin.

It has the ability to display images of a specific user, set, group, gallery and/or tags.

The number of images to be shown “per page”, autoplay being on/off, user control being on/off and the interval between each item can all be defined.

Website: http://www.flickrshow.co.uk/
Download: https://github.com/beseku/javascript.flickrshow

HTML Generator for jQuery Mobile Framework: jqmPhp

HTML Generator for jQuery Mobile Framework: jqmPhp

jqmPhp is an open source HTML code generator for jQuery mobile framework, the project that aims to simplify using jQuery Mobile with PHP.

jqmPhp is a package of PHP classes that facilitates the creation HTML files for use with jQuery Mobile Framework. All classes in the jqmPhp package can be converted to string and printed with an echo function.

Website: http://www.jqmphp.com/
Download: http://code.google.com/p/jqmphp/downloads/list

UI Notifications Framework: Backbone.Notifier

UI Notifications Framework: Backbone.Notifier

Backbone.Notifier is a powerful UI notifications framework for displaying and controlling UI notifications.

It is built on top of jQuery, Backbone.js + Underscore.js and has many cool features like a 3D module or animations support.

The notifications can be displayed on the top or in the middle, modal notifications exist and it is possible to set custom styles via CSS + JS API.

Requirements: jQuery, Backbone.js and Underscore.js
Compatibility: All Major Browsers
Website: http://e-w.co.il/backbone.notifier/
Download: https://github.com/ewebdev/backbone.notifier/

Easiest Google Maps Integration With GMaps.js

Easiest Google Maps Integration With GMaps.js

GMaps.js, is a jQuery plugin, allows Google Maps integration in a easiest way. Google Maps, like any other Google product is already easy-to-use and their API is not that complicated to work with.

Besides adding a standard map of a specific location, we can define the zoom level, add markers, get the location of a user (HTML5 geolocation), define routes, draw polylines and more with only few lines of code.

Requirements: jQuery
Website: http://hpneo.github.com/gmaps/
Demo:http://hpneo.github.com/gmaps/examples.html
Download:https://github.com/HPNeo/gmaps

Chronoline.js : JavaScript Library For Display Graphical Timeline Of Events

Chronoline.js : JavaScript Library For Display Graphical Timeline Of Events

Chronoline.js is a JavaScript library for creating a chronological graphical timeline of events.

The timeline is is displayed horizontally, list of dates and events, it can generate a graphical representation of schedules, historical events, deadlines, and events placed on it can be any days long and details about the events are shown in a tooltip when hovered.

Requirements: Raphael.js, jQuery, jQuery qTip2 plugin
Compatibility: All Modern Browsers
Website: http://stoicloofah.github.com/chronoline.js/

JavaScript WYSIWYG Editor With Drag ‘n’ Drop : Redactor

JavaScript WYSIWYG Editor With Drag ‘n’ Drop : Redactor

Redactor is a free JavaScript WYSIWYG editor with drag ‘n’ drop images and files on the web. Redactor powered by jQuery its have clear interface.

It auto-converts textarea fields into an editor and the editor is capable of all the major actions (text-styling, adding image/file/video/tables/lists).

Compatibility: All Modern Browsers
Website: http://redactorjs.com/
Demo: http://redactorjs.com/examples/

Awesome Scrolling Effects jQuery Plugin: SuperScrollorama

Awesome Scrolling Effects jQuery Plugin: SuperScrollorama

I m sure you not forget the previous version “Scrollorama, the popular jQuery plugin creating scrolling effects in scrolling of web pages.

There is now a superior version named SuperScrollorama by the same developer which offers more and complicated animations.

It makes use of the feature-rich TweenMax and the Greensock Tweening Engine (make sure you check its license before using) for accomplishing the effects.

Compatibility: All Modern Browsers
Website: http://johnpolacek.github.com/superscrollorama/
Download:https://github.com/johnpolacek/superscrollorama

Drop Down Menus With Images jQuery Plugin :ddSlick

Drop Down Menus With Images jQuery Plugin :ddSlick

ddSlick, a free lightweight jQuery plugin for creating drop down menus (list menus) with images and description, list-menus with a better look and more information.

It works as a drop-down menu where we can use images and description besides a simple text.

Compatibility: All Modern Browsers
Website: http://designwithpc.com/Plugins/ddSlick

Awesome jQuery Calendar :jQuery Verbose Calendar

Awesome jQuery Calendar :jQuery Verbose Calendar

jQuery Verbose Calendar is an awesome jquery plugin created by John Patrick Given (software developer & interface designer), The jQuery plugin creating a calendar that shows the whole months and days of a year at the same time and you can also change month and year.

When its loaded, it auto-scrolls to “today date” and displays the day names when hovered to any date in a tooltip.

Requirements jQuery + Tipsy & jQuery.ScrollTo plugins
Compatibility All Major Browsers
Website: http://iamjpg.github.com/jQuery-Verbose-Calendar/
Download; https://github.com/iamjpg/jQuery-Verbose-Calendar

Vector Maps With jQuery, Vector Graphic Maps for Modern Browsers :JQVMAP

Vector Maps With jQuery, Vector Graphic Maps for Modern Browsers :JQVMAP

JQVMap is a jQuery plugin for render vector graphic maps by using SVG for modern browsers and VML for the rest.

It is a heavily modified version of another plugin, jVectorMap, and comes withready-to-use maps of “world, USA, Europe and Germany”.

There are several customization options for beautifying the maps including colors, borders or their opacity.

Maps can have zooming enabled or not, show tooltips of data when hovered and there is callback for clicks.

Compatibility: All Modern Browsers
Website: http://jqvmap.com/
Download: https://github.com/manifestinteractive/jqvmap

jCS Media Library (jCSML) For Creating Cross-Browser Animation

jCS Media Library (jCSML) For Creating Cross-Browser Animation

jCS Media Library (jCSML) is powered by jQuery and it is specifically designed for creating cross-browser animation and be able to run them everywhere without having to tweak anything for individual browsers or platforms.

jCSML create flash-quality animations can be built that will run from IE7 all the way to the iPad/iPhone without changing a single line of code. It can produce highly effective animations using the jCSML scripting construct. The animations can also be easily packaged up and sold like .SWF files.

JCSML works everywhere like IE7 browsers, android Or an iPad/iPhone.

Requirement: jQuery & jQuery easing library
Compatibility: All Major Browsers
Website: http://jcsml.com/
Demo: http://jcsml.com/pageshell.html?root=Tutorials&target=Starship#
Download: http://www.jcsml.com/pageshell.html?root=PurchasePages&target=PurchasePage&TOCEnabled=FALSE

minjs: Lightweight JavaScript Components

minjs: Lightweight JavaScript Components

minjs is a collection of independent JavaScript components, built on jQuery, that aims to accomplish a specific job with lightweight code.

minjs stays out of your way. It does not dictate how you to design your UI. It tries to make no assumptions about the layout of the HTML or CSS it’s running in.

Currently, there are 3 components: minform, longtable and dtcal.

minform brings cross-browser compatibility to HTML5 form enhancements(for attributes: placeholder, required and autofocus).

Compatibility: All Major Browsers
Website: http://www.minjs.com/

Real Shadow: jQuery Plugin For Mouse-Sensitive & Realistic Shadows

Real Shadow: jQuery Plugin For Mouse-Sensitive & Realistic Shadows

Real Shadow is a simple-yet-effective jQuery plugin for mouse-sensitive & creating realistic shadow effects for any HTML element.

With a simple function, it works by targeting any number of elements and manipulating the value of box-shadow CSS property for the elements in accordance with the mouse position.

So, the shadow’s location and size is determined by the element’s distance to the mouse pointer which ends up in a cool effect.

Compatibility: All Modern Browsers
Website: http://indamix.github.com/real-shadow/
Download: https://github.com/Indamix/real-shadow/

MiniJs: A Suite Of jQuery Plugins Written In CoffeeScript

MiniJs: A Suite Of jQuery Plugins Written In CoffeeScript

Matthieu Aussaguel a web developer working at Envoto, releasing MiniJs plugins.

MiniJs is a free and open source suite of jQuery plugins that are written in CoffeeScript.

The plugins are perfect for everyday-use and include: slider, tooltip, notification, Twitter feed and counter (new ones are on the way).

They are all built with simplicity in mind and very easy-to-use with only few important parameters.

Compatibility: All Major Browsers
Website: http://minijs.com/
Download: https://github.com/minijs

jPages: Awesome JavaScript Pagination Plugin

jPages: Awesome JavaScript Pagination Plugin

jPages is a client-side JavaScript pagination plugin (jQuery plugin) with have lots of features like keyboard + scroll navigation, auto page turn, delayed display and a customizable navigation panel and also integration with Animate.css and Lazy Load.

The plugin is very unobtrusive and it won’t apply any extra styles to the items you are paginating. It will only create and insert the links inside the element(s) you are applying the plugin to, in order to turn them into navigation panel(s).

Any number of pagination elements can be inserted into the same page and they can be positioned with ease.

Compatibility: All Major Browsers
Website: http://luis-almeida.github.com/jPages/
Demo: http://luis-almeida.github.com/jPages/defaults.html
Download: https://github.com/luis-almeida/jPages


반응형
반응형

How to Turn jQuery Accordion into CSS3 Accordion

http://css.dzone.com/articles/how-turn-jquery-accordion-css3


Have you ever used ordinary accordion plugins in your projects? I would believe so! Most of them use javascript to work (or jQuery). Usually we use such plugins (accordions) to build a promo with images, a little photo gallery, or in case we have to build an advertisement with a list of product features. We did some research and came to the conclusion that sometimes we don’t need to use any script in order to build accordions. We can just use the power of CSS3. We can handle the OnClick event and use custom animation.

download sources

I prepared three versions with accordions. For the first demonstration we use jQuery to build an accordion. I selected liteAccordion jQuery plugin (http://nicolahibbert.com/demo/liteAccordion/) as an accordion plugin for out test purposes. See how it works:

Live Demo


That’s all, our own CSS3-based accordion is complete! You can check it in action:

CSS3 accordion demo

But that’s not all for today, as a bonus, I prepared a third demo for you with an animated accordion.


animated accordion demo

In order to do it I recommend disable onclick behavior, and apply new animation:

Conclusion

Now that is all for today. We have just created three different demos: the first one with jQuery, the second and the third – with pure CSS3. I hope that you like it. Good luck!


반응형
반응형

10 Best jQuery Google Maps Plugins

구글지도 플러그인

http://designreflect.com/10-best-jquery-google-maps-plugins/


Most of the users on the internet use Google Maps whenever they need to find a location of a certain place. Google Maps is easy to use so it is widely used among internet users. These days it is common to see Google Maps embedded into the websites. People embed Maps to their websites so that their visitors can easily find their location to contact them.

Some premium WordPress theme developers have also started providing the options to embed Google maps by default into their themes. You might have already seen maps embedded into other websites and might be wondering how to embed these maps into your website as well. It seems a complex task at first but using these jQuery plugins you can easily accomplish this task yourself. All these plugins have proper documentation to help you out.

If you want to embed Google maps to your website, here are 10 Best jQuery Google Maps Plugins for you.

gMap – Google Maps Plugin for jQuery

More About gMap – Google Maps Plugin for jQuery

bMap – jQuery Google Maps Plugin

More About bMap – jQuery Google Maps Plugin

jQuery GPS

More About jQuery GPS

Google Maps the jQuery Plugin Way

More About Google Maps the jQuery Plugin Way

jQuery UI Map

More About jQuery UI Map

Google Maps jQuery Plugin

More About Google Maps jQuery Plugin

Googlemaps

More About Googlemaps

Mapbox – Zoomable jQuery Map Plugin

More About Mapbox

gMap3 – jQuery Plugin for Google Maps

More About gMap3

goMap

More About goMap

반응형

+ Recent posts