Server : Apache/2.4.6 (CentOS) OpenSSL/1.0.2k-fips PHP/7.4.20 System : Linux st2.domain.com 3.10.0-1127.10.1.el7.x86_64 #1 SMP Wed Jun 3 14:28:03 UTC 2020 x86_64 User : apache ( 48) PHP Version : 7.4.20 Disable Function : NONE Directory : /var/www/html/adimi/assets/plugins/jquery-nice-select/ |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>jQuery Nice Select</title>
<link href='https://fonts.googleapis.com/css?family=Work+Sans:300,400,600&Inconsolata:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<div class="header">
<h1>jQuery Nice Select</h1>
<p>A lightweight jQuery plugin that replaces native select elements with customizable dropdowns.</p>
<a href="https://github.com/hernansartorio/jquery-nice-select/archive/v1.1.0.zip" class="button">Download</a>
<a href="https://github.com/hernansartorio/jquery-nice-select" class="button light">View on GitHub</a>
</div>
<h2>Usage</h2>
<p><strong>1.</strong> Include jQuery and the plugin.</p>
<pre><code class="language-html"><script src="path/to/jquery.js"></script>
<script src="path/to/jquery.nice-select.js"></script></code></pre>
<p><strong>2.</strong> Include the plugin styles, either the compiled CSS...</p>
<pre><code class="language-html"><link rel="stylesheet" href="path/to/nice-select.css"></code></pre>
<p>...or, ideally, import the SASS source (if you use SASS) in your main stylesheet for easier customization.</p>
<pre><code class="language-scss">@import 'nice-select'; // Or 'nice-select-prefixed'. See 'Notes' section.</code></pre>
<p><strong>3.</strong> Finally, initialize the plugin.</p>
<pre><code class="language-js">$(document).ready(function() {
$('select').niceSelect();
});</code></pre>
<p>All done. That will turn this:</p>
<div class="box">
<select class="ignore">
<option value="1">Some option</option>
<option value="2">Another option</option>
<option value="3" disabled>A disabled option</option>
<option value="4">Potato</option>
</select>
</div>
<p>...into this:</p>
<div class="box">
<select>
<option value="1">Some option</option>
<option value="2">Another option</option>
<option value="3" disabled>A disabled option</option>
<option value="4">Potato</option>
</select>
</div>
<p>There are no settings (a native select doesn't have settings), although there are a couple of special features, documented below.</p>
<h2>Display text</h2>
<p>You can specify an alternate text for each option, which will be displayed on the dropdown when that option is selected.</p>
<p>Add a <code class="language-html">data-display</code> attribute to the desired options. For example:</p>
<pre><code class="language-html"><select>
<option data-display="Select">Nothing</option>
<option value="1">Some option</option>
<option value="2">Another option</option>
<option value="3" disabled>A disabled option</option>
<option value="4">Potato</option>
</select></code></pre>
<div class="box">
<select>
<option data-display="Select">Nothing</option>
<option value="1">Some option</option>
<option value="2">Another option</option>
<option value="3" disabled>A disabled option</option>
<option value="4">Potato</option>
</select>
</div>
<h2>Custom classes</h2>
<p>Every class you assign to a select element will be copied to the generated dropdown. That way you can customize different versions of it to your needs just by adding new CSS.</p>
<p>These are some examples included in the plugin stylesheet:</p>
<div class="box">
<label>Wide</label>
<select class="wide">
<option data-display="Select">Nothing</option>
<option value="1">Some option</option>
<option value="2">Another option</option>
<option value="3" disabled>A disabled option</option>
<option value="4">Potato</option>
</select>
</div>
<div class="box">
<label class="right">Right</label>
<select class="right">
<option data-display="Select">Nothing</option>
<option value="1">Some option</option>
<option value="2">Another option</option>
<option value="3" disabled>A disabled option</option>
<option value="4">Potato</option>
</select>
</div>
<div class="box">
<label>Small</label>
<select class="small">
<option data-display="Select">Nothing</option>
<option value="1">Some option</option>
<option value="2">Another option</option>
<option value="3" disabled>A disabled option</option>
<option value="4">Potato</option>
</select>
</div>
<h2>Methods</h2>
<h3>update</h3>
<p>Updates the custom dropdown to reflect any changes made to the original select element.</p>
<pre><code class="language-js">$('select').niceSelect('update');</code></pre>
<h3>destroy</h3>
<p>Removes the custom dropdown and unbinds all its events.</p>
<pre><code class="language-js">$('select').niceSelect('destroy');</code></pre>
<h2>Notes</h2>
<ul>
<li>
<p>Autoprefixer is used to add vendor prefixes to CSS rules for older browser support. A <i>nice-select-prefixed.scss</i> file is also generated if you wish to include the SASS file in your project and you're not using Autoprefixer.</p>
</li>
<li>
<p>In some cases there can be a brief flash in which the native selects are displayed—between the time the page is loaded and the scripts are run. This can be fixed by adding a CSS rule to hide them beforehand:</p>
<pre><code class="language-scss">select {
display: none;
}</code></pre>
<p>Note that the above rule will hide all native select elements. If you're only applying the plugin to some select elements you should adapt the rule accordingly.</p>
</li>
</ul>
<div class="footer">
<h2>Use responsibly</h2>
<p><a href="http://www.lukew.com/ff/entry.asp?1950">Dropdowns should be the UI of last resort.</a></p>
<a href="https://github.com/hernansartorio/jquery-nice-select/archive/v1.1.0.zip" class="button">Download</a>
<a href="https://github.com/hernansartorio/jquery-nice-select" class="button light">View on GitHub</a>
<div class="credit">
Made by <a href="http://hernansartorio.com?r=ns">Hernán Sartorio</a>
</div>
</div>
</div>
<script src="js/jquery.js"></script>
<script src="js/jquery.nice-select.min.js"></script>
<script src="js/fastclick.js"></script>
<script src="js/prism.js"></script>
<script>
$(document).ready(function() {
$('select:not(.ignore)').niceSelect();
FastClick.attach(document.body);
});
</script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-64633646-1', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>