%PDF- %PDF-
Direktori : /home/opti/workflow/src/public/app-assets/js/scripts/forms/select/ |
Current File : /home/opti/workflow/src/public/app-assets/js/scripts/forms/select/form-selectBoxIt.js |
/*========================================================================================= File Name: form-selectBoxIt.js Description: Select Box It select field js ---------------------------------------------------------------------------------------- Item Name: Modern Admin - Clean Bootstrap 4 Dashboard HTML Template Version: 1.0 Author: GeeksLabs Author URL: http://www.themeforest.net/user/geekslabs ==========================================================================================*/ (function(window, document, $) { 'use strict'; //Default SelectBoxIt $(".selectBox").selectBoxIt(); // Default Label $(".selectBox-label-default").selectBoxIt({ defaultText: "No City Selected" }); // Open / Close Effects $(".selectBox-effect").selectBoxIt({ showEffect: "fadeIn", // Uses the jQuery 'fadeIn' effect when opening the drop down showEffectSpeed: 400, // Sets the jQuery 'fadeIn' effect speed to 400 milleseconds hideEffect: "fadeOut", // Uses the jQuery 'fadeOut' effect when closing the drop down hideEffectSpeed: 400 // Sets the jQuery 'fadeOut' effect speed to 400 milleseconds }); // open/close animation $(".selectBox-animation").selectBoxIt({ showEffect: "shake", // Uses the jQuery 'fadeIn' effect when opening the drop down showEffectSpeed: 'slow', showEffectOptions: { times: 1 }, // Sets jQueryUI options to shake 1 time when opening the drop down hideEffect: "puff", // Uses the jQuery 'fadeOut' effect when closing the drop down hideEffectSpeed: 'slow' // Sets the jQuery 'fadeOut' effect speed to 400 milleseconds }); // Hide First field of select $(".selectBox-hide-first").selectBoxIt({ showFirstOption: false }); // Change down arrow icon $(".selectBox-right-icon").selectBoxIt({ downArrowIcon: "ft-arrow-down ml-1" // Set a custom down arrow icon by adding new CSS class(s) }); // Change aggressive $(".selectBox-aggressive").selectBoxIt({ aggressiveChange: true // Sets default text to appear for the drop down }); // Native Mouse mode $(".selectBox-native-mouse").selectBoxIt({ nativeMousedown: true // Sets default text to appear for the drop down }); // Bootstrap Custom Icon $('.selectboxit-arrow-container i').addClass("caret"); $(".bootstrap-icon").bind({ // Binds to the 'open' event on the original select box "open": function() { // Adds the Twitter Bootstrap 'dropup' class to the drop down $(this).data("selectBox-selectBoxIt").dropdown.addClass("dropup"); }, // Binds to the 'close' event on the original select box "close": function() { // Removes the Twitter Bootstrap 'dropup' class from the drop down $(this).data("selectBox-selectBoxIt").dropdown.removeClass("dropup"); } }); // Custom Bootstrap Up/Down Icon $(".custom-bootstrap-icon").selectBoxIt({ downArrowIcon: "icon-hand-o-down" }); $(".custom-bootstrap-icon").bind({ "open": function() { $(this).data("selectBox-selectBoxIt").dropdown.find('.selectboxit-arrow-container i').removeClass(); $(this).data("selectBox-selectBoxIt").dropdown.find('.selectboxit-arrow-container i').addClass('selectboxit-arrow icon-hand-o-up'); }, "close": function() { $(this).data("selectBox-selectBoxIt").dropdown.find('.selectboxit-arrow-container i').removeClass(); $(this).data("selectBox-selectBoxIt").dropdown.find('.selectboxit-arrow-container i').addClass('selectboxit-arrow icon-hand-o-down'); } }); // Popover Tooltip $("[data-toggle='popover']").popover({ trigger: "hover", container: "body" }); // Add options dynamically $(".selectBox.options-dynamic").data("selectBox-selectBoxIt").add({ value: "London", text: "London" }); // Remove first option dynamically $(".selectBox.option-remove").data("selectBox-selectBoxIt").remove(0); // Remove multiple options dynamically $(".selectBox.options-remove").data("selectBox-selectBoxIt").remove([0,1,2]); // Remove all options dynamically $('#remove-all').on('click', function() { $(".selectBox.remove-all").data("selectBox-selectBoxIt").remove(); }); // Hide current selected option $(".selectBox-hide-current").selectBoxIt({ hideCurrent: true // Hides the currently selected option from appearing when the drop down is opened }); // Single object $(".selectBox-single-object").selectBoxIt({ // Populates the drop down using an array of strings populate: { value: "This is SelectBoxIt.", text: "This is SelectBoxIt." } }); // HTML string $(".selectBox-html-string").selectBoxIt({ populate: '<option value="No City Selected">No City Selected</option>' + '<option value="1">Amsterdam</option>'+ '<option value="2">Antwerp</option>'+ '<option value="3">Athens</option>'+ '<option value="4">Barcelona</option>'+ '<option value="5">Berlin</option>' }); // Strings Array $(".selectBox-strings-array").selectBoxIt({ populate: [ "No City Selected", "Amsterdam", "Antwerp", "Athens", "Barcelona", "Berlin" ] }); // Array of objects $(".selectBox-objects-array").selectBoxIt({ populate: [ {value: "No City Selected", text: "No City Selected"}, {value: "Amsterdam", text: "Amsterdam"}, {value: "Antwerp", text: "Antwerp"}, {value: "Athens", text: "Athens"}, {value: "Barcelona", text: "Barcelona"}, {value: "Berlin", text: "Berlin"} ] }); // JSON array $(".selectBox-json-array").selectBoxIt({ populate: {"data": [ {"text":"No City Selected","value":"No City Selected"}, {"text":"Amsterdam","value":"Amsterdam"}, {"text":"Antwerp","value":"Antwerp"}, {"text":"Athens","value":"Athens"}, {"text":"Barcelona","value":"Barcelona"}, {"text":"Berlin","value":"Berlin"} ]} }); // jQuery deferred object $(".selectBox-deferred-object").selectBoxIt({ autoWidth: false, defaultText: "Mojombo Github Repos", // Fills the drop down using a jQuery deferred object populate: function() { var deferred = $.Deferred(), arr = [], x = -1; $.ajax({ url: 'https://api.github.com/users/mojombo/repos' }).done(function(data) { while(++x < data.length) { arr.push(data[x].name); } deferred.resolve(arr); }); return deferred; } }); })(window, document, jQuery);