Skip to content

Latest commit

 

History

History
103 lines (73 loc) · 2.49 KB

README.md

File metadata and controls

103 lines (73 loc) · 2.49 KB

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.