746 lines
32 KiB
HTML
746 lines
32 KiB
HTML
{% extends 'base.html' %}
|
|
|
|
{% load static %}
|
|
|
|
{% block title %}Form Plugins{% endblock %}
|
|
|
|
{% block css %}
|
|
<link href="{% static 'plugins/bootstrap-daterangepicker/daterangepicker.css' %}" rel="stylesheet" />
|
|
<link href="{% static 'plugins/select2/dist/css/select2.min.css' %}" rel="stylesheet" />
|
|
<link href="{% static 'plugins/bootstrap-datepicker/dist/css/bootstrap-datepicker.css' %}" rel="stylesheet" />
|
|
<link href="{% static 'plugins/bootstrap-timepicker/css/bootstrap-timepicker.min.css' %}" rel="stylesheet" />
|
|
<link href="{% static 'plugins/ion-rangeslider/css/ion.rangeSlider.min.css' %}" rel="stylesheet" />
|
|
<link href="{% static 'plugins/tag-it/css/jquery.tagit.css' %}" rel="stylesheet" />
|
|
<link href="{% static 'plugins/spectrum-colorpicker2/dist/spectrum.min.css' %}" rel="stylesheet" />
|
|
<link href="{% static 'plugins/select-picker/dist/picker.min.css' %}" rel="stylesheet" />
|
|
{% endblock %}
|
|
|
|
{% block js %}
|
|
<script src="{% static 'plugins/moment/min/moment.min.js' %}"></script>
|
|
<script src="{% static 'plugins/bootstrap-daterangepicker/daterangepicker.js' %}"></script>
|
|
<script src="{% static 'plugins/select2/dist/js/select2.min.js' %}"></script>
|
|
<script src="{% static 'plugins/bootstrap-datepicker/dist/js/bootstrap-datepicker.js' %}"></script>
|
|
<script src="{% static 'plugins/bootstrap-timepicker/js/bootstrap-timepicker.min.js' %}"></script>
|
|
<script src="{% static 'plugins/ion-rangeslider/js/ion.rangeSlider.min.js' %}"></script>
|
|
<script src="{% static 'plugins/jquery.maskedinput/src/jquery.maskedinput.js' %}"></script>
|
|
<script src="{% static 'plugins/jquery-migrate/dist/jquery-migrate.min.js' %}"></script>
|
|
<script src="{% static 'plugins/tag-it/js/tag-it.min.js' %}"></script>
|
|
<script src="{% static 'plugins/clipboard/dist/clipboard.min.js' %}"></script>
|
|
<script src="{% static 'plugins/spectrum-colorpicker2/dist/spectrum.min.js' %}"></script>
|
|
<script src="{% static 'plugins/select-picker/dist/picker.min.js' %}"></script>
|
|
<script src="{% static 'js/demo/form-plugins.demo.js' %}"></script>
|
|
<script src="{% static 'plugins/@highlightjs/cdn-assets/highlight.min.js' %}"></script>
|
|
<script src="{% static 'js/demo/render.highlight.js' %}"></script>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<!-- BEGIN breadcrumb -->
|
|
<ol class="breadcrumb float-xl-end">
|
|
<li class="breadcrumb-item"><a href="javascript:;">Home</a></li>
|
|
<li class="breadcrumb-item"><a href="javascript:;">Form Stuff</a></li>
|
|
<li class="breadcrumb-item active">Form Plugins</li>
|
|
</ol>
|
|
<!-- END breadcrumb -->
|
|
<!-- BEGIN page-header -->
|
|
<h1 class="page-header">Form Plugins <small>header small text goes here...</small></h1>
|
|
<!-- END page-header -->
|
|
<!-- BEGIN row -->
|
|
<div class="row">
|
|
<!-- BEGIN col-6 -->
|
|
<div class="col-xl-6">
|
|
<!-- BEGIN panel -->
|
|
<div class="panel panel-inverse" data-sortable-id="form-plugins-1">
|
|
<!-- BEGIN panel-heading -->
|
|
<div class="panel-heading">
|
|
<h4 class="panel-title">Date Range Picker</h4>
|
|
<div class="panel-heading-btn">
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-default" data-toggle="panel-expand"><i class="fa fa-expand"></i></a>
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-success" data-toggle="panel-reload"><i class="fa fa-redo"></i></a>
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-warning" data-toggle="panel-collapse"><i class="fa fa-minus"></i></a>
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-danger" data-toggle="panel-remove"><i class="fa fa-times"></i></a>
|
|
</div>
|
|
</div>
|
|
<!-- END panel-heading -->
|
|
<!-- BEGIN panel-body -->
|
|
<div class="panel-body p-0">
|
|
<form class="form-horizontal form-bordered">
|
|
<div class="form-group row">
|
|
<label class="form-label col-form-label col-lg-4">Default Date Ranges</label>
|
|
<div class="col-lg-8">
|
|
<div class="input-group" id="default-daterange">
|
|
<input type="text" name="default-daterange" class="form-control" value="" placeholder="click to select the date range" />
|
|
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-group row">
|
|
<label class="form-label col-form-label col-lg-4">Advance Date Ranges</label>
|
|
<div class="col-lg-8">
|
|
<div id="advance-daterange" class="btn btn-default d-flex text-start align-items-center">
|
|
<span class="flex-1"></span>
|
|
<i class="fa fa-caret-down"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<!-- END panel-body -->
|
|
<!-- BEGIN hljs-wrapper -->
|
|
<div class="hljs-wrapper">
|
|
<pre><code class="html" data-url="{% static 'data/form-plugins/code-1.json' %}"></code></pre>
|
|
</div>
|
|
<!-- END hljs-wrapper -->
|
|
</div>
|
|
<!-- END panel -->
|
|
<!-- BEGIN panel -->
|
|
<div class="panel panel-inverse" data-sortable-id="form-plugins-2">
|
|
<!-- BEGIN panel-heading -->
|
|
<div class="panel-heading">
|
|
<h4 class="panel-title">Select2</h4>
|
|
<div class="panel-heading-btn">
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-default" data-toggle="panel-expand"><i class="fa fa-expand"></i></a>
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-success" data-toggle="panel-reload"><i class="fa fa-redo"></i></a>
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-warning" data-toggle="panel-collapse"><i class="fa fa-minus"></i></a>
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-danger" data-toggle="panel-remove"><i class="fa fa-times"></i></a>
|
|
</div>
|
|
</div>
|
|
<!-- END panel-heading -->
|
|
<!-- BEGIN panel-body -->
|
|
<div class="panel-body p-0">
|
|
<form class="form-horizontal form-bordered">
|
|
<div class="form-group row">
|
|
<label class="form-label col-form-label col-lg-4">Basic Select2</label>
|
|
<div class="col-lg-8">
|
|
<select class="default-select2 form-control">
|
|
<optgroup label="Alaskan/Hawaiian Time Zone">
|
|
<option value="AK">Alaska</option>
|
|
<option value="HI">Hawaii</option>
|
|
</optgroup>
|
|
<optgroup label="Pacific Time Zone">
|
|
<option value="CA">California</option>
|
|
<option value="NV">Nevada</option>
|
|
<option value="OR">Oregon</option>
|
|
<option value="WA">Washington</option>
|
|
</optgroup>
|
|
<optgroup label="Mountain Time Zone">
|
|
<option value="AZ">Arizona</option>
|
|
<option value="CO">Colorado</option>
|
|
<option value="ID">Idaho</option>
|
|
<option value="MT">Montana</option>
|
|
<option value="NE">Nebraska</option>
|
|
<option value="NM">New Mexico</option>
|
|
<option value="ND">North Dakota</option>
|
|
<option value="UT">Utah</option>
|
|
<option value="WY">Wyoming</option>
|
|
</optgroup>
|
|
<optgroup label="Central Time Zone">
|
|
<option value="AL">Alabama</option>
|
|
<option value="AR">Arkansas</option>
|
|
<option value="IL">Illinois</option>
|
|
<option value="IA">Iowa</option>
|
|
<option value="KS">Kansas</option>
|
|
<option value="KY">Kentucky</option>
|
|
<option value="LA">Louisiana</option>
|
|
<option value="MN">Minnesota</option>
|
|
<option value="MS">Mississippi</option>
|
|
<option value="MO">Missouri</option>
|
|
<option value="OK">Oklahoma</option>
|
|
<option value="SD">South Dakota</option>
|
|
<option value="TX">Texas</option>
|
|
<option value="TN">Tennessee</option>
|
|
<option value="WI">Wisconsin</option>
|
|
</optgroup>
|
|
<optgroup label="Eastern Time Zone">
|
|
<option value="CT">Connecticut</option>
|
|
<option value="DE">Delaware</option>
|
|
<option value="FL">Florida</option>
|
|
<option value="GA">Georgia</option>
|
|
<option value="IN">Indiana</option>
|
|
<option value="ME">Maine</option>
|
|
<option value="MD">Maryland</option>
|
|
<option value="MA">Massachusetts</option>
|
|
<option value="MI">Michigan</option>
|
|
<option value="NH">New Hampshire</option>
|
|
<option value="NJ">New Jersey</option>
|
|
<option value="NY">New York</option>
|
|
<option value="NC">North Carolina</option>
|
|
<option value="OH">Ohio</option>
|
|
<option value="PA">Pennsylvania</option>
|
|
<option value="RI">Rhode Island</option>
|
|
<option value="SC">South Carolina</option>
|
|
<option value="VT">Vermont</option>
|
|
<option value="VA">Virginia</option>
|
|
<option value="WV">West Virginia</option>
|
|
</optgroup>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="form-group row">
|
|
<label class="form-label col-form-label col-lg-4">Multiple Selection</label>
|
|
<div class="col-lg-8">
|
|
<select class="multiple-select2 form-control" multiple>
|
|
<optgroup label="Alaskan/Hawaiian Time Zone">
|
|
<option value="AK">Alaska</option>
|
|
<option value="HI">Hawaii</option>
|
|
</optgroup>
|
|
<optgroup label="Pacific Time Zone">
|
|
<option value="CA">California</option>
|
|
<option value="NV">Nevada</option>
|
|
<option value="OR">Oregon</option>
|
|
<option value="WA">Washington</option>
|
|
</optgroup>
|
|
<optgroup label="Mountain Time Zone">
|
|
<option value="AZ">Arizona</option>
|
|
<option value="CO">Colorado</option>
|
|
<option value="ID">Idaho</option>
|
|
<option value="MT">Montana</option>
|
|
<option value="NE">Nebraska</option>
|
|
<option value="NM">New Mexico</option>
|
|
<option value="ND">North Dakota</option>
|
|
<option value="UT">Utah</option>
|
|
<option value="WY">Wyoming</option>
|
|
</optgroup>
|
|
<optgroup label="Central Time Zone">
|
|
<option value="AL">Alabama</option>
|
|
<option value="AR">Arkansas</option>
|
|
<option value="IL">Illinois</option>
|
|
<option value="IA">Iowa</option>
|
|
<option value="KS">Kansas</option>
|
|
<option value="KY">Kentucky</option>
|
|
<option value="LA">Louisiana</option>
|
|
<option value="MN">Minnesota</option>
|
|
<option value="MS">Mississippi</option>
|
|
<option value="MO">Missouri</option>
|
|
<option value="OK">Oklahoma</option>
|
|
<option value="SD">South Dakota</option>
|
|
<option value="TX">Texas</option>
|
|
<option value="TN">Tennessee</option>
|
|
<option value="WI">Wisconsin</option>
|
|
</optgroup>
|
|
<optgroup label="Eastern Time Zone">
|
|
<option value="CT">Connecticut</option>
|
|
<option value="DE">Delaware</option>
|
|
<option value="FL">Florida</option>
|
|
<option value="GA">Georgia</option>
|
|
<option value="IN">Indiana</option>
|
|
<option value="ME">Maine</option>
|
|
<option value="MD">Maryland</option>
|
|
<option value="MA">Massachusetts</option>
|
|
<option value="MI">Michigan</option>
|
|
<option value="NH">New Hampshire</option>
|
|
<option value="NJ">New Jersey</option>
|
|
<option value="NY">New York</option>
|
|
<option value="NC">North Carolina</option>
|
|
<option value="OH">Ohio</option>
|
|
<option value="PA">Pennsylvania</option>
|
|
<option value="RI">Rhode Island</option>
|
|
<option value="SC">South Carolina</option>
|
|
<option value="VT">Vermont</option>
|
|
<option value="VA">Virginia</option>
|
|
<option value="WV">West Virginia</option>
|
|
</optgroup>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<!-- END panel-body -->
|
|
<!-- BEGIN hljs-wrapper -->
|
|
<div class="hljs-wrapper">
|
|
<pre><code class="html" data-url="{% static 'data/form-plugins/code-2.json' %}"></code></pre>
|
|
</div>
|
|
<!-- END hljs-wrapper -->
|
|
</div>
|
|
<!-- END panel -->
|
|
<!-- BEGIN panel -->
|
|
<div class="panel panel-inverse" data-sortable-id="form-plugins-3">
|
|
<!-- BEGIN panel-heading -->
|
|
<div class="panel-heading">
|
|
<h4 class="panel-title">Datepicker</h4>
|
|
<div class="panel-heading-btn">
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-default" data-toggle="panel-expand"><i class="fa fa-expand"></i></a>
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-success" data-toggle="panel-reload"><i class="fa fa-redo"></i></a>
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-warning" data-toggle="panel-collapse"><i class="fa fa-minus"></i></a>
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-danger" data-toggle="panel-remove"><i class="fa fa-times"></i></a>
|
|
</div>
|
|
</div>
|
|
<!-- END panel-heading -->
|
|
<!-- BEGIN panel-body -->
|
|
<div class="panel-body p-0">
|
|
<form class="form-horizontal form-bordered">
|
|
<div class="form-group row">
|
|
<label class="form-label col-form-label col-lg-4">Default Datepicker</label>
|
|
<div class="col-lg-8">
|
|
<input type="text" class="form-control" id="datepicker-default" placeholder="Select Date" value="04/1/2025" />
|
|
</div>
|
|
</div>
|
|
<div class="form-group row">
|
|
<label class="form-label col-form-label col-lg-4">Inline Datepicker</label>
|
|
<div class="col-lg-8">
|
|
<div id="datepicker-inline">
|
|
<div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-group row">
|
|
<label class="form-label col-form-label col-lg-4">Auto Close Datepicker</label>
|
|
<div class="col-lg-8">
|
|
<input type="text" class="form-control" id="datepicker-autoClose" placeholder="Auto Close Datepicker" />
|
|
</div>
|
|
</div>
|
|
<div class="form-group row">
|
|
<label class="form-label col-form-label col-lg-4">Disabled Past Date</label>
|
|
<div class="col-lg-8">
|
|
<div class="input-group date" id="datepicker-disabled-past" data-date-format="dd-mm-yyyy" data-date-start-date="Date.default">
|
|
<input type="text" class="form-control" placeholder="Select Date" />
|
|
<span class="input-group-text input-group-addon"><i class="fa fa-calendar"></i></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-group row">
|
|
<label class="form-label col-form-label col-lg-4">Range Datepicker</label>
|
|
<div class="col-lg-8">
|
|
<div class="input-group input-daterange">
|
|
<input type="text" class="form-control" name="start" placeholder="Date Start" />
|
|
<span class="input-group-text input-group-addon">to</span>
|
|
<input type="text" class="form-control" name="end" placeholder="Date End" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<!-- END panel-body -->
|
|
<!-- BEGIN hljs-wrapper -->
|
|
<div class="hljs-wrapper">
|
|
<pre><code class="html" data-url="{% static 'data/form-plugins/code-3.json' %}"></code></pre>
|
|
</div>
|
|
<!-- END hljs-wrapper -->
|
|
</div>
|
|
<!-- END panel -->
|
|
<!-- BEGIN panel -->
|
|
<div class="panel panel-inverse" data-sortable-id="form-plugins-4">
|
|
<!-- BEGIN panel-heading -->
|
|
<div class="panel-heading">
|
|
<h4 class="panel-title">Select Picker</h4>
|
|
<div class="panel-heading-btn">
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-default" data-toggle="panel-expand"><i class="fa fa-expand"></i></a>
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-success" data-toggle="panel-reload"><i class="fa fa-redo"></i></a>
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-warning" data-toggle="panel-collapse"><i class="fa fa-minus"></i></a>
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-danger" data-toggle="panel-remove"><i class="fa fa-times"></i></a>
|
|
</div>
|
|
</div>
|
|
<!-- END panel-heading -->
|
|
<!-- BEGIN panel-body -->
|
|
<div class="panel-body p-0">
|
|
<form class="form-horizontal form-bordered">
|
|
<div class="form-group row">
|
|
<label class="form-label col-form-label col-lg-4">Default</label>
|
|
<div class="col-lg-8">
|
|
<select class="form-control" id="ex-basic">
|
|
<option>Mustard</option>
|
|
<option>Ketchup</option>
|
|
<option>Relish</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="form-group row">
|
|
<label class="form-label col-form-label col-lg-4">Multiple SelectBox</label>
|
|
<div class="col-lg-8">
|
|
<select class="selectpicker form-control" id="ex-multiselect" multiple>
|
|
<optgroup label="Picnic">
|
|
<option>Mustard</option>
|
|
<option>Ketchup</option>
|
|
<option>Relish</option>
|
|
</optgroup>
|
|
<optgroup label="Camping">
|
|
<option>Tent</option>
|
|
<option>Flashlight</option>
|
|
<option>Toilet Paper</option>
|
|
</optgroup>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="form-group row">
|
|
<label class="form-label col-form-label col-lg-4">Live Search</label>
|
|
<div class="col-lg-8">
|
|
<select class="selectpicker form-control" id="ex-search" multiple>
|
|
<option value="1">Mustard</option>
|
|
<option value="2">Ketchup</option>
|
|
<option value="3">Relish</option>
|
|
<option value="4">Tent</option>
|
|
<option value="5">Flashlight</option>
|
|
<option value="6">Toilet Paper</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<!-- END panel-body -->
|
|
<!-- BEGIN hljs-wrapper -->
|
|
<div class="hljs-wrapper">
|
|
<pre><code class="html" data-url="{% static 'data/form-plugins/code-4.json' %}"></code></pre>
|
|
</div>
|
|
<!-- END hljs-wrapper -->
|
|
</div>
|
|
<!-- END panel -->
|
|
<!-- BEGIN panel -->
|
|
<div class="panel panel-inverse" data-sortable-id="form-plugins-5">
|
|
<!-- BEGIN panel-heading -->
|
|
<div class="panel-heading">
|
|
<h4 class="panel-title">IonRange Slider</h4>
|
|
<div class="panel-heading-btn">
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-default" data-toggle="panel-expand"><i class="fa fa-expand"></i></a>
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-success" data-toggle="panel-reload"><i class="fa fa-redo"></i></a>
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-warning" data-toggle="panel-collapse"><i class="fa fa-minus"></i></a>
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-danger" data-toggle="panel-remove"><i class="fa fa-times"></i></a>
|
|
</div>
|
|
</div>
|
|
<!-- END panel-heading -->
|
|
<!-- BEGIN panel-body -->
|
|
<div class="panel-body p-0">
|
|
<form class="form-horizontal form-bordered">
|
|
<div class="form-group row">
|
|
<label class="form-label col-form-label col-lg-4">Default</label>
|
|
<div class="col-lg-8">
|
|
<input type="text" id="default_rangeSlider" name="default_rangeSlider" value="" />
|
|
</div>
|
|
</div>
|
|
<div class="form-group row">
|
|
<label class="form-label col-form-label col-lg-4">Custom Range</label>
|
|
<div class="col-lg-8">
|
|
<input type="text" id="customRange_rangeSlider" name="customRange_rangeSlider" value="" />
|
|
</div>
|
|
</div>
|
|
<div class="form-group row">
|
|
<label class="form-label col-form-label col-lg-4">Custom Values</label>
|
|
<div class="col-lg-8">
|
|
<input type="text" id="customValue_rangeSlider" name="customValue_rangeSlider" value="" />
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<!-- END panel-body -->
|
|
<!-- BEGIN hljs-wrapper -->
|
|
<div class="hljs-wrapper">
|
|
<pre><code class="html" data-url="{% static 'data/form-plugins/code-5.json' %}"></code></pre>
|
|
</div>
|
|
<!-- END hljs-wrapper -->
|
|
</div>
|
|
<!-- END panel -->
|
|
</div>
|
|
<!-- END col-6 -->
|
|
<!-- BEGIN col-6 -->
|
|
<div class="col-xl-6">
|
|
<!-- BEGIN panel -->
|
|
<div class="panel panel-inverse" data-sortable-id="form-plugins-6">
|
|
<!-- BEGIN panel-heading -->
|
|
<div class="panel-heading">
|
|
<h4 class="panel-title">Colorpicker</h4>
|
|
<div class="panel-heading-btn">
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-default" data-toggle="panel-expand"><i class="fa fa-expand"></i></a>
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-success" data-toggle="panel-reload"><i class="fa fa-redo"></i></a>
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-warning" data-toggle="panel-collapse"><i class="fa fa-minus"></i></a>
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-danger" data-toggle="panel-remove"><i class="fa fa-times"></i></a>
|
|
</div>
|
|
</div>
|
|
<!-- END panel-heading -->
|
|
<!-- BEGIN panel-body -->
|
|
<div class="panel-body p-0">
|
|
<form class="form-horizontal form-bordered">
|
|
<div class="form-group row">
|
|
<label class="form-label col-form-label col-lg-4">Default Colorpicker</label>
|
|
<div class="col-lg-8">
|
|
<input type="text" value="#007aff" class="form-control" id="colorpicker-default" />
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<!-- END panel-body -->
|
|
<!-- BEGIN hljs-wrapper -->
|
|
<div class="hljs-wrapper">
|
|
<pre><code class="html" data-url="{% static 'data/form-plugins/code-6.json' %}"></code></pre>
|
|
</div>
|
|
<!-- END hljs-wrapper -->
|
|
</div>
|
|
<!-- END panel -->
|
|
<!-- BEGIN panel -->
|
|
<div class="panel panel-inverse" data-sortable-id="form-plugins-7">
|
|
<!-- BEGIN panel-heading -->
|
|
<div class="panel-heading">
|
|
<h4 class="panel-title">Timepicker</h4>
|
|
<div class="panel-heading-btn">
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-default" data-toggle="panel-expand"><i class="fa fa-expand"></i></a>
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-success" data-toggle="panel-reload"><i class="fa fa-redo"></i></a>
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-warning" data-toggle="panel-collapse"><i class="fa fa-minus"></i></a>
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-danger" data-toggle="panel-remove"><i class="fa fa-times"></i></a>
|
|
</div>
|
|
</div>
|
|
<!-- END panel-heading -->
|
|
<!-- BEGIN panel-body -->
|
|
<div class="panel-body p-0">
|
|
<form class="form-horizontal form-bordered">
|
|
<div class="form-group row">
|
|
<label class="form-label col-form-label col-lg-4">Default timepicker</label>
|
|
<div class="col-lg-8">
|
|
<div class="input-group bootstrap-timepicker">
|
|
<input id="timepicker" type="text" class="form-control" />
|
|
<span class="input-group-text input-group-addon"><i class="fa fa-clock"></i></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<!-- END panel-body -->
|
|
<!-- BEGIN hljs-wrapper -->
|
|
<div class="hljs-wrapper">
|
|
<pre><code class="html" data-url="{% static 'data/form-plugins/code-7.json' %}"></code></pre>
|
|
</div>
|
|
<!-- END hljs-wrapper -->
|
|
</div>
|
|
<!-- END panel -->
|
|
<!-- BEGIN panel -->
|
|
<div class="panel panel-inverse" data-sortable-id="form-plugins-8">
|
|
<!-- BEGIN panel-heading -->
|
|
<div class="panel-heading">
|
|
<h4 class="panel-title">jQuery Autocomplete</h4>
|
|
<div class="panel-heading-btn">
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-default" data-toggle="panel-expand"><i class="fa fa-expand"></i></a>
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-success" data-toggle="panel-reload"><i class="fa fa-redo"></i></a>
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-warning" data-toggle="panel-collapse"><i class="fa fa-minus"></i></a>
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-danger" data-toggle="panel-remove"><i class="fa fa-times"></i></a>
|
|
</div>
|
|
</div>
|
|
<!-- END panel-heading -->
|
|
<!-- BEGIN panel-body -->
|
|
<div class="panel-body p-0">
|
|
<form class="form-horizontal form-bordered">
|
|
<div class="form-group row">
|
|
<label class="form-label col-form-label col-lg-4">Autocomplete</label>
|
|
<div class="col-lg-8">
|
|
<input type="text" name="" id="jquery-autocomplete" class="form-control" placeholder="Try typing 'a' or 'b'." />
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<!-- END panel-body -->
|
|
<!-- BEGIN hljs-wrapper -->
|
|
<div class="hljs-wrapper">
|
|
<pre><code class="html" data-url="{% static 'data/form-plugins/code-8.json' %}"></code></pre>
|
|
</div>
|
|
<!-- END hljs-wrapper -->
|
|
</div>
|
|
<!-- END panel -->
|
|
<!-- BEGIN panel -->
|
|
<div class="panel panel-inverse" data-sortable-id="form-plugins-9">
|
|
<!-- BEGIN panel-heading -->
|
|
<div class="panel-heading">
|
|
<h4 class="panel-title">Masked Input</h4>
|
|
<div class="panel-heading-btn">
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-default" data-toggle="panel-expand"><i class="fa fa-expand"></i></a>
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-success" data-toggle="panel-reload"><i class="fa fa-redo"></i></a>
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-warning" data-toggle="panel-collapse"><i class="fa fa-minus"></i></a>
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-danger" data-toggle="panel-remove"><i class="fa fa-times"></i></a>
|
|
</div>
|
|
</div>
|
|
<!-- END panel-heading -->
|
|
<!-- BEGIN panel-body -->
|
|
<div class="panel-body p-0">
|
|
<form class="form-horizontal form-bordered">
|
|
<div class="form-group row">
|
|
<label class="form-label col-form-label col-lg-4">Date</label>
|
|
<div class="col-lg-8">
|
|
<input type="text" class="form-control" id="masked-input-date" placeholder="dd/mm/yyyy" />
|
|
</div>
|
|
</div>
|
|
<div class="form-group row">
|
|
<label class="form-label col-form-label col-lg-4">Phone</label>
|
|
<div class="col-lg-8">
|
|
<input type="text" class="form-control" id="masked-input-phone" placeholder="(999) 999-9999" />
|
|
</div>
|
|
</div>
|
|
<div class="form-group row">
|
|
<label class="form-label col-form-label col-lg-4">Tax ID</label>
|
|
<div class="col-lg-8">
|
|
<input type="text" class="form-control" id="masked-input-tid" placeholder="99-9999999" />
|
|
</div>
|
|
</div>
|
|
<div class="form-group row">
|
|
<label class="form-label col-form-label col-lg-4">Product Key</label>
|
|
<div class="col-lg-8">
|
|
<input type="text" class="form-control" id="masked-input-pkey" placeholder="a*-999-a999" />
|
|
</div>
|
|
</div>
|
|
<div class="form-group row">
|
|
<label class="form-label col-form-label col-lg-4">SSN</label>
|
|
<div class="col-lg-8">
|
|
<input type="text" class="form-control" id="masked-input-ssn" placeholder="999/99/9999" />
|
|
</div>
|
|
</div>
|
|
<div class="form-group row">
|
|
<label class="form-label col-form-label col-lg-4">SSN</label>
|
|
<div class="col-lg-8">
|
|
<input type="text" class="form-control" id="masked-input-pno" placeholder="AAA-9999-A" />
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<!-- END panel-body -->
|
|
<!-- BEGIN hljs-wrapper -->
|
|
<div class="hljs-wrapper">
|
|
<pre><code class="html" data-url="{% static 'data/form-plugins/code-9.json' %}"></code></pre>
|
|
</div>
|
|
<!-- END hljs-wrapper -->
|
|
</div>
|
|
<!-- END panel -->
|
|
<!-- BEGIN panel -->
|
|
<div class="panel panel-inverse" data-sortable-id="form-plugins-10">
|
|
<!-- BEGIN panel-heading -->
|
|
<div class="panel-heading">
|
|
<h4 class="panel-title">jQuery Tag-It</h4>
|
|
<div class="panel-heading-btn">
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-default" data-toggle="panel-expand"><i class="fa fa-expand"></i></a>
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-success" data-toggle="panel-reload"><i class="fa fa-redo"></i></a>
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-warning" data-toggle="panel-collapse"><i class="fa fa-minus"></i></a>
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-danger" data-toggle="panel-remove"><i class="fa fa-times"></i></a>
|
|
</div>
|
|
</div>
|
|
<!-- END panel-heading -->
|
|
<!-- BEGIN panel-body -->
|
|
<div class="panel-body p-0">
|
|
<form class="form-horizontal form-bordered">
|
|
<div class="form-group row">
|
|
<label class="form-label col-form-label col-lg-4">Default Tags Input with Autocomplete</label>
|
|
<div class="col-lg-8">
|
|
<ul id="jquery-tagIt-default">
|
|
<li>Tag1</li>
|
|
<li>Tag2</li>
|
|
</ul>
|
|
<p>Try to enter "c++, java, php" </p>
|
|
</div>
|
|
</div>
|
|
<div class="form-group row">
|
|
<label class="form-label col-form-label col-lg-4">Inverse Theme</label>
|
|
<div class="col-lg-8">
|
|
<ul id="jquery-tagIt-inverse" class="inverse">
|
|
<li>Tag1</li>
|
|
<li>Tag2</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="form-group row">
|
|
<label class="form-label col-form-label col-lg-4">White Theme</label>
|
|
<div class="col-lg-8">
|
|
<ul id="jquery-tagIt-white" class="white">
|
|
<li>Tag1</li>
|
|
<li>Tag2</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="form-group row">
|
|
<label class="form-label col-form-label col-lg-4">Primary Theme</label>
|
|
<div class="col-lg-8">
|
|
<ul id="jquery-tagIt-primary" class="primary">
|
|
<li>Tag1</li>
|
|
<li>Tag2</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="form-group row">
|
|
<label class="form-label col-form-label col-lg-4">Info Theme</label>
|
|
<div class="col-lg-8">
|
|
<ul id="jquery-tagIt-info" class="info">
|
|
<li>Tag1</li>
|
|
<li>Tag2</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="form-group row">
|
|
<label class="form-label col-form-label col-lg-4">Success Theme</label>
|
|
<div class="col-lg-8">
|
|
<ul id="jquery-tagIt-success" class="success">
|
|
<li>Tag1</li>
|
|
<li>Tag2</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="form-group row">
|
|
<label class="form-label col-form-label col-lg-4">Warning Theme</label>
|
|
<div class="col-lg-8">
|
|
<ul id="jquery-tagIt-warning" class="warning">
|
|
<li>Tag1</li>
|
|
<li>Tag2</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="form-group row">
|
|
<label class="form-label col-form-label col-lg-4">Danger Theme</label>
|
|
<div class="col-lg-8">
|
|
<ul id="jquery-tagIt-danger" class="danger">
|
|
<li>Tag1</li>
|
|
<li>Tag2</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<!-- END panel-body -->
|
|
<!-- BEGIN hljs-wrapper -->
|
|
<div class="hljs-wrapper">
|
|
<pre><code class="html" data-url="{% static 'data/form-plugins/code-10.json' %}"></code></pre>
|
|
</div>
|
|
<!-- END hljs-wrapper -->
|
|
</div>
|
|
<!-- END panel -->
|
|
<!-- BEGIN panel -->
|
|
<div class="panel panel-inverse" data-sortable-id="form-plugins-11">
|
|
<!-- BEGIN panel-heading -->
|
|
<div class="panel-heading">
|
|
<h4 class="panel-title"> Clipboard.js <span class="badge bg-success ms-2">NEW</span></h4>
|
|
<div class="panel-heading-btn">
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-default" data-toggle="panel-expand"><i class="fa fa-expand"></i></a>
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-success" data-toggle="panel-reload"><i class="fa fa-redo"></i></a>
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-warning" data-toggle="panel-collapse"><i class="fa fa-minus"></i></a>
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-danger" data-toggle="panel-remove"><i class="fa fa-times"></i></a>
|
|
</div>
|
|
</div>
|
|
<!-- END panel-heading -->
|
|
<!-- BEGIN panel-body -->
|
|
<div class="panel-body p-0">
|
|
<form class="form-horizontal form-bordered">
|
|
<div class="form-group row">
|
|
<label class="form-label col-form-label col-lg-4">Default</label>
|
|
<div class="col-lg-8">
|
|
<div class="input-group">
|
|
<input id="clipboard-default" type="text" class="form-control" value="https://github.com/zenorocha/clipboard.js.git" />
|
|
<button class="btn btn-dark" type="button" data-toggle="clipboard" data-clipboard-target="#clipboard-default"><i class="fa fa-clipboard"></i></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-group row">
|
|
<label class="form-label col-form-label col-lg-4">Cut to copy</label>
|
|
<div class="col-lg-8">
|
|
<textarea class="form-control mb-10px" id="clipboard-textarea" rows="7">Mussum ipsum cacilds...</textarea>
|
|
<button class="btn btn-dark btn-sm" type="button" data-toggle="clipboard" data-clipboard-target="#clipboard-textarea" data-clipboard-action="cut">Cut to clipboard</button>
|
|
</div>
|
|
</div>
|
|
<div class="form-group row">
|
|
<label class="form-label col-form-label col-lg-4">without Form</label>
|
|
<div class="col-lg-8">
|
|
<button class="btn btn-dark btn-sm" type="button" data-toggle="clipboard" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js' %}">Click to copy</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<!-- END panel-body -->
|
|
<!-- BEGIN hljs-wrapper -->
|
|
<div class="hljs-wrapper">
|
|
<pre><code class="html" data-url="{% static 'data/form-plugins/code-11.json' %}"></code></pre>
|
|
</div>
|
|
<!-- END hljs-wrapper -->
|
|
</div>
|
|
<!-- END panel -->
|
|
</div>
|
|
<!-- END col-6 -->
|
|
</div>
|
|
<!-- END row -->
|
|
{% endblock %} |