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 相关文章推荐
文本加密解密
Jun 23 Javascript
基于jquery可配置循环左右滚动例子
Sep 09 Javascript
6款经典实用的jQuery小插件及源码(对话框/提示工具等等)
Feb 04 Javascript
7款吸引人眼球的jQuery/CSS3特效实例分享
Apr 25 Javascript
如何设置iframe高度自适应在跨域情况下的可用方法
Sep 06 Javascript
javacript使用break内层跳出外层循环分析
Jan 12 Javascript
第一次记录Bootstrap table学习笔记(1)
May 18 Javascript
js图片轮播插件的封装
Jul 21 Javascript
对vue.js中this.$emit的深入理解
Feb 23 Javascript
javascript操作元素的常见方法小结
Nov 13 Javascript
Vue项目vscode 安装eslint插件的方法(代码自动修复)
Apr 15 Javascript
Vue3.0的优化总结
Oct 16 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
十大催泪虐心动漫,你能坚持看到第几部?
2020/03/04 日漫
PHP获取当前所在目录位置的方法
2014/11/26 PHP
PHP中非常有用却鲜有人知的函数集锦
2019/08/17 PHP
php策略模式简单示例分析【区别于工厂模式】
2019/09/25 PHP
原型方法的不同写法居然会影响调试的解决方法
2007/03/08 Javascript
不间断滚动JS打包类,基本可以实现所有的滚动效果,太强了
2007/12/08 Javascript
jquery.ui.draggable中文文档
2009/11/24 Javascript
js png图片(有含有透明)在IE6中为什么不透明了
2010/02/07 Javascript
URL地址中的#符号使用说明
2011/02/12 Javascript
jquery改变tr背景色的示例代码
2013/12/28 Javascript
IE6已终止操作问题的2种情况及解决
2014/04/23 Javascript
NodeJS学习笔记之Http模块
2015/01/13 NodeJs
jquery插件uploadify实现带进度条的文件批量上传
2015/12/13 Javascript
详解nodejs模板引擎制作
2017/06/14 NodeJs
webpack热模块替换(HMR)/热更新的方法
2018/04/05 Javascript
React中阻止事件冒泡的问题详析
2019/04/12 Javascript
浅谈layui 数据表格前后台传值的问题
2019/09/12 Javascript
微信小程序用户拒绝授权的处理方法详解
2019/09/20 Javascript
稍微学一下Vue的数据响应式(Vue2及Vue3区别)
2019/11/21 Javascript
python del()函数用法
2013/03/24 Python
分享一下如何编写高效且优雅的 Python 代码
2017/09/07 Python
基于python3 类的属性、方法、封装、继承实例讲解
2017/09/19 Python
查看django执行的sql语句及消耗时间的两种方法
2018/05/29 Python
机器学习之KNN算法原理及Python实现方法详解
2018/07/09 Python
Python使用Selenium爬取淘宝异步加载的数据方法
2018/12/17 Python
对python中词典的values值的修改或新增KEY详解
2019/01/20 Python
Python 实现加密过的PDF文件转WORD格式
2020/02/04 Python
python实现FTP循环上传文件
2020/03/20 Python
css3 box-sizing属性使用参考指南
2013/01/08 HTML / CSS
澳大利亚当地最大的时装生产商:Cue
2018/08/06 全球购物
建材业务员岗位职责
2013/12/08 职场文书
优秀员工年终发言演讲稿
2014/01/01 职场文书
自荐信写法介绍
2014/01/25 职场文书
防沙治沙典型材料
2014/05/07 职场文书
活动总结模板大全
2015/05/11 职场文书
create-react-app开发常用配置教程
2022/06/25 Javascript