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 相关文章推荐
Ajax执行顺序流程及回调问题分析
Dec 10 Javascript
基于JavaScript实现 获取鼠标点击位置坐标的方法
Apr 12 Javascript
Javascript实现动态菜单添加的实例代码
Jul 05 Javascript
JavaScript SetInterval与setTimeout使用方法详解
Nov 15 Javascript
node.js中的console用法总结
Dec 15 Javascript
js随机生成字母数字组合的字符串 随机动画数字
Sep 02 Javascript
jquery自定义右键菜单、全选、不连续选择
Mar 01 Javascript
jQuery实现的可编辑表格完整实例
Jun 20 Javascript
canvas绘图不清晰的解决方案
Feb 28 Javascript
ajax请求data遇到的问题分析
Jan 18 Javascript
微信小程序实现form表单本地储存数据
Jun 27 Javascript
解决VantUI popup 弹窗不弹出或无蒙层的问题
Nov 03 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(4) php 函数 补充2
2010/02/15 PHP
ThinkPHP做文字水印时提示call an undefined function exif_imagetype()解决方法
2014/10/30 PHP
php支付宝手机网页支付类实例
2015/03/04 PHP
Apache连接PHP后无法启动问题解决思路
2015/06/18 PHP
Laravel中间件实现原理详解
2016/10/09 PHP
bindParam和bindValue的区别以及在Yii2中的使用详解
2018/03/12 PHP
laravel 使用auth编写登录的方法
2019/09/30 PHP
Thinkphp5.0框架使用模型Model的获取器、修改器、软删除数据操作示例
2019/10/11 PHP
laravel 修改.htaccess文件 重定向public的解决方法
2019/10/12 PHP
jQuery编写widget的一些技巧分享
2010/10/28 Javascript
本人自用的global.js库源码分享
2015/02/28 Javascript
Javascript中String的常用方法实例分析
2015/06/13 Javascript
详谈$.data()的用法和作用
2017/02/13 Javascript
Bootstrap Fileinput 4.4.7文件上传实例详解
2018/07/25 Javascript
vue-cli监听组件加载完成的方法
2018/09/07 Javascript
JS学习笔记之数组去重实现方法小结
2019/05/29 Javascript
javascript移动端 电子书 翻页效果实现代码
2019/09/07 Javascript
express中static中间件的具体使用方法
2019/10/17 Javascript
基于python的汉字转GBK码实现代码
2012/02/19 Python
Python重新引入被覆盖的自带function
2014/07/16 Python
Python实现自定义顺序、排列写入数据到Excel的方法
2018/04/23 Python
Pycharm2017版本设置启动时默认自动打开项目的方法
2018/10/29 Python
Python redis操作实例分析【连接、管道、发布和订阅等】
2019/05/16 Python
使用python客户端访问impala的操作方式
2020/03/28 Python
python爬虫把url链接编码成gbk2312格式过程解析
2020/06/08 Python
OpenCV读取与写入图片的实现
2020/10/13 Python
Python基于内置函数type创建新类型
2020/10/22 Python
年度考核自我鉴定
2014/02/02 职场文书
社区优秀志愿者先进事迹
2014/05/09 职场文书
党员干部反四风对照检查材料思想汇报
2014/09/14 职场文书
基层党组织整改方案
2014/10/25 职场文书
2015年语文教研组工作总结
2015/05/23 职场文书
商业计划书范文
2019/04/24 职场文书
MySQL数据库超时设置配置的方法实例
2021/10/15 MySQL
关于Python中进度条的六个实用技巧分享
2022/04/05 Python
Win11 BitLocker 驱动器加密
2022/04/19 数码科技