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解密入门之凭直觉解
Jun 25 Javascript
提升你网站水平的jQuery插件集合推荐
Apr 19 Javascript
javascript 正则表达式相关应介绍
Nov 27 Javascript
把字符串按照特定的字母顺序进行排序的js代码
Jan 28 Javascript
jquery实现下拉菜单的二级联动利用json对象从DB取值显示联动
Mar 27 Javascript
js+html5获取用户地理位置信息并在Google地图上显示的方法
Jun 05 Javascript
浅谈bootstrap源码分析之tab(选项卡)
Jun 06 Javascript
Bootstrap table简单使用总结
Feb 15 Javascript
JS表单传值和URL编码转换
Mar 03 Javascript
微信小程序自定义音乐进度条的实例代码
Aug 28 Javascript
对Vue.js之事件的绑定(v-on: 或者 @ )详解
Sep 15 Javascript
js中let能否完全替代IIFE
Jun 15 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
基于pear auth实现登录验证
2010/02/26 PHP
php实现下载限制速度示例分享
2014/02/13 PHP
php实现QQ空间获取当前用户的用户名并生成图片
2015/07/25 PHP
php strftime函数的详细用法
2018/06/21 PHP
JavaScript 继承详解(一)
2009/07/13 Javascript
jQuery 使用手册(七)
2009/09/23 Javascript
javascript同页面多次调用弹出层具体实例代码
2013/08/16 Javascript
js实现prototype扩展的方法(字符串,日期,数组扩展)
2016/01/14 Javascript
Bootstrap树形组件jqTree的简单封装
2016/01/25 Javascript
原生JavaScript实现动态省市县三级联动下拉框菜单实例代码
2016/02/03 Javascript
JS简单实现点击按钮或文字显示遮罩层的方法
2017/04/27 Javascript
vue.js移动端tab组件的封装实践实例
2017/06/30 Javascript
vue动态路由配置及路由传参的方式
2018/05/23 Javascript
浅谈vue首屏加载优化
2018/06/28 Javascript
浅谈Vue数据响应
2018/11/05 Javascript
js计算两个时间差 天 时 分 秒 毫秒的代码
2019/05/21 Javascript
layui-select动态选中值的例子
2019/09/23 Javascript
构建Vue大型应用的10个最佳实践(小结)
2019/11/07 Javascript
vue实现修改图片后实时更新
2019/11/14 Javascript
vue-cli点击实现全屏功能
2020/03/07 Javascript
JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记
2020/07/15 Javascript
vue中的计算属性和侦听属性
2020/11/06 Javascript
[22:20]初生之犊-TI4第5名LGD战队纪录片
2014/08/13 DOTA
[43:24]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第二场 12.12
2020/12/17 DOTA
详解Swift中属性的声明与作用
2016/06/30 Python
python实现简单日期工具类
2019/04/24 Python
适合各种场合的美食礼品:Harry & David
2016/08/03 全球购物
使用Vue.js和MJML创建响应式电子邮件
2021/03/23 Vue.js
机械专业个人求职自荐信格式
2013/09/21 职场文书
制衣厂各岗位职责
2013/12/02 职场文书
餐饮收银员岗位职责
2014/02/07 职场文书
房地产推广策划方案
2014/05/19 职场文书
2014年党的群众路线学习心得体会
2014/11/05 职场文书
读书笔记怎么写
2015/07/01 职场文书
pytorch实现线性回归以及多元回归
2021/04/11 Python
Mysql数据库按时间点恢复实战记录
2021/06/30 MySQL