Backbone-Forms jQuery UI editors

A Backbone-Forms jQuery UI related editors

Table of contents

• Installation
• jQuery UI editors
  • autocomplete
  • checkbox
  • checkboxes
  • datepicker
  • radio
  • selectmenu
  • slider
  • spinner

Installation

Bower:

bower install backbone-forms-jquery-ui

NPM:

npm install backbone backbone-forms backbone-forms-jquery-ui

jQuery UI editors

autocomplete

Schema options

options - Array of strings or Backbone Collection

editorOptions - jQuery UI autocomplete options

Example

var states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California',
  'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii',
  'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana',
  'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota',
  'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire',
  'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota',
  'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island',
  'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',
  'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'
];

var form = new Backbone.Form({
  schema: {
    state: {
      type: 'jqueryui.autocomplete',
      title: 'State',
      options: states,
      editorOptions: {
        minLength: 2
      }
    }
  }
});

Demo

checkbox

Schema options

editorOptions - jQuery UI checkboxradio options

Example

var form = new Backbone.Form({
  schema: {
    val: {
      type: 'jqueryui.checkbox',
      title: 'Val'
    }
  }
});

Demo

checkboxes

Schema options

editorOptions - jQuery UI checkboxradio options

Example

var form = new Backbone.Form({
  schema: {
    val: {
      type: 'jqueryui.checkboxes',
      title: 'Val',
      options: ['1', '2', '3']
    }
  }
});

Demo

datepicker

Schema options

editorOptions - jQuery UI datepicker options

Example

var form = new Backbone.Form({
  schema: {
    date: {
      type: 'jqueryui.datepicker',
      title: 'Date',
      editorOptions: {
        numberOfMonths: [2, 3]
      }
    }
  }
});

Demo

radio

Schema options

editorOptions - jQuery UI checkboxradio options

Example

var form = new Backbone.Form({
  schema: {
    val: {
      type: 'jqueryui.radio',
      title: 'Val',
      options: ['1', '2', '3']
    }
  }
});

Demo

selectmenu

Schema options

options - Array of strings or Backbone Collection

editorOptions - jQuery UI selectmenu options

Example

var form = new Backbone.Form({
  schema: {
    speed: {
      type: 'jqueryui.selectmenu',
      title: 'Speed',
      options: ['Slower', 'Slow', 'Medium', 'Fast', 'Faster']
    }
  }
});

Demo

slider

Schema options

editorOptions - jQuery UI slider options

Example

var form = new Backbone.Form({
  schema: {
    val: {
      type: 'jqueryui.slide',
      title: 'Val'
    }
  }
});

Demo

spinner

Schema options

editorOptions - jQuery UI spinner options

Example

var form = new Backbone.Form({
  schema: {
    val: {
      type: 'jqueryui.spinner',
      title: 'Val',
      editorOptions: {
        min: 0,
        max: 100,
        page: 10
      }
    }
  }
});

Demo