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 相关文章推荐
web 页面分页打印的实现
Jun 22 Javascript
十分钟打造AutoComplete自动完成效果代码
Dec 26 Javascript
JavaScript实现的购物车效果可以运用在好多地方
May 09 Javascript
jQuery使用之处理页面元素用法实例
Jan 19 Javascript
JS模式之简单的订阅者和发布者模式完整实例
Jun 30 Javascript
jQuery实现动态添加tr到table的方法
Dec 26 Javascript
浅谈angular.copy() 深拷贝
Sep 14 Javascript
angular2 ng2 @input和@output理解及示例
Oct 10 Javascript
JS继承与闭包及JS实现继承的三种方式
Oct 15 Javascript
vue项目实战总结篇
Feb 11 Javascript
Vue中$refs的用法详解
Jun 24 Javascript
详解JVM系列之内存模型
Jun 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中设置index.php文件为只读的方法
2013/02/06 PHP
深入for,while,foreach遍历时间比较的详解
2013/06/08 PHP
php使用cookie实现记住登录状态
2015/04/27 PHP
thinkphp微信开之安全模式消息加密解密不成功的解决办法
2015/12/02 PHP
PHP中常用的数组操作方法笔记整理
2016/05/16 PHP
PHP7新特性foreach 修改示例介绍
2016/08/26 PHP
php基于Redis消息队列实现的消息推送的方法
2018/11/28 PHP
javascript权威指南 学习笔记之变量作用域分享
2011/09/28 Javascript
一个Action如何调用两个不同的方法
2014/05/22 Javascript
JavaScript使用FileSystemObject对象写入文本文件内容的方法
2015/08/05 Javascript
JavaScript 七大技巧(二)
2015/12/13 Javascript
js和jQuery设置Opacity半透明 兼容IE6
2016/05/24 Javascript
Bootstrap布局方式详解
2016/05/27 Javascript
jQuery解析返回的xml和json方法详解
2017/01/05 Javascript
Java设计中的Builder模式的介绍
2018/03/22 Javascript
vue富文本框(插入文本、图片、视频)的使用及问题小结
2018/08/17 Javascript
angularjs通过过滤器返回超链接的方法
2018/10/26 Javascript
Vue实现购物车的全选、单选、显示商品价格代码实例
2019/05/06 Javascript
微信小程序8种数据通信的方式小结
2020/02/03 Javascript
vue 清空input标签 中file的值操作
2020/07/21 Javascript
[49:08]FNATIC vs Infamous 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
Linux下使用python自动修改本机网关代码分享
2015/05/21 Python
树莓派采用socket方式文件传输(python)
2019/06/22 Python
简单了解Django ContentType内置组件
2019/07/23 Python
python判断单向链表是否包括环,若包含则计算环入口的节点实例分析
2019/10/23 Python
Pytorch中实现只导入部分模型参数的方式
2020/01/02 Python
秘鲁购物网站:Linio秘鲁
2017/04/07 全球购物
教师师德承诺书
2014/03/26 职场文书
合作意向协议书范本
2014/03/31 职场文书
寒假家长评语大全
2014/04/16 职场文书
村委会贫困证明范文
2014/09/21 职场文书
工作期间打牌检讨书范文
2014/11/20 职场文书
2015年银行员工工作总结
2015/04/24 职场文书
2015年园林绿化工作总结
2015/05/23 职场文书
清明节随笔
2015/08/15 职场文书
vue 数字翻牌器动态加载数据
2022/04/20 Vue.js