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 相关文章推荐
javascript 复杂的嵌套环境中输出单引号和双引号
May 26 Javascript
javascript 使用 NodeList需要注意的问题
Mar 04 Javascript
js正则表达式的使用详解
Jul 09 Javascript
js实现的下拉框二级联动效果
Apr 30 Javascript
利用原生JS与jQuery实现数字线性变化的动画
Feb 24 Javascript
jquery仿苹果的时间/日期选择效果
Mar 08 Javascript
微信小程序实现皮肤功能(夜间模式)
Jun 18 Javascript
对angularJs中自定义指令replace的属性详解
Oct 09 Javascript
JavaScript之实现一个简单的Vue示例
Jan 17 Javascript
微信小程序搜索功能(附:小程序前端+PHP后端)
Feb 28 Javascript
Vue项目页面跳转时浏览器窗口上方显示进度条功能
Mar 26 Javascript
js实现网页随机验证码
Oct 19 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
受疫情影响 动画《Re从零开始的异世界生活》第二季延期至7月
2020/03/10 日漫
fleaphp crud操作之findByField函数的使用方法
2011/04/23 PHP
基于php和mysql的简单的dao类实现crud操作功能
2014/01/27 PHP
php经典算法集锦
2015/11/14 PHP
是 WordPress 让 PHP 更流行了 而不是框架
2016/02/03 PHP
解读JavaScript代码 var ie = !-[1,] 最短的IE判定代码
2011/05/28 Javascript
js判断ie版本号的简单实现代码
2014/03/05 Javascript
jquery移除、绑定、触发元素事件使用示例详解
2014/04/10 Javascript
用JavaScript实现PHP的urlencode与urldecode函数
2015/08/13 Javascript
不定义JQuery插件 不要说会JQuery
2016/03/07 Javascript
基于React.js实现原生js拖拽效果引发的思考
2016/03/30 Javascript
Angular4实现动态添加删除表单输入框功能
2017/08/11 Javascript
浅谈webpack打包生成的bundle.js文件过大的问题
2018/02/22 Javascript
vue.js使用v-model实现表单元素(input) 双向数据绑定功能示例
2019/03/08 Javascript
[02:03]《现实生活中的DOTA2》—林书豪&DOTA2职业选手出演短片
2015/08/18 DOTA
Python用zip函数同时遍历多个迭代器示例详解
2016/11/14 Python
Python实现多进程共享数据的方法分析
2017/12/04 Python
python的exec、eval使用分析
2017/12/11 Python
对python_discover方法遍历所有执行的用例详解
2019/02/13 Python
如何使用python操作vmware
2019/07/27 Python
对django中foreignkey的简单使用详解
2019/07/28 Python
Windows10下Tensorflow2.0 安装及环境配置教程(图文)
2019/11/21 Python
python3中pip3安装出错,找不到SSL的解决方式
2019/12/12 Python
tensorflow 自定义损失函数示例代码
2020/02/05 Python
Jupyter notebook 启动闪退问题的解决
2020/04/13 Python
HTML5实现预览本地图片
2016/02/17 HTML / CSS
HTML5添加禁止缩放功能
2017/11/03 HTML / CSS
巴西备受欢迎的服装和生活方式品牌:FARM Rio
2020/02/04 全球购物
人力资源经理自我评价
2014/01/04 职场文书
合伙经营协议书
2014/04/18 职场文书
财务管理专业求职信
2014/06/11 职场文书
雷锋式好少年事迹材料
2014/08/17 职场文书
领导班子个人对照检查材料(群众路线)
2014/09/26 职场文书
小学2016年“我们的节日·重阳节”活动总结
2016/04/01 职场文书
python使用pywinauto驱动微信客户端实现公众号爬虫
2021/05/19 Python
spring cloud eureka 服务启动失败的原因分析及解决方法
2022/03/17 Java/Android