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 相关文章推荐
Asp.net下利用Jquery Ajax实现用户注册检测(验证用户名是否存)
Sep 12 Javascript
左侧是表头的JS表格控件(自写,网上没有的)
Jun 04 Javascript
jQuery中after的两种用法实例
Jul 03 Javascript
父节点获取子节点的字符串示例代码
Feb 26 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(下)
Oct 28 Javascript
仅30行代码实现Javascript中的MVC
Feb 15 Javascript
require、backbone等重构手机图片查看器
Nov 17 Javascript
jQuery实现字符串全部替换的方法【推荐】
Mar 09 Javascript
在iframe中使bootstrap的模态框在父页面弹出问题
Aug 07 Javascript
微信小程序中setInterval的使用方法
Sep 29 Javascript
详解Vue项目部署遇到的问题及解决方案
Jan 11 Javascript
JavaScript解析机制与闭包原理实例详解
Mar 08 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
discuz论坛 用户登录 后台程序代码
2008/11/27 PHP
如何使用FireFox插件FirePHP调试PHP
2013/07/23 PHP
PHP中ID设置自增后不连续的原因分析及解决办法
2016/08/21 PHP
Thinkphp 框架扩展之标签库驱动原理与用法分析
2020/04/23 PHP
jquery的index方法实现tab效果
2011/02/16 Javascript
JS 实现导航栏悬停效果
2013/09/23 Javascript
推荐10 款 SVG 动画的 JavaScript 库
2015/03/24 Javascript
Jquery中$.post和$.ajax的用法小结
2015/04/28 Javascript
javascript通过元素id和name直接取得元素的方法
2015/04/28 Javascript
javascript判断复选框是否选中的方法
2015/10/16 Javascript
详解基于Bootstrap扁平化的后台框架Ace
2015/11/27 Javascript
vue2.0父子组件间通信的实现方法
2017/04/19 Javascript
小程序实现带年月选取效果的日历
2018/06/27 Javascript
详解在vue-cli项目下简单使用mockjs模拟数据
2018/10/19 Javascript
初探Vue3.0 中的一大亮点Proxy的使用
2018/12/06 Javascript
Javascript模拟实现new原理解析
2020/03/03 Javascript
wxPython中listbox用法实例详解
2015/06/01 Python
Python使用minidom读写xml的方法
2015/06/03 Python
Python 遍历子文件和所有子文件夹的代码实例
2016/12/21 Python
Python实现CNN的多通道输入实例
2020/01/17 Python
音频处理 windows10下python三方库librosa安装教程
2020/06/20 Python
python爬取代理ip的示例
2020/12/18 Python
CSS3 @font-face属性使用指南
2014/12/12 HTML / CSS
纯CSS3实现圆圈动态发光特效动画的示例代码
2021/03/08 HTML / CSS
Canvas实现贝赛尔曲线轨迹动画的示例代码
2019/04/25 HTML / CSS
美国折衷生活方式品牌:Robert Graham
2018/07/13 全球购物
Camille Jewelry官网:现代女性时尚首饰
2019/07/07 全球购物
嘻哈珠宝品牌:KRKC&CO
2020/10/19 全球购物
机械电子工程毕业生自荐信
2013/11/23 职场文书
有关打架的检讨书
2014/01/25 职场文书
2014年清明节寄语
2014/04/03 职场文书
挂职锻炼工作总结2015
2015/05/28 职场文书
爱岗敬业先进典型事迹材料(2016推荐版)
2016/02/26 职场文书
PHP正则表达式之RCEService回溯
2022/04/11 PHP
hive数据仓库新增字段方法
2022/06/25 数据库
nginx之queue的具体使用
2022/06/28 Servers