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 相关文章推荐
js Date概念详细介绍
Nov 22 Javascript
AngularJS控制器详解及示例代码
Aug 16 Javascript
教大家轻松制作Bootstrap漂亮表格(table)
Dec 13 Javascript
Bootstrap实现提示框和弹出框效果
Jan 11 Javascript
JavaScript中正则表达式判断匹配规则及常用方法
Aug 03 Javascript
Three.js利用顶点绘制立方体的方法详解
Sep 27 Javascript
JavaScript实现职责链模式概述
Jan 25 Javascript
vue实现在一个方法执行完后执行另一个方法的示例
Aug 25 Javascript
Vue 监听列表item渲染事件方法
Sep 06 Javascript
详解单页面路由工程使用微信分享及二次分享解决方案
Feb 22 Javascript
浅析Vue 防抖与节流的使用
Nov 14 Javascript
微信小程序服务器日期格式化问题
Jan 07 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
S900/ ETON E1-XM 收音机
2021/03/02 无线电
fleaphp rolesNameField bug解决方法
2011/04/23 PHP
PHP将DateTime对象转化为友好时间显示的实现代码
2011/09/20 PHP
探讨PHP中this,self,parent的区别详解
2013/06/08 PHP
php自动更新版权信息显示的方法
2015/06/19 PHP
PHP身份证校验码计算方法
2016/08/10 PHP
php 数组元素快速去重
2017/05/05 PHP
PHP基于mcript扩展实现对称加密功能示例
2019/02/21 PHP
js实现的跟随鼠标移动的时钟效果(中英文日期显示)
2011/01/17 Javascript
json格式的时间显示为正常年月日的方法
2013/09/08 Javascript
onkeyup,onkeydown和onkeypress的区别介绍
2013/10/21 Javascript
jquery模拟LCD 时钟的html文件源代码
2014/06/16 Javascript
Javascript毫秒数用法实例
2015/02/05 Javascript
jQuery EasyUI datagrid实现本地分页的方法
2015/02/13 Javascript
纯javascript实现图片延时加载方法
2015/08/21 Javascript
易被忽视的js事件问题总结
2016/05/14 Javascript
jQuery拖拽通过八个点改变div大小
2020/11/29 Javascript
Chrome浏览器的alert弹窗禁止再次弹出后恢复的方法
2016/12/30 Javascript
NodeJS基础API搭建服务器详细过程记录
2017/04/01 NodeJs
vue.js中mint-ui框架的使用方法
2017/05/12 Javascript
JavaScript事件发布/订阅模式原理与用法分析
2018/08/21 Javascript
浅谈JavaScript中this的指向更改
2020/07/28 Javascript
小结Python用fork来创建子进程注意事项
2014/07/03 Python
python如何在终端里面显示一张图片
2016/08/17 Python
如何用Python实现简单的Markdown转换器
2018/07/16 Python
python取均匀不重复的随机数方式
2019/11/27 Python
Django 解决model 反向引用中的related_name问题
2020/05/19 Python
在keras中model.fit_generator()和model.fit()的区别说明
2020/06/17 Python
美国高街时尚品牌:OASAP
2016/07/24 全球购物
德国家具在线:Fashion For Home
2017/03/11 全球购物
Sunglasses Shop瑞典:欧洲领先的太阳镜网上商店
2018/04/22 全球购物
中科前程Java笔试题
2016/11/20 面试题
资产经营总监岗位职责范文
2013/12/01 职场文书
职业生涯规划书结束语
2014/04/15 职场文书
预备党员考察意见范文
2015/06/01 职场文书
CSS实现多个元素在盒子内两端对齐效果
2021/03/30 HTML / CSS