/* ------------------------------------------------------------------------------ * * # jQuery UI Widgets * * Specific JS code additions for jqueryui_components.html page * * Version: 1.0 * Latest update: Nov 12, 2015 * * ---------------------------------------------------------------------------- */ $(function () { // Buttons // ------------------------- // Basic button $(".jui-button").button(); // Button set $(".jui-button-set").buttonset(); // Split button $(".jui-button-split").button().click(function () { alert("Running the last action"); }) .next() .button({ text: false, icons: { primary: "icon-arrow-down22" } }).click(function () { var menu = $(this).parent().next().show().position({ my: "right top", at: "right bottom", of: this }); $(document).one("click", function () { menu.hide(); }); return false; }).parent().buttonset().next().hide().menu(); // // With icons // // Left icon $('.jui-button-icon-left').button({ icons: { primary: "icon-twitter" } }); // Right icon $('.jui-button-icon-right').button({ icons: { secondary: "icon-dribbble3" } }); // Left and right icons $('.jui-button-icon-both').button({ icons: { primary: "icon-github4", secondary: "icon-arrow-down22" } }); // Icons only $('.jui-button-icon-both-only').button({ icons: { primary: "icon-github4", secondary: "icon-arrow-down22" }, text: false }); // Single icon only $('.jui-button-icon-only').button({ icons: { primary: "icon-vimeo" }, text: false }); // Progress bars // ------------------------- // Basic example $(".jui-progressbar").progressbar({ value: 60 }); // Maximum value $(".jui-progressbar-max").progressbar({ max: 1000, value: 400 }); // Indeterminate progress bar $(".jui-progressbar-indeterminate").progressbar({ value: false }).on("create", function (event) { var target = $(event.target), progressbar = $(".jui-progressbar-indeterminate"), progressbarValue = progressbar.find(".ui-progressbar-value"); progressbar.progressbar("option", "value", false); }); // // Custom label // // Define elements var progressbar = $(".jui-progressbar-custom"), progressLabel = $(".ui-progress-label"); // Initialize progress bar progressbar.progressbar({ value: false, change: function () { progressLabel.text(progressbar.progressbar("value") + "%"); }, complete: function () { progressLabel.text("Complete!"); } }); // Custom progress function function progress() { var val = progressbar.progressbar("value") || 0; progressbar.progressbar("value", val + 2); if (val < 99) { setTimeout(progress, 80); } } // Update progress after 2000ms setTimeout(progress, 2000); // Dialogs // ------------------------- // Basic example $('#jui-dialog-basic').dialog({ autoOpen: false, width: 400 }); // With overlay $('#jui-dialog-overlay').dialog({ autoOpen: false, modal: true, width: 400 }); // Animated $('#jui-dialog-animated').dialog({ autoOpen: false, modal: true, width: 400, show: { effect: "fade", duration: 500 }, hide: { effect: "fade", duration: 500 } }); // With buttons $('#jui-dialog-buttons').dialog({ autoOpen: false, modal: true, width: 400, buttons: { Save: function () { $(this).dialog('close'); }, Cancel: function () { $(this).dialog('close'); } } }); // Buttons with icons $('#jui-dialog-buttons-icons').dialog({ autoOpen: false, modal: true, width: 400, buttons: [ { text: 'Submit', icons: { primary: 'icon-checkmark5' }, click: function () { $(this).dialog('close'); } }, { text: 'Cancel', icons: { primary: 'icon-cross3' }, click: function () { $(this).dialog('close'); } } ] }); // Disable resize $('#jui-dialog-resize').dialog({ autoOpen: false, modal: true, width: 400, resizable: false }); // Disable close on escape $('#jui-dialog-close-escape').dialog({ autoOpen: false, modal: true, width: 400, closeOnEscape: false }); // Disable drag $('#jui-dialog-drag-disabled').dialog({ autoOpen: false, modal: true, width: 400, draggable: false }); // Append to element $('#jui-dialog-append').dialog({ appendTo: '#modal-append-target', autoOpen: false, modal: true, width: 400 }); // // With forms // // Vertical form dialog $('#jui-dialog-form-vertical').dialog({ autoOpen: false, modal: true, width: 500, buttons: { Submit: function () { $(this).dialog('close'); }, Cancel: function () { $(this).dialog('close'); } } }); // Horizontal form dialog $('#jui-dialog-form-horizontal').dialog({ autoOpen: false, modal: true, width: 500, buttons: { Submit: function () { $(this).dialog('close'); }, Cancel: function () { $(this).dialog('close'); } } }); // Inline form dialog $('#jui-dialog-form-inline').dialog({ autoOpen: false, modal: true, width: 555, buttons: { Submit: function () { $(this).dialog('close'); }, Cancel: function () { $(this).dialog('close'); } } }); // // Optional widths // // Default width $('#jui-dialog-width-default').dialog({ autoOpen: false, modal: true }); // Pixel width $('#jui-dialog-width-pixel').dialog({ autoOpen: false, modal: true, width: 400 }); // Percentage width $('#jui-dialog-width-percentage').dialog({ autoOpen: false, modal: true, width: '50%' }); // Full width $('#jui-dialog-width-full').dialog({ autoOpen: false, modal: true, width: '96%' }); // // Dialog openers // $('#jui-dialog-basic-opener').click(function () { $('#jui-dialog-basic').dialog('open'); }); $('#jui-dialog-overlay-opener').click(function () { $('#jui-dialog-overlay').dialog('open'); }); $('#jui-dialog-animated-opener').click(function () { $('#jui-dialog-animated').dialog('open'); }); $('#jui-dialog-buttons-opener').click(function () { $('#jui-dialog-buttons').dialog('open'); }); $('#jui-dialog-buttons-icons-opener').click(function () { $('#jui-dialog-buttons-icons').dialog('open'); }); $('#jui-dialog-resize-opener').click(function () { $('#jui-dialog-resize').dialog('open'); }); $('#jui-dialog-close-escape-opener').click(function () { $('#jui-dialog-close-escape').dialog('open'); }); $('#jui-dialog-drag-disabled-opener').click(function () { $('#jui-dialog-drag-disabled').dialog('open'); }); $('#jui-dialog-append-opener').click(function () { $('#jui-dialog-append').dialog('open'); }); $('#jui-dialog-form-vertical-opener').click(function () { $('#jui-dialog-form-vertical').dialog('open'); }); $('#jui-dialog-form-horizontal-opener').click(function () { $('#jui-dialog-form-horizontal').dialog('open'); }); $('#jui-dialog-form-inline-opener').click(function () { $('#jui-dialog-form-inline').dialog('open'); }); $('#jui-dialog-width-default-opener').click(function () { $('#jui-dialog-width-default').dialog('open'); }); $('#jui-dialog-width-pixel-opener').click(function () { $('#jui-dialog-width-pixel').dialog('open'); }); $('#jui-dialog-width-percentage-opener').click(function () { $('#jui-dialog-width-percentage').dialog('open'); }); $('#jui-dialog-width-full-opener').click(function () { $('#jui-dialog-width-full').dialog('open'); }); });