Skip to content

tomi77/backbone-forms-jquery-ui

Repository files navigation

Backbone-Forms jQuery UI editors

Build Status Code Climate dependencies Status devDependencies Status Downloads

A Backbone-Forms jQuery UI related editors

Table of contents

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