https://github.com/tomi77/backbone-forms-jquery-ui
Backbone-Forms jQuery UI editors
https://github.com/tomi77/backbone-forms-jquery-ui
autocomplete backbone-forms checkbox checkboxes checkboxradio datepicker jquery-ui radio selectmenu slider spinner
Last synced: 11 months ago
JSON representation
Backbone-Forms jQuery UI editors
- Host: GitHub
- URL: https://github.com/tomi77/backbone-forms-jquery-ui
- Owner: tomi77
- License: mit
- Created: 2016-07-22T10:49:15.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2018-01-16T10:18:35.000Z (about 8 years ago)
- Last Synced: 2025-03-06T14:03:28.169Z (11 months ago)
- Topics: autocomplete, backbone-forms, checkbox, checkboxes, checkboxradio, datepicker, jquery-ui, radio, selectmenu, slider, spinner
- Language: CoffeeScript
- Homepage: https://tomi77.github.io/backbone-forms-jquery-ui/
- Size: 160 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Backbone-Forms jQuery UI editors
[](https://travis-ci.org/tomi77/backbone-forms-jquery-ui)
[](https://codeclimate.com/github/tomi77/backbone-forms-jquery-ui)
[](https://david-dm.org/tomi77/backbone-forms-jquery-ui)
[](https://david-dm.org/tomi77/backbone-forms-jquery-ui?type=dev)
A [Backbone-Forms](https://github.com/powmedia/backbone-forms) [jQuery UI](https://jqueryui.com/) related editors
## Table of contents
* [Installation](#installation)
* [jQuery UI editors](#editors)
* [autocomplete](#autocomplete)
* [checkbox](#checkbox)
* [checkboxes](#checkboxes)
* [datepicker](#datepicker)
* [radio](#radio)
* [selectmenu](#selectmenu)
* [slider](#slider)
* [spinner](#spinner)
## Installation
Bower:
~~~bash
bower install backbone-forms-jquery-ui
~~~
NPM:
~~~bash
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](http://api.jqueryui.com/autocomplete/)
#### Example
~~~js
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](https://tomi77.github.io/backbone-forms-jquery-ui/autocomplete.html)
### checkbox
#### Schema options
`editorOptions` - jQuery UI checkboxradio [options](http://api.jqueryui.com/checkboxradio/)
#### Example
~~~js
var form = new Backbone.Form({
schema: {
val: {
type: 'jqueryui.checkbox',
title: 'Val'
}
}
});
~~~
[Demo](https://tomi77.github.io/backbone-forms-jquery-ui/checkbox.html)
### checkboxes
#### Schema options
`editorOptions` - jQuery UI checkboxradio [options](http://api.jqueryui.com/checkboxradio/)
#### Example
~~~js
var form = new Backbone.Form({
schema: {
val: {
type: 'jqueryui.checkboxes',
title: 'Val',
options: ['1', '2', '3']
}
}
});
~~~
[Demo](https://tomi77.github.io/backbone-forms-jquery-ui/checkboxes.html)
### datepicker
#### Schema options
`editorOptions` - jQuery UI datepicker [options](http://api.jqueryui.com/datepicker/)
#### Example
~~~js
var form = new Backbone.Form({
schema: {
date: {
type: 'jqueryui.datepicker',
title: 'Date',
editorOptions: {
numberOfMonths: [2, 3]
}
}
}
});
~~~
[Demo](https://tomi77.github.io/backbone-forms-jquery-ui/datepicker.html)
### radio
#### Schema options
`editorOptions` - jQuery UI checkboxradio [options](http://api.jqueryui.com/checkboxradio/)
#### Example
~~~js
var form = new Backbone.Form({
schema: {
val: {
type: 'jqueryui.radio',
title: 'Val',
options: ['1', '2', '3']
}
}
});
~~~
[Demo](https://tomi77.github.io/backbone-forms-jquery-ui/radio.html)
### selectmenu
#### Schema options
`options` - Array of strings or Backbone Collection
`editorOptions` - jQuery UI selectmenu [options](http://api.jqueryui.com/selectmenu/)
#### Example
~~~js
var form = new Backbone.Form({
schema: {
speed: {
type: 'jqueryui.selectmenu',
title: 'Speed',
options: ['Slower', 'Slow', 'Medium', 'Fast', 'Faster']
}
}
});
~~~
[Demo](https://tomi77.github.io/backbone-forms-jquery-ui/selectmenu.html)
### slider
#### Schema options
`editorOptions` - jQuery UI slider [options](http://api.jqueryui.com/slider/)
#### Example
~~~js
var form = new Backbone.Form({
schema: {
val: {
type: 'jqueryui.slide',
title: 'Val'
}
}
});
~~~
[Demo](https://tomi77.github.io/backbone-forms-jquery-ui/slider.html)
### spinner
#### Schema options
`editorOptions` - jQuery UI spinner [options](http://api.jqueryui.com/spinner/)
#### Example
~~~js
var form = new Backbone.Form({
schema: {
val: {
type: 'jqueryui.spinner',
title: 'Val',
editorOptions: {
min: 0,
max: 100,
page: 10
}
}
}
});
~~~
[Demo](https://tomi77.github.io/backbone-forms-jquery-ui/spinner.html)