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还有很多控件,这里就不一一列举了,大家可以前往其官方网站下载使用。

本文链接:http://www.codeceo.com/article/jquery-ui-bootstrap.html
本文作者:码农网 – 小峰
原创作品,转载必须在正文中标注并保留原文链接和作者等信息。]

发表我的评论

取消评论
表情 插代码

Hi,您需要填写昵称和邮箱!

  • 必填项
  • 必填项

网友评论1

  1. 想知道Bootstrap框架和JQuery UI Bootstrap有什么区别

    panda77882015-05-29 15:24 回复