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 相关文章推荐
jQuery 使用手册(七)
Sep 23 Javascript
html a标签-超链接中confirm方法使用介绍
Jan 04 Javascript
Extjs4 Treegrid 使用心得分享(经验篇)
Jul 01 Javascript
js简单的弹出框有关闭按钮
May 05 Javascript
JavaScript插件化开发教程(五)
Feb 01 Javascript
JavaScript的Polymer框架中dom-repeat与VM的相关操作
Jul 29 Javascript
checkbox批量选中,获取选中项的值的简单实例
Jun 28 Javascript
Node.js 中exports 和 module.exports 的区别
Mar 14 Javascript
jquery实现全选、全不选以及单选功能
Mar 23 jQuery
javascript 中模板方法单例的实现方法
Oct 17 Javascript
jQuery实现王者荣耀手风琴效果
Jan 17 jQuery
vue实现简单计算商品价格
Sep 14 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/11/19 PHP
PHP赋值的内部是如何跑的详解
2019/01/13 PHP
PHP单元测试框架PHPUnit用法详解
2019/01/23 PHP
jQuery ajax在GBK编码下表单提交终极解决方案(非二次编码方法)
2010/10/20 Javascript
QUnit jQuery的TDD框架
2010/11/04 Javascript
关于递归运算的顺序测试代码
2011/11/30 Javascript
js正文内容高亮效果的实现方法
2013/06/30 Javascript
node+express+ejs制作简单页面上手指南
2014/11/26 Javascript
JavaScript实现同步于本地时间的动态时间显示方法
2015/02/02 Javascript
JavaScript实现Java中StringBuffer的方法
2015/02/09 Javascript
简述Jquery与DOM对象
2015/07/10 Javascript
深入探究JavaScript中for循环的效率问题及相关优化
2016/03/13 Javascript
JS实现的自动打字效果示例
2017/03/10 Javascript
ionic+AngularJs实现获取验证码倒计时按钮
2017/04/22 Javascript
vue.js+Echarts开发图表放大缩小功能实例
2017/06/09 Javascript
Angular2 自定义validators的实现方法
2017/07/05 Javascript
vue移动UI框架滑动加载数据的方法
2018/03/12 Javascript
详解webpack 最简打包结果分析
2019/02/20 Javascript
python采用requests库模拟登录和抓取数据的简单示例
2014/07/05 Python
Python爬取附近餐馆信息代码示例
2017/12/09 Python
Python AES加密实例解析
2018/01/18 Python
Django+Ajax+jQuery实现网页动态更新的实例
2018/05/28 Python
python可视化篇之流式数据监控的实现
2019/08/07 Python
python分布式计算dispy的使用详解
2019/12/22 Python
Python3.7.0 Shell添加清屏快捷键的实现示例
2020/03/23 Python
Python爬虫如何应对Cloudflare邮箱加密
2020/06/24 Python
python3.9.1环境安装的方法(图文)
2021/02/02 Python
匡威荷兰官方网站:Converse荷兰
2018/10/24 全球购物
彪马俄罗斯官网:PUMA俄罗斯
2019/07/13 全球购物
毕业生就业自荐信
2013/12/04 职场文书
企业元宵节主持词
2014/03/25 职场文书
物业总经理助理岗位职责
2014/06/29 职场文书
领导班子四风表现材料
2014/08/23 职场文书
咖啡厅商业计划书
2014/09/15 职场文书
模范教师事迹材料
2014/12/16 职场文书
Java Spring Boot 正确读取配置文件中的属性的值
2022/04/20 Java/Android