jQuery UI 实例 – 定位（Position）

最新推荐文章于 2023-07-31 17:00:12 发布
最新推荐文章于 2023-07-31 17:00:12 发布
阅读量1.7k 收藏
点赞数
分类专栏： 前端 文章标签： jquery ui

相对窗口、文档、锚、光标/鼠标等元素定位一个元素。

如需了解更多有关 .position() 方法的细节，请查看 API 文档 .position()。

默认功能

使用表单控件配置位置，或者拖拽被定位的元素来修改它的偏移量。向四周拖拽父元素来查看碰撞检测。
<!doctype html>
< html  lang = "en" >
< head >
   < meta  charset = "utf-8" >
   < title >jQuery UI 定位（Position） - 默认功能</ title >
   < link  rel = "stylesheet"  href = "//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" >
   < script  src = "//code.jquery.com/jquery-1.9.1.js" ></ script >
   < script  src = "//code.jquery.com/ui/1.10.4/jquery-ui.js" ></ script >
   < link  rel = "stylesheet"  href = "http://jqueryui.com/resources/demos/style.css" >
   < style >
   #parent {
     width: 60%;
     height: 40px;
     margin: 10px auto;
     padding: 5px;
     border: 1px solid #777;
     background-color: #fbca93;
     text-align: center;
   }
   .positionable {
     position: absolute;
     display: block;
     right: 0;
     bottom: 0;
     background-color: #bcd5e6;
     text-align: center;
   }
   #positionable1 {
     width: 75px;
     height: 75px;
   }
   #positionable2 {
     width: 120px;
     height: 40px;
   }
   select, input {
     margin-left: 15px;
   }
   </ style >
   < script >
   $(function() {
     function position() {
       $( ".positionable" ).position({
         of: $( "#parent" ),
         my: $( "#my_horizontal" ).val() + " " + $( "#my_vertical" ).val(),
         at: $( "#at_horizontal" ).val() + " " + $( "#at_vertical" ).val(),
         collision: $( "#collision_horizontal" ).val() + " " + $( "#collision_vertical" ).val()
       });
     }
  
     $( ".positionable" ).css( "opacity", 0.5 );
  
     $( "select, input" ).bind( "click keyup change", position );
  
     $( "#parent" ).draggable({
       drag: position
     });
  
     position();
   });
   </ script >
</ head >
< body >
  
< div  id = "parent" >
   < p >
   这是父元素的位置。
   </ p >
</ div >
  
< div  class = "positionable"  id = "positionable1" >
   < p >
   to position
   </ p >
</ div >
  
< div  class = "positionable"  id = "positionable2" >
   < p >
   to position 2
   </ p >
</ div >
  
< div  style = "padding: 20px; margin-top: 75px;" >
   定位...
   < div  style = "padding-bottom: 20px;" >
     < b >my:</ b >
     < select  id = "my_horizontal" >
       < option  value = "left" >left</ option >
       < option  value = "center" >center</ option >
       < option  value = "right" >right</ option >
     </ select >
     < select  id = "my_vertical" >
       < option  value = "top" >top</ option >
       < option  value = "center" >center</ option >
       < option  value = "bottom" >bottom</ option >
     </ select >
   </ div >
   < div  style = "padding-bottom: 20px;" >
     < b >at:</ b >
     < select  id = "at_horizontal" >
       < option  value = "left" >left</ option >
       < option  value = "center" >center</ option >
       < option  value = "right" >right</ option >
     </ select >
     < select  id = "at_vertical" >
       < option  value = "top" >top</ option >
       < option  value = "center" >center</ option >
       < option  value = "bottom" >bottom</ option >
     </ select >
   </ div >
   < div  style = "padding-bottom: 20px;" >
     < b >collision:</ b >
     < select  id = "collision_horizontal" >
       < option  value = "flip" >flip</ option >
       < option  value = "fit" >fit</ option >
       < option  value = "flipfit" >flipfit</ option >
       < option  value = "none" >none</ option >
     </ select >
     < select  id = "collision_vertical" >
       < option  value = "flip" >flip</ option >
       < option  value = "fit" >fit</ option >
       < option  value = "flipfit" >flipfit</ option >
       < option  value = "none" >none</ option >
     </ select >
   </ div >
</ div >
  
  
</ body >
</ html >

演示点击打开链接

图像循环

一个照片浏览器的原型，使用 Position 分别把图片定为在左边、中间、右边，然后循环显示。使用顶部的链接来循环图像，或者在图像的左侧或右侧点击来循环图像。请注意，当调整窗口大小时，会重新定位图像。
<!doctype html>
< html  lang = "en" >
< head >
   < meta  charset = "utf-8" >
   < title >jQuery UI 定位（Position） - 图像循环</ title >
   < link  rel = "stylesheet"  href = "//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" >
   < script  src = "//code.jquery.com/jquery-1.9.1.js" ></ script >
   < script  src = "//code.jquery.com/ui/1.10.4/jquery-ui.js" ></ script >
   < link  rel = "stylesheet"  href = "http://jqueryui.com/resources/demos/style.css" >
   < style >
   body {
     margin: 0;
   }
   #container {
     overflow: hidden;
     position: relative;
     height: 400px;
   }
  
   img {
     position: absolute;
   }
   </ style >
   < script >
   $(function() {
     // 重构部件，去除这些插件方法
     $.fn.left = function( using ) {
       return this.position({
         my: "right middle",
         at: "left+25 middle",
         of: "#container",
         collision: "none",
         using: using
       });
     };
     $.fn.right = function( using ) {
       return this.position({
         my: "left middle",
         at: "right-25 middle",
         of: "#container",
         collision: "none",
         using: using
       });
     };
     $.fn.center = function( using ) {
       return this.position({
         my: "center middle",
         at: "center middle",
         of: "#container",
         using: using
       });
     };
  
     $( "img:eq(0)" ).left();
     $( "img:eq(1)" ).center();
     $( "img:eq(2)" ).right();
  
     function animate( to ) {
       $( this ).stop( true, false ).animate( to );
     }
     function next( event ) {
       event.preventDefault();
       $( "img:eq(2)" ).center( animate );
       $( "img:eq(1)" ).left( animate );
       $( "img:eq(0)" ).right().appendTo( "#container" );
     }
     function previous( event ) {
       event.preventDefault();
       $( "img:eq(0)" ).center( animate );
       $( "img:eq(1)" ).right( animate );
       $( "img:eq(2)" ).left().prependTo( "#container" );
     }
     $( "#previous" ).click( previous );
     $( "#next" ).click( next );
  
     $( "img" ).click(function( event ) {
       $( "img" ).index( this ) === 0 ? previous( event ) : next( event );
     });
  
     $( window ).resize(function() {
       $( "img:eq(0)" ).left( animate );
       $( "img:eq(1)" ).center( animate );
       $( "img:eq(2)" ).right( animate );
     });
   });
   </ script >
</ head >
< body >
  
< div  id = "container" >
   < img  src = "/media/uploads/2014/03/earth.jpg"  width = "458"  height = "308"  alt = "earth" >
   < img  src = "/media/uploads/2014/03/flight.jpg"  width = "512"  height = "307"  alt = "flight" >
   < img  src = "/media/uploads/2014/03/rocket.jpg"  width = "300"  height = "353"  alt = "rocket" >
  
   < a  id = "previous"  href = "#" >上一个</ a >
   < a  id = "next"  href = "#" >下一个</ a >
</ div >
  
  
</ body >
</ html >

演示


jquery - ui 教学

http://www.ziqiangxuetang.com/jqueryui/jqueryui-tutorial.html

OK_boom
关注
专栏目录
jQuery UI API - 可排序小部件（Sortable Widget）
You_are_hanson的博客
08-13 417
( ⊙ o ⊙ )啊！
jQuery UI的定位工具Position
pyzheng的专栏
07-19 337
.position( options ) my (default: "center") 确定被定位的元素, 使用自身的哪个位置去进行定位. at (default: "center") 确定被定位到的元素,使用哪个位置提供定位. of (default: null) 确定被定位到的元素, of结合at,来给被定位的元素提供定位. collision (default: "flip") 当定...
jquery position
蝶飞鸿云 志化燕雀(http://jxnuprk.cnblogs.com/)
08-25 256
5.2.3 position prk/彭仁夔 08-08-25 在给元素定位之前，我们首先要了解一些CSS定位相关的知识。 在CSS中关于定位的内容是：position:relative | absolute | static | fixed 。static 没有特别的设定，遵循基本的定位规定，不能通过z-index进行层...
Jquery Ui position
lzz360的专栏
03-03 2064
Position 的简单使用        jQuery UI ExamplePage                 #cont1{  border:1px solid gray;  width:100px;  height:100px;  background:green;  z-index:10;  }  #cont2{  border
jQuery UI 实例 - 定位（Position）
unber的博客
04-15 299
相对窗口、文档、锚、光标/鼠标等元素定位一个元素。如需了解更多有关方法的细节，请查看 API 文档。
jquery实现仿JqueryUi可拖动的DIV实例
11-30
这个实例展示了如何创建一个用户可以通过鼠标拖动来改变位置的元素，类似于jQuery UI中的Draggable功能。 首先，我们需要理解HTML结构。在这个例子中，有一个包含ID为`draggable`的`div`元素，它是我们要使其可拖动...
Jquery UI
04-12
5. **Positioning**: jQuery UI 的`position`方法用于精确控制元素的位置，可以基于其他元素或相对于窗口进行定位。 6. **Utilities**: 除了部件和交互，jQuery UI 还提供了一些实用工具函数，如`$.ui.sortable`、`...
Javascript基于jQuery UI实现选中区域拖拽效果
10-21
在JavaScript开发中，jQuery UI库提供了丰富的交互效果，其中之一就是拖拽（Draggable）功能。本文将详细讲解如何使用jQuery UI实现选中区域拖拽的效果，这对于创建具有交互性的网页应用，如画板、日历或者自定义...
无涯教程-jQuery - position( )方法函数
最新发布
无涯教程
07-31 334
position()方法获取元素相对于其偏移父级的顶部和左侧位置。返回的对象包含两个Integer整数属性，即top和left。为了进行准确的计算，请确保将像素值用于边距，边框和填充。此方法仅适用于可见元素。
jQuery position( ) 方法
m0_57835615的博客
06-13 524
position( ) 方法返回第一个匹配元素的位置（相对于它的父元素）。 语法格式： $(selector).position() 注意：
jQuery练习
alibaba2015的博客
03-24 126
jQuery 是一个 JavaScript 库。 jQuery 极大地简化了 JavaScript 编程。 jQuery 库可以通过一行简单的标记被添加到网页中。 jQuery 库 - 特性 jQuery 是一个 JavaScript 函数库。 jQuery 库包含以下特性： HTML 元素选取 HTML 元素操作 CSS 操作 HTML 事件函数 J...
jQuery 尺寸操作 与 位置操作 【后附本章案例】
weixin_52212950的博客
05-07 1619
🧡🧡🧡 原生 JS 学习中，我们学会了使用 offset 来获取元素距离 父元素（有定位的父元素） 或 文档元素 上（offsetLeft）左（offsetTop）的距离，还学会了使用 offsetWidth 来获取元素的尺寸，以及 scroll 事件中的scrollTop 卷上去头部尺寸的方法等等。jQuery 里也封装了一系列方法来完成 元素尺寸 以及 位置 的操作，学会了这个，我们便可以使用 jQuery 来完成以前用原生 JS 写过的京东放大镜，以及电梯导航等案例啦，大家下面跟我一起学习看看吧！..
jQuery之position()方法的具体使用
MOONCOM的博客
01-04 5785
问题描述：今天我在解决一个HTML块元素显示问题，需求是有一个操作按钮，点击操作按钮，便在该操作按钮左边 显示一个块元素，块元素中列出增删改查等操作，点击增删改查可完成该行数据的对应操作。 我的jsp代码如下：                 +操作                                      详细信息                      删除
jQuery 获取元素当前位置offset()与position()
weixin_30376509的博客
04-28 173
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; ...
jQuery.position()其实不可靠！
qq_24520459的博客
10-29 299
调用jQuery.position()方法会返回相对于父元素的位置，jQuery官方文档中描述说，它跟.offset()方法不一样，.offset()返回的是相对于doc...
jquery中position定位选项
yizhiduxiu11的专栏
10-12 4885
官方参考http://jqueryui.com/position/ .position() Categories: Method Overrides | Methods | Utilities .position( options )Returns: jQueryversion added: 1.8 Description: Position an el
jQuery操作css-position()与offset()方法的区别
zhuyunhe的专栏
05-31 1361
使用jQuery获取元素位置时，我们会使用position()或offset()方法， 两个方法都返回一个包含left属性和top属性的对象－左边距和上边距。 这两个方法返回的对象的不同点在于位置的相对点不同。 从图中我们可以大体看出两者的区别。position()获取相对于它最近的具有相对位置(position:relative)的父级元素的距离，如果找不到这样的元素，则返回相对于
Jquery .position和offset区别
細水、長流√的专栏
09-02 248
说明： position()获取相对于它最近的具有相对位置(position:relative)的父级元素的距离， 如果找不到这样的元素，则返回相对于浏览器的距离。 offset()始终返回相对于浏览器文档的距离，它会忽略外层元素 1》jQuery中offset()方法:获取或设置指定元素在视窗或文章的偏移位置; 语法：$(selector).offset(...
jQuery-UI拖拽特效
qq_33840688的博客
07-21 288
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="jquery-1.9.1.min.js"></script> <script type="text/javascript" src="jquery-ui.js"></s.
JQuery UI Draggable 插件详解及使用
"jQuery UI Draggable插件中文文档(原文翻译)" jQuery UI Draggable插件是用于使HTML元素变得可拖动的工具，允许用户通过鼠标轻松移动选定的DOM元素。这个插件使得交互式界面设计变得更加简单，适用于创建如日历、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值