Select2
<!-- Style --><link rel="stylesheet" href="vendors/select2/css/select2.min.css" type="text/css"><!-- Javascript --><script src="vendors/select2/js/select2.min.js"></script>
<select class="select2-example"> <option>Select</option> <option value="France">France</option> <option value="Brazil">Brazil</option> <option value="Yemen">Yemen</option> <option value="United States">United States</option> <option value="China">China</option> <option value="Argentina">Argentina</option> <option value="Bulgaria">Bulgaria</option></select>
$('.select2-example').select2({ placeholder: 'Select'});

Multiple use

<select class="select2-example" multiple> <option>Select</option> <option value="France">France</option> <option value="Brazil">Brazil</option> <option value="Yemen">Yemen</option> <option value="United States">United States</option> <option value="China">China</option> <option value="Argentina">Argentina</option> <option value="Bulgaria">Bulgaria</option></select>

Multiple and categorized use

<select class="select2-example"> <option>Select</option> <optgroup label="Cities"> <option value="Wonosari">Wonosari</option> <option value="Antipolo">Antipolo</option> <option value="Lesuhe">Lesuhe</option> <option selected value="Sunzhuang">Sunzhuang</option> <option value="Hongchuan">Hongchuan</option> </optgroup> <optgroup label="Countries"> <option value="France">France</option> <option selected value="Brazil">Brazil</option> <option selected value="Yemen">Yemen</option> <option selected value="United States">United States</option> <option value="China">China</option> <option value="Argentina">Argentina</option> <option value="Bulgaria">Bulgaria</option> </optgroup></select>
Range Slider

Set min value, max value and start point

<!-- Style --><link rel="stylesheet" href="vendors/range-slider/css/ion.rangeSlider.min.css" type="text/css"><!-- Javascript --><script src="vendors/range-slider/js/ion.rangeSlider.min.js"></script>
<input type="text" id="rangeSlider-example">
$("#rangeSlider-example").ionRangeSlider({ min: 100, max: 1000, from: 550, skin:"round"});

Set type to double, specify range, show grid and add a prefix"$"

$("#rangeSlider-example").ionRangeSlider({ type:"double", grid: true, min: 0, max: 1000, from: 200, to: 800, prefix:"$", skin:"round"});

Add a step to previous config

$("#rangeSlider-example").ionRangeSlider({ type:"double", grid: true, min: -1000, max: 1000, from: -500, to: 500, step: 250, skin:"round"});

Force fractional values, using fractional step 0.1

$("#rangeSlider-example").ionRangeSlider({ type:"double", grid: true, min: -12.8, max: 12.8, from: -3.2, to: 3.2, step: 0.1, skin:"round"});

Values array could be anything, even strings

$("#rangeSlider-example").ionRangeSlider({ grid: true, from: new Date().getMonth(), values: ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec" ], skin:"round"});

Advanced demo

Taşınmayı önlemek için kilitleme kolları

$("#rangeSlider-example").ionRangeSlider({ min: 0, max: 10000, from: 777, step: 1, // default 1 (set step) grid: true, // default false (enable grid) grid_num: 4, // default 4 (set number of grid cells) grid_snap: false, // default false (snap grid to step) skin:"round"});
Tags Input
<!-- Style --><link rel="stylesheet" href="vendors/tagsinput/bootstrap-tagsinput.css" type="text/css"><!-- Javascript --><script src="vendors/tagsinput/bootstrap-tagsinput.js"></script>
<input type="text" class="form-control tagsinput-example" placeholder="Tags" value="HTML5, CSS3, JavaScript, Laravel">
$("input.tagsinput-example").tagsinput('items');
Input Mask
<!-- Javascript --><script src="vendors/input-mask/jquery.mask.js"></script>
<input type="text" data-input-mask="phone" class="form-control" placeholder="(555) 555-5555">
$('[data-input-mask="phone"]').mask('(000) 000-0000');
<input type="text" data-input-mask="date" class="form-control" placeholder="2019/12/05">
$('[data-input-mask="date"]').mask('0000/00/00/');
<input type="text" data-input-mask="time" class="form-control" placeholder="00:00:00">
$('[data-input-mask="time"]').mask('00:00:00');
<input type="text" data-input-mask="money" class="form-control" placeholder="54,28">
$('[data-input-mask="money"]').mask('#.##0,00', {reverse: true});
<input type="text" data-input-mask="ip_address" class="form-control" placeholder="192.168.544.444">
$('[data-input-mask="ip_address"]').mask('099.099.099.099');