Skip to content

Form control that allows to edit multiple lines, change order, remove lines.

Notifications You must be signed in to change notification settings

vedmant/multiline-control

Repository files navigation

Multiline control

Form control that allows to edit multiple lines, change order, remove lines.

Turn your textarea to multiline control.

Here's a demo!

Features

  • Bootstrap forms layout
  • Sort order
  • Validation
  • Lightweight

Usage

  1. Include jQuery:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  1. Include plugin's code:
<script src="dist/jquery.multiline-control.min.js"></script>
  1. Call the plugin:
$('.multiline-control').multiline_control();

Install via NPM or Yarn

  1. Install via npm of yarn
npm install --save multiline-control
# OR
yarn add multiline-control
  1. Import from your app.js
import 'multiline-control'
  1. 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.

About

Form control that allows to edit multiple lines, change order, remove lines.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published