jQuery UI Bootstrap：在jQuery UI上整合Bootstrap

本文由碼農網 – 小峰原創，轉載請看清文末的轉載要求，歡迎參與我們的付費投稿計劃！

jQuery UI Bootstrap是一個將jQuery UI整合到Bootstrap上的CSS框架，jQuery UI Bootstrap不僅可以利用jQuery UI強大的控制元件庫，同時還可以享受Bootstrap那種清新自然的主題風格，所以越來越多的前端開發者都在使用jQuery UI Bootstrap。

jQuery UI Bootstrap的特點

• 基於jQuery UI，因此控制元件功能非常強大，可以使用全部的jQuery UI控制元件。
• 基於Bootstrap，不同控制元件有了統一的外觀。
• 免費開源，你可以很方便地下載和使用。

jQuery UI Bootstrap常用控制元件的使用

下面我們來介紹幾個最常用的jQuery UI Bootstrap控制元件，使用方法都非常簡單。

jQuery UI Bootstrap 按鈕

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

jQuery UI Bootstrap 對話方塊

// 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");
        }
    }
});

jQuery UI Bootstrap 日期選擇器

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

jQuery UI Bootstrap 選單

//####### Menu
$("#menu").menu();

jQuery UI Bootstrap還有很多控制元件，這裡就不一一列舉了，大家可以前往其官方網站下載使用。

軟體首頁 軟體文件 軟體下載