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高级程序设计(第3版)学习笔记5 js语句
Oct 11 Javascript
浅谈javascript回调函数
Dec 07 Javascript
jQuery性能优化技巧分析
Feb 20 Javascript
js判断手机号运营商的方法
Oct 23 Javascript
Javascript字符串常用方法详解
Jul 21 Javascript
js实现文字向上轮播功能
Jan 13 Javascript
JS及JQuery对Html内容编码,Html转义
Feb 17 Javascript
Vue.js做select下拉列表的实例(ul-li标签仿select标签)
Mar 02 Javascript
vue实现循环切换动画
Oct 17 Javascript
微信小程序制作表格的方法
Feb 14 Javascript
微信小程序webview组件交互,内联h5页面并网页实现微信支付实现解析
Aug 16 Javascript
jQuery实现二级导航菜单的示例
Sep 30 jQuery
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中对用户身份认证实现两种方法
2011/06/04 PHP
js中匿名函数的N种写法
2010/09/08 Javascript
脚本合并提升javascript性能示例
2014/02/24 Javascript
使用jQuery时Form表单元素ID和name命名大忌
2014/03/06 Javascript
JavaScript中的继承方式详解
2015/02/11 Javascript
js正则表达式匹配数字字母下划线等
2015/04/14 Javascript
JavaScript中字面量与函数的基本使用知识
2015/10/20 Javascript
javascript的几种继承方法介绍
2016/03/22 Javascript
Javascript中关于Array.filter()的妙用详解
2016/12/04 Javascript
vue-resourse将json数据输出实例
2017/03/08 Javascript
JavaScript条件判断_动力节点Java学院整理
2017/06/26 Javascript
一步步教你利用Canvas对图片进行处理
2017/09/19 Javascript
vue+element实现表格新增、编辑、删除功能
2019/05/28 Javascript
详解vue 中 scoped 样式作用域的规则
2020/09/14 Javascript
基于JavaScript实现简单扫雷游戏
2021/01/02 Javascript
vue编写简单的购物车功能
2021/01/08 Vue.js
linux系统使用python获取cpu信息脚本分享
2014/01/15 Python
Python实现查找匹配项作处理后再替换回去的方法
2017/06/10 Python
Python计算开方、立方、圆周率,精确到小数点后任意位的方法
2018/07/17 Python
Python 从相对路径下import的方法
2018/12/04 Python
python flask框架实现传数据到js的方法分析
2019/06/11 Python
Django model update的多种用法介绍
2020/03/28 Python
pyinstaller 3.6版本通过pip安装失败的解决办法(推荐)
2020/01/18 Python
python读取与处理netcdf数据方式
2020/02/14 Python
python,Java,JavaScript实现indexOf
2020/09/09 Python
pyqt5实现井字棋的示例代码
2020/12/07 Python
Python try except finally资源回收的实现
2021/01/25 Python
关于h5中的fetch方法解读(小结)
2017/11/15 HTML / CSS
世界上最大的皮肤科医生拥有和经营的美容网站:LovelySkin
2021/01/03 全球购物
旅游管理本科生求职信
2013/10/14 职场文书
毕业生找工作的自我评价
2013/10/18 职场文书
《春晓》教学反思
2014/04/20 职场文书
关于群众路线的心得体会
2014/11/05 职场文书
预备党员考察表党小组意见
2015/06/01 职场文书
新店开张宣传语
2015/07/13 职场文书
关于antd tree 和父子组件之间的传值问题(react 总结)
2021/06/02 Javascript