//tile
<section class="tile">
//tile header
<div class="tile-header">
<h1><strong>Other</strong> Elements</h1>
<div class="controls">
<a href="#" class="refresh"><i class="fa fa-refresh"></i></a>
<a href="#" class="remove"><i class="fa fa-times"></i></a>
</div>
</div>
// /tile header
//tile body
<div class="tile-body">
<div class="row">
<div class="col-lg-4 col-md-12">
<form role="form">
<div class="form-group">
<label for="typeahead">TypeAhead</label>
<input type="text" class="form-control" id="typeahead">
</div>
</form>
<!-- row -->
<div class="row">
<div class="col-md-6">
<h5>Toggle Switches</h5>
<ul class="inline">
<li>
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
<label class="onoffswitch-label" for="myonoffswitch">
<div class="onoffswitch-inner"></div>
<div class="onoffswitch-switch"></div>
</label>
</div>
<div class="onoffswitch green">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch01">
<label class="onoffswitch-label" for="myonoffswitch01">
<div class="onoffswitch-inner"></div>
<div class="onoffswitch-switch"></div>
</label>
</div>
<div class="onoffswitch red">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch03" checked>
<label class="onoffswitch-label" for="myonoffswitch03">
<div class="onoffswitch-inner"></div>
<div class="onoffswitch-switch"></div>
</label>
</div>
<div class="onoffswitch greensea">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch04" checked>
<label class="onoffswitch-label" for="myonoffswitch04">
<div class="onoffswitch-inner"></div>
<div class="onoffswitch-switch"></div>
</label>
</div>
<div class="onoffswitch dutch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch05" checked>
<label class="onoffswitch-label" for="myonoffswitch05">
<div class="onoffswitch-inner"></div>
<div class="onoffswitch-switch"></div>
</label>
</div>
</li>
<li>
<div class="onoffswitch cyan">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch06" checked>
<label class="onoffswitch-label" for="myonoffswitch06">
<div class="onoffswitch-inner"></div>
<div class="onoffswitch-switch"></div>
</label>
</div>
<div class="onoffswitch orange">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch07" checked>
<label class="onoffswitch-label" for="myonoffswitch07">
<div class="onoffswitch-inner"></div>
<div class="onoffswitch-switch"></div>
</label>
</div>
<div class="onoffswitch amethyst">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch08" checked>
<label class="onoffswitch-label" for="myonoffswitch08">
<div class="onoffswitch-inner"></div>
<div class="onoffswitch-switch"></div>
</label>
</div>
<div class="onoffswitch hotpink">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch09" checked>
<label class="onoffswitch-label" for="myonoffswitch09">
<div class="onoffswitch-inner"></div>
<div class="onoffswitch-switch"></div>
</label>
</div>
<div class="onoffswitch drank">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch10" checked>
<label class="onoffswitch-label" for="myonoffswitch10">
<div class="onoffswitch-inner"></div>
<div class="onoffswitch-switch"></div>
</label>
</div>
</li>
</ul>
<h5>Dropdown Menu</h5>
<ul class="dropdown-menu example" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>
<div class="col-md-6">
<h5>Toggle Switches with labels</h5>
<ul class="inline">
<li>
<div class="onoffswitch labeled">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch11" checked>
<label class="onoffswitch-label" for="myonoffswitch11">
<div class="onoffswitch-inner"></div>
<div class="onoffswitch-switch"></div>
</label>
</div>
<div class="onoffswitch labeled green">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch12">
<label class="onoffswitch-label" for="myonoffswitch12">
<div class="onoffswitch-inner"></div>
<div class="onoffswitch-switch"></div>
</label>
</div>
<div class="onoffswitch labeled red">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch13" checked>
<label class="onoffswitch-label" for="myonoffswitch13">
<div class="onoffswitch-inner"></div>
<div class="onoffswitch-switch"></div>
</label>
</div>
<div class="onoffswitch labeled greensea">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch14" checked>
<label class="onoffswitch-label" for="myonoffswitch14">
<div class="onoffswitch-inner"></div>
<div class="onoffswitch-switch"></div>
</label>
</div>
<div class="onoffswitch labeled dutch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch15" checked>
<label class="onoffswitch-label" for="myonoffswitch15">
<div class="onoffswitch-inner"></div>
<div class="onoffswitch-switch"></div>
</label>
</div>
</li>
<li>
<div class="onoffswitch labeled cyan">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch16" checked>
<label class="onoffswitch-label" for="myonoffswitch16">
<div class="onoffswitch-inner"></div>
<div class="onoffswitch-switch"></div>
</label>
</div>
<div class="onoffswitch labeled orange">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch17" checked>
<label class="onoffswitch-label" for="myonoffswitch17">
<div class="onoffswitch-inner"></div>
<div class="onoffswitch-switch"></div>
</label>
</div>
<div class="onoffswitch labeled amethyst">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch18" checked>
<label class="onoffswitch-label" for="myonoffswitch18">
<div class="onoffswitch-inner"></div>
<div class="onoffswitch-switch"></div>
</label>
</div>
<div class="onoffswitch labeled hotpink">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch19" checked>
<label class="onoffswitch-label" for="myonoffswitch19">
<div class="onoffswitch-inner"></div>
<div class="onoffswitch-switch"></div>
</label>
</div>
<div class="onoffswitch labeled drank">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch20" checked>
<label class="onoffswitch-label" for="myonoffswitch20">
<div class="onoffswitch-inner"></div>
<div class="onoffswitch-switch"></div>
</label>
</div>
</li>
</ul>
<h5>Dropdown Menu with headers</h5>
<ul class="dropdown-menu example" role="menu" aria-labelledby="dropdownMenu2">
<li role="presentation" class="dropdown-header">Dropdown header</li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation" class="dropdown-header">Dropdown header</li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>
</div>
<!-- /row -->
</div>
<div class="col-lg-4 col-md-12">
<form role="form">
<div class="form-group">
<label for="datepicker">Datepicker</label>
<input type="text" class="form-control" id="datepicker">
</div>
</form>
<h5>Range Slider</h5>
<div class="noUiSlider rangeSlider connect-greensea" id="rangeSlider"></div>
<h5>One Handle Slider</h5>
<div class="noUiSlider" id="slider"></div>
<h5>Vertical Sliders</h5>
<div id="colorpicker">
<div class="noUiSlider slider red" id="red"></div>
<div class="noUiSlider slider green" id="green"></div>
<div class="noUiSlider slider cyan" id="blue"></div>
<div class="result"></div>
</div>
</div>
<div class="col-lg-4 col-md-12">
<form role="form">
<div class="form-group">
<label for="chosen">Chosen Multiple-Select</label>
<select data-placeholder="Select recipients..." multiple="" tabindex="3" class="chosen-select form-control" id="chosen">
<option value=""></option>
<option value="ici@gmail.com">ici@gmail.com</option>
<option value="johny@gmail.com">johny@gmail.com</option>
<option value="arnie@gmail.com">arnie@gmail.com</option>
<option value="pete@gmail.com">pete@gmail.com</option>
<option value="gorge@gmail.com">gorge@gmail.com</option>
</select>
</div>
</form>
<h5>Row Select</h5>
<ul class="nolisttypes inlineSelect rowSelect green">
<li class="title"><h5>Options:</h5></li>
<li>
<div class="checkbox">
<input type="checkbox" value="1" id="opt01">
<label for="opt01">Option 1</label>
</div>
</li>
<li>
<div class="checkbox">
<input type="checkbox" checked="checked" value="1" id="opt02">
<label for="opt02">Option 2</label>
</div>
</li>
<li>
<div class="checkbox">
<input type="checkbox" value="1" id="opt03">
<label for="opt03">Option 3</label>
</div>
</li>
<li>
<div class="checkbox">
<input type="checkbox" value="1" id="opt04">
<label for="opt04">Option 4</label>
</div>
</li>
</ul>
<h5>Inline Select</h5>
<ul class="nolisttypes inlineSelect inline cyan">
<li class="title"><h5>Options:</h5></li>
<li>
<div class="checkbox">
<input type="checkbox" value="1" id="opt05">
<label for="opt05">Option 1</label>
</div>
</li>
<li>
<div class="checkbox">
<input type="checkbox" checked="checked" value="1" id="opt06">
<label for="opt06">Option 2</label>
</div>
</li>
<li>
<div class="checkbox">
<input type="checkbox" value="1" id="opt07">
<label for="opt07">Option 3</label>
</div>
</li>
</ul>
<h5>Wells</h5>
<div class="well">
Look, I'm in a well!
</div>
<div class="well well-lg well-green">
Look, I'm in a large well with green background!
</div>
<div class="well well-sm well-cyan">
Look, I'm in a small well with cyan background!
</div>
</div>
</div>
</div>
// /tile body
</section>
// /tile
//****************************//
//*********** jquery *********//
//****************************//
//initialize typeahead
$('#typeahead').typeahead({
name: 'States',
local: ["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Dakota","North Carolina","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]
});
//initialize datepicker
$('#datepicker').datepicker({
todayHighlight: true
});
//initialize chosen
$(".chosen-select").chosen({disable_search_threshold: 10});
//initialize range slider
$('#rangeSlider').noUiSlider({
range: [10,40],
start: [20,30],
connect: true
});
//initialize slider
$('#slider').noUiSlider({
range: [0,100],
start: [20],
handles: 1
});
//initialize color picker sliders
$('.slider').noUiSlider({
range: [0,255]
,start: 127
,handles: 1
,connect: "lower"
,orientation: "vertical"
,serialization: {
resolution: 1
}
,slide: function(){
var color = 'rgb(' + $("#red").val()
+ ',' + $("#green").val()
+ ',' + $("#blue").val()
+ ')';
$(".result").css({
background: color
,color: color
});
}
});
//set width for label on Inline Select
var setLabelWidth = function() {
var parentWidth = $('.inlineSelect.inline').width();
var childrenLength = $('.inlineSelect.inline li').length;
$('.inlineSelect.inline li label, .inlineSelect.inline li.title').css('width', ((parentWidth / childrenLength)) + 'px');
}
setLabelWidth();
$(window).resize(function() {
setLabelWidth();
});
