jQuery UI Bootstrap是什么?


Posted in Javascript onJune 17, 2016

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 按钮

jQuery UI Bootstrap是什么?

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

jQuery UI Bootstrap 对话框 

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 日期选择器 

jQuery UI Bootstrap是什么?

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

jQuery UI Bootstrap 菜单

jQuery UI Bootstrap是什么?

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

jQuery UI Bootstrap还有很多控件,这里就不一一列举了,大家可以前往其官方网站下载使用。

本文链接:http://www.codeceo.com/article/jquery-ui-bootstrap.html
本文作者:码农网 ? 小峰

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

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

Javascript 相关文章推荐
实现png图片和png背景透明(支持多浏览器)的方法
Sep 08 Javascript
跨浏览器通用、可重用的选项卡tab切换js代码
Sep 20 Javascript
jquery图片放大功能简单实现
Aug 01 Javascript
jQuery中noConflict()用法实例分析
Feb 08 Javascript
zTree插件下拉树使用入门教程
Apr 11 Javascript
再次谈论Javascript中的this
Jun 23 Javascript
Vue.js教程之axios与网络传输的学习实践
Apr 29 Javascript
D3.js实现拓扑图的示例代码
Jun 30 Javascript
微信小程序实现发红包功能
Jul 11 Javascript
Vue自定义全局Toast和Loading的实例详解
Apr 18 Javascript
微信小程序 授权登录详解(附完整源码)
Aug 23 Javascript
react使用antd的上传组件实现文件表单一起提交功能(完整代码)
Jun 29 Javascript
JS模拟bootstrap下拉菜单效果实例
Jun 17 #Javascript
JavaScript获取当前url根目录(路径)
Jun 17 #Javascript
下一代Bootstrap的5个特点 超酷炫!
Jun 17 #Javascript
JS实现的自定义显示加载等待图片插件(loading.gif)
Jun 17 #Javascript
基于Bootstrap的后台管理面板 Bootstrap Metro Dashboard
Jun 17 #Javascript
基于Bootstrap的UI扩展 StyleBootstrap
Jun 17 #Javascript
Bootstrap前端开发案例二
Jun 17 #Javascript
You might like
PHP一些有意思的小区别
2006/12/06 PHP
php将数据库中所有内容生成静态html文档的代码
2010/04/12 PHP
让PHP显示Facebook的粉丝数量方法
2014/01/08 PHP
PHP中include和require的区别实例分析
2017/05/07 PHP
php中curl和soap方式请求服务超时问题的解决
2018/06/11 PHP
php求斐波那契数的两种实现方式【递归与递推】
2019/09/09 PHP
jQuery获取css z-index在各种浏览器中的返回值
2010/09/15 Javascript
javascript之bind使用介绍
2011/10/09 Javascript
js confirm()方法的使用方法实例
2013/07/13 Javascript
jquery 利用show和hidden实现级联菜单示例代码
2013/08/09 Javascript
原生javaScript做得动态表格(注释写的很清楚)
2013/12/29 Javascript
详解JS中Array对象扩展与String对象扩展
2016/01/07 Javascript
JavaScript+html5 canvas制作的圆中圆效果实例
2016/01/27 Javascript
AngularJS入门教程之链接与图片模板详解
2016/08/19 Javascript
JavaScript如何实现图片懒加载(lazyload) 提高用户体验(增强版)
2016/11/30 Javascript
BootStrap学习系列之布局组件(下拉,按钮组[toolbar],上拉)
2017/01/03 Javascript
js实现颜色阶梯渐变效果(Gradient算法)
2017/03/21 Javascript
JS+CSS实现滚动数字时钟效果
2017/12/25 Javascript
使用eslint和githooks统一前端风格的技巧
2020/07/29 Javascript
vant 中van-list的用法说明
2020/11/11 Javascript
jQuery实现可以扩展的日历
2020/12/01 jQuery
python发布模块的步骤分享
2014/02/21 Python
浅析Python中的序列化存储的方法
2015/04/28 Python
Python手机号码归属地查询代码
2016/05/04 Python
python实现给scatter设置颜色渐变条colorbar的方法
2018/12/13 Python
使用python实现对元素的长截图功能
2019/11/14 Python
Python标准库:内置函数max(iterable, *[, key, default])说明
2020/04/25 Python
基于python实现图片转字符画代码实例
2020/09/04 Python
德国家具在线:Fashion For Home
2017/03/11 全球购物
高中英语教学反思
2014/02/04 职场文书
《盘古开天地》教学反思
2014/02/28 职场文书
2014新课程改革心得体会
2014/03/10 职场文书
工商行政管理专业求职书
2014/05/23 职场文书
五好关工委申报材料
2014/05/31 职场文书
网络文明传播志愿者活动方案
2014/08/20 职场文书
四风问题个人对照检查剖析材料
2014/09/27 职场文书