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 appendChild,innerHTML,join性能比较代码
Aug 29 Javascript
Jquery 学习笔记(一)
Oct 13 Javascript
jQuery动态设置form表单的enctype值(实现代码)
Jul 04 Javascript
浅析document.createDocumentFragment()与js效率
Jul 08 Javascript
AngularJS学习笔记之TodoMVC的分析
Feb 22 Javascript
JS实现iframe自适应高度的方法示例
Jan 07 Javascript
JavaScript字符集编码与解码详谈
Feb 02 Javascript
Angular2的管道Pipe的使用方法
Nov 07 Javascript
使用Vue制作图片轮播组件思路详解
Mar 21 Javascript
详解微信小程序input标签正则初体验
Aug 18 Javascript
vue环形进度条组件实例应用
Oct 10 Javascript
微信小程序全局变量GLOBALDATA的定义和调用过程解析
Sep 23 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 strtok()函数的优点分析
2010/03/02 PHP
学习php设计模式 php实现观察者模式(Observer)
2015/12/09 PHP
PHP编程文件处理类SplFileObject和SplFileInfo用法实例分析
2017/07/22 PHP
php字符串过滤strip_tags()函数用法实例分析
2019/06/24 PHP
laravel 解决强制跳转 https的问题
2019/10/22 PHP
JS 无法通过W3C验证的处理方法
2010/03/09 Javascript
JQuery实现简单时尚快捷的气泡提示插件
2012/12/20 Javascript
Javascript实现禁止输入中文或英文的例子
2014/12/09 Javascript
使用jQueryMobile实现滑动翻页效果的方法
2015/02/04 Javascript
浅谈js 闭包引起的内存泄露问题
2015/06/22 Javascript
js实现简单排列组合的方法
2016/01/27 Javascript
使用three.js 画渐变的直线
2016/06/05 Javascript
JS实现n秒后自动跳转的两种方法
2020/11/30 Javascript
react-native使用react-navigation进行页面跳转导航的示例
2017/09/07 Javascript
JS中的Replace()传入函数时的用法详解
2017/09/11 Javascript
angular指令笔记ng-options的使用方法
2017/09/18 Javascript
详解使用VueJS开发项目中的兼容问题
2018/08/02 Javascript
layerUI下的绑定事件实例代码
2018/08/17 Javascript
在vue中使用vuex,修改state的值示例
2019/11/08 Javascript
html2canvas属性和使用方法以及如何使用html2canvas将HTML内容写入Canvas生成图片
2020/01/12 Javascript
原生js实现瀑布流效果
2020/03/09 Javascript
原生JS运动实现轮播图
2021/01/02 Javascript
python中的列表推导浅析
2014/04/26 Python
django 做 migrate 时 表已存在的处理方法
2019/08/31 Python
Flask框架请求钩子与request请求对象用法实例分析
2019/11/07 Python
Python3.9.1中使用split()的处理方法(推荐)
2021/02/07 Python
html5标记文字_动力节点Java学院整理
2017/07/11 HTML / CSS
微观物理专业自荐信
2014/01/26 职场文书
《开国大典》教学反思
2014/04/19 职场文书
巴西世界杯32强口号
2014/06/05 职场文书
团队拓展活动总结
2014/08/27 职场文书
交通事故和解协议书
2015/01/27 职场文书
实习协议书
2015/01/27 职场文书
2016年最美孝心少年事迹材料
2016/02/26 职场文书
「租借女友」第2季樱泽墨角色PV&新视觉图公开
2022/03/21 日漫
详细介绍Java中的CyclicBarrier
2022/04/13 Java/Android