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 设计模式之单体模式 面向对象学习基础
Apr 18 Javascript
Javascript中的Array数组对象详谈
Mar 03 Javascript
js控制href内容的连接内容的变化示例
Apr 30 Javascript
jquery预加载图片的方法
May 27 Javascript
Jquery easyui开启行编辑模式增删改操作
Jan 14 Javascript
jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果(附demo源码下载)
Feb 25 Javascript
利用BootStrap的Carousel.js实现轮播图动画效果
Dec 21 Javascript
详解AngularJS 模块化
Jun 14 Javascript
jQuery常见面试题之DOM操作详析
Jul 05 jQuery
在vue中读取本地Json文件的方法
Sep 06 Javascript
JQuery判断radio单选框是否选中并获取值的方法
Jan 17 jQuery
vue 实现锚点功能操作
Aug 10 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中通过加号合并数组的一个简单方法分享
2011/01/27 PHP
学习php设计模式 php实现工厂模式(factory)
2015/12/07 PHP
PHP用mysql_insert_id()函数获得刚插入数据或当前发布文章的ID
2016/11/25 PHP
php+ajax实现仿百度查询下拉内容功能示例
2017/10/20 PHP
laravel框架路由分组,中间件,命名空间,子域名,路由前缀实例分析
2020/02/18 PHP
javascript 写类方式之三
2009/07/05 Javascript
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
2010/03/12 Javascript
js创建数据共享接口——简化框架之间相互传值
2011/10/23 Javascript
jQuery侧边栏随窗口滚动实现方法
2013/03/04 Javascript
js中split和replace的用法实例
2015/02/28 Javascript
使用Angular和Nodejs、socket.io搭建聊天室及多人聊天室
2015/08/21 NodeJs
详解javascript函数的参数
2015/11/10 Javascript
BootStrap的alert提示框的关闭后再显示怎么解决
2016/05/17 Javascript
JS实现的数字格式化功能示例
2017/02/10 Javascript
javascript  数组排序与对象排序的实例
2017/07/17 Javascript
使用vue实现简单键盘的示例(支持移动端和pc端)
2017/12/25 Javascript
以v-model与promise两种方式实现vue弹窗组件
2018/05/21 Javascript
[08:53]DOTA2每周TOP10 精彩击杀集锦vol.9
2014/06/26 DOTA
在Python的Django框架中为代码添加注释的方法
2015/07/16 Python
详解Python中dict与set的使用
2015/08/10 Python
全面了解Python的getattr(),setattr(),delattr(),hasattr()
2016/06/14 Python
Python实现按当前日期(年、月、日)创建多级目录的方法
2018/04/26 Python
python游戏开发之视频转彩色字符动画
2019/04/26 Python
Python面向对象编程基础实例分析
2020/01/17 Python
Python使用pycharm导入pymysql教程
2020/09/16 Python
德国净水壶和滤芯品牌:波尔德PearlCo(家用净水器)
2020/04/29 全球购物
请描述一下”is a”关系和”has a”关系
2015/02/03 面试题
4s客服专员岗位职责
2013/12/01 职场文书
研修第一天随笔感言
2014/02/15 职场文书
高中军训感言600字
2014/03/11 职场文书
个人担保书格式范文
2014/05/12 职场文书
中学教师师德承诺书
2014/05/23 职场文书
小学校长汇报材料
2014/08/20 职场文书
乡镇领导干部个人对照检查材料思想汇报
2014/09/23 职场文书
研究生导师推荐信
2015/03/25 职场文书
2019朋友新婚祝福语精选
2019/10/10 职场文书