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 相关文章推荐
juqery 学习之四 筛选过滤
Nov 30 Javascript
基于jquery封装的一个js分页
Nov 15 Javascript
jQuery图片滚动图片的效果(另类实现)
Jun 02 Javascript
jquery判断密码强度的验证代码
Apr 22 Javascript
JQuery控制图片由中心点逐渐放大效果
Jun 26 Javascript
运用js教你轻松制作html音乐播放器
Apr 17 Javascript
vue基础之事件简写、事件对象、冒泡、默认行为、键盘事件实例分析
Mar 11 Javascript
nuxt踩坑之Vuex状态树的模块方式使用详解
Sep 06 Javascript
javascript的惯性运动实现代码实例
Sep 07 Javascript
浅谈vuex的基本用法和mapaction传值问题
Nov 08 Javascript
js实现验证码干扰(动态)
Feb 23 Javascript
Vue.Draggable实现交换位置
Apr 07 Vue.js
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
通过文字传递创建的图形按钮
2006/10/09 PHP
php字符串过滤与替换小结
2015/01/26 PHP
JQuery与Ajax常用代码实现对比
2009/10/03 Javascript
JAVASCRIPT车架号识别/验证函数代码 汽车车架号验证程序
2012/01/08 Javascript
node.js中的require使用详解
2014/12/15 Javascript
javascript简单实现滑动菜单效果的方法
2015/07/27 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(基于jquery)
2015/11/18 Javascript
JS通过Cookie判断页面是否为首次打开
2016/02/05 Javascript
jQuery实现点击行选中或取消CheckBox的方法
2016/08/01 Javascript
Vue 过渡实现轮播图效果
2017/03/27 Javascript
vue组件发布到npm简单步骤
2017/11/30 Javascript
Angular4编程之表单响应功能示例
2017/12/13 Javascript
微信小程序自定义弹窗wcPop插件
2018/11/19 Javascript
从vue源码看props的用法
2019/01/09 Javascript
浅谈Vue.set实际上是什么
2019/10/17 Javascript
微信小程序自定义菜单切换栏tabbar组件代码实例
2019/12/30 Javascript
Layer UI表格列日期格式化及取消自动填充日期的实现方法
2020/05/10 Javascript
详解Python中的__new__()方法的使用
2015/04/09 Python
解决python升级引起的pip执行错误的问题
2018/06/12 Python
Python 如何展开嵌套的序列
2020/08/01 Python
澳大利亚领先的宠物用品商店:VetSupply
2017/09/08 全球购物
西班牙美妆电商:Perfume’s Club(有中文站)
2018/08/08 全球购物
股权转让意向书
2014/04/01 职场文书
酒店管理失职检讨书
2014/09/16 职场文书
离婚协议书怎么写2014
2014/09/30 职场文书
中学生旷课检讨书模板
2014/10/08 职场文书
镇党委书记群众路线整改措施思想汇报
2014/10/13 职场文书
2014年志愿者工作总结
2014/11/20 职场文书
毕业论文答辩稿范文
2015/06/23 职场文书
2019企业给员工的慰问信
2019/06/24 职场文书
如何撰写出一份完美的商业计划书?
2019/07/12 职场文书
Nginx反向代理多个服务器的实现方法
2021/03/31 Servers
Python实现提取PDF简历信息并存入Excel
2022/04/02 Python
win11如何查看端口是否被占用? Win11查看端口是否占用的技巧
2022/04/05 数码科技
基于docker安装zabbix的详细教程
2022/06/05 Servers
Docker与K8s关系介绍不会Docker也可以使用K8s
2022/06/25 Servers