jQuery Plugin

jQuery Plugin
http://leonguyen.com

Transcript

1. LeoNguyen.com
   

   View Slide

2. Outline
   - References (jquery.leonguyen.
   com/references.html)
   - Repositories (jquery.leonguyen.
   com/repositories.html)
   - Library
   - Framework
   - Input
   - Display
   - Display Data List
   - Display Drawing
   - Display Chart
   - Display Schedule
   - Display Photo Slideshow
   - Display Content Slideshow
   - Display Media
   - Layout
   - Text
   - Animation & Effect
   - Media
   

   View Slide

3. Library
   

   View Slide

4. Library (Cont)
   - jQuery Template (http://api.jquery.com/jQuery.template)
   - jQuery Boilerplate (jqueryboilerplate.com)
   

   View Slide

5. Framework
   

   View Slide

6. jQuery
   - www.jquery.com
   

   View Slide

7. QUnit
   - qunitjs.com
   

   View Slide

8. Others
   - ZeptoJs (zeptojs.com)
   - AdminJS (adminjs.com)
   

   View Slide

9. Input
   

   View Slide

10. Input
    - Repeatable Fields (bit.ly/Je3iMb)
    - Hint Label: Super Label (bit.ly/17sl6JK)
    - Editable: X-editable (bit.ly/15vJPM3)
    - Tipue drop (bit.ly/1eey7y8)
    - sGlide (bit.ly/1cw9uWJ)
    - jQuery Incrementer (bit.ly/1gETBVh)
    - Paint: wPaint (wpaint.websanova.com)
    - jQuery Color Picker Sliders (bit.ly/19BTSVK)
    - DictAndList (dict-and-list.appspot.com)
    - Creditly.js (bit.ly/1jB3YKE)
    

    View Slide

11. Input (cont)
    - Social: uLike (bit.ly/12D4R9j)
    + Classy (bit.ly/1261CfF)
    + Social Share Privacy (bit.ly/1kXnEaW)
    

    View Slide

12. Input - Masked Input
    - jQuery Mask Input (bit.ly/1a92oqe)
    - Masked input plugin (bit.ly/12V5wCb)
    

    View Slide

13. Input - Persist
    - GarlicJs (garlicjs.org)
    - Phoenix (bit.ly/1968mvB)
    - Autosave.js (bit.ly/199hQH9)
    

    View Slide

14. Input - Button
    - Buttons (bit.ly/1euuA8o)
    

    View Slide

15. Input - Select box
    - Ajax AutoComplete (http://bit.ly/18vf8ZT)
    - Select2 (bit.ly/18qFvjz)
    - Chosen (bit.ly/1emoBoJ)
    - customSelect (bit.ly/17sWNct)
    - jQuery UI MultiSelect Widget (bit.ly/17Vk4L1)
    - jqxDropDownList (bit.ly/1cMeQi9)
    - typeahead.js (bit.ly/156iJMu)
    - Magic Suggest (bit.ly/18qFFrb)
    - AutoJS (bit.ly/Iu5U7p)
    - bselect (bit.ly/1k2QeXL)
    - Minimalect (bit.ly/JQdGJS)
    - selectonic (bit.ly/1faKasc)
    

    View Slide

16. Input - Select box (cont)
    - Selectric (bit.ly/1lHjCCP)
    - jQuery Bootstrap-style Dropdowns (bit.ly/1bcQNqa)
    - Bootstrap Dual Listbox (bit.ly/17q1jsk)
    - Bootstrap Multiselect (bit.ly/1bQaKZK)
    

    View Slide

17. Input - Search
    - HideSeek (bit.ly/1fVi58q)
    

    View Slide

18. Input - Date
    - Date range picker (bit.ly/1260OYf)
    - jQuery Range Calendar (afreeux.com)
    - CLNDR.js (bit.ly/GSn5yW)
    - DateTime Picker (bit.ly/1dqsVAs)
    

    View Slide

19. Input - Tag
    - Tags Manager (bit.ly/15vKsFg)
    - Selectize (bit.ly/1ccBO45)
    

    View Slide

20. Input - Upload
    - jQuery.upload (bit.ly/1fpGDda)
    - Dropzone.js (www.dropzonejs.com)
    - jQuery File Upload (bit.ly/1byCNwj)
    - Mini AJAX File Upload (http://bit.ly/10Hc1M4)
    - Plupload (www.plupload.com)
    - jQuery File API (bit.ly/1kEtyxB)
    - jQuery Upload File Plugin (bit.ly/1hW8qQK)
    

    View Slide

21. Input - Editor
    - elRTE (elrte.org)
    - Redactor (imperavi.com/redactor)
    - bootstrap-wysihtml5 (bit.ly/14pWEuB)
    - Summernote Bootstrap (bit.ly/1dmb0Pc)
    - fresherEditor (bit.ly/12V74vS)
    

    View Slide

22. Input - Validation
    - Parsley.js (parsleyjs.org)
    - jQuery Validation (bit.ly/18ucgzM)
    - jQuery.validity (bit.ly/15TsRHa)
    - Formance.js (bit.ly/1cBuosD)
    - Password (bit.ly/1bsycaC)
    

    View Slide

23. Input - Drag / Drop
    - Shapeshift (bit.ly/15TWw5u)
    - jquery.pep.js (bit.ly/1cmi2V2)
    

    View Slide

24. Input - Mobile
    - jQuery UI Touch Punch (touchpunch.furf.com)
    - Hammer.js (bit.ly/17aOCsf)
    - Make a list jQuery Mobile sortable by drag & drop (bit.ly/19XyyX8)
    - Mobile Drag And Drop (bit.ly/1i7rlGK)
    - JQuery UI for iPhone, iPad and iPod Touch (bit.ly/16ptgRM)
    

    View Slide

25. Touch Event
    

    View Slide

26. Touch2Mouse
    

    View Slide

27. Input Form
    

    View Slide

28. Formbuilder.js
    - dobtco.github.io/formbuilder
    

    View Slide

29. Input Form
    - Alpaca (www.alpacajs.org)
    - Ideal Forms (bit.ly/1g78koQ)
    - jFormer (www.jformer.com)
    

    View Slide

30. Input Form - Cart
    - EasyUI Cart (bit.ly/16ANN9F)
    - Smart Cart (techlaboratory.net)
    - jCart (conceptlogic.com/jcart)
    - jQuery Interactive Shopping Cart (bit.ly/1c7HRpb)
    - plum.shop (demo.plumjs.com/shop/)
    

    View Slide

31. Display
    

    View Slide

32. Display
    - Adaptive backgrounds (bit.ly/18sUYmS)
    - Annotations.js (bit.ly/1kTF31p)
    - Circliful (bit.ly/1lKIxGJ)
    - Pines Steps (pinesframework.org/psteps)
    - Map: ImageMapster (bit.ly/1hiVlRm)
    + Mapper.js (bit.ly/1cPODBt)
    - Countdown: FlipClock.js (flipclockjs.com)
    + Countdown.js (countdownjs.org)
    - Header: Headroom.js (bit.ly/1970x96)
    - Stick: Sticky.js (stickyjs.com)
    - Loader: SpinJs (bit.ly/1581KJH)
    - Tab: EasyTabs.js (bit.ly/1aADTEx)
    

    View Slide

33. Display (cont)
    - Toolbar: Toolbar.js (bit.ly/18vxqh3)
    - Scroller: nanoScroller.js (bit.ly/15W0nis)
    - Processbar: Demo (bit.ly/19aDRFH)
    - Rainbow (bit.ly/17uabiO)
    

    View Slide

34. Display - Message
    - Noty (bit.ly/13UD1fd)
    - jQuery.msgBox (bit.ly/1j8msh8)
    - Crumble (bit.ly/13UD2Qe)
    - Opentip (bit.ly/15TvusL)
    - Knob (bit.ly/19dktDG)
    - Toastr (bit.ly/IWLap5)
    

    View Slide

35. Display - Modal
    - Simple Modal (simplemodal.plasm.it)
    - Bootstrap's modal (bit.ly/1g7Kwkv)
    

    View Slide

36. Display - Menu
    - SmartMenus (www.smartmenus.org)
    - jMenu (bit.ly/13tRATU)
    - jPanelMenu (jpanelmenu.com)
    - HTML5 (bit.ly/14stdrC)
    - Top Drawer (bit.ly/1bSphlF)
    - Slidebars (bit.ly/1lgMepZ)
    - EasyAsPie (bit.ly/1a9jowX)
    - Multi-level push menu (multi-level-push-menu.make.rs)
    - jQuery ContextMenu (bit.ly/1eky7s5)
    - Sidr (berriart.com/sidr/)
    - bigSlide.js (bit.ly/1a8Hwpm)
    

    View Slide

37. Display - Tab
    - Responsive Tabs (bit.ly/1bGIW7K)
    - Responsivetabs (bit.ly/1bYft9o)
    

    View Slide

38. Display - Tree
    - zTree (ztree.me)
    - jsTree (jstree.com)
    - EasyTree (easyjstree.com)
    - JqTree (bit.ly/LWz0iG)
    - aciTree (bit.ly/1g2mhbp)
    - Fancytree (bit.ly/1dNRhpA)
    - Nestable (bit.ly/1c5qUOk)
    - jQuery Treeview (bit.ly/1ioTrCg)
    

    View Slide

39. Display - Paging
    - jPages (bit.ly/13Ox2px)
    

    View Slide

40. Display - Export
    - tableExport (bit.ly/1sPbbtV)
    

    View Slide

41. Display
    Data List
    

    View Slide

42. jqGrid
    - www.trirand.com/blog/
    

    View Slide

43. jTable
    - www.jtable.org
    

    View Slide

44. FooTable
    - fooplugins.com/plugins/footable-jquery/
    

    View Slide

45. jQuery.sheet
    - bit.ly/IxFoL1
    

    View Slide

46. Display Data List
    - List:
    + Infinity (airbnb.github.com/infinity)
    + jPages (bit.ly/13Ox2px)
    - Filter:
    + TinySort (tinysort.sjeiti.com)
    + Filtrify (luis-almeida.github.com/filtrify)
    + jQuery Searcher (bit.ly/1f80eNe)
    - jQuery Table AddRow plugin (bit.ly/LanL5I)
    

    View Slide

47. Display Data List - Data table
    - OpenJS Grid (square-bracket.com/openjs)
    - Data Tables (www.datatables.net)
    - Editable (bit.ly/13VS2gE)
    - FooTable (bit.ly/15VGeXC)
    - Stacktable.js (bit.ly/116XRnH)
    - Paramquery Grid (paramquery.com/grid)
    - Handsontable (bit.ly/18sfkca)
    - MediaTable (bit.ly/16RJ2UU)
    - Dynatable.js (dynatable.com)
    - Resizable Columns (bit.ly/15SMFzx)
    - Stupid jQuery Table Sort (bit.ly/18Ug76n)
    - jQuery treetable (bit.ly/15Yi3wI)
    

    View Slide

48. Display Data List - Data table (cont)
    - jQuery editTable (bit.ly/IWqY7u)
    - tiny editable jQuery Bootstrap spreadsheet (bit.ly/1lZhxpE)
    

    View Slide

49. Display
    Drawing
    

    View Slide

50. jsPlumb
    - bit.ly/13tYCrO
    

    View Slide

51. Display Drawing
    - Arbor.js (arborjs.org)
    

    View Slide

52. Display
    Chart
    

    View Slide

53. Display Chart
    - Highcharts (www.highcharts.com)
    - jQuery HighchartTable (highcharttable.org)
    - Flot (www.flotcharts.org)
    - Maplace.js (maplacejs.com)
    - Morris.js (bit.ly/1g7fihd)
    

    View Slide

54. Display
    Schedule
    

    View Slide

55. Display Schedule
    - FullSchedule: (arshaw.com/fullcalendar)
    - Monket (bit.ly/116ZOAA)
    - Frontier (bit.ly/13tXm86)
    

    View Slide

56. Display
    Images
    

    View Slide

57. Display Photo Slideshow (cont)
    - Lazy load:
    + Echo.js Lazy Images (bit.ly/1isL5tT)
    + Lazy Load XT (bit.ly/K8GxsZ)
    + imagesLoaded (imagesloaded.desandro.com)
    

    View Slide

58. Display
    Photo Slideshow
    

    View Slide

59. Display Photo Slideshow
    - Pikachoose (www.pikachoose.com)
    - Wow Slider (wowslider.com)
    - Slide.js (slidesjs.com)
    - Glide.js (bit.ly/18TuQhT)
    - Slider Shock (www.jqueryslidershock.com)
    - jGlance (moewashere.com/jglance)
    - Owl Carousel (owlgraphic.com/owlcarousel)
    - Fullscreen (bit.ly/181IAGy)
    - Backstretch (bit.ly/11700ji)
    - Sly (darsa.in/sly)
    - Elastislide (bit.ly/18simxj)
    - Cycle (bit.ly/14sBzzB)
    

    View Slide

60. Display Photo Slideshow (cont)
    - StackSlider (bit.ly/18vBM7U)
    - ayaSlider (bit.ly/1bAZccd)
    - iLightBox (iprodev.com/ilightbox)
    - Lightbox (www.frescojs.com)
    - Photobox (http://dropthebit.com/demos/photobox)
    - Microfiche.js (bit.ly/14sBMmj)
    - Nivo Zoom (nivozoom.dev7studios.com)
    - Sk Touch Carousel (bit.ly/12POMM0)
    - Mobile: SwipeView (bit.ly/18vBVIw)
    - Smooth Products (bit.ly/18AuqOJ)
    - jQuery Lightbox alternative (bit.ly/18rzIIT)
    - Allofthelights.js (bit.ly/1kLECZJ)
    

    View Slide

61. Display Photo Slideshow (cont)
    - PhotoJShop (bit.ly/1fMiwTa)
    - Least.js 2 (leastjs.com)
    

    View Slide

62. Display Photo Slideshow - 3D
    - 3D Gallery (bit.ly/17ueJ8W)
    - Refine Slide (bit.ly/1bJNQ3W)
    - Adaptor (bit.ly/1ehyKHh)
    - Slicebox (bit.ly/1bSL8Kt)
    

    View Slide

63. Display
    Content Slideshow
    

    View Slide

64. Display Content Slideshow
    - ImpressJS (bit.ly/19aHMlX)
    - Sequence (www.sequencejs.com)
    - Parallax (bit.ly/13tY45c)
    - Windy (bit.ly/1dMSuwp)
    - Navigator (bit.ly/13MF1yO)
    - Circular Carousel (bit.ly/17ufbUC)
    - Baraja (bit.ly/17ufeja)
    - Any List Scroller (http://als.musings.it)
    - Elastic Content Sliderback (bit.ly/13tY999)
    - Bespoke.js (bit.ly/17jbn7c)
    

    View Slide

65. Display
    Media
    

    View Slide

66. Display Media
    - Zoom:
    + Image Zoom (bit.ly/13tYEjv)
    + MLens (mlens.musings.it)
    + imagefill.js (bit.ly/IVzxQj)
    - Presentations:
    + Slides (lab.hakim.se/reveal-js)
    + Superslides (bit.ly/1aAJgDV)
    + Impress.js (bit.ly/133BRYp)
    - Flipbook:
    + TurnJs (www.turnjs.com)
    + Book Block (bit.ly/13MFqBg)
    + Flipboard (bit.ly/1170xli)
    

    View Slide

67. Display Media (cont)
    - Gallery:
    + Thumba (bit.ly/15W6rHH)
    + Gamma (bit.ly/1bSx82F)
    + Grid Navigation (bit.ly/133C4uA)
    

    View Slide

68. Layout
    

    View Slide

69. Layout
    - Nested:
    + Freetile (bit.ly/1bB1mbO)
    + jQuery Nested (bit.ly/15xWazd)
    + Wookmark (bit.ly/1bSycn9)
    + Grid—A—Licious (bit.ly/133CYY5)
    + BlockItJs (bit.ly/1dMTGjl)
    + Proto (adamwhitcroft.com/proto)
    + UI Layout (bit.ly/1bB1A2I)
    + Reuze.me (www.reuze.me)
    + Gridster (gridster.net)
    + jBlocks (bit.ly/1a0StDH)
    

    View Slide

70. Layout (cont)
    - Page:
    + Page Scroller (pagescroller.com)
    + Scroll Page (bit.ly/15VNbI0)
    + FullPage.js (bit.ly/1fQ7GMv)
    + jInvertScroll (bit.ly/1ccxl1e)
    + OnePageScroll (bit.ly/19FrlO9)
    + jQuery Scroll Path (bit.ly/J6bwWy)
    + slideToucher (bit.ly/1kuT5Jl)
    

    View Slide

71. Layout (cont)
    + Fullscreen (bit.ly/14sEtV9)
    + Horizontal Layout (bit.ly/12U7yHb)
    + Notebook (bit.ly/15xWv5c)
    + Fullscreen Pageflip (bit.ly/1aAKIpV)
    + Pageguide (bit.ly/15xWxtH)
    + Windows (bit.ly/15xWBd0)
    + Salvattore (salvattore.com)
    - Responsive:
    + jResponsive (jresponsive.is-great.net)
    

    View Slide

72. Layout (cont)
    - Products:
    + Colorizer (bit.ly/19aJaoF)
    + Fancy Designer (fancyproductdesigner.com)
    + Multi-Item Slider (bit.ly/17uhas5)
    - News:
    + Compact News (bit.ly/1282YGO)
    + End Page Slide Out Box (bit.ly/1aAKZcq)
    - Restaurant: 3D Menu (bit.ly/1b3oPmy)
    - sDaskboard (bit.ly/18pEjRA)
    - Cart:
    + jQCart (bit.ly/1c7HRpb)
    + Drag 'n' Drop (bit.ly/175cKv5)
    

    View Slide

73. Text
    

    View Slide

74. Format
    - Price Format (jquerypriceformat.com)
    - Succinct (bit.ly/1feWfzX)
    - Json2Html (json2html.com)
    

    View Slide

75. Text
    - Expander (bit.ly/158a0JU)
    - Truncation (bit.ly/1dMUy7K)
    

    View Slide

76. Effect
    - Arctext (bit.ly/18skUeO)
    - Textillate.js (bit.ly/13u0sc7)
    - Text Effect (bit.ly/M4IfwB)
    - Tipue Search (bit.ly/1blvvXg)
    

    View Slide

77. Media
    

    View Slide

78. Media
    - Audio Player (bit.ly/12XC12A)
    - Speakker (http://www.speakker.com)
    

    View Slide

79. Animation & Effect
    

    View Slide

80. Animation
    - Custom Layout (bit.ly/1bB3Fvn)
    - Threesixty.js (bit.ly/158aXlg)
    - Quicksand (bit.ly/1gtAmf3)
    

    View Slide

81. Effect
    - ThumbFx (bit.ly/15W8POH)
    - 3D Hover (bit.ly/15VOLcS)
    - BlackAndWhite (bit.ly/14sGqRh)
    - Hover: HoverEx (bit.ly/15xY6YG)
    - Hook.js (usehook.com)
    

    View Slide