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 相关文章推荐
javascript import css实例代码
Jul 18 Javascript
那些年,我还在学习jquery 学习笔记
Mar 05 Javascript
javascript:history.go()和History.back()的区别及应用
Nov 25 Javascript
jQuery1.9.1针对checkbox的调整方法(prop)
May 01 Javascript
图片放大镜jquery.jqzoom.js使用实例附放大镜图标
Jun 19 Javascript
JavaScript实现自动消除按钮功能的方法
Aug 05 Javascript
vue定义全局变量和全局方法的方法示例
Aug 01 Javascript
Node.js + express基本用法教程
Mar 14 Javascript
vue实现路由懒加载及组件懒加载的方式
Jun 11 Javascript
vue.js实现简单的计算器功能
Feb 22 Javascript
js绘制一条直线并旋转45度
Aug 21 Javascript
Vue解决移动端弹窗滚动穿透问题
Dec 15 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
特详细的PHPMYADMIN简明安装教程
2008/08/01 PHP
又一个php 分页类实现代码
2009/12/03 PHP
php对xml文件的增删改查操作实现方法分析
2017/05/19 PHP
ajax+php实现无刷新验证手机号的实例
2017/12/22 PHP
Laravel 5.4.36中session没有保存成功问题的解决
2018/02/19 PHP
php7新特性的理解和比较总结
2019/04/14 PHP
PHP检查文件是否存在,不存在自动创建及读取文件内容操作示例
2020/01/23 PHP
JavaScript 对象的属性和方法4种不同的类型
2010/03/19 Javascript
瀑布流布局并自动加载实现代码
2013/03/12 Javascript
jquery监听div内容的变化具体实现思路
2013/11/04 Javascript
iframe调用父页面函数示例详解
2014/07/17 Javascript
JavaScript中的console.group()函数详细介绍
2014/12/29 Javascript
Javascript简单实现面向对象编程继承实例代码
2015/11/27 Javascript
详解JavaScript的Date对象(制作简易钟表)
2020/04/07 Javascript
JS实现的自定义显示加载等待图片插件(loading.gif)
2016/06/17 Javascript
全面解析JS字符串和正则表达式中的match、replace、exec等函数
2016/07/01 Javascript
微信小程序scroll-view仿拼多多横向滑动滚动条
2020/04/21 Javascript
bootstrap-table formatter 使用vue组件的方法
2019/05/09 Javascript
在Express中提供静态文件的实现方法
2019/10/17 Javascript
js实现简单掷骰子小游戏
2019/10/24 Javascript
JavaScript实现网页跨年倒计时
2020/12/02 Javascript
解析Python中的变量、引用、拷贝和作用域的问题
2015/04/07 Python
python自带的http模块详解
2016/11/06 Python
查看django执行的sql语句及消耗时间的两种方法
2018/05/29 Python
python实现基于信息增益的决策树归纳
2018/12/18 Python
详解pandas库pd.read_excel操作读取excel文件参数整理与实例
2019/02/17 Python
使用phonegap进行提示操作的具体方法
2017/03/30 HTML / CSS
Expedia英国:全球最大的在线旅游公司
2017/09/07 全球购物
英国领先的独立时装店:Van Mildert
2019/10/28 全球购物
计算机应用专业毕业生求职信
2013/10/24 职场文书
《雨霖铃》听课反思
2014/02/13 职场文书
入股协议书范本
2014/04/14 职场文书
辞职离别感言
2015/08/04 职场文书
2016秋季运动会前导词
2015/11/25 职场文书
将图片保存到mysql数据库并展示在前端页面的实现代码
2021/05/02 MySQL
Java生成读取条形码和二维码的简单示例
2021/07/09 Java/Android