jQuery plugins & JSON

iFour Consultancy

jQuery Plugins & JSON

JQuery PluginsHow to use PluginsHow to develop a PluginJquery Plugin ExamplesIntroduction to JSONJSON ObjectsArrays in JSONData types : Objects and Arrays

INDEX

http://www.ifourtechnolab.com/


Simply a new method that we use to extend jQuery's prototype object. By extending the prototype object you enable all jQuery objects to inherit any methods that you add.

As established, whenever you call JQuery() you're creating a new jQuery object, with all of jQuery's methods inherited.

The idea of a plugin is to do something with a collection of elements. You could consider each method that comes with the jQuery core a plugin, like .fadeout() and .addclass()

JQuery Plugins

VB.NET Software Development Companies India http://www.ifourtechnolab.com/



Following example shows how to include jquery.plug-in.js plugin

How to use Plugins

<head> <title>The jQuery Example</title> <script type = "text/javascript" src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src = "jquery.plug-in.js" type = "text/javascript"></script> <script src = "custom.js" type = "text/javascript"></script> <script type = "text/javascript" language = "javascript"> $(document).ready(function() { .......your custom code..... }); </script> </head> <body> ....... </body>




Any methods or functions you attach must have a semicolon (;) at the end Your method must return the jQuery object, unless explicitly noted otherwise You should use this.each to iterate over the current set of matched elements - it

produces clean and compatible code that way Prefix the filename with jQuery, follow that with the name of the plugin and

conclude with .js Always attach the plugin to jQuery directly instead of $, so users can use a custom

alias via noConflict() method

How to develop a plug-in




How to develop a plug-in : Example

Keep this code in custom.js file

Html page

JQuery.fn.warning = funcation(){Return this.each(function(){

alert(‘Tag Name :”’+ $(this).prop(“tagname”) + ‘”.’); }); };

<script type=“text/javascript”>$(document).ready(function(){

$(“div”).warning();$(“p”).warning();

});</script>




jQuery Plug-in : Chosen jQuery plug-in that makes long, unwieldy select boxes much more user-friendlyHas a number of options and attributes that allow you to have full control of your select

boxes• Standard Select• Multiple Select• <optgroup > Support• Selected and Disabled Support• Hide Search on Single Select• Default Text Support• No Results Text Support• Limited Selected Options in MultiSelect• Allow Deselect on Single Selects• Right to Left Support• Observing, Updating, and Destroying Chosen• Custom Width Support

For more info refer this link : https://harvesthq.github.io/chosen/




jQuery Plug-in : Chosen - Example

Standard Select




Multiple Select

jQuery Plug-in : Chosen - Example




jQuery Plug-in : Select2

It gives you a customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options

Supports a wide variety of options that allow you to customize it to your needs• Single select boxes• Multiple select boxes• Placeholders• Data sources• Disabled mode• Disabled results• Limiting the number of selections• Hiding the search box• Tagging Support

For more info refer this link : https://select2.github.io/examples.html




jQuery Plug-in : Select2- Example

Single select boxes




jQuery Plug-in : Select2- Example

Multiple select boxes




What is JSON?

A lightweight text based data-interchange format Completely language independent Based on a subset of the JavaScript Programming Language Easy to understand, manipulate and generate JSON is not a

• Overly Complex• A “document” format• A markup language• A programming language




JSON Object Syntax

Unordered sets of name/values pairs Begins with { (left brace) Ends with } (right brace) Each name followed by : (colon) Name/value pairs are separated by , (comma) Example :

var employee = { "employee_id": 1234, "name": “ifour", "hire_date": "1/1/2016", "location": "Ahmedabad","consultant": false

};




An ordered collection of values Begins with [ (left bracket) Ends with ] (right bracket) Name/value pairs are separated by , (comma) Example :

Arrays in JSON

var employee = { "employee_id": 123, "name": “ifour", "hire_date": “01/01/2013", "location": "Ahmedabad","consultant": false,

"random_nums": [ 24,65,12,94 ]};




Data types : Objects and Arrays

Objects : Unordered key/value pairs wrapped in {} Arrays : Ordered key/value pairs wrapped in []

How and when to use JSON• Transfer data to and from a server• Perform asynchronous data calls without requiring a page refresh• Working with data stores• Compile and save form or user data for local storage




Where is JSON used today?

Anywhere and everywhere




https://www.tutorialspoint.com/jquery/jquery-plugins.htm https://harvesthq.github.io/chosen/ https://select2.github.io/ https://select2.github.io/examples.html http://www.w3schools.com/js/js_json_intro.asp

References




Questions?


