jquery ui是什么

一、总结

一句话总结:jQuery UI [1]  是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库。包含底层用户交互、动画、特效和可更换主题的可视控件。我们可以直接用它来构建具有很好交互性的web应用程序。所有插件测试能兼容IE 6.0+, Firefox 3+, Safari 3.1+, Opera 9.6+, 和GoogleChrome。

官网:jQuery UI
http://jqueryui.com/

jQuery UI 是建立在 jQuery JavaScript 库上的一组用户界面交互、特效、小部件及主题。无论您是创建高度交互的 Web 应用程序还是仅仅向窗体控件添加一个日期选择器,jQuery UI 都是一个完美的选择。

jQuery UI 包含了许多维持状态的小部件(Widget),因此,它与典型的 jQuery 插件使用模式略有不同。所有的 jQuery UI 小部件(Widget)使用相同的模式,所以,只要您学会使用其中一个,您就知道如何使用其他的小部件(Widget)。

1、jQuery UI 与 jquery 的主要区别是什么?

(1) jQuery是一个js库,主要提供的功能是选择器,属性修改和事件绑定等等。  
(2) jQuery UI则是在jQuery的基础上,利用jQuery的扩展性,设计的插件。提供了一些常用的界面元素,诸如对话框、拖动行为、改变大小行为等等。  
(3) jQuery本身注重于后台,没有漂亮的界面,而jQuery UI则补充了前者的不足,他提供了华丽的展示界面,使人更容易接受。既有强大的后台,又有华丽的前台。jQuery UI是jQuery插件,只不过专指由jQuery官方维护的UI方向的插件。

2、手机开发适合使用jquery么?

其实是适合的

不建议开发者使用Jquery,仔细分析Jquery的源脚本你会发现它创建了一个长期存在的jquery对象,这样可能使得内存被很多无用的东西占用。而且如果客户端未开启缓存,客户端每一次浏览页面都会下载jquery.js文件。要知道,jquery库即使压缩了也占了近100KB资源:如果用做移动应用,在国内,按移动的流量计费标准来看,下载一个jquery库,就要花1¥。
作为开发者,应该为客户着想,别浪费客户资源。所以更应该学习javascript底层技术,这样才能最大限度的做到不浪费资源。

二、jQuery UI基本使用方法

其实jQuery UI早就在我的学习计划中,只不过因为计划安排始终处于待命状态,最近项目要用到jQuery UI,就提前学习一下,也想能够封装自己的UI库,这样就不用老按照别人的套路走了,像使用jQuery UI的时候,连DOM结构都要按照他们写的来,一个div里面必须包含一个h3才有用,用h2就没用了,这样的框架延伸性太差了吧,还是自己的东西好用!

本篇笔记为jQuery UI的使用笔记,深入到具体封装层面的待我以后读了源码再来写更深入的笔记,目前仅为快速学习,为了跟上项目。

1.如何引入

涉及到UI的框架,总是会涉及到行为和样式,正如jQuery Mobile一样,在使用jQuery UI时也要引入一个适用版本的jQuery.js(一般会自带)和一个框架的js文件和一个css文件,目前我用的版本是1.11.4。

废话不多说,如何使用,看代码就知道了

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href="js/jquery-ui-1.11.4/jquery-ui.css" rel="stylesheet">
</head>
<body>
<script src="js/jquery-ui-1.11.4/jquery.js"></script>
<script src="js/jquery-ui-1.11.4/jquery-ui.js"></script>
<script>
//write your custome code
</script>
</body>
</html>

网上大多数教程都是这么说的,但是作为一个强迫症患者,我还是建议把images文件夹引入进来,这样的话在写test程序的时候不会报错,这样也可以更清晰的知道哪些控件使用了哪些图片,是如何使用的。

必要的解释,到官网上下载了jQuery UI后是一个压缩包,解压开来是一个范例的程序,像我这种白痴是肯定不知道哪些文件是有用的,哪些文件是没用的,不过打开范例程序的index.html后分别搜索<link>/<script>你会发现哪几个文件是有用到的,至于其他几个css文件为什么没用到,个人猜想structure应该是基础版的没有主题的css,如果要开发主题就用这个css,而theme应该是已经做好了主题的css。

另外,jQuery UI的官网还提供主题的下载,下好了以后用什么方法链接进去好像就能起效果。说实话我个人觉得,站在学习的角度上来说,这个东西很没意思。

还有一件很烦的事情是,jQuery UI分为四个部分:核心(UI Core)、交互部件(Interactions)、小部件(Widgets)和效果库(Effects),真心搞不清这几个东西的区别,也懒得搞清了,还是赶紧开始写点东西出来,比什么炒概念都要强。

2.基本使用方法

建立组件

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href="js/jquery-ui-1.11.4/jquery-ui.css" rel="stylesheet">
</head>
<body>
<div id="test_progressbar"></div>
<script src="js/jquery-ui-1.11.4/jquery.js"></script>
<script src="js/jquery-ui-1.11.4/jquery-ui.js"></script>
<script>
//调用方法建立组件
$("#test_progressbar").progressbar();
</script>
</body>
</html>

效果如下

获取参数

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href="js/jquery-ui-1.11.4/jquery-ui.css" rel="stylesheet">
</head>
<body>
<div id="test_progressbar"></div>
<script src="js/jquery-ui-1.11.4/jquery.js"></script>
<script src="js/jquery-ui-1.11.4/jquery-ui.js"></script>
<script>
//带参数调用方法建立组件
$("#test_progressbar").progressbar({value:20});
//获取
document.write($("#test_progressbar").progressbar("value"));
</script>
</body>
</html>

效果图如下

设置参数

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href="js/jquery-ui-1.11.4/jquery-ui.css" rel="stylesheet">
</head>
<body>
<div id="test_progressbar"></div>
<script src="js/jquery-ui-1.11.4/jquery.js"></script>
<script src="js/jquery-ui-1.11.4/jquery-ui.js"></script>
<script>
$("#test_progressbar").progressbar();
//设置
$("#test_progressbar").progressbar("value",40);
</script>
</body>
</html>

效果图如下

改变样式

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href="js/jquery-ui-1.11.4/jquery-ui.css" rel="stylesheet">
<style>
.test_class{width:50%;}
</style>
</head>
<body>
<div id="test_progressbar"></div>
<script src="js/jquery-ui-1.11.4/jquery.js"></script>
<script src="js/jquery-ui-1.11.4/jquery-ui.js"></script>
<script>
$("#test_progressbar").progressbar();
//设置
$("#test_progressbar")
.progressbar("value",40)
.addClass("test_class");
</script>
</body>
</html>

使用option方法改变和获取参数值

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href="js/jquery-ui-1.11.4/jquery-ui.css" rel="stylesheet">
<style>
.test_class{width:50%;}
</style>
</head>
<body>
<div id="test_progressbar"></div>
<script src="js/jquery-ui-1.11.4/jquery.js"></script>
<script src="js/jquery-ui-1.11.4/jquery-ui.js"></script>
<script>
$("#test_progressbar").progressbar();
//使用option方法改变参数值
$("#test_progressbar").progressbar("option","value",90);
//使用option方法获取参数值
document.write($("#test_progressbar").progressbar("option","value"));
</script>
</body>
</html>

效果图如下

利用option方法传多个参数

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href="js/jquery-ui-1.11.4/jquery-ui.css" rel="stylesheet">
<style>
.test_class{width:50%;}
</style>
</head>
<body>
<div id="test_progressbar"></div>
<script src="js/jquery-ui-1.11.4/jquery.js"></script>
<script src="js/jquery-ui-1.11.4/jquery-ui.js"></script>
<script>
$("#test_progressbar").progressbar();
$("#test_progressbar").progressbar( "option", {
value: 100,
disabled: true
});
</script>
</body>
</html>

效果图如下

添加事件监听和内部的回调函数

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href="js/jquery-ui-1.11.4/jquery-ui.css" rel="stylesheet">
<style>
.test_class{width:50%;}
</style>
</head>
<body>
<div id="test_progressbar"></div>
<script src="js/jquery-ui-1.11.4/jquery.js"></script>
<script src="js/jquery-ui-1.11.4/jquery-ui.js"></script>
<script>
$("#test_progressbar").progressbar();
$("#test_progressbar").progressbar({
change: function() {
alert( "The value has changed!---by callback" );
}
});
$("#test_progressbar").bind( "progressbarchange", function() {
alert( "The value has changed!---by bind()" );
});
$("#test_progressbar").progressbar("option","value",50);
</script>
</body>
</html>

CSS框架 API

布局助手
.ui-helper-hidden:对元素应用 display: none。
.ui-helper-hidden-accessible:对元素应用访问隐藏(通过页面绝对定位)。
.ui-helper-reset:UI 元素的基本样式重置。重置的元素比如:padding、margin、text-decoration、list-style,等等。
.ui-helper-clearfix:对父元素应用浮动包装属性。
.ui-helper-zfix:对 <iframe> 元素应用 iframe "fix" CSS。

小部件容器
.ui-widget:对所有小部件的外部容器应用的 Class。对小部件应用字体和字体尺寸,同时也对自表单元素应用相同的字体和 1em 的字体尺寸,以应对 Windows 浏览器中的继承问题。
.ui-widget-header:对标题容器应用的 Class。对元素及其子元素的文本、链接、图标应用标题容器样式。
.ui-widget-content:对内容容器应用的 Class。对元素及其子元素的文本、链接、图标应用内容容器样式。(可应用到标题的父元素或者同级元素)

交互状态
.ui-state-default:对可点击按钮元素应用的 Class。对元素及其子元素的文本、链接、图标应用 "clickable default" 容器样式。
.ui-state-hover:当鼠标悬浮在可点击按钮元素上时应用的 Class。对元素及其子元素的文本、链接、图标应用 "clickable hover" 容器样式。
.ui-state-focus:当键盘聚焦在可点击按钮元素上时应用的 Class。对元素及其子元素的文本、链接、图标应用 "clickable hover" 容器样式。
.ui-state-active:当鼠标点击可点击按钮元素上时应用的 Class。对元素及其子元素的文本、链接、图标应用 "clickable active" 容器样式。

交互提示 Cues
.ui-state-highlight:对高亮或者选中元素应用的 Class。对元素及其子元素的文本、链接、图标应用 "highlight" 容器样式。
.ui-state-error:对错误消息容器元素应用的 Class。对元素及其子元素的文本、链接、图标应用 "error" 容器样式。
.ui-state-error-text:对只有无背景的错误文本颜色应用的 Class。可用于表单标签,也可以对子图标应用错误图标颜色。
.ui-state-disabled:对禁用的 UI 元素应用一个暗淡的不透明度。意味着对一个已经定义样式的元素添加额外的样式。
.ui-priority-primary:对第一优先权的按钮应用的 Class。应用粗体文本。
.ui-priority-secondary:对第二优先权的按钮应用的 Class。应用正常粗细的文本,对元素应用轻微的透明度。

图标
状态和图像
.ui-icon:对图标元素应用的基本 Class。设置尺寸为 16px 方块,隐藏内部文本,对 "content" 状态的精灵图像设置背景图像。注意: .ui-icon class 将根据它的父容器得到一个不同的精灵背景图像。例如,ui-state-default 容器内的 ui-icon 元素将根据 ui-state-default 的图标颜色进行着色。
图标类型
在声明 .ui-icon class 之后,接着您可以声明一个秒速图标类型的 class。通常情况下,图标 class 遵循语法 .ui-icon-{icon type}-{icon sub description}-{direction}。
例如,一个指向右侧的三角形图标,如下所示: .ui-icon-triangle-1-e

其他视觉效果
圆角半径助手
.ui-corner-tl:对元素的左上角应用圆角半径。
.ui-corner-tr:对元素的右上角应用圆角半径。
.ui-corner-bl:对元素的左下角应用圆角半径。
.ui-corner-br:对元素的右下角应用圆角半径。
.ui-corner-top:对元素上边的左右角应用圆角半径。
.ui-corner-bottom:对元素下边的左右角应用圆角半径。
.ui-corner-right:对元素右边的上下角应用圆角半径。
.ui-corner-left:对元素左边的上下角应用圆角半径。
.ui-corner-all:对元素的所有四个角应用圆角半径。
覆盖 & 阴影
.ui-widget-overlay:对覆盖屏幕应用 100% 宽度和高度,同时设置背景颜色/纹理和屏幕不透明度。
.ui-widget-shadow:对覆盖应用的 Class,设置了不透明度、上偏移/左偏移,以及阴影的 "厚度"。厚度是通过对阴影所有边设置内边距(padding)进行应用的。偏移是通过设置上外边距(margin)和左外边距(margin)进行应用的(可以是正数,也可以是负数)。

 参考:jQuery UI基本使用方法 - zcynine - 博客园
https://www.cnblogs.com/zcynine/p/5003063.html
 

jquery ui是什么的更多相关文章

  1. jQuery UI resizable使用注意事项、实时等比例拉伸及你不知道的技巧

    这篇文章总结的是我在使用resizable插件的过程中,遇到的问题及变通应用的奇思妙想. 一.resizable使用注意事项 以下是我在jsfiddle上写的测试demo:http://jsfiddl ...

  2. jQuery UI与jQuery easyUI的冲突解决办法

    jQuery UI与jQuery easyUI都是基于jQuery开发的.难免里面会有些方法名冲突! 因此对jQuery.easyui其中的两个方法名:resizable 和 draggable进行替 ...

  3. 【转】推荐10款最热门jQuery UI框架

    推荐10款最热门jQuery UI框架 原创 在进行Web开发时,并非所有的库都适合你的项目,但你仍需要收藏一些Web UI设计相关的库或框架,以在你需要的时候,加快你的开发效率.本文为你推荐10款非 ...

  4. Jquery UI

    jQuery UI简介 jQuery UI包含了许多维持状态的小部件(Widget),因此,它与典型的 jQuery 插件使用模式略有不同.所有的 jQuery UI 小部件(Widget)使用相同的 ...

  5. JQuery UI dialog 弹窗实例及参数说明

    按钮代码: <a id="suprise" style="margin-left: 0.5em;cursor:pointer;">点我会有惊喜< ...

  6. Jquery UI - DatePicker 在Dialog中无法自动隐藏的解决思路

    通过Jquery UI Dialog模态展示如下的一个员工编辑页面,但是遇到一个奇怪的问题:点击Start Date的input元素后,其无法失去焦点.从而导致DatePicker控件在选择日期后无法 ...

  7. jQuery UI Datepicker使用介绍

    本博客使用Markdown编辑器编写 在企业级web开发过程中,日历控件和图表控件是使用最多的2中第三方组件.jQuery UI带的Datepicker,日历控件能满足大多数场景开发需要.本文就主要讨 ...

  8. 解决Select2控件不能在jQuery UI Dialog中不能搜索的bug

    本文使用博客园Markdown编辑器进行编辑 1.问题呈现 项目中使用了jQuery UI的Dialog控件,一般用来处理需要提示用户输入或操作的简单页面.逻辑是修改一个广告的图片和标题. 效果截图如 ...

  9. 使用requireJS的shim参数 解决插件 jquery.ui 等插件问题

    没有requireJS框架之前,如果我们想使用jquery框架,会在HTML页面中通过<script>标签加载, 这个时候jquery框架生成全局变量$和jQuery等全局变量.如果项目中 ...

  10. Struts2 JQuery UI常用插件

    一.什么是插件 ①是遵循一定接口规范编写的程序 ②是原有系统平台功能的扩展和补充 ③只能运行在规定的系统平台下,而不能单独运行 注:由于jQuery插件是基于jQuery脚本库的扩展,所以所有jQue ...

随机推荐

  1. wap启用宏

    vba for wps office是使用wps的时候开启宏需要的VBA安装包,安装好这个插件就可以开启wps的宏功能了,重新打开WPS Excel,可以看到上面的工具栏中宏选项变成可选的就成功了 1 ...

  2. CodeForces Roads not only in Berland(并查集)

    H - Roads not only in Berland Time Limit:2000MS     Memory Limit:262144KB     64bit IO Format:%I64d ...

  3. android data recovery and nc

    目录下会出现mmcblk0.raw文件,文件大小等于手机内部存储空间的大小,该文件正是手机内部存储空间的镜像文件. 第七步,打开一款传统的数据恢复工具,由于raw文件是linux文件系统格式,因此需要 ...

  4. Oil Skimming---hdu4185(最大匹配)

    题目链接 题意:有一个地图.代表水#代表油每个单元格是10*10的,现有10*20的勺子可以提取出水上漂浮的油,问最多可以提取几勺的油: 每次提取的时候勺子放的位置都要是油,不然就被污染而没有价值了: ...

  5. django如何防止csrf(跨站请求伪造)

    什么是CSRF 下面这张图片说明了CSRF的攻击原理: Django中如何防范CSRF Django使用专门的中间件(CsrfMiddleware)来进行CSRF防护.具体的原理如下: 1.它修改当前 ...

  6. 洛谷P1736 创意吃鱼法 dp

    正解:dp 解题报告: 早就想写dp的题目辣!我发现我的dp好差啊QAQ所以看到列表的小朋友写dp的题目就跟着他们的步伐做下题好辣QwQ 这题的话没有那——么难,大概说下趴QwQ 首先说下题意 前面一 ...

  7. Linux内核之vmlinux与vmlinuz

    因为是初次系统的学习Linux内核,过程中遇到了一些常常出现的名词.似曾相识,但对他们的含义又不是非常清楚.因此,将搜索到的内容进行一下汇总. 1.vmlinux   vmlinux是一个包括linu ...

  8. Word 2010文档自动生成目录和某页插入页码

    一.Word 2010文档自动生成目录 关于Word文档自动生成目录一直是我身边同学们最为难的地方,尤其是毕业论文,经常因为目录问题,被要求修改,而且每次修改完正文后,目录的内容和页码可能都会发生变化 ...

  9. EasyUI Droppable 可放置

    通过 $.fn.droppable.defaults 重写默认的 defaults. 用法 通过标记创建可放置(droppable)区域. <div class="easyui-dro ...

  10. Flask系列之源码分析(一)

    目录: 涉及知识点 Flask框架原理 简单示例 路由系统原理源码分析 请求流程简单源码分析 响应流程简单源码分析 session简单源码分析 涉及知识点 1.装饰器 闭包思想 def wapper( ...