jQuery Nestedy - A nested fields creator - wbotelhos.com/nestedy

jQuery Nestedy is a plugin to create dynamically nested fields.

Version

@version        0.1.2
@since          2013-08-14
@author         Washington Botelho
@documentation  wbotelhos.com/nestedy
@twitter        twitter.com/wbotelhos

Required Files

• jquery.nestedy.js

Options

add          : undefined                                  // Callback trigged when the add button is clicked.
addButton    : '.nestedy-add'                             // The add button element.
checkable    : ['checkbox', 'radio']                      // The checkable fields. This fields will be checked with checked="checked".
clone        : true                                       // If clone will copy the binds.
content      : '.nestedy'                                 // Place where the items will be copied.
excludes     : ['id$="id"', 'ame$="id"', 'name$="id\\]"'] // Selectors used to exclude field of a item before clone it.
focus        : ':last'                                    // The item you want focus, you can choose `:first`, `:last` or `undefined`.
idx          : /(_)\d(_)/                                 // Regex used to find the dynamic parte of the id of the field that will be changed.
model        : '.nestedy-item'                            // The element inside the `content` that will be used as a model to be cloned.
namex        : /(\[)\d(\])/                               // Regex used to find the dynamic parte of the name of the field that will be changed.
remove       : undefined                                  // Callback trigged before an item be removed.
removeButton : '.nestedy-remove'                          // The class name of the remove button.
selectable   : ['select-one', 'select-multiple']          // The selectable fields. This fields will be selected with selected="selected"
template     : undefined                                  // The element inside the `body` that will be used as a model to be cloned.
typeful      : [                                          // The typeful fields.
                  'color',
                  'date',
                  'datetime',
                  'datetime-local',
                  'email',
                  'hidden',
                  'month',
                  'number',
                  'password',
                  'range',
                  'search',
                  'tel',
                  'text',
                  'textarea',
                  'time',
                  'url',
                  'week'
               ]

Usage without template

<form>
  <div class="nestedy">
    <div class="nestedy-item">
      <input id="some_0_value" name="some[0][value]">
      <i class="nestedy-remove"></i>
    </div>
  </div>

  <i class="nestedy-add"></i>
</form>

$('form').nestedy();

Usage with template

<div id="template" class="nestedy-item">
  <input id="some_0_value" name="some[0][value]">
  <i class="nestedy-remove"></i>
</div>

<form>
  <div class="nestedy"></div>
  <i class="nestedy-add"></i>
</form>

$('form').nestedy({
  idx      : /{index}/,
  namex    : /{index}/,
  template : '#template'
});

Functions

$('form').nestedy('add', 2); // Adds a number of items. Ommiting the number, 1 is de default.

$('form').nestedy('remove', 3); // Removes a item. `first`, `last` or the number. Ommiting it, last is de default.

Licence

The MIT License

Donate

You can do it via PayPal. Thanks! (: