jQuery & JSON iFour Plugins Consultancy
https://www.ifourtechnolab.com/
JQuery Plugins 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()
https://www.ifourtechnolab.com/
How to use Plugins ï&#x192;&#x2DC; Following example shows how to include jquery.plug-in.js plugin <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> https://www.ifourtechnolab.com/
How to develop a plug-in 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
https://www.ifourtechnolab.com/
How to develop a plug-in : Example Keep this code in custom.js file JQuery.fn.warning = funcation(){ Return this.each(function(){ alert(‘Tag Name :”’+ $(this).prop(“tagname”) + ‘”.’); }); };
Html page <script type=“text/javascript”> $(document).ready(function(){ $(“div”).warning(); $(“p”).warning(); }); </script> https://www.ifourtechnolab.com/
jQuery Plug-in : Chosen jQuery plug-in that makes long, unwieldy select boxes much more user-friendly Has 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/ https://www.ifourtechnolab.com/
jQuery Plug-in : Chosen - Example ï&#x192;&#x2DC; Standard Select
https://www.ifourtechnolab.com/
jQuery Plug-in : Chosen - Example ï&#x192;&#x2DC; Multiple Select
https://www.ifourtechnolab.com/
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
https://www.ifourtechnolab.com/
jQuery Plug-in : Select2- Example ï&#x192;&#x2DC; Single select boxes
https://www.ifourtechnolab.com/
jQuery Plug-in : Select2- Example ï&#x192;&#x2DC; Multiple select boxes
https://www.ifourtechnolab.com/
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
https://www.ifourtechnolab.com/
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 }; https://www.ifourtechnolab.com/
Arrays in JSON An ordered collection of values Begins with [ (left bracket) Ends with ] (right bracket)
Name/value pairs are separated by , (comma) Example : var employee = { "employee_id": 123, "name": “ifour", "hire_date": “01/01/2013", "location": "Ahmedabad", "consultant": false, "random_nums": [ 24,65,12,94 ] }; https://www.ifourtechnolab.com/
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
https://www.ifourtechnolab.com/
Where is JSON used today? ï&#x192;&#x2DC; Anywhere and everywhere
https://www.ifourtechnolab.com/
Thank You!!
https://www.ifourtechnolab.com/