dev-chiefworks
703 lines
17 KiB
JavaScript
703 lines
17 KiB
JavaScript
/* ------------------------------------------------------------------------------
|
|
*
|
|
* # jQuery UI forms
|
|
*
|
|
* Specific JS code additions for jqueryui_forms.html page
|
|
*
|
|
* Version: 1.0
|
|
* Latest update: Nov 12, 2015
|
|
*
|
|
* ---------------------------------------------------------------------------- */
|
|
|
|
$(function() {
|
|
|
|
|
|
// Date picker
|
|
// ------------------------------
|
|
|
|
// Default functionality
|
|
$(".datepicker").datepicker();
|
|
|
|
|
|
// Dates in other months
|
|
$(".datepicker-dates").datepicker({
|
|
showOtherMonths: true,
|
|
selectOtherMonths: true
|
|
});
|
|
|
|
|
|
// Button bar
|
|
$(".datepicker-button-bar").datepicker({
|
|
showButtonPanel: true
|
|
});
|
|
|
|
|
|
// Month and year menu
|
|
$(".datepicker-menus").datepicker({
|
|
changeMonth: true,
|
|
changeYear: true
|
|
});
|
|
|
|
|
|
// Multiple months
|
|
$(".datepicker-multiple").datepicker({
|
|
numberOfMonths: 3,
|
|
showButtonPanel: true
|
|
});
|
|
|
|
|
|
// Icon trigger
|
|
$(".datepicker-icon").datepicker({
|
|
showOn: "button",
|
|
buttonImage: "assets/images/ui/datepicker_trigger.png",
|
|
buttonImageOnly: true
|
|
});
|
|
|
|
|
|
// Populate alternate field
|
|
$(".datepicker-alternate").datepicker({
|
|
altField: "#alternate",
|
|
altFormat: "DD, d MM, yy"
|
|
});
|
|
|
|
|
|
// Restrict date range
|
|
$(".datepicker-restrict").datepicker({
|
|
minDate: -20,
|
|
maxDate: "+1M +10D"
|
|
});
|
|
|
|
|
|
// Show week number
|
|
$(".datepicker-weeks").datepicker({
|
|
showWeek: true,
|
|
firstDay: 1
|
|
});
|
|
|
|
|
|
//
|
|
// Date range
|
|
//
|
|
|
|
// From
|
|
$("#range-from").datepicker({
|
|
defaultDate: "+1w",
|
|
numberOfMonths: 3,
|
|
onClose: function( selectedDate ) {
|
|
$( "#range-to" ).datepicker( "option", "minDate", selectedDate );
|
|
}
|
|
});
|
|
|
|
// To
|
|
$("#range-to").datepicker({
|
|
defaultDate: "+1w",
|
|
numberOfMonths: 3,
|
|
onClose: function( selectedDate ) {
|
|
$( "#range-from" ).datepicker( "option", "maxDate", selectedDate );
|
|
}
|
|
});
|
|
|
|
|
|
//
|
|
// Format date
|
|
//
|
|
|
|
// Initialize
|
|
$(".datepicker-format").datepicker();
|
|
|
|
// Format date on change
|
|
$("#format").change(function() {
|
|
$(".datepicker-format").datepicker("option", "dateFormat", $(this).val());
|
|
});
|
|
|
|
|
|
//
|
|
// Format date
|
|
//
|
|
|
|
// Initialize
|
|
$(".datepicker-animation").datepicker();
|
|
|
|
// Animate picker on change
|
|
$("#anim").change(function() {
|
|
$(".datepicker-animation").datepicker("option", "showAnim", $(this).val());
|
|
});
|
|
|
|
|
|
|
|
|
|
// Autocomplete
|
|
// ------------------------------
|
|
|
|
// Add demo data
|
|
var availableTags = [
|
|
"ActionScript",
|
|
"AppleScript",
|
|
"Asp",
|
|
"BASIC",
|
|
"C",
|
|
"C++",
|
|
"Clojure",
|
|
"COBOL",
|
|
"ColdFusion",
|
|
"Erlang",
|
|
"Fortran",
|
|
"Groovy",
|
|
"Haskell",
|
|
"Java",
|
|
"JavaScript",
|
|
"Lisp",
|
|
"Perl",
|
|
"PHP",
|
|
"Python",
|
|
"Ruby",
|
|
"Scala",
|
|
"Scheme"
|
|
];
|
|
|
|
// Basic example
|
|
$("#ac-basic").autocomplete({
|
|
source: availableTags
|
|
});
|
|
|
|
|
|
//
|
|
// Accent folding
|
|
//
|
|
|
|
// Add data
|
|
var names = [ "Jörn Zaefferer", "Scott González", "John Resig" ];
|
|
|
|
// Map
|
|
var accentMap = {
|
|
"á": "a",
|
|
"ö": "o"
|
|
};
|
|
|
|
// Normalize
|
|
var normalize = function(term) {
|
|
var ret = "";
|
|
for (var i = 0; i < term.length; i++) {
|
|
ret += accentMap[ term.charAt(i) ] || term.charAt(i);
|
|
}
|
|
return ret;
|
|
};
|
|
|
|
// Init autocomplete
|
|
$("#ac-folding").autocomplete({
|
|
source: function(request, response) {
|
|
var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
|
|
response($.grep(names, function(value) {
|
|
value = value.label || value.value || value;
|
|
return matcher.test(value) || matcher.test(normalize(value));
|
|
}));
|
|
}
|
|
});
|
|
|
|
|
|
//
|
|
// Categories
|
|
//
|
|
|
|
// Custom widget
|
|
$.widget("custom.catcomplete", $.ui.autocomplete, {
|
|
_create: function() {
|
|
this._super();
|
|
this.widget().menu("option", "items", "> :not(.ui-autocomplete-category)");
|
|
},
|
|
_renderMenu: function(ul, items) {
|
|
var that = this,
|
|
currentCategory = "";
|
|
|
|
$.each( items, function(index, item) {
|
|
var li;
|
|
if (item.category != currentCategory) {
|
|
ul.append("<li class='ui-autocomplete-category'>" + item.category + "</li>");
|
|
currentCategory = item.category;
|
|
}
|
|
li = that._renderItemData(ul, item);
|
|
if (item.category) {
|
|
li.attr("aria-label", item.category + " : " + item.label);
|
|
}
|
|
});
|
|
}
|
|
});
|
|
|
|
// Demo data
|
|
var data = [
|
|
{label: "anders", category: ""},
|
|
{label: "andreas", category: ""},
|
|
{label: "antal", category: ""},
|
|
{label: "annhhx10", category: "Products"},
|
|
{label: "annk K12", category: "Products"},
|
|
{label: "annttop C13", category: "Products"},
|
|
{label: "anders andersson", category: "People"},
|
|
{label: "andreas andersson", category: "People"},
|
|
{label: "andreas johnson", category: "People"}
|
|
];
|
|
|
|
// Initialize autocomplete
|
|
$( "#ac-categories" ).catcomplete({
|
|
delay: 0,
|
|
source: data
|
|
});
|
|
|
|
|
|
//
|
|
// Custom data and display
|
|
//
|
|
|
|
// Demo data
|
|
var projects = [
|
|
{
|
|
label: "Limitless",
|
|
desc: "responsive web application kit"
|
|
},
|
|
{
|
|
label: "Londinium",
|
|
desc: "responsive bootstrap 3 admin template"
|
|
},
|
|
{
|
|
label: "It's Brain",
|
|
desc: "Bootstrap based premium admin template"
|
|
}
|
|
];
|
|
|
|
// Initialize autocomplete
|
|
$("#ac-custom").autocomplete({
|
|
minLength: 0,
|
|
source: projects,
|
|
focus: function( event, ui ) {
|
|
$("#ac-custom").val(ui.item.label);
|
|
return false;
|
|
},
|
|
select: function( event, ui ) {
|
|
$("#ac-custom").val(ui.item.label);
|
|
return false;
|
|
}
|
|
})
|
|
.autocomplete("instance")._renderItem = function(ul, item) {
|
|
return $("<li>").append("<span class='text-semibold'>" + item.label + '</span>' + "<br>" + '<span class="text-muted text-size-small">' + item.desc + '</span>').appendTo(ul);
|
|
};
|
|
|
|
|
|
//
|
|
// Custom data and display
|
|
//
|
|
|
|
// Split values
|
|
function split(val) {
|
|
return val.split(/,\s*/);
|
|
}
|
|
|
|
// Extract the last term
|
|
function extractLast(term) {
|
|
return split(term).pop();
|
|
}
|
|
|
|
// Configure and initialize
|
|
$("#ac-multiple").bind("keydown", function(event) {
|
|
if (event.keyCode === $.ui.keyCode.TAB && $(this).autocomplete("instance").menu.active) {
|
|
event.preventDefault();
|
|
}
|
|
})
|
|
.autocomplete({
|
|
minLength: 0,
|
|
source: function(request, response) {
|
|
|
|
// Delegate back to autocomplete, but extract the last term
|
|
response( $.ui.autocomplete.filter(
|
|
availableTags, extractLast( request.term ) ) );
|
|
},
|
|
focus: function() {
|
|
|
|
// Prevent value inserted on focus
|
|
return false;
|
|
},
|
|
select: function(event, ui) {
|
|
var terms = split(this.value);
|
|
|
|
// Remove the current input
|
|
terms.pop();
|
|
|
|
// Add the selected item
|
|
terms.push(ui.item.value);
|
|
|
|
// Add placeholder to get the comma-and-space at the end
|
|
terms.push("");
|
|
this.value = terms.join(", ");
|
|
return false;
|
|
}
|
|
});
|
|
|
|
|
|
//
|
|
// Remote data
|
|
//
|
|
|
|
// Remote data
|
|
$("#ac-remote").autocomplete({
|
|
minLength: 2,
|
|
source: "assets/demo_data/jquery_ui/autocomplete.php",
|
|
search: function() {
|
|
$(this).parent().addClass('ui-autocomplete-processing');
|
|
},
|
|
open: function() {
|
|
$(this).parent().removeClass('ui-autocomplete-processing');
|
|
}
|
|
});
|
|
|
|
// Remote data with caching
|
|
var cache = {};
|
|
$("#ac-caching").autocomplete({
|
|
minLength: 2,
|
|
source: function(request, response) {
|
|
var term = request.term;
|
|
if (term in cache) {
|
|
response(cache[term]);
|
|
return;
|
|
}
|
|
|
|
$.getJSON("assets/demo_data/jquery_ui/autocomplete.php", request, function(data, status, xhr) {
|
|
cache[ term ] = data;
|
|
response(data);
|
|
});
|
|
},
|
|
search: function() {
|
|
$(this).parent().addClass('ui-autocomplete-processing');
|
|
},
|
|
open: function() {
|
|
$(this).parent().removeClass('ui-autocomplete-processing');
|
|
}
|
|
});
|
|
|
|
|
|
//
|
|
// Combo box
|
|
//
|
|
|
|
// Configure custom widget
|
|
$.widget("custom.combobox", {
|
|
_create: function() {
|
|
this.wrapper = $("<div>").addClass("custom-combobox input-group").insertAfter(this.element);
|
|
this.element.hide();
|
|
this._createAutocomplete();
|
|
this._createShowAllButton();
|
|
},
|
|
_createAutocomplete: function() {
|
|
var selected = this.element.children(":selected"),
|
|
value = selected.val() ? selected.text() : "";
|
|
|
|
var input = this.input = $("<input>")
|
|
.appendTo(this.wrapper)
|
|
.val(value)
|
|
.attr("title", "")
|
|
.attr("placeholder", "Search")
|
|
.addClass("form-control")
|
|
.autocomplete({
|
|
delay: 0,
|
|
minLength: 0,
|
|
source: $.proxy(this, "_source")
|
|
});
|
|
|
|
this._on(this.input, {
|
|
autocompleteselect: function( event, ui ) {
|
|
ui.item.option.selected = true;
|
|
this._trigger("select", event, {
|
|
item: ui.item.option
|
|
});
|
|
},
|
|
|
|
autocompletechange: "_removeIfInvalid"
|
|
});
|
|
},
|
|
_createShowAllButton: function() {
|
|
var input = this.input,
|
|
wasOpen = false;
|
|
|
|
// Add input group button
|
|
var wrapper2 = $("<span>").attr("class", "input-group-btn").appendTo(this.wrapper);
|
|
|
|
// Append fonr control icon
|
|
this.wrapper.append('<div class="form-control-feedback"><i class="icon-search4 text-size-base"></i></div>');
|
|
|
|
// Link
|
|
$( "<a>" )
|
|
.attr( "tabIndex", -1 )
|
|
.appendTo( wrapper2 )
|
|
.button({
|
|
icons: {
|
|
primary: "icon-arrow-down12"
|
|
},
|
|
text: false
|
|
})
|
|
.removeClass( "" )
|
|
.addClass( "btn btn-default btn-icon" )
|
|
.mousedown(function() {
|
|
wasOpen = input.autocomplete( "widget" ).is( ":visible" );
|
|
})
|
|
.click(function() {
|
|
input.focus();
|
|
|
|
// Close if already visible
|
|
if (wasOpen) {
|
|
return;
|
|
}
|
|
|
|
// Pass empty string as value to search for, displaying all results
|
|
input.autocomplete( "search", "" );
|
|
});
|
|
},
|
|
_source: function( request, response ) {
|
|
var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
|
|
response( this.element.children("option").map(function() {
|
|
var text = $(this).text();
|
|
if (this.value && (!request.term || matcher.test(text)))
|
|
return {
|
|
label: text,
|
|
value: text,
|
|
option: this
|
|
};
|
|
})
|
|
);
|
|
},
|
|
_removeIfInvalid: function( event, ui ) {
|
|
|
|
// Selected an item, nothing to do
|
|
if (ui.item) {
|
|
return;
|
|
}
|
|
|
|
// Search for a match (case-insensitive)
|
|
var value = this.input.val(),
|
|
valueLowerCase = value.toLowerCase(),
|
|
valid = false;
|
|
|
|
this.element.children("option").each(function() {
|
|
if ($(this).text().toLowerCase() === valueLowerCase) {
|
|
this.selected = valid = true;
|
|
return false;
|
|
}
|
|
});
|
|
|
|
// Found a match, nothing to do
|
|
if (valid) {
|
|
return;
|
|
}
|
|
|
|
// Remove invalid value
|
|
this.input.val("").attr("title", value + " didn't match any item");
|
|
|
|
this.element.val("");
|
|
this._delay(function() {
|
|
this.input.tooltip("close").attr("title", "");
|
|
}, 2500);
|
|
this.input.autocomplete("instance").term = "";
|
|
},
|
|
_destroy: function() {
|
|
this.wrapper.remove();
|
|
this.element.show();
|
|
}
|
|
});
|
|
|
|
// Initialize
|
|
$("#ac-combo").combobox();
|
|
|
|
|
|
|
|
|
|
// Select menu
|
|
// ------------------------------
|
|
|
|
// Basic select
|
|
$(".select-basic").selectmenu({
|
|
width: '100%'
|
|
});
|
|
|
|
|
|
// Optgroups example
|
|
$("#select-optgroups").selectmenu({
|
|
width: '100%'
|
|
});
|
|
|
|
|
|
// Default width
|
|
$("#select-width").selectmenu();
|
|
|
|
|
|
// Disabled select
|
|
$("#select-disabled").selectmenu({
|
|
width: '100%',
|
|
disabled: true
|
|
});
|
|
|
|
|
|
//
|
|
// Select with icons
|
|
//
|
|
|
|
// Custom widget configuration
|
|
$.widget("custom.iconselectmenu", $.ui.selectmenu, {
|
|
_renderItem: function(ul, item) {
|
|
var li = $("<li>", {text: item.label});
|
|
|
|
if (item.disabled) {
|
|
li.addClass("ui-state-disabled");
|
|
}
|
|
|
|
$("<i>", {
|
|
style: item.element.attr("data-style"),
|
|
"class": item.element.attr("data-icon")
|
|
}).prependTo(li);
|
|
|
|
return li.appendTo(ul);
|
|
}
|
|
});
|
|
|
|
// Initialize
|
|
$("#select-icons").iconselectmenu({width: '100%'}).iconselectmenu("menuWidget");
|
|
|
|
|
|
//
|
|
// Select with images
|
|
//
|
|
|
|
// Custom widget configuration
|
|
$.widget("custom.imageselectmenu", $.ui.selectmenu, {
|
|
_renderItem: function(ul, item) {
|
|
var li = $("<li>", {text: item.label});
|
|
|
|
if (item.disabled) {
|
|
li.addClass("ui-state-disabled");
|
|
}
|
|
|
|
$("<span>", {
|
|
style: item.element.attr("data-style"),
|
|
"class": item.element.attr("data-class")
|
|
}).prependTo(li);
|
|
|
|
return li.appendTo(ul);
|
|
}
|
|
});
|
|
|
|
// Initialize
|
|
$("#select-images").imageselectmenu({width: '100%'}).imageselectmenu("menuWidget").addClass("ui-selectmenu-images");
|
|
|
|
|
|
|
|
|
|
// Spinners
|
|
// ------------------------------
|
|
|
|
// Basic spinner
|
|
$("#spinner-basic").spinner();
|
|
|
|
|
|
// Disabled spinner
|
|
$("#spinner-disabled").spinner({
|
|
disabled: true
|
|
});
|
|
|
|
|
|
// Spinner min/max limits
|
|
$("#spinner-limits").spinner({
|
|
min: 90,
|
|
max: 110,
|
|
start: 100
|
|
});
|
|
|
|
|
|
// Spinner step
|
|
$("#spinner-step").spinner({
|
|
step: 20,
|
|
start: 500
|
|
});
|
|
|
|
|
|
// Spinner overflow
|
|
$("#spinner-overflow").spinner({
|
|
spin: function(event, ui) {
|
|
if (ui.value > 10) {
|
|
$(this).spinner("value", -10);
|
|
return false;
|
|
}
|
|
else if (ui.value < -10) {
|
|
$(this).spinner("value", 10);
|
|
return false;
|
|
}
|
|
}
|
|
});
|
|
|
|
|
|
//
|
|
// Currency spinner
|
|
//
|
|
|
|
// Culture
|
|
$("#spinner-currency-culture").on('selectmenuchange', function() {
|
|
$("#spinner-currency").spinner("option", "culture", $(this).val());
|
|
});
|
|
|
|
// Initialize
|
|
$("#spinner-currency").spinner({
|
|
start: 1000,
|
|
numberFormat: "C"
|
|
});
|
|
|
|
|
|
//
|
|
// Decimal spinner
|
|
//
|
|
|
|
// Culture
|
|
$( "#spinner-decimal-culture" ).on('selectmenuchange', function() {
|
|
var current = $("#spinner-decimal").spinner("value");
|
|
Globalize.culture( $(this).val() );
|
|
$("#spinner-decimal").spinner("value", current);
|
|
});
|
|
|
|
// Initialize
|
|
$("#spinner-decimal").spinner({
|
|
step: 0.01,
|
|
numberFormat: "n"
|
|
});
|
|
|
|
|
|
//
|
|
// Time spinner
|
|
//
|
|
|
|
// Configure custom widget
|
|
$.widget("ui.timespinner", $.ui.spinner, {
|
|
options: {
|
|
step: 60 * 1000, // seconds
|
|
page: 60 // hours
|
|
},
|
|
_parse: function(value) {
|
|
if (typeof value === "string") {
|
|
|
|
// Already a timestamp
|
|
if (Number(value) == value) {
|
|
return Number(value);
|
|
}
|
|
return +Globalize.parseDate(value);
|
|
}
|
|
return value;
|
|
},
|
|
_format: function(value) {
|
|
return Globalize.format(new Date(value), "t");
|
|
}
|
|
});
|
|
|
|
// Culture
|
|
$("#spinner-time-culture").on('selectmenuchange', function() {
|
|
var current = $("#spinner-time").timespinner("value");
|
|
Globalize.culture($(this).val());
|
|
$("#spinner-time").timespinner("value", current);
|
|
});
|
|
|
|
// Initialize
|
|
$("#spinner-time").timespinner();
|
|
|
|
});
|