HTML5 Zone is brought to you in partnership with:

Hirvesh Munogee is a freelance web developer who also happens to have a passion for blogging. Hirvesh is a DZone MVB and is not an employee of DZone and has posted 177 posts at DZone. You can read more from them at their website. View Full User Profile

X-Editable - An In-Place Editing JavaScript Library For Bootstrap, jQuery UI Or jQuery

11.29.2012
| 6161 views |
  • submit to reddit

X-editable is a JavaScript library which allows you to create editable elements on your page.  It can be used with any engine (Twitter Bootstrap, jQuery UI or jQuery only) and includes both popup and inline modes.

It's new life of bootstrap-editable plugin that was strongly refactored and improved.  Please try out demo to see how it works.

  • Bootstrap - Twitter Bootstrap has awesome Form markup and Popover plugin allowing pretty in-place editing. For date input it uses bootstrap-datepicker.
  • jQuery UI (1.9+) - Starting from jQuery UI 1.9 it has Tooltip plugin. In combination with Button widget it is very suitable for editable form and popup. You can apply any theme of jQuery UI Themeroller.
  • jQuery (+ poshytip plugin) - The simplest build of X-editable. For inline mode you need only jQuery. For popup mode it uses Poshytip plugin. To show date picker you should include jQuery UI date picker. Or surely you can write your own inputs.

Requirements: Twitter Bootstrap, jQuery or jQuery UI
Demo:http:/ / vitalets. github. com/ x-editable/ demo. html
License: MIT License

Published at DZone with permission of Hirvesh Munogee, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)