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 相关文章推荐
JSON 编辑器实现代码
Dec 06 Javascript
基于jquery创建的一个图片、视频缓冲的效果样式插件
Aug 28 Javascript
常规表格多表头查询示例
Feb 21 Javascript
Easyui form combobox省市区三级联动
Jan 13 Javascript
利用jquery实现瀑布流3种案例
Sep 18 Javascript
基于vue2.x的电商图片放大镜插件的使用
Jan 22 Javascript
完美解决iview 的select下拉框选项错位的问题
Mar 02 Javascript
微信小程序实现笑脸评分功能
Nov 03 Javascript
Bootstrap 实现表格样式、表单布局的实例代码
Dec 09 Javascript
JQuery获取元素尺寸、位置及页面滚动事件应用示例
May 14 jQuery
wx-charts 微信小程序图表插件的具体使用
Aug 18 Javascript
原生js实现俄罗斯方块
Oct 20 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
索尼SONY ICF-SW7600GR电路分析与改良
2021/03/02 无线电
PHP 单引号与双引号的区别
2009/11/24 PHP
php的一些小问题
2010/07/03 PHP
ThinkPHP连接数据库的方式汇总
2014/12/05 PHP
PHP随机生成唯一HASH值自定义函数
2015/04/20 PHP
学习php设计模式 php实现观察者模式(Observer)
2015/12/09 PHP
select标记美化--JS式插件、后期加载
2013/04/01 Javascript
引用外部js乱码问题分析及解决方案
2013/04/12 Javascript
js动态创建、删除表格示例代码
2013/08/07 Javascript
在javaScript中关于submit和button的区别介绍
2013/10/20 Javascript
jquery选择器使用详解
2014/04/08 Javascript
基于javascript实现checkbox复选框实例代码
2016/01/28 Javascript
js实现可控制左右方向的无缝滚动效果
2016/05/29 Javascript
Vue.js数据绑定之data属性
2017/07/07 Javascript
node.js多个异步过程中判断执行是否完成的解决方案
2017/12/10 Javascript
vue主动刷新页面及列表数据删除后的刷新实例
2018/09/16 Javascript
JS高阶函数原理与用法实例分析
2019/01/15 Javascript
js动态获取时间的方法分析
2019/08/02 Javascript
vue中 this.$set的用法详解
2019/09/06 Javascript
json解析大全 双引号、键值对不在一起的情况
2019/12/06 Javascript
vue 监听窗口变化对页面部分元素重新渲染操作
2020/07/28 Javascript
Python中用Spark模块的使用教程
2015/04/13 Python
Python检测生僻字的实现方法
2016/10/23 Python
简单了解python中对象的取反运算符
2019/07/01 Python
Pytorch 中retain_graph的用法详解
2020/01/07 Python
Tensorflow tf.tile()的用法实例分析
2020/05/22 Python
基本款天堂:Everlane
2017/05/13 全球购物
卡骆驰新加坡官网:Crocs新加坡
2018/06/12 全球购物
PHP中如何创建和修改数组
2012/05/02 面试题
2014年会策划方案
2014/05/11 职场文书
食品科学与工程专业毕业生求职信范文
2014/07/21 职场文书
2014年建筑工作总结
2014/11/26 职场文书
新娘父亲婚礼致辞
2015/07/27 职场文书
婚礼父母致辞
2015/07/28 职场文书
运输公司工作总结
2015/08/11 职场文书
Axios取消重复请求的方法实例详解
2021/06/15 Javascript