jQuery UI Bootstrap是什么?

 更新时间:2016年06月17日 16:37:33   作者:小峰  
jQuery UI Bootstrap是什么?jQuery UI Bootstrap是一个将jQuery UI集成到Bootstrap上的CSS框架,具体内容请看下文

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
本文作者:码农网 – 小峰

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

如果大家还想深入学习,可以点击这里进行学习,再为大家附一个精彩的专题:Bootstrap学习教程

相关文章

  • Jquery调用webService远程访问出错的解决方法

    Jquery调用webService远程访问出错的解决方法

    原来web.config里面默认Post设置是不允许远程调用webservice,需要配置一下就可以了
    2010-05-05
  • jQuery中toggle()函数的使用实例

    jQuery中toggle()函数的使用实例

    关于jQuery中的toggle()函数,相信大家都非常的了解,网上也有许多的相关教程,今天要给大家分享的是在实际的项目中toggle()的使用方法,需要的小伙伴可以参考下。
    2015-04-04
  • JQuery实现自定义对话框的代码

    JQuery实现自定义对话框的代码

    JavaScript为我们提供几种对话框功能,但功能都十分有限;虽然在IE下可以通过模式窗体的方式创建更丰富的对话框功能,但毕竟只有IE得到支持。
    2008-06-06
  • jquery 使用简明教程

    jquery 使用简明教程

    jQuery是目前使用最广泛的javascript函数库。据统计,全世界排名前100万的网站,有46%使用jQuery,远远超过其他库。微软公司甚至把jQuery作为他们的官方库。对于网页开发者来说,学会jQuery是必要的。因为它让你了解业界最通用的技术,为将来学习更高级的库打下基础,并且确实可以很轻松地做出许多复杂的效果
    2014-03-03
  • JavaScript 学习笔记之一jQuery写法图片等比缩放以及预加载

    JavaScript 学习笔记之一jQuery写法图片等比缩放以及预加载

    以前对于JavaScript总是在用到的时候在页面上写几个函数,基本没考虑到函数的封装与重用,最近有个项目可能对于这方面要求有点高,所以就研究了下类似jQuery的封装
    2012-06-06
  • JQuery解析XML的方法小结

    JQuery解析XML的方法小结

    这篇文章主要介绍了JQuery解析XML的方法,总结分析了常用的jQuery解析xml文件的相关技巧,需要的朋友可以参考下
    2016-04-04
  • 浅谈JQ中mouseover和mouseenter的区别

    浅谈JQ中mouseover和mouseenter的区别

    下面小编就为大家带来一篇浅谈JQ中mouseover和mouseenter的区别。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。
    2016-09-09
  • jQuery拖拽div实现思路

    jQuery拖拽div实现思路

    jQuery拖拽div,利用jquery的mousemove,mousedown,mouseup三个事件,需要的朋友可以参考下
    2014-02-02
  • 十个迅速提升JQuery性能让你的JQuery跑得更快

    十个迅速提升JQuery性能让你的JQuery跑得更快

    jQuery正在成为Web开发人员首选的JavaScript库,作为Web开发者,除了要了解语言和框架的应用技巧外如何提升语言的性能,本文提供即刻提升你的脚本性能的十个步骤 简单的几步让你的JQuery跑得更快 需要的朋友可以参考下
    2012-12-12
  • jQuery之浮动窗口实现代码(两种方法)

    jQuery之浮动窗口实现代码(两种方法)

    今天公司要求实现浮动窗口效果,自己看了不少资料终于实现此效果。用jQ实现浮动窗口功能,弹出窗口时背景变暗.
    2010-09-09

最新评论