Your IP : 3.149.29.192


Current Path : /home/lentoinv/finationglobal.com/arch/Documentation/
Upload File :
Current File : /home/lentoinv/finationglobal.com/arch/Documentation/form-advanced.html

<!DOCTYPE html>
<html>
<head>
<!-- Meta data -->
<meta charset="UTF-8">
<meta name='viewport' content='width=device-width, initial-scale=1.0, user-scalable=0'>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Zanex – Bootstrap5  Admin & Dashboard Template">
<meta name="author" content="Spruko Technologies Private Limited">
<meta name="keywords" content="admin template,admin dashboard,bootstrap 5 admin template,html template,html admin template,admin,bootstrap 5 html template,html dashboard,dashboard,crm,admin pane,admin dashboard template,html responsive template,crm admin template,dashboard template.">
<!-- Title -->
<title>Zanex – Bootstrap5  Admin & Dashboard Template</title>
<link rel="icon" href="assets/images/favicon.ico" type="image/x-icon">
<link href="assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" type="text/css">
<link href="assets/plugins/iconfonts/icons.css" rel="stylesheet" />
<!-- Custom Css -->
<link href="assets/css/main.css" rel="stylesheet">
<!---Internal  Prism css-->
<link href="assets/plugins/prism/prism.css" rel="stylesheet">
<link href="assets/plugins/treeview-prism/prism.css" rel="stylesheet">
<link href="assets/plugins/treeview-prism/prism-treeview.css" rel="stylesheet">
<link href="assets/css/themes/all-themes.css" rel="stylesheet" />
</head>

<body class="theme-blush">
<!-- Page Loader -->
<div class="page-loader-wrapper">
    <div class="loader">
        <div class="preloader">
            <div class="spinner-layer pl-blush">
                <div class="circle-clipper left">
                    <div class="circle"></div>
                </div>
                <div class="circle-clipper right">
                    <div class="circle"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- #END# Page Loader -->

<!-- Overlay For Sidebars -->
<div class="overlay"></div>
<!-- #END# Overlay For Sidebars -->

<!-- Sidebarover lay -->
<div class="sidebar-overlay" data-toggle="sidebar"></div>

<!-- #Top Bar -->
<section>
    <!-- Left Sidebar -->
    <aside id="leftsidebar" class="sidebar">
        <!-- User Info -->
        <div class="admin-image"> <img src="assets/images/logo-3.png" alt="" > </div>
        <!-- Menu -->
        <div class="menu main-sidebar">
			<ul class="list" id="documenter_nav">
				<li class="nav-item"><a class="nav-link" href="index.html"><i class="fe fe-airplay sidemenu-icon"></i><span class="sidemenu-label">Introduction</span></a></li>
				<li class="nav-item"><a class="nav-link" href="folder-structure.html"><i class="fe fe-folder sidemenu-icon"></i><span class="sidemenu-label">Folder structure</span></a></li>
				<li class="nav-item"><a class="nav-link" href="layouts.html"><i class="fe fe-layout sidemenu-icon"></i><span class="sidemenu-label">Layouts</span></a></li>
				<li class="nav-item"><a class="nav-link" href="faqs.html"><i class="fe fe-help-circle sidemenu-icon"></i><span class="sidemenu-label text-primary fw-bold mr-5">Faqs </span><i class="fa fa-star float-right sidemenu-icon-2 text-warning"></i></a></li>
				<li class="nav-item"><a class="nav-link" href="switcher.html"><i class="fe fe-grid sidemenu-icon"></i><span class="sidemenu-label">Switcher</span></a></li>
				<li class="nav-item"><a class="nav-link" href="gulp.html"><i class="fe fe-settings sidemenu-icon"></i><span class="sidemenu-label">Gulp</span></a></li>
				<li class="nav-item"><a class="nav-link" href="html-structure.html"><i class="fe fe-codepen sidemenu-icon"></i><span class="sidemenu-label">html-structure</span></a></li>
				<li class="nav-item"><a class="nav-link" href="apps.html"><i class="fe fe-briefcase sidemenu-icon"></i><span class="sidemenu-label">Apps</span></a></li>
				<li class="nav-item"><a class="nav-link" href="elements.html"><i class="fe fe-aperture sidemenu-icon"></i><span class="sidemenu-label">Elements</span></a></li>
				<li class="nav-item"><a class="nav-link" href="form-elements.html"><i class="fe fe-file-text sidemenu-icon"></i><span class="sidemenu-label">Form-elements</span></a></li>
				<li class="nav-item"><a class="nav-link" href="form-advanced.html"><i class="fe fe-cpu sidemenu-icon"></i><span class="sidemenu-label">Form-advanced</span></a></li>
				<li class="nav-item"><a class="nav-link" href="treeview.html"><i class="fe fe-lock sidemenu-icon"></i><span class="sidemenu-label">Treeview</span></a></li>
				<li class="nav-item"><a class="nav-link" href="form-wizard.html"><i class="fe fe-hard-drive sidemenu-icon"></i><span class="sidemenu-label">Form-wizard</span></a></li>
				<li class="nav-item"><a class="nav-link" href="form-editor.html"><i class="fe fe-edit sidemenu-icon"></i><span class="sidemenu-label">Form-editor</span></a></li>
				<li class="nav-item"><a class="nav-link" href="form-validation.html"><i class="fe fe-file-plus sidemenu-icon"></i><span class="sidemenu-label">Form-validation</span></a></li>
				<li class="nav-item"><a class="nav-link" href="maps.html"><i class="fe fe-map-pin sidemenu-icon"></i><span class="sidemenu-label">Maps</span></a></li>
				<li class="nav-item"><a class="nav-link" href="charts.html"><i class="fe fe-pie-chart sidemenu-icon"></i><span class="sidemenu-label">Charts</span></a></li>
				<li class="nav-item"><a class="nav-link" href="tables.html"><i class="fe fe-database sidemenu-icon"></i><span class="sidemenu-label">Tables</span></a></li>
				<li class="nav-item"><a class="nav-link" href="icons.html"><i class="fe fe-anchor sidemenu-icon"></i><span class="sidemenu-label">Icons</span></a></li>
				<li class="nav-item"><a class="nav-link" href="others.html"><i class="fe fe-link sidemenu-icon"></i><span class="sidemenu-label">Others</span></a></li>
				<li class="nav-item"><a class="nav-link" href="plugins.html"><i class="fe fe-droplet sidemenu-icon"></i><span class="sidemenu-label">Plugins</span></a></li>
				<li class="nav-item"><a class="nav-link" href="theme.html"><i class="fe fe-layers sidemenu-icon"></i><span class="sidemenu-label">Theme Style</span></a></li>
			</ul>
		</div>
        <!-- #Menu -->
    </aside>
    <!-- #END# Left Sidebar -->
</section>

<section class="content home">
    <div class="container-fluid">
		<div class="block-header mt-3 ml-3">
			<h1>Zanex – Bootstrap 5  Admin & Dashboard HTML Template</h1>
		</div>
		<div class="">
			<div class="alert alert-primary-transparent">
				<button type="button" class="btn-close" data-dismiss="alert" aria-hidden="true">×</button>
				<strong>Note:-</strong>
				<hr class="message-inner-separator">
				<p>Please refer <b class="text-primary fs-6">Faq's </b>page in documentation itself for queries like customization like color ,rtl ,dark style..etc.</p>
			</div>
		</div>
		<div class="row clearfix">
			<div class="col-sm-12 col-lg-12 col-xl-9">
				<div class="row clearfix">
					<div class="col-sm-12">
						<div class="card" id="Select2-exmp">
							<div class="body">
								<div id="section41">
									<h5 class="mb-3 mt-2">Select2</h5>
									<p class="mt-2">Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results.General Select2 HTML structure in Zanex template. Here is the Folder structure.</p>
									<div class="bg-primary-transparent">
									<ul class="nav nav nav-tabs border panel-tabs main-nav-line">
										<li class="nav-item"><a href="#select2" class="nav-link active" data-toggle="tab">HTML</a></li>
										<li class="nav-item"><a href="#select21" class="nav-link" data-toggle="tab">SCSS</a></li>
										<li class="nav-item"><a href="#select22" class="nav-link" data-toggle="tab">JS</a></li>
									</ul>
									<div class="panel-body tabs-menu-body main-content-body-right border-top-0 border">
										<div class="tab-content">
											<div class="tab-pane active" id="select2">
<figure class="highlight clip-widget mb-0">
<pre class="pt-0 mt-0  language-markup p-0 pl-3 m-0">
	<code class="language-markup mt-0 pt-0">
		<script type="html-Zanex/script">

<div class="form-group ">
	<label class="form-label">Beast</label>
	<select class="form-control select2 form-select" data-placeholder="Choose one">
		<option label="Choose one">
		</option>
		<option value="1">Chuck Testa</option>
		<option value="2">Sage Cattabriga-Alosa</option>
		<option value="3">Nikola Tesla</option>
		<option value="4">Cattabriga-Alosa</option>
		<option value="5">Nikola Alosa</option>
	</select>
</div>
<div class="form-group">
	<label class="form-label">Basic Select2</label>
	<select class="form-control select2" data-placeholder="Choose one (with 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>
	</select>
</div>
// Select2 with search box
<div class="form-group">
	<label class="form-label"> Select2 with search box</label>
	<select class="form-control select2-show-search form-select" data-placeholder="Choose one">
		<option label="Choose one"></option>
		<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>
		<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>
	</select>
</div>
<div class="form-group">
	<label class="form-label">Users list</label>
	<select class="form-control select2" data-placeholder="Choose Browser" multiple>
		<option value="Firefox">
			Firefox
		</option>
		<option value="Chrome selected">
			Chrome
		</option>
		<option value="Safari">
			Safari
		</option>
		<option selected value="Opera">
			Opera
		</option>
		<option value="Internet Explorer">
			Internet Explorer
		</option>
	</select>
</div>
			</script>
		</code>
	</pre>
</figure>
											</div>
											<div class="tab-pane" id="select21">
<figure class="highlight clip-widget mb-0">
<pre class="pt-0 mt-0  language-markup p-0 pl-3 m-0">
	<code class="language-markup mt-0 pt-0">
		<script type="html-Zanex/script">
<!-- SELECT2 SCSS -->
assets/scss/plugins/_select2.min.scss
			</script>
		</code>
	</pre>
</figure>
											</div>
											<div class="tab-pane" id="select22">
<!-- Prism Code -->
<figure class="highlight clip-widget mb-0">
<pre class="language-css line-numbers language-markup m-0">
    <code class="language-css language-markup">
&lt;!-- SELECT2 JS --&gt;
&lt;script src="../assets/plugins/select2/select2.full.min.js"&gt;&lt;/script&gt;

&lt;!-- FORMELEMENTS JS --&gt;
&lt;script src="../assets/js/form-elements.js"&gt;&lt;/script&gt;

		</code>
	</pre>
</figure>

											</div>

<p class="mt-2"><b>Note : </b>After Changing scss you must run gulp command i.e, <code>gulp watch</code> . Refer gulp page for more gulp commands <a href="gulp.html">click here.</a> </p>
										</div>
									</div>
								</div>
									<table class="table table-bordered bg-primary-transparent mt-4">
										<thead>
											<tr>
												<th>Type</th>
												<th>URL</th>
											</tr>
										</thead>
										<tbody>
											<tr>
												<td><strong>Plugin Link</strong></td>
												<td><a href="https://select2.org/" target="_blank">https://select2.org/</a></td>
											</tr>
										</tbody>
									</table>
								</div>
							</div>
						</div>
					</div>
					<div class="col-sm-12">
						<div class="card" id="daterange">
							<div class="body">
								<div id="section41">
									<h5 class="mb-4 mt-2">Date, Month, Year  Range Picker</h5>
									<p class="mt-2">A JavaScript component for choosing date ranges, dates and Month, year.General Date Range Picker HTML structure in Zanex template. Here is the Folder structure.</p>
									<div class="bg-primary-transparent">
									<ul class="nav nav nav-tabs border panel-tabs main-nav-line">
										<li class="nav-item"><a href="#daterangepic1" class="nav-link active" data-toggle="tab">HTML</a></li>
										<li class="nav-item"><a href="#daterangepic2" class="nav-link" data-toggle="tab">SCSS</a></li>
										<li class="nav-item"><a href="#daterangepic3" class="nav-link" data-toggle="tab">JS</a></li>
									</ul>
									<div class="panel-body tabs-menu-body main-content-body-right border-top-0 border">
										<div class="tab-content">
											<div class="tab-pane active" id="daterangepic1">
<figure class="highlight clip-widget mb-0">
<pre class="pt-0 mt-0  language-markup p-0 pl-3 m-0">
	<code class="language-markup mt-0 pt-0">
		<script type="html-Zanex/script">
<h6>Date, Month, Year Range Picker</h6>
<div class="row">
	<div class="col-md-4">
		<div class="input-group">
			<div class="input-group-text">
				<i class="fa fa-clock-o tx-16 lh-0 op-6"></i>
			</div>
			<input class="form-control" id="datepicker-date" placeholder="Date Range" type="text">
		</div>
	</div>
	<div class="col-md-4 mt-4 mt-md-0">
		<div class="input-group">
			<div class="input-group-text">
				<span class="fa fa-clock-o tx-16 lh-0 op-6"></span>
			</div>
			<input class="form-control" id="datepicker-month" placeholder="Month Range" type="text">
		</div>
	</div>
	<div class="col-md-4 mt-4 mt-md-0">
		<div class="input-group">
			<div class="input-group-text">
				<span class="fa fa-clock-o tx-16 lh-0 op-6"></span>
			</div>
			<input class="form-control" id="datepicker-year" placeholder="Year Range" type="text">
		</div>
	</div>
</div>

<h6>Default Date picker</h6>

<div class="input-group">
	<div class="input-group-text">
		<i class="fa fa-calendar tx-16 lh-0 op-6"></i>
	</div><input class="form-control fc-datepicker" placeholder="MM/DD/YYYY" type="text">
</div>


<h6>Multiple Months</h6>

<div class="input-group">
	<div class="input-group-text">
		<span class="fa fa-calendar tx-16 lh-0 op-6"></span>
	</div><input class="form-control" id="datepickerNoOfMonths" placeholder="MM/DD/YYYY" type="text">
</div>
			</script>
		</code>
	</pre>
</figure>
											</div>
											<div class="tab-pane" id="daterangepic2">
<figure class="highlight clip-widget mb-0">
<pre class="pt-0 mt-0  language-markup p-0 pl-3 m-0">
	<code class="language-markup mt-0 pt-0">
		<script type="html-Zanex/script">
<!-- INTERNAL Date Picker scss -->
assets/scss/plugins/_date-picker.scss

<!-- INTERNAL Bootstrap DatePicker scss-->
assets/scss/plugins/_bootstrap-datepicker.scss
			</script>
		</code>
	</pre>
</figure>
											</div>
											<div class="tab-pane" id="daterangepic3">
<figure class="highlight clip-widget mb-0">
<pre class="language-css line-numbers language-markup m-0">
    <code class="language-css language-markup">
&lt;!-- DATEPICKER JS --&gt;
&lt;script src="../assets/plugins/date-picker/date-picker.js"&gt;&lt;/script&gt;
&lt;script src="../assets/plugins/date-picker/jquery-ui.js"&gt;&lt;/script&gt;
&lt;script src="../assets/plugins/daterangepicker/custom-daterangepicker.js"&gt;&lt;/script&gt;

&lt;!-- INTERNAL Bootstrap-Datepicker js --&gt;
&lt;script src="../assets/plugins/bootstrap-datepicker/bootstrap-datepicker.js"&gt;&lt;/script&gt;
	</code>
	</pre>
</figure>
<p>Open <b>form-elements.js</b> file (assets/js/form-elements.js) You can see below js</p>
<figure class="highlight clip-widget mb-0">
<pre class="language-css line-numbers language-markup m-0">
    <code class="language-css language-markup">
$(function(){
	'use strict'
		// Datepicker
		$('.fc-datepicker').datepicker({
		showOtherMonths: true,
		selectOtherMonths: true
		});

		$('#datepickerNoOfMonths').datepicker({
		showOtherMonths: true,
		selectOtherMonths: true,
		numberOfMonths: 2
		});mberOfMonths: 2
		});



		//_________Date picker
		$('#datepicker-date').bootstrapdatepicker({
			format: "dd-mm-yyyy",
			viewMode: "date",
			multidate: true,
			multidateSeparator: "-",
		})

		//_________Month picker
		$('#datepicker-month').bootstrapdatepicker({
			format: "MM",
			viewMode: "months",
			minViewMode: "months",
			multidate: true,
			multidateSeparator: "-",
		})

		//_________Year picker
		$('#datepicker-year').bootstrapdatepicker({
			format: "yyyy",
			viewMode: "year",
			minViewMode: "years",
			multidate: true,
			multidateSeparator: "-",
		})

	});
		</code>
	</pre>
</figure>

											</div>

<p class="mt-2"><b>Note : </b>After Changing scss you must run gulp command i.e, <code>gulp watch</code> . Refer gulp page for more gulp commands <a href="gulp.html">click here.</a> </p>
										</div>
									</div>
								</div>
							</div>
								<table class="table table-bordered bg-primary-transparent mt-4">
									<thead>
										<tr>
											<th>Type</th>
											<th>URL</th>
										</tr>
									</thead>
									<tbody>
										<tr>
											<td><strong>Plugin Link</strong></td>
											<td><a href="https://github.com/uxsolutions/bootstrap-datepicker" target="_blank">https://github.com/uxsolutions/bootstrap-datepicker/</a></td>
										</tr>
										<tr>
											<td><strong>Plugin Link</strong></td>
											<td><a href=" http://jqueryui.com" target="_blank"> http://jqueryui.com/</a></td>
										</tr>
									</tbody>
								</table>
							</div>
						</div>
					</div>
					<div class="col-sm-12">
						<div class="card" id="multipleselect">
							<div class="body">
								<div id="section41">
									<h5 class="mb-4 mt-2">Multiple Select Styles</h5>
									<p class="mt-2">Multiple Select also supports multi-value select boxes. The select below is declared with the multiple attribute.General Multiple Select HTML structure in Zanex template. Here is the Folder structure.</p>
									<div class="bg-primary-transparent">
									<ul class="nav nav nav-tabs border panel-tabs main-nav-line">
										<li class="nav-item"><a href="#multiselect" class="nav-link active" data-toggle="tab">HTML</a></li>
										<li class="nav-item"><a href="#multiselect1" class="nav-link" data-toggle="tab">SCSS</a></li>
										<li class="nav-item"><a href="#multiselect2" class="nav-link" data-toggle="tab">JS</a></li>
									</ul>
									<div class="panel-body tabs-menu-body main-content-body-right border-top-0 border">
										<div class="tab-content">
											<div class="tab-pane active" id="multiselect">
<figure class="highlight clip-widget mb-0">
<pre class="pt-0 mt-0  language-markup p-0 pl-3 m-0">
	<code class="language-markup mt-0 pt-0">
		<script type="html-Zanex/script">
<div class="form-group">
	<label class="form-label">Basic MutipleSelect</label>
	<select multiple="multiple" class="multi-select">
		<option value="1">January</option>
		<option value="2">February</option>
		<option value="3">March</option>
		<option value="4">April</option>
		<option value="5">May</option>
		<option value="6">June</option>
		<option value="7">July</option>
		<option value="8">August</option>
		<option value="9">September</option>
		<option value="10">October</option>
		<option value="11">November</option>
		<option value="12">December</option>
	</select>
</div>
...........
...........
...........
...........
...........
...........
			</script>
		</code>
	</pre>
</figure>
											</div>
											<div class="tab-pane" id="multiselect1">
<figure class="highlight clip-widget mb-0">
<pre class="pt-0 mt-0  language-markup p-0 pl-3 m-0">
	<code class="language-markup mt-0 pt-0">
		<script type="html-Zanex/script">
<!-- MULTI SELECT SCSS -->
assets/scss/plugins/_multiple-select.scss
			</script>
		</code>
	</pre>
</figure>
											</div>
											<div class="tab-pane" id="multiselect2">
<figure class="highlight clip-widget mb-0">
<pre class="language-css line-numbers language-markup m-0">
    <code class="language-css language-markup">
&lt;!-- MULTI SELECT JS --&gt;
&lt;script src="../assets/plugins/multipleselect/multiple-select.js"&gt;&lt;/script&gt;
&lt;script src="../assets/plugins/multipleselect/multi-select.js"&gt;&lt;/script&gt;

		</code>
	</pre>
</figure>						</div>

<p class="mt-2"><b>Note : </b>After Changing scss you must run gulp command i.e, <code>gulp watch</code> . Refer gulp page for more gulp commands <a href="gulp.html">click here.</a> </p>
										</div>
									</div>
								</div>
							</div>
								<table class="table table-bordered bg-primary-transparent mt-4">
									<thead>
										<tr>
											<th>Type</th>
											<th>URL</th>
										</tr>
									</thead>
									<tbody>
										<tr>
											<td><strong>Plugin Link</strong></td>
											<td><a href="http://multiple-select.wenzhixin.net.cn/en/" target="_blank">http://multiple-select.wenzhixin.net.cn/en/</a></td>
										</tr>
									</tbody>
								</table>
							</div>
						</div>
					</div>
					<div class="col-sm-12">
						<div class="card">
							<div class="body"  id="fileupload">
								<div id="section41">
									<h5 class="mb-4 mt-2">File Upload</h5>
									<p class="mt-2">General File Upload HTML structure in Zanex template. Here is the Folder structure.</p>
									<div class="bg-primary-transparent">
									<ul class="nav nav nav-tabs border panel-tabs main-nav-line">
										<li class="nav-item"><a href="#upload" class="nav-link active" data-toggle="tab">HTML</a></li>
										<li class="nav-item"><a href="#upload1" class="nav-link" data-toggle="tab">SCSS</a></li>
										<li class="nav-item"><a href="#upload2" class="nav-link" data-toggle="tab">JS</a></li>
									</ul>
									<div class="panel-body tabs-menu-body main-content-body-right border-top-0 border">
										<div class="tab-content">
											<div class="tab-pane active" id="upload">
<figure class="highlight clip-widget mb-0">
<pre class="pt-0 mt-0  language-markup p-0 pl-3 m-0">
	<code class="language-markup mt-0 pt-0">
		<script type="html-Zanex/script">
<div class="row mb-5">
	<div class="col-lg-4 col-sm-12 mb-4 mb-lg-0">
		<input type="file" class="dropify" data-bs-height="180" />
	</div>
	<div class="col-lg-4 col-sm-12 mb-4 mb-lg-0">
		<input type="file" class="dropify" data-bs-default-file="../assets/images/media/1.jpg" data-bs-height="180" />
	</div>
	<div class="col-lg-4 col-sm-12">
		<input type="file" class="dropify" disabled="disabled" />
	</div>
</div>
			</script>
		</code>
	</pre>
</figure>
											</div>
											<div class="tab-pane" id="upload1">
<figure class="highlight clip-widget mb-0">
<pre class="pt-0 mt-0  language-markup p-0 pl-3 m-0">
	<code class="language-markup mt-0 pt-0">
		<script type="html-Zanex/script">
<!-- FILE UPLODE SCSS -->
assets/scss/plugins/_fileupload.scss
			</script>
		</code>
	</pre>
</figure>
											</div>
											<div class="tab-pane" id="upload2">
<figure class="highlight clip-widget mb-0">
<pre class="language-css line-numbers language-markup m-0">
    <code class="language-css language-markup">
&lt;!-- FILE UPLOADES JS --&gt;
&lt;script src="../assets/plugins/fileuploads/js/fileupload.js"&gt;&lt;/script&gt;
&lt;script src="../assets/plugins/fileuploads/js/file-upload.js"&gt;&lt;/script&gt;

		</code>
	</pre>
</figure>
											</div>

<p class="mt-2"><b>Note : </b>After Changing scss you must run gulp command i.e, <code>gulp watch</code> . Refer gulp page for more gulp commands <a href="gulp.html">click here.</a> </p>
										</div>
									</div>
								</div>
							</div>
								<table class="table table-bordered bg-primary-transparent mt-4">
									<thead>
										<tr>
											<th>Type</th>
											<th>URL</th>
										</tr>
									</thead>
									<tbody>
										<tr>
											<td><strong>Plugin Link</strong></td>
											<td><a href="http://jeremyfagis.github.io/dropify/" target="_blank">http://jeremyfagis.github.io/dropify/</a></td>
										</tr>
									</tbody>
								</table>
							</div>
							<div class="body" id="fancyuploader">
								<div id="section41">
									<h5 class="mb-4 mt-2">Fancy uploader</h5>
									<p class="mt-2">General File Upload HTML structure in Zanex template. Here is the Folder structure.</p>
									<div class="bg-primary-transparent">
									<ul class="nav nav nav-tabs border panel-tabs main-nav-line">
										<li class="nav-item"><a href="#fancyupload" class="nav-link active" data-toggle="tab">HTML</a></li>
										<li class="nav-item"><a href="#fancyupload1" class="nav-link" data-toggle="tab">SCSS</a></li>
										<li class="nav-item"><a href="#fancyupload2" class="nav-link" data-toggle="tab">JS</a></li>
									</ul>
									<div class="panel-body tabs-menu-body main-content-body-right border-top-0 border">
										<div class="tab-content">
											<div class="tab-pane active" id="fancyupload">
<figure class="highlight clip-widget mb-0">
<pre class="pt-0 mt-0  language-markup p-0 pl-3 m-0">
	<code class="language-markup mt-0 pt-0">
		<script type="html-Zanex/script">
<div class="form-group">
	<input id="demo" type="file" name="files" accept=".jpg, .png, image/jpeg, image/png" multiple>
</div>
			</script>
		</code>
	</pre>
</figure>
											</div>
											<div class="tab-pane" id="fancyupload1">
<figure class="highlight clip-widget mb-0">
<pre class="pt-0 mt-0  language-markup p-0 pl-3 m-0">
	<code class="language-markup mt-0 pt-0">
		<script type="html-Zanex/script">
<!-- INTERNAL Fancy File Upload scss -->
assets/scss/plugins/_fancy_fileupload.scss
			</script>
		</code>
	</pre>
</figure>
											</div>
											<div class="tab-pane" id="fancyupload2">
<figure class="highlight clip-widget mb-0">
<pre class="language-css line-numbers language-markup m-0">
    <code class="language-css language-markup">
&lt;!--  INTERNAL File-Uploads Js --&gt;
&lt;script src="../assets/plugins/fancyuploder/jquery.ui.widget.js"&gt;&lt;/script&gt;
&lt;script src="../assets/plugins/fancyuploder/jquery.fileupload.js"&gt;&lt;/script&gt;
&lt;script src="../assets/plugins/fancyuploder/jquery.iframe-transport.js"&gt;&lt;/script&gt;
&lt;script src="../assets/plugins/fancyuploder/jquery.fancy-fileupload.js"&gt;&lt;/script&gt;
&lt;script src="../assets/plugins/fancyuploder/fancy-uploader.js"&gt;&lt;/script&gt;

		</code>
	</pre>
</figure>

											</div>

<p class="mt-2"><b>Note : </b>After Changing scss you must run gulp command i.e, <code>gulp watch</code> . Refer gulp page for more gulp commands <a href="gulp.html">click here.</a> </p>
										</div>
									</div>
								</div>
							</div>
								<table class="table table-bordered bg-primary-transparent mt-4">
									<thead>
										<tr>
											<th>Type</th>
											<th>URL</th>
										</tr>
									</thead>
									<tbody>
										<tr>
											<td><strong>Plugin Link</strong></td>
											<td><a href="https://www.jqueryscript.net/demo/Fancy-File-Uploader-jQuery/" target="_blank">https://www.jqueryscript.net/demo/Fancy-File-Uploader-jQuery/</a></td>
										</tr>
									</tbody>
								</table>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="col-xl-3 col-lg-12 d-none d-xl-block custom-leftnav">
				<div class="main-content-left-components">
					<div class="card custom-card">
						<div class="card-body component-item">
							<div class="collapse  navbar-collapse justify-content-end" id="main-menu">
								<ul class="navbar-nav">
									<li class="nav-item active" >
										<a class="nav-link" href="#Select2-exmp">Select2</a>
									</li>
									<li class="nav-item">
										<a class="nav-link" href="#daterange">Date Range Picker</a>
									</li>
									<li class="nav-item">
										<a class="nav-link" href="#multipleselect">Multiple Select Styles</a>
									</li>
									<li class="nav-item">
										<a class="nav-link" href="#fileupload">File Upload</a>
									</li>
									<li class="nav-item">
										<a class="nav-link" href="#fancyuploader">Fancy uploader</a>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<!-- Footer opened -->
	<div class="main-footer ht-40">
		<div class="pd-t-0-f ht-100p">
			<span>Copyright © <span id="year"></span> <a href="javascript:void(0)">Zanex</a>. Designed with <span class="fa fa-heart text-danger"></span> by <a href="javascript:void(0)"> Spruko </a> All rights reserved.</span>
		</div>
	</div>
	<!-- Footer closed -->

</section>

<div class="color-bg">
	<div class="sidebar__toggle" data-toggle="sidebar">
		<a class="open-toggle" href="javascript:void(0);"><i class="fe fe-menu"></i></a>
	</div>
	<ul class="nav navbar-nav">
	  <li class="nav-item mr-8"><a class="btn btn-primary btn-header " href="https://themeforest.net/item/zanex-bootstrap-5-admin-dashboard-template/32984858" target="_blank"><i class="icon-help2"></i> Buy Now</a></li>
	  <li class="nav-item mr-8"><a class="btn btn-secondary btn-header " href="https://1.envato.market/MGEaN" target="_blank"><i class="icon-bag3"></i> Portfolio</a></li>
	  <li class="nav-item"><a class="btn btn-danger text-white mr-3 btn-header" href="https://spruko.com/licenses.html" target="_blank"><i class="icon-bag3"></i> Licenses</a></li>
	</ul>
</div>

<!-- Jquery Core Js -->
<script src="assets/bundles/libscripts.bundle.js"></script> <!-- Lib Scripts Plugin Js -->
<script src="assets/bundles/morphingsearchscripts.bundle.js"></script> <!-- morphing search Js -->
<script src="assets/bundles/vendorscripts.bundle.js"></script> <!-- Lib Scripts Plugin Js -->
<script src="assets/bundles/mainscripts.bundle.js"></script><!-- Custom Js -->
<script src="assets/bundles/morphingscripts.bundle.js"></script><!-- morphing search page js -->

<!-- Internal Prism js-->
<script src="assets/plugins/prism/prism.js"></script>

<!-- Treeview js-->
<script src="assets/plugins/treeview-prism/prism.js"></script>
<script src="assets/plugins/treeview-prism/prism-treeview.js"></script>

<!-- Perfectscroll js-->
<script src="assets/plugins/perfect-scrollbar/perfect-scrollbar.min.js"></script>
<script src="assets/plugins/perfect-scrollbar/p-scroll.js"></script>

<!-- Custom js-->
<script src="assets/js/custom.js"></script>
<script src="assets/js/menuspy.min.js.js"></script>

<script>
    var elm = document.querySelector('#main-menu');
    var ms = new MenuSpy(elm);

	(function () {

	if (typeof self === 'undefined' || !self.Prism || !self.document) {
		return;
	}

	/**
	 * Class name for <pre> which is activating the plugin
	 * @type {String}
	 */
	var PLUGIN_CLASS = 'line-numbers';

	/**
	 * Resizes line numbers spans according to height of line of code
	 * @param  {Element} element <pre> element
	 */
	var _resizeElement = function (element) {
		var codeStyles = getStyles(element);
		var whiteSpace = codeStyles['white-space'];

		if (whiteSpace === 'pre-wrap' || whiteSpace === 'pre-line') {
			var codeElement = element.querySelector('code');
			var lineNumbersWrapper = element.querySelector('.line-numbers-rows');
			var lineNumberSizer = element.querySelector('.line-numbers-sizer');
			var codeLines = element.textContent.split('\n');

			if (!lineNumberSizer) {
				lineNumberSizer = document.createElement('span');
				lineNumberSizer.className = 'line-numbers-sizer';

				codeElement.appendChild(lineNumberSizer);
			}

			lineNumberSizer.style.display = 'block';

			codeLines.forEach(function (line, lineNumber) {
				lineNumberSizer.textContent = line || '\n';
				var lineSize = lineNumberSizer.getBoundingClientRect().height;
				lineNumbersWrapper.children[lineNumber].style.height = lineSize + 'px';
			});

			lineNumberSizer.textContent = '';
			lineNumberSizer.style.display = 'none';
		}
	};

	/**
	 * Returns style declarations for the element
	 * @param {Element} element
	 */
	var getStyles = function (element) {
		if (!element) {
			return null;
		}

		return window.getComputedStyle ? getComputedStyle(element) : (element.currentStyle || null);
	};

	window.addEventListener('resize', function () {
		Array.prototype.forEach.call(document.querySelectorAll('pre.' + PLUGIN_CLASS), _resizeElement);
	});

	Prism.hooks.add('complete', function (env) {
		if (!env.code) {
			return;
		}

		// works only for <code> wrapped inside <pre> (not inline)
		var pre = env.element.parentNode;
		// Original regex check for class, leaving it here
		// for its redundancy check
		var clsReg = /\s*\bline-numbers\b\s*/;
		// New regex check for opt-out class
		var clsRegB = /\s*\bno-line-numbers\b\s*/;

		if (env.element.querySelector(".line-numbers-rows")) {
			// Abort if line numbers already exists
			return;
		}

		// Added to facilitate opting out
		if (clsRegB.test(pre.className)) {
			// Respect the opt-out
			return;
		}

		if (clsReg.test(env.element.className)) {
			// Remove the class "line-numbers" from the <code>
			env.element.className = env.element.className.replace(clsReg, ' ');
		}
		if (!clsReg.test(pre.className)) {
			// Add the class "line-numbers" to the <pre>
			pre.className += ' line-numbers';
		}

		var match = env.code.match(/\n(?!$)/g);
		var linesNum = match ? match.length + 1 : 1;
		var lineNumbersWrapper;

		var lines = new Array(linesNum + 1);
		lines = lines.join('<span></span>');

		lineNumbersWrapper = document.createElement('span');
		lineNumbersWrapper.setAttribute('aria-hidden', 'true');
		lineNumbersWrapper.className = 'line-numbers-rows';
		lineNumbersWrapper.innerHTML = lines;

		if (pre.hasAttribute('data-start')) {
			pre.style.counterReset = 'linenumber ' + (parseInt(pre.getAttribute('data-start'), 10) - 1);
		}

		env.element.appendChild(lineNumbersWrapper);

		_resizeElement(pre);
	});

}());
</script>

</body>
</html>

?>