Best jQuery Editable Plugins & Tutorials with Demo

    X-editable : Create editable elements with jQuery & Bootstrap

    November 28, 2012 | Bootstrap, Forms, Plugins, Web
    X-editable : Create editable elements with jQuery & Bootstrap

    This library allows you to create editable elements on your page. It can be used with any engine (bootstrap, jquery-ui, jquery only) and includes both popup and inline modes. It’s new life of bootstrap-editable plugin that was strongly refactored and improved.

    Features:

    • popup and inline modes
    • supported inputs:
      • text
      • textarea
      • select
      • date
      • dateui
      • checklist
    • client-side and server-side validation
    • customizible container placement
    • toggle by click or manually
    • keyboard support (escape/enter/tab)
    • works in IE7+ and all modern browsers
    • unit tested
    Read More Demo

    Create.js : Make anything editable with jQuery

    September 7, 2012 | HTML5, jQuery UI, Plugins, Web
    Create.js : Make anything editable with jQuery

    Create.js is a comprehensive web editing interface for Content Management Systems. It is designed to provide a modern, fully browser-based HTML5 environment for managing content. Create can be adapted to work on almost any content management backend.

    Features:

    • Making RDFa-annotated content on pages editable
    • Managing collections of content (add, remove)
    • Local, in-browser storage and retrieval of unsaved content
    • Adaptable connector for communicating with the back-end system
    • Running workflows (approval, etc.) for content items
    • Browsing and reverting content history
    • Easy rebranding of the interface with some CSS
    Read More Demo

    dynoTable: A jQuery plugin for creating editable tables

    June 7, 2012 | Drag & Drop, Tables
    dynoTable: A jQuery plugin for creating editable tables

    I was working on a project that required the GUI to allow the user to dynamically add, remove and rearrange various form fields contained in table rows. The tricky part was that the UI needed to have this functionality for several different types of elements across several different forms. For instance, one set of fields was for adding and removing specifications to a product while another set of fields was for adding images to a product.

    DynoTable makes an html table editable. With it you can:

    • Add rows
    • Remove rows
    • Clone rows
    • Click and Drag to Re-arrange rows (If you have Jquery UI included on
      your page)

    The dynoTable defaults will probably handle most use cases. If you do not require any of the functionality it provides, you can simply omit the classes from your table. However, dynoTable also provides a number
    of properties and callback functions to configure it further if needed.

    Read More Demo

    Jeditable – Edit In Place Plugin For jQuery

    January 26, 2012 | Forms, Plugins
    Jeditable – Edit In Place Plugin For jQuery

    Hi! My name is Jeditable and I am inplace editor plugin for jQuery. With few lines of JavaScript code I allow you to click and edit the content of different html elements. I am based on Dylan Verheul’s editable.Normal flow is this. User clicks text on web page. Block of text becomes a form. User edits contents and presses submit button. New text is sent to webserver and saved. Form becomes normal text again.

    Read More Demo

    Javascript Turn HTML Tables Into Advanced Editable Components : EditableGrid

    January 24, 2012 | Core Java Script, Forms, PHP, Tables, XML
    Turn HTML Tables Into Advanced Editable Components : EditableGrid

    EditableGrid is an open source Javascript library aimed at turning HTML tables into advanced editable components. It focuses on simplicity: only a few lines of code are required to get your first table up and running.

     

    You can use the EditableGrid library in two ways:

    1. Hook up to an existing HTML table
    2. Build your grid from an XML description of the table structure and contents
    Read More Demo

    eComboBox a jQuery editable ComboBoxes

    May 28, 2011 | Forms, Web
    eComboBox a jQuery editable ComboBoxes

    This plugin to allow us to have editable comboboxes (Select element). It allow to add/edit/remove elements from list.

    Read More Demo