400 lines
10 KiB
JavaScript
Executable File
400 lines
10 KiB
JavaScript
Executable File
$(function () {
|
|
//####### Buttons
|
|
$("#layout button,.button,#sampleButton").button();
|
|
$("#btn-with-icon").button({
|
|
text: true,
|
|
icons: {
|
|
primary: "ui-icon-play"
|
|
}
|
|
});
|
|
|
|
$("#button-with-icon" ).button({
|
|
icons: {
|
|
primary: "ui-icon-locked"
|
|
},
|
|
text: true
|
|
});
|
|
$("#button-with-icon2" ).button({
|
|
icons: {
|
|
primary: "ui-icon-play"
|
|
},
|
|
text: true
|
|
});
|
|
$("#button-with-icon3" ).button({
|
|
icons: {
|
|
primary: "ui-icon-stop"
|
|
},
|
|
text: true
|
|
});
|
|
// Buttonset
|
|
$('#radioset').buttonset();
|
|
$("#format").buttonset();
|
|
|
|
//####### Toolbar
|
|
$("#play").button({
|
|
text: false,
|
|
icons: {
|
|
primary: "ui-icon-play"
|
|
}
|
|
});
|
|
$("#shuffle").button();
|
|
$("#repeat").buttonset();
|
|
|
|
// Split button
|
|
|
|
$( "#rerun" )
|
|
.button()
|
|
.click(function() {
|
|
alert( "Running the last action" );
|
|
})
|
|
.next()
|
|
.button({
|
|
text: false,
|
|
icons: {
|
|
primary: "ui-icon-triangle-1-s"
|
|
}
|
|
})
|
|
.click(function() {
|
|
var menu = $( this ).parent().next().show().position({
|
|
my: "left top",
|
|
at: "left bottom",
|
|
of: this
|
|
});
|
|
$( document ).one( "click", function() {
|
|
menu.hide();
|
|
});
|
|
return false;
|
|
}).parent()
|
|
.buttonset()
|
|
.next()
|
|
.hide()
|
|
.menu();
|
|
//####### Accordion
|
|
$("#menu-collapse").accordion({
|
|
header: "h3"
|
|
});
|
|
|
|
//####### Dialogs
|
|
|
|
// Dialog Simple
|
|
$('#btn-dialog-simple').click(function () {
|
|
$('#modal-simple').dialog('open');
|
|
return false;
|
|
});
|
|
|
|
$('#modal-simple').dialog({
|
|
autoOpen: false,
|
|
width: 600,
|
|
buttons: {
|
|
"Ok": function () {
|
|
$(this).dialog("close");
|
|
},
|
|
"Cancel": function () {
|
|
$(this).dialog("close");
|
|
}
|
|
}
|
|
});
|
|
|
|
// Dialog message
|
|
$('#btn-dialog-message').click(function () {
|
|
$('#modal-message').dialog('open');
|
|
return false;
|
|
});
|
|
|
|
$("#modal-message").dialog({
|
|
autoOpen: false,
|
|
modal: true,
|
|
buttons: {
|
|
Ok: function () {
|
|
$(this).dialog("close");
|
|
}
|
|
}
|
|
});
|
|
|
|
//Dialog multi button
|
|
$('#btn-dialog-button').click(function () {
|
|
$('#modal-button').dialog('open');
|
|
return false;
|
|
});
|
|
// Dialog Button
|
|
$('#modal-button').dialog({
|
|
autoOpen: false,
|
|
width: 600,
|
|
buttons: [
|
|
{
|
|
text: "Delete",
|
|
click: function() {
|
|
},
|
|
"class":"ui-button-danger"
|
|
},
|
|
{
|
|
text: "Edit",
|
|
click: function() {
|
|
},
|
|
"class":"ui-button-warning"
|
|
},
|
|
{
|
|
text: "other",
|
|
click: function() {
|
|
},
|
|
"class":"ui-button-inverse"
|
|
},
|
|
{
|
|
text: "Close",
|
|
click: function() {
|
|
$(this).dialog("close");
|
|
}
|
|
}
|
|
]
|
|
});
|
|
|
|
//hover states on the static widgets
|
|
$('#btn-dialog-simple, #btn-dialog-message, #btn-dialog-button, ul#icons li').hover(
|
|
function () {
|
|
$(this).addClass('ui-state-hover');
|
|
}, function () {
|
|
$(this).removeClass('ui-state-hover');
|
|
}
|
|
);
|
|
|
|
// Remove focus from buttons
|
|
$('.ui-dialog :button').blur();
|
|
|
|
//####### Tabs
|
|
$('#tabs2, #tabs, #tabs3').tabs();
|
|
|
|
// Dynamic tabs
|
|
var tabTitle = $( "#tab_title" ),
|
|
tabContent = $( "#tab_content" ),
|
|
tabTemplate = "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close'>Remove Tab</span></li>",
|
|
tabCounter = 2;
|
|
|
|
var tabs = $( "#tabs2" ).tabs();
|
|
|
|
// modal dialog init: custom buttons and a "close" callback reseting the form inside
|
|
var dialog = $( "#dialog2" ).dialog({
|
|
autoOpen: false,
|
|
modal: true,
|
|
buttons: {
|
|
Add: function() {
|
|
addTab();
|
|
$( this ).dialog( "close" );
|
|
},
|
|
Cancel: function() {
|
|
$( this ).dialog( "close" );
|
|
}
|
|
},
|
|
close: function() {
|
|
form[ 0 ].reset();
|
|
}
|
|
});
|
|
|
|
// addTab form: calls addTab function on submit and closes the dialog
|
|
var form = dialog.find( "form" ).submit(function( event ) {
|
|
addTab();
|
|
dialog.dialog( "close" );
|
|
event.preventDefault();
|
|
});
|
|
|
|
// actual addTab function: adds new tab using the input from the form above
|
|
function addTab() {
|
|
var label = tabTitle.val() || "Tab " + tabCounter,
|
|
id = "tabs-" + tabCounter,
|
|
li = $( tabTemplate.replace( /#\{href\}/g, "#" + id ).replace( /#\{label\}/g, label ) ),
|
|
tabContentHtml = tabContent.val() || "Tab " + tabCounter + " content.";
|
|
|
|
tabs.find( ".ui-tabs-nav" ).append( li );
|
|
tabs.append( "<div id='" + id + "'><p>" + tabContentHtml + "</p></div>" );
|
|
tabs.tabs( "refresh" );
|
|
tabCounter++;
|
|
}
|
|
|
|
// addTab button: just opens the dialog
|
|
$( "#add_tab" )
|
|
.button()
|
|
.click(function() {
|
|
dialog.dialog( "open" );
|
|
});
|
|
|
|
// close icon: removing the tab on click
|
|
$( "#tabs2" ).on( "click",'span.ui-icon-close', function() {
|
|
|
|
var panelId = $( this ).closest( "li" ).remove().attr( "aria-controls" );
|
|
$( "#" + panelId ).remove();
|
|
tabs.tabs( "refresh" );
|
|
});
|
|
|
|
//Combination examples (tabs) and open dialog
|
|
$('#sampleButton').on('click', function(event){
|
|
event.preventDefault();
|
|
$('#modal-simple').dialog({
|
|
autoOpen: true,
|
|
modal: true,
|
|
width: 600,
|
|
buttons: {
|
|
"Save": function () {
|
|
$(this).dialog("close");
|
|
},
|
|
"Cancel": function () {
|
|
$(this).dialog("close");
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
//####### Datepicker
|
|
$('#datepicker').datepicker({
|
|
inline: true
|
|
});
|
|
|
|
//####### Slider
|
|
|
|
// Horizontal slider
|
|
$('#h-slider').slider({
|
|
range: true,
|
|
values: [17, 67]
|
|
});
|
|
|
|
// Vertical slider
|
|
$("#v-slider").slider({
|
|
orientation: "vertical",
|
|
range: "min",
|
|
min: 0,
|
|
max: 100,
|
|
value: 60,
|
|
slide: function (event, ui) {
|
|
$("#amount").val(ui.value);
|
|
}
|
|
});
|
|
$("#amount").val($("#v-slider").slider("value"));
|
|
|
|
// Autocomplete
|
|
var availableTags = ["ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme"];
|
|
|
|
$("#tags").autocomplete({
|
|
source: availableTags
|
|
});
|
|
|
|
//####### Menu
|
|
$("#menu").menu();
|
|
|
|
//####### Spinner
|
|
|
|
var spinner = $( "#spinner" ).spinner();
|
|
|
|
$( "#disable" ).click(function() {
|
|
if ( spinner.spinner( "option", "disabled" ) ) {
|
|
spinner.spinner( "enable" );
|
|
} else {
|
|
spinner.spinner( "disable" );
|
|
}
|
|
});
|
|
$( "#destroy" ).click(function() {
|
|
if ( spinner.data( "ui-spinner" ) ) {
|
|
spinner.spinner( "destroy" );
|
|
} else {
|
|
spinner.spinner();
|
|
}
|
|
});
|
|
$( "#getvalue" ).click(function() {
|
|
alert( spinner.spinner( "value" ) );
|
|
});
|
|
$( "#setvalue" ).click(function() {
|
|
spinner.spinner( "value", 5 );
|
|
});
|
|
|
|
//####### Tooltip
|
|
|
|
$( "#tooltip" ).tooltip();
|
|
/**
|
|
* Tooltip top
|
|
*/
|
|
$( "#tooltip-top" ).tooltip({
|
|
position: {
|
|
my: "center bottom-15",
|
|
at: "center top",
|
|
using: function( position, feedback ) {
|
|
$( this ).css( position );
|
|
$( "<div>" )
|
|
.addClass( "arrow bottom" )
|
|
.addClass( feedback.vertical )
|
|
.addClass( feedback.horizontal )
|
|
.appendTo( this );
|
|
}
|
|
}
|
|
});
|
|
/**
|
|
* Tooltip right
|
|
*/
|
|
$( "#tooltip-right" ).tooltip({
|
|
position: {
|
|
my: "left+15 left",
|
|
at: "right center",
|
|
using: function( position, feedback ) {
|
|
$( this ).css( position );
|
|
$( "<div>" )
|
|
.addClass( "arrow left" )
|
|
.addClass( feedback.vertical )
|
|
.addClass( feedback.horizontal )
|
|
.appendTo( this );
|
|
}
|
|
}
|
|
});
|
|
$( "#tooltip-left" ).tooltip({
|
|
position: {
|
|
my: "right-15 center",
|
|
at: "left center",
|
|
using: function( position, feedback ) {
|
|
$( this ).css( position );
|
|
$( "<div>" )
|
|
.addClass( "arrow right" )
|
|
.addClass( feedback.vertical )
|
|
.addClass( feedback.horizontal )
|
|
.appendTo( this );
|
|
}
|
|
}
|
|
});
|
|
/**
|
|
* Tooltip bottom
|
|
*/
|
|
$( "#tooltip-bottom" ).tooltip({
|
|
position: {
|
|
my: "center top+15",
|
|
at: "center bottom",
|
|
using: function( position, feedback ) {
|
|
$( this ).css( position );
|
|
$( "<div>" )
|
|
.addClass( "arrow top" )
|
|
.addClass( feedback.vertical )
|
|
.addClass( feedback.horizontal )
|
|
.appendTo( this );
|
|
}
|
|
}
|
|
});
|
|
//####### progressbar
|
|
$("#progressbar").progressbar({
|
|
value: 37
|
|
});
|
|
|
|
//Custom progress bar
|
|
var customprogressbar = $( "#custom-progressbar" ),
|
|
progressLabel = $( ".progress-label" );
|
|
|
|
customprogressbar.progressbar({
|
|
value: false,
|
|
change: function() {
|
|
progressLabel.text( customprogressbar.progressbar( "value" ) + "%" );
|
|
},
|
|
complete: function() {
|
|
progressLabel.text( "Complete!" );
|
|
}
|
|
});
|
|
function progress() {
|
|
var val = customprogressbar.progressbar( "value" ) || 0;
|
|
customprogressbar.progressbar( "value", val + 1 );
|
|
if ( val < 99 ) {
|
|
setTimeout( progress, 100 );
|
|
}
|
|
}
|
|
setTimeout( progress, 3000 );
|
|
}); |