默认按钮

Default Primary Success

Danger Anchor

// Button
$('button').button();
// Anchors, Submit
$('.button').button();

按钮组

// Buttonset
$('#radioset').buttonset();
$("#format").buttonset();

简单的工具条

//Toolbar
$("#play, #shuffle").button();
$("#repeat").buttonset();

// Accordion
$("#menu-collapse").accordion({
    header: "h3"
});

打开对话框   打开模态对话框

// Dialog Link
$('#dialog_link').click(function () {
    $('#dialog_simple').dialog('open');
    return false;
});

// Modal Link
$('#modal_link').click(function () {
    $('#dialog-message').dialog('open');
    return false;
});

// Dialog Simple
$('#dialog_simple').dialog({
    autoOpen: false,
    width: 600,
    buttons: {
        "Ok": function () {
            $(this).dialog("close");
        },
        "Cancel": function () {
            $(this).dialog("close");
        }
    }
});

// Dialog message
$("#dialog-message").dialog({
    autoOpen: false,
    modal: true,
    buttons: {
        Ok: function () {
            $(this).dialog("close");
        }
    }
});

简单的标签页

// Simple tabs
$('#tabs').tabs();

增加或去除简单的标签页

// Simple tabs adding and removing
$('#tabs2').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 + "></div><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();
    $('#dialog_simple').dialog({
        autoOpen: true,
        modal: true,
        width: 600,
        buttons: {
            "Save": function () {
                $(this).dialog("close");
            },
            "Cancel": function () {
                $(this).dialog("close");
            }
        }
    });
});

提醒

错误

默认

// Datepicker
$('#datepicker').datepicker({
    inline: true
});

水平滑动条

// 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

Select a value:

Toggle disable/enable Toggle widget

Get value Set value to 5

//####### 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();