jQuery UI - Ace Admin
try{ace.settings.loadState('main-container')}catch(e){}
#438EB9
#222A2D
#C6487E
#D0D0D0
Choose Skin
Dialogs
Confirm Dialog
Modal Dialog
This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.
Currently using
36% of your storage space.
These items will be permanently deleted and cannot be recovered.
Are you sure?
Autocomplete
Tooltip
slide down on show
explode on hide
move down on show
Sortable Accordion
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
suscipit faucibus urna.
Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
- List item one
- List item two
- List item three
Tabs
Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Duis orci. Aliquam sodales tortor vitae ipsum. Ut et mauris vel pede varius sollicitudin.
Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla..
Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Praesent eu risus hendrerit ligula tempus pretium.
Selectmenu
Select a number
1
2
3
4
5
if('ontouchstart' in document.documentElement) document.write("
jQuery(function($) {
$( "#datepicker" ).datepicker({
showOtherMonths: true,
selectOtherMonths: false,
//isRTL:true,
/*
changeMonth: true,
changeYear: true,
showButtonPanel: true,
beforeShow: function() {
//change button colors
var datepicker = $(this).datepicker( "widget" );
setTimeout(function(){
var buttons = datepicker.find('.ui-datepicker-buttonpane')
.find('button');
buttons.eq(0).addClass('btn btn-xs');
buttons.eq(1).addClass('btn btn-xs btn-success');
buttons.wrapInner('');
}, 0);
}
*/
});
//override dialog's title function to allow for HTML titles
$.widget("ui.dialog", $.extend({}, $.ui.dialog.prototype, {
_title: function(title) {
var $title = this.options.title || ' '
if( ("title_html" in this.options) && this.options.title_html == true )
title.html($title);
else title.text($title);
}
}));
$( "#id-btn-dialog1" ).on('click', function(e) {
e.preventDefault();
var dialog = $( "#dialog-message" ).removeClass('hide').dialog({
modal: true,
title: "
",
title_html: true,
buttons: [
{
text: "Cancel",
"class" : "btn btn-minier",
click: function() {
$( this ).dialog( "close" );
}
},
{
text: "OK",
"class" : "btn btn-primary btn-minier",
click: function() {
$( this ).dialog( "close" );
}
}
]
});
/**
dialog.data( "uiDialog" )._title = function(title) {
title.html( this.options.title );
};
**/
});
$( "#id-btn-dialog2" ).on('click', function(e) {
e.preventDefault();
$( "#dialog-confirm" ).removeClass('hide').dialog({
resizable: false,
width: '320',
modal: true,
title: "
",
title_html: true,
buttons: [
{
html: " Delete all items",
"class" : "btn btn-danger btn-minier",
click: function() {
$( this ).dialog( "close" );
}
}
,
{
html: " Cancel",
"class" : "btn btn-minier",
click: function() {
$( this ).dialog( "close" );
}
}
]
});
});
//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
});
//custom autocomplete (category selection)
$.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( "
" + item.category + "" );
currentCategory = item.category;
}
li = that._renderItemData( ul, item );
if ( item.category ) {
li.attr( "aria-label", item.category + " : " + item.label );
}
});
}
});
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" }
];
$( "#search" ).catcomplete({
delay: 0,
source: data
});
//tooltips
$( "#show-option" ).tooltip({
show: {
effect: "slideDown",
delay: 250
}
});
$( "#hide-option" ).tooltip({
hide: {
effect: "explode",
delay: 250
}
});
$( "#open-event" ).tooltip({
show: null,
position: {
my: "left top",
at: "left bottom"
},
open: function( event, ui ) {
ui.tooltip.animate({ top: ui.tooltip.position().top + 10 }, "fast" );
}
});
//Menu
$( "#menu" ).menu();
//spinner
var spinner = $( "#spinner" ).spinner({
create: function( event, ui ) {
//add custom classes and icons
$(this)
.next().addClass('btn btn-success').html('')
.next().addClass('btn btn-danger').html('')
//larger buttons on touch devices
if('touchstart' in document.documentElement)
$(this).closest('.ui-spinner').addClass('ui-spinner-touch');
}
});
//slider example
$( "#slider" ).slider({
range: true,
min: 0,
max: 500,
values: [ 75, 300 ]
});
//jquery accordion
$( "#accordion" ).accordion({
collapsible: true ,
heightStyle: "content",
animate: 250,
header: ".accordion-header"
}).sortable({
axis: "y",
handle: ".accordion-header",
stop: function( event, ui ) {
// IE doesn't register the blur when sorting
// so trigger focusout handlers to remove .ui-state-focus
ui.item.children( ".accordion-header" ).triggerHandler( "focusout" );
}
});
//jquery tabs
$( "#tabs" ).tabs();
//progressbar
$( "#progressbar" ).progressbar({
value: 37,
create: function( event, ui ) {
$(this).addClass('progress progress-striped active')
.children(0).addClass('progress-bar progress-bar-success');
}
});
//selectmenu
$( "#number" ).css('width', '200px')
.selectmenu({ position: { my : "left bottom", at: "left top" } })
});
一键复制
编辑
Web IDE
原始数据
按行查看
历史
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
