Multiline control
Form control that allows to edit multiple lines, change order, remove lines.
Turn your textarea to multiline control.
Features
- Bootstrap forms layout
- Sort order
- Validation
- Lightweight
Usage
- Include jQuery:
- Include plugin's code:
- Call the plugin:
;
Install via NPM or Yarn
- Install via npm of yarn
npm install --save multiline-control# OR yarn add multiline-control
- Import from your app.js
import 'multiline-control'
- Then add initialize control with
$('.multiline-control').multiline_control();
Make sure you have available global jQuery variable, if case you use Webpack, add ProvidePlugin to your plugins config
new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery',})
Configuration
Full list of congifuration options with default values:
$('.multiline-control').multiline_control({ sortable: true, templateContainer: '<div class="multiline-control"></div>', templateAddBtn: '<a href="#" class="mc-add-btn btn btn-success btn"><i class="glyphicon glyphicon-plus"></i></a>', templateLine: '<div class="form-group mc-row">' + '<div class="input-group">' + '{sorting_handle}' + '<input type="text" class="form-control" name="{name}" value="{value}">' + '<a href="#" class="input-group-addon btn btn-default btn-sm mc-remove-btn">' + '<i class="glyphicon glyphicon-remove"></i>' + '</a>' + '</div>' + '</div>', templateHandle: '<div class="input-group-addon mc-handle" style="cursor: move;"><i class="glyphicon glyphicon-move"></i></div>', templateSortablePlaceholder: '<div class="mc-sortable-placeholder form-group form-control" style="border: 1px dashed blue;"></div>', onChange: $.noop});
Contributing
Check CONTRIBUTING.md for more information.
Browser support
Compatible with all modern browsers with HTML5 support.
License
Muntiline control is licensed under the MIT license.