Editable Listview

A jQuery Mobile Plugin with an intuitive UI to add new list items and remove existing ones.

Editable Listview

A customized version of the jQuery Mobile Listview Widget that features an intuitive UI to let users add new list items and remove existing ones.

Editable Listview Plugin

Why

Many times you encounter a situation where you want to allow editing of list items. You code extra functionality around the Listview widget to allow for insertion of new list items and removal of the existing ones. Editable Listview widget is designed to take the pain out of this situaiton by having all this functionality baked-in. Just specify appropriate data- attributes and you are good to go.

Demo

A simple editable list of fruits. Go ahead and try adding the fruit you love having for breakfast.

See the Pen Editable Listview in Action by Wasif Hasan Baig (@baig) on CodePen.

A complex editable list of fruits having extra information about the shape and color of the fruit. A complex list embeds a full form to allow for insertion of new list items. You can design and style the form to your liking. Browse through the HTML in the following example to understand how it works.

See the Pen cnawv by Wasif Hasan Baig (@baig) on CodePen.

An example showing programmatic instantiation of editable listview and also demonstrating more data- attributes.

See the Pen Editable Listview in Action (Programmatic Instantiation) by Wasif Hasan Baig (@baig) on CodePen.

Installation

There are two ways to proceed with the installation.

  1. Download the package, uncompress it and use the files in the build folder.

  2. The most convenient option is to install using bower

    bower install jqm-editable-istview

Include the plugin script tag after the jQuery Mobile script tag. Include the plugin stylesheet right after the jQuery Mobile stylesheet.

Important Note

This plugin patches the default Collapsible Widget to allow using Toolbar Widget as the collapsible header. The patch will be made available as a pull request to the jQuery Mobile project and this plugin will be updated accordingly.

List of "data-" Attributes

  1. data-editable - A Boolean value indicating whether to initialize the listview as editable or not. Default value is true.

  2. data-title - A String used as the title of the list when the list contains at least one item. Default value is "View list items".

  3. data-empty-title - A String used as the title of the list when the list is empty. Default value is "No items to view".

  4. data-add-label - A String used as the label of the button when the list is empty. Default value is "Add".

  5. data-add-icon - Icon of the button when the list is empty. See this page for the list of available icons. Default value is "plus".

  6. data-edit-label - Label of the Edit button. Default value is "Edit".

  7. data-edit-icon - Icon of the button when the list is not empty. See this page for the list of available icons. Default value is "edit".

  8. data-done-label - Label of the button when the list is in edit mode. Default value is "Done".

  9. data-done-icon - Icon of the button when the list is in edit mode empty. See this page for the list of available icons. Default value is "check".

  10. data-collapsed - A boolean value indicating whether the list will be collapsed or not when initialized. Default is value "true".

  11. data-collapsed-icon - Icon next to list title when the list is collapsed. See this page for the list of available icons. Default value is "carat-r".

  12. data-expanded-icon - Icon next to list title when the list is expanded. See this page for the list of available icons. Default value is "carat-d".

  13. data-enhanced - (Not implemented yet!) A boolean value indicating whether the DOM has already been enhanced or not. If so, then all the required DOM structure along with relevant CSS classes and corresponding data attributes must be present. Default value is "false".

Comments and Feedback

comments powered by Disqus