大白的工作笔记 注册 | 登陆
浏览模式: 标准 | 列表全部文章

JQuery UI resizable 调整大小组件

  转载请注明文章来源自http://www.dabaii.com/ 

一天一个jQuery UI 组件,今天折腾 resizable 。resizable 是让对象拥有可调整大小的属性,类似于windows文件夹一样可以通过拖动边或者角来调整文件夹的大小。

要使用resizable ,需要应用一下文件:(呵呵,这个组件不再和之前2个组件有关联了。)

XML/HTML代码
  1. <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>  
  2. <script type="text/javascript" src="development-bundle/ui/ui.core.js"></script>  
  3. <script type="text/javascript" src="development-bundle/ui/ui.resizable.js"></script>  

属性:

alsoResize:
参数是选择器,参数所指的对象也会跟随调整大小对象一起进行大小改变。参数所指对象可以是调整大小对象内部元素 也可以是外部元素。

JavaScript代码
  1. $("#resizable").resizable({ alsoResize: '.other' });  

animate:
调整大小动作发生在调整以后。以渐进加速方式实现动作。也就是说 你在调整的时候对象的大小是不会变化的,当你松开鼠标的时候才开始发生大小变化,变化的过程并不是匀速的。参数是布尔值。

animateDuration:
与上面一个参数配合用,设置多少秒类完成大小变化动作。单位是毫秒。 参数也可以为内置的字符串 'slow', 'normal'

animateEasing:
这个属性我很纳闷,应为我在官方api上面只看到一个参数 就是swing,而默认值就是swing。

JavaScript代码
  1. $("#resizable").resizable({ animate: true, animateDuration: 500,animateEasing: 'swing'});  

aspectRatio:
设置为true按比例调整大小,可以设置为比例制 如1/2 或者0.5.  

JavaScript代码
  1. $("#resizable").resizable({ aspectRatio: .5});  

autoHide:
自动隐藏右下角调整标识...在加载ui的时候,右下角会有一个类似于QQ右下角那种3斜杠。这个属性值在设置鼠标没有放在边上的时候 不显示这个。

JavaScript代码
  1. $("#resizable").resizable({ autoHide: true });  

cancel:
属性是选择器,所选择的对象不能调整。比如说用 class选择器选择了一批标签,但是我希望这批标签里面的 id是#a的不能调整。

JavaScript代码
  1. $(".resizable").resizable({ cancel: '#a' });  

containment:
限定可调整区域。参数'parent', 'document',也可以是选择器或者标签名。比如说我把调整区域限制在父标签,那么这个元素最大只能调整成父标签的大小。

JavaScript代码
  1. $(".resizable").resizable({ containment: 'parent' });  

 delay:
延迟多少毫秒执行调整事件。这样可以有效的避免因为不经意的操作而误调整了窗口。也就是说 你鼠标放在边或者角上的时候需要按下去停留一定的毫秒才能执行调整事件。

JavaScript代码
  1. $(".resizable").resizable({ delay: 2000 });  //测试用的,按下去2秒后才能调整,否则无效
distance:
延迟多少像素执行调整事件,作用和上面的参数一样,都是为了防止误操作。 鼠标按下去移动参数像素以后才能触发调整事件。
JavaScript代码
  1. $(".resizable").resizable({ distance: 200 });  

ghost:
设置为true以后,调整时,原始对象并不发生变化,而是复制一份原始对象,并且把它半透明,来显示你调成的大小,鼠标松开后,半透明的复制对象消失,原始对象直接显示调整后的大小。 

JavaScript代码
  1. $('.selector').resizable({ ghost: true });  

grid:
设置调整大小时候x y 轴每次移动多少像素。

JavaScript代码
  1. $('.selector').draggable({ grid: [50, 20] });  

handles:
可实行调整的边和角。默认只有 [右边,下边,右下角]可以调整。 可以根据参数{ n, e, s, w, ne, se, sw, nw }自由搭配。

JavaScript代码
  1. $('.selector').resizable({ handles: 'n, e, s, w' });  

helper:
拖拽组件也有这个属性,但是在这个里面 效果不同,这个里面helper的参数是一个字符串(class名字),当调整发生时,会有类似ghost的效果发生,只不过ghost效果所复制的是已经定义好的,而这里可以自己根据css定义复制出来的 原始对象。同样,在调整结束后,这个复制对象会消失。

JavaScript代码
  1. $('.selector').resizable({ helper: 'ui-state-highlight' });  

maxHeight:
maxWidth:
minHeight:
minWidth:
这2个属性,等同于css里面的 对应属性。实际上,如果不考虑ie6的话,在css定义 这些属性比在jQ里面定义这些属性效率更好。

JavaScript代码
  1. $('.selector').resizable({ maxWidth: 250 });  

 

方法,和皮肤 很简单 看官方的很容易明白 这里我就不记录肋

 

Tags: jquery ui, resizable, 调整大小

JQuery UI droppable 放置组件

转载请注明文章来源自http://www.dabaii.com/ 

 一天一个jQuery UI 组件,今天折腾 Interactions 下面的droppable ,这个组件我一直不知道知道用什么中文名来描述它,这个组件的效果是当一个拖拽对象(draggable)拖拽到droppable的时候,droppable 可以发生一系列变化。所以我暂且把droppable 叫做放置对象。他是用来方式拖拽对象。

要使用放置对象,需要应用一下文件: (比昨天说的 拖拽对象多了一个ui.droppable.js

XML/HTML代码
  1. <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>  
  2. <script type="text/javascript" src="development-bundle/ui/ui.core.js"></script>  
  3. <script type="text/javascript" src="development-bundle/ui/ui.draggable.js"></script>  
  4. <script type="text/javascript" src="development-bundle/ui/ui.droppable.js"></script>  

放置对象没有拖拽对象那么多属性:

accept:
放置对象可接受的拖拽对象名字。可以为拖拽对象的ID 标签或者通配符。默认是接受所有拖拽对象。

XML/HTML代码
  1. //只接受class名字为special'的拖拽对象   
  2. $('.selector').droppable({ accept: '.special' });   
  3. //接受所有对象(默认)   
  4. $('.selector').droppable({ accept: *});  

activeClass:
拖拽对象开始被拖拽时(正在进行时),放置对象添加样式变化,拖拽结束或触发hoverClass自动移除这个样式。

hoverClass:
拖拽对象拖拽进行过程中,如果拖拽对象 的x轴或者y轴 有50%(根据tolerance参数来定义的)在放置对象的区域内,那么放置对象就添加这个样式,移除自动释放这个样式。

addClasses:
功能和拖拽对象的addClasses一样。请参阅。

greedy:
翻译是防止传递参数,具体没弄明白。

tolerance:
定义拖拽对象于放置对象发生交集的面积为多少时,才出发放置成功事件。

XML/HTML代码
  1. $('.selector').droppable({ tolerance: 'fit' });   
  2. //参数为字符串。   
  3. //fit: 拖拽对象全部放在放置对象里面   
  4. //intersect: 默认值, 拖拽对象x轴或者y轴有50%在放置区   
  5. //pointer: 鼠标指针在房子区域   
  6.  //touch: 拖拽对象和放置对象发生接触的时候。    

事件:

 

JavaScript代码
  1. $("#droppable").droppable({   
  2.             //开始拖拽事件时触发(鼠标点击(没松开)但是没拖动不会触发)   
  3.             activate: function(event, ui) { $(this).addClass('ui-state-highlight').find('p').html('a'); },   
  4.             //结束拖拽事件时触发(鼠标释放)   
  5.             deactivate: function(event, ui) { $(this).addClass('ui-state-highlight').find('p').html('b');},   
  6.             //拖拽至放置对象并且触发放置成功(更具tolerance判断放置条件)时触发   
  7.             over: function(event, ui) {  $(this).addClass('ui-state-highlight').find('p').html('c');},   
  8.             //从放置成功区域移动到放置失效区域时触发的事件。   
  9.             out: function(event, ui) {  $(this).addClass('ui-state-highlight').find('p').html('d');},   
  10.             //在放置成功区域结束拖拽事件时触发。 貌似在有deactivate事件存在的情况下,drop是不会被触发的   
  11.             drop: function(event, ui) { $(this).addClass('ui-state-highlight').find('p').html('e'); }   
  12.         });  

方法不说了,比较容易理解。

Tags: droppable, jquery ui, 放置组件, 拖拽, draggable

jQuery UI 拖拽Draggable

转载请注明文章来源自http://www.dabaii.com/ 

jQuery UI 很不错,最近在学习笔记一下,一下学习资料仅供参考,由于本人也是初学,对所有代码以及说明不做100%正确保证。请根据实际情况和现实理解和使用。如果发现错误,请告诉我,谢谢。

Draggable拖动是jQ UI 的第一个例子。今天学习了下,由于英文阅读能力有限 有些属性没弄明白,以后补充。

初始化框架,引用对应ui库文件

 

JavaScript代码
  1. <link type="text/css" href="../development-bundle/themes/ui-lightness/ui.all.css" rel="stylesheet" />   
  2. <script type="text/javascript" src="../js/jquery-1.3.2.min.js""></script>  
  3. <script type="text/javascript" src="../development-bundle/ui/ui.core.js"></script>  
  4. <script type="text/javascript" src="../development-bundle/ui/ui.draggable.js"></script>  

 

dom加载完以后执行绑定。 

XML/HTML代码
  1. <script type="text/javascript">  
  2.     $(function() {   
  3.         $("#draggable").draggable();   
  4.     });   
  5. </script>  

现在基本的拖拽已经可以实现了。 只要你在页面创建一个 以 #draggable命名的标签就ok了

draggable方法有很多参数,今天我瞎摸弄明白了一下几个:

 

addClasses:
如果设置成false,将不添加ui-draggable这个class.当调用 .draggable() 初始化上百个元素时,可以优化性能(【王子很坏】提供翻译)

appendTo :
进行拖拽时,被传递或被appendTo选项选择的元素将被当做draggable helper的容器,默认情况下,helper被追加到那个draggable元素相同的容器中((【王子很坏】提供翻译 , 这个属性我测试没成功。研究中)

axis:
拖拽动作只在 对应的轴向上移动。 参数x 或 y

cancel :
当拖拽对象是cancel说设置的标签或者对象时候,拖拽无效

containment:
限制拖拽对象在参数设置区域,参数可以为 标签 对象 或者 是[x1,y2,x2,y2]的像素区域

cursor:
设置 拖拽动作鼠标样式

cursorAt:
设置拖拽动作发生鼠标所在位置 参数为 { cursorAt: { left: 5 } }

delay:
拖拽动作延迟多少毫秒后响应 参数 毫秒

distance:
拖拽动作离开拖拽对象 一定像素以后 拖拽发生 参数数值

grid :
拖拽动作发生后 造成 对其网格效果, 其效果是每次移动 固定像素距离,参数为 [20, 20]

handle:
设置拖拽对象里面可实现拖拽动作的对象。参数是选择器 类似于浏览器一样,只能通过顶部蓝色条拖拽,但是拖动的是整个浏览器。

helper :
拖拽动作发生时 原始对象不动,复制一个对象给拖拽事件 对象在拖拽结束后是否保存在结束位置取决于参数   'original', 'clone', Function. 参数为function的时候不许返回一个 dom标签。

iframeFix :
防止应为iframes 的存在导致拖拽在中途丢失

opacity :
设置拖拽时的透明度 参数浮点型  1.00-0.00 拖拽结束后 透明度回复初始状态

scroll :
设置拖动对象被拖动时,是否允许拖出前容器(浏览器)显示区域(也就是说触不发auto-scrolls *关于auto-scrolls请看后面的解释*)。设置为false ,拖动对象碰到边框的时候容器窗口不会随着碰撞移动主体窗口。 注意,这个经过我测试,设置为false 一样会产生滚动条。

scrollSensitivity :
设置拖拽对象被拖拽时与容器发生碰撞的响应距离。貌似这样解释不好理解,通俗的说,就是当你碰到边框的多少像素范围内就发生auto-scrolls事件。

scrollSpeed:
当拖拽对象和浏览器边发生碰撞时,容器每次移动主体窗口的距离。

revert :
设置拖拽事件执行完毕后拖拽是否生效,如果不生效那么将以动画方式返回到拖拽对象初始化位置。参数为逻辑值或者字符串'valid', 'invalid'

revertDuration :
在revert事件执行时候,设置以动画返回初始化位置的速度。参数为 数值毫秒。在没有设置revert的情况下 改属性没意义。

snap:
拖拽对象设置该属性以后,在2个拖拽对象即将发生接触时,拖拽对象会自动吸附到相互的边上。类似于磁铁效果或者ps里面的对齐参考。参数为逻辑值, 只有2个或者2个以上对象设置了该属性才能相互发生作用。

snapMode :
拖拽对象相互之间的吸附模式。参数为'inner', 'outer', 'both'。 默认值是both。

snapTolerance:
拖拽对象相互之间发生吸附模式的作用范围,可以理解为 磁铁的磁力, 参数为 像素单位。

stack :
当你有多个拖拽对象的时候,你可以使用此参数把他们设置为一个组,然后在这个参数里面有可以定义最小z轴,这些拖拽对象,将不再按照原始z轴层叠,而是按照最后点击循序来层叠。类似于windows多个文件夹窗口一样的层叠。 参数方式{ stack: { group: 'div', min: 50 }}。

zIndex 拖动事件触发时候 z轴改成对应参数,拖拽结束,z轴还原。 

注:【aoto-scroll  是自动滚动,也就是说 拖拽对象在碰撞到边框的时候,容器(浏览器)滚动条会自动延伸滚动条 并且屏幕像碰撞方向偏移~】

 事件:

拖拽有3个事件,和4个参数 详情可以直接看官方aip那些不用详细说明。

基本参数写法

JavaScript代码
  1. $("#draggable").draggable({ opacity: 0.35 });  

如何获取参数?

组件提供get和set方法来获取和设置参数。

以上面设置透明度为例:

JavaScript代码
  1. //getter   
  2. var opacity = $('.selector').draggable('option''opacity');   
  3. //setter   
  4. $('.selector').draggable('option''opacity', 0.35);  

 

以上只是draggable的部分内容,明天更新剩下的。如果有兴趣请直接访问

http://jqueryui.com/demos/draggable/

唉都怪英语没学好。痛苦中~~~

零基础学java

最近在学习java,但是如何快速高效率的学习是个问题。每个人接收新事物的方式都不同,我属于自由在折腾中才能学会的人。从以前学习css,js来看,都是需要折腾才能把东西记住的。书看了真的不是那么容易记忆的。

首先折腾的第一个程序:

实现这个效果

    *
  ***
*****

幸亏在之前自习看过js的面向对象编程方式,要不然对java的代码估计会一头雾水。很多java权威书都是基于你已经理解面向对象编程的基础上去写的,怪不得我之前看书看得云里雾里。

好了现在折腾这个效果:

1.建立一个demo的包
2.建立一个Yhsjx.java 的类(杨辉三角 其实这个效果只不过是看上去像杨辉三角而已 ,杨辉三角比这个复杂多了)
写第一段代码:

Java代码
  1. package demo;   
  2.   
  3. public class Yhsjx {   
  4.     public static void main(String[] args) {   
  5.         // TODO Auto-generated method stub   
  6.   
  7.     }   
  8.   
  9. }  

这个就是java的基本代码。我站在从前端角度走过来的视角来看这个问题,首先,应为前端角色接触的js大部分都是流程编程,所以看到这个会觉得奇怪,为啥代码要匡到这些代码里面,不框这里面不行么。 框在这里面是干嘛用的。 其实这是我看到这个基本代码的一系列问题。

但是现在我是初学,依葫芦画瓢,这些问题都以后再理解,只要记住你代码就只能写在 这个基本代码里面。就可以了。

 

Java代码
  1. package demo;   
  2.   
  3. public class Yhsjx {   
  4.     public static void main(String[] args) {   
  5.         String c = "*";   
  6.         for(int i =0; i < 3; i++){   
  7.             System.out.println(c);   
  8.             c+="**";   
  9.         }   
  10.     }   
  11. }  

这个输出结果是:

*
***
*****

这个输出在哪里? 在没学之前我就根本不知道这些打印是输出在那里的。像js里你可以输出在页面,也可以alert弹出。 在java里面这些输出会在console里面输出,也就是说他有一个现实信息的控制台。输出的信息在里面,另外错误信息 和警告都会在里面。

现在我们输出的 和我们想要的结果不一样,但是这个是最基础的 东西,所以解释下代码。首先定义一个变量 c 类型是String ;这个和js不一样,js是弱类型的,所有变量都可以直接用var 并以,但是java不行,你要用什么类型就得用什么关键字定义。 应为我输出的是字符,最开始我是用char来定义,写成 char c = "*";结果报错了,后来询问了才明白char类型定义的单个要用单引号......额在java里面还区分单引号和双引号的。后来jond(我公司的java程序员)让我改成用String类型。

然后是一个for循环,应为我要输出3行,所以我就循环输出咯。 这个循环结构和 js 的是一样的,不做多说。

最后我们在循环体里面打印字符,然后累加。

现在要走的就是把这些*对其。对其的话最简单就是补充空格了。做前端的千万别想着加一个css的居中属性就解决了,控制台是输出信息的,不能用css格式化·····

加空格就是算法的问题了, 我们要在第一行加2个空格,第2行加1个空格,第3行家0个空格。

 

Java代码
  1. package demo;   
  2.   
  3. public class Yhsjx {   
  4.     public static void main(String[] args) {   
  5.         String c = "*";   
  6.         String k = "";   
  7.         for(int i = 0; i < 3; i ++){   
  8.                
  9.             System.out.println(k + c);   
  10.             k += " ";   
  11.             c += "**";   
  12.         }   
  13.     }   
  14. }  

输出结果:

*
 ***
  *****

显然,空格的输出是反了的, 我下想要的是 第一行2个,第三行0个,结果反过来了。 应为只有一个循环。所以我没有想到好的方法在一个循环里面解决这个问题。所以我想在这个循环里面存储数组,在下一个循环里面显示数据。

 

XML/HTML代码
  1. package demo;   
  2.   
  3. public class Yhsjx {   
  4.     public static void main(String[] args) {   
  5.         String a = "";   
  6.         String b = "*";   
  7.         String[] k = new String[3];   
  8.         String[] c = new String[3];   
  9.         for(int i = 0; i < 3; i ++){   
  10.             k[i] = a;   
  11.             c[i] = b;   
  12.             a += " ";   
  13.             b += "**";   
  14.         }   
  15.         for(int i = 0;i < 3;i++){   
  16.             System.out.println(k[(3-1)-i]+c[i]);   
  17.         }   
  18.     }   
  19. }  

    *
  ***
*****

现在就ok了哦

呵呵,下一步需要把 行数 用参数来调用。 所以需要把这个算法写成一个方法...现在要工作有空再写。

 

 

Tags: java学习, 学java, 如何学java

作为方法的函数

起因:css森林的robin 在看js权威指南的时候遇到了这个困惑,在写p143页面的demo代码的时候 搞不清为啥demo要这样执行。

JavaScript代码
  1. <script>   
  2.     var o={ o1:1,   
  3.             o2:1,   
  4.             of:function(){   
  5.                     this.result = this.o1 + this.o2;       
  6.                 }   
  7.         };         
  8.         o.of();//为啥要执行这个   
  9.         alert(o.result);   
  10. </script>  

为什么要先执行一次 of();

只有调用了of 方法才有result属性.js属性是可以动态绑定的,o对像本身没有result属性.只有o1,o2属性.当调用of方法后.才会给o对像添加result属性.

 

 

前端开发页面性能优化304换成cache

起因:

在去年的深圳举行的第二届WebRebuild年会上面彪叔提及过如何通说设置服务来实现加速页面载入,主要把304请求转换为Cache请求。不过当时因为大部分再坐的都是页面重构,对服务器服务方面了解甚少,也就没有详细讲。我也没太在意。

转折:

昨天在群里和偷米饭扯淡的时候突然提及到这个问题,首先他告诉我304请求实际上是 服务器告诉我请求的文件已经在本机上有了,请从本机获取。而Cache请求是直接从本机获取。 所以速度方面会有提升。

问题:

1.如何让请求从304变换成Cache

2.如何保证 更新以后,请求能判断是否有新版本。

解决方案:

1.根据偷米饭的信息提供,需要设置apache的配置文件来实现。

2.设置文件的时间戳。以达到更新文件以后,就版本文件和新版本文件 文件名不一样,达到从新请求文件目的。

Apache配置代码:

 

XML/HTML代码
  1. Apache客户端缓存设置   
  2. <IfModule mod_expires.c>    
  3. ExpiresActive on   
  4. ExpiresDefault "now plus 1 day"   
  5. ExpiresByType image/x-icon "access plus 10 year"   
  6. ExpiresByType image/gif "access plus 1 month"   
  7. ExpiresByType image/jpeg "access plus 1 month"   
  8. ExpiresByType text/css "now plus 1 month"   
  9. ExpiresByType text/javascript "now plus 1 month"   
  10. ExpiresByType application/x-javascript "now plus 1 month"   
  11. ExpiresByType textml "now plus 5 minutes"   
  12. ExpiresByType text/plain "now plus 1 month"   
  13. ExpiresByType image/js "access plus 1 month"   
  14. ExpiresByType application/x-shockwave-flash "access plus 1 week"   
  15. <FilesMatch "\.(gif|jpe?g|png)$">  
  16. Header set Cache-Control "max-age=604800"   
  17. Header unset ETag   
  18. </FilesMatch>  
  19. </IfModule>  
  20.   
  21. FileETag none   
  22.   
  23. <ifmodule mod_deflate.c>  
  24. DeflateCompressionLevel 9   
  25. AddOutputFilterByType DEFLATE textml text/plain text/xml application/x-httpd-jsp   
  26. AddOutputFilter DEFLATE js css   
  27. </ifmodule>  
  28.   
  29. <Location "/">  
  30. SetOutputFilter DEFLATE   
  31. BrowserMatch ^Mozilla/4 gzip-only-textml   
  32. BrowserMatch ^Mozilla/4\.0[678] no-gzip   
  33. BrowserMatch \bMSIE !no-gzip !gzip-only-textml   
  34. SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip dont-vary   
  35. Header append Vary User-Agent env=!dont-vary   
  36. </Location>  

如果我的说法有错误,麻烦看到的的大侠及时告知我。另外我不保证我阐述的一定是正确的,改文章只做笔记用,切勿当成真理。

Tags: 304, cache, 优化

继续 给rain写的选项列表模拟

有是给rain写的列表。笔记一下。 一直想给编辑器加一个直接运行代码的按钮,但是确实能力有限不知道怎么加。有不愿去搜索。毕竟blog是做笔记的地方。不是给别人show的,所以给为看的朋友请见谅 麻烦复制到 DW里面 保存看效果。 可以使用 /d 来替换所有的项目列表数字符号。之前我的文章里面有提到过。

这个选项列表要求大概是这样的, 点击标签然后 弹出列表,把列表项目最长的一项的宽度 给 点击标签。并且把文本值给过去。同事关闭列表。

XML/HTML代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>大白奥特曼</title>  
  6. <style>  
  7. #s { border:#666 solid 1px; width:50px; line-height:18px; cursor:pointer; }  
  8. #o { display:none; border:#666 solid 1px; padding:0; margin:0; list-style:none; position:relative; top:-1px; }  
  9. #o a { display:block; height:18px; line-height:18px; overflow:hidden; text-decoration:none }  
  10. #o a:hover { background: #039; color:#FFF; }  
  11. </style>  
  12. </head>  
  13. <body>  
  14. <div id="s">请选择</div>  
  15. <ul id="o">  
  16.   <li><a href="#"><span>dabai</span></a></li>  
  17.   <li><a href="#"><span>奥特曼</span></a></li>  
  18.   <li><a href="#"><span>db.chen</span></a></li>  
  19.   <li><a href="#"><span>奥特曼打怪兽</span></a></li>  
  20.   <li><a href="#"><span>dabaii.com</span></a></li>  
  21. </ul>  
  22. <script>  
  23. function operationList(objS,objO,longestTag){  
  24.     //tagD操作对象 tagU列表 tagO宽度对象 tagL宽度对象长度 tagW宽度对象存储宽度数组 displayState列表默认显示属性  
  25.     var tagD = document.getElementById(objS);  
  26.     var tagU = document.getElementById(objO);  
  27.     var tagO = tagU.getElementsByTagName(longestTag);    
  28.     var tagL = tagO.length;    
  29.     var tagW = [];    
  30.     var displayState;  
  31.   
  32.     //获取默认显示属性  
  33.     if(document.all){  
  34.         displayState = tagU.currentStyle.display;  
  35.     }  
  36.     else{  
  37.         displayState = window.getComputedStyle(tagU,null).display;   
  38.     }      
  39.       
  40.     //操作对象绑定点击事件 打开列表  
  41.     tagD.onclick = function(){  
  42.         if(displayState == 'none'){  
  43.             tagU.style.display = 'block';  
  44.         }  
  45.     }  
  46.       
  47.     //列表项目 绑定点击事件,设置列表项目文字给操作对象  
  48.     for (var i = 0; i < tagL; i++){    
  49.         tagO[i].parentNode.onclick = (function(){  
  50.             var outText = function(){  
  51.                 tagD.innerHTML = this.innerHTML;  
  52.             }  
  53.             return outText;  
  54.         })()  
  55.     }  
  56.   
  57.     //列表绑定事件 获取列表项目最大宽度 并设置给操作对象,关闭列表  
  58.     tagU.onclick = function(){  
  59.         for (var i = 0; i < tagL; i++){    
  60.             tagW[i] = tagO[i].offsetWidth;   
  61.         }  
  62.   
  63.         //列表项目排序  
  64.         tagW.sort(function(x1,x2){    
  65.             if(x1 > x2) {    
  66.                 return 1;    
  67.             }    
  68.             else if(x1 = x2){    
  69.                 return 0;    
  70.             }    
  71.             else{    
  72.                 return -1;    
  73.              }  
  74.         }).reverse();  
  75.       
  76.     tagD.style.width = tagW[0]+'px';  
  77.     tagU.style.display = 'none';            
  78.     }  
  79. }  
  80. operationList('s','o','span')  
  81. </script>  
  82. </body>  
  83. </html>  

 

 

Tags: 模拟列表, css森林

获取一组标签中的最宽一个 排序

今天 ,群里的rain.kx 又让我帮他弄东西。 他想模拟 下拉菜单。 但是有不能定死下拉菜单宽度,所以希望能通过js获取模拟的下拉框的宽度。

xhtml

XML/HTML代码
  1. <ul>  
  2. <li><span>dabai</span></li>  
  3. <li><span>奥特曼</span></li>  
  4. <li><span>db.chen</span></li>  
  5. <li><span>奥特曼打怪兽</span></li>  
  6. <li><span>dabaii.com</span></li>  
  7. </ul>  
js

JavaScript代码
  1. <script>  
  2. (function(tag){  
  3.     var tagO = document.getElementsByTagName(tag);  
  4.     var tagL = tagO.length;  
  5.     var tagW = [];  
  6.     for (var i = 0; i < tagL; i++){  
  7.             tagW[i] = tagO[i].offsetWidth;  
  8.         }  
  9.     tagW.sort(function(x1,x2){  
  10.                     if(x1 > x2) {  
  11.                         return 1;  
  12.                         }  
  13.                         else if(x1 = x2){  
  14.                             return 0;  
  15.                             }  
  16.                             else{  
  17.                                 return -1;  
  18.                                 }  
  19.                     }).reverse();  
  20.     alert(tagW[0]);  
  21.           })('span')  
  22. </script>  

 

Tags: js, 帮助, css森林

关于前几天发现的bug的新更新

前阵子发现了 这个问题
http://www.dabaii.com/?action=show&id=66

之后写的解决方案
http://www.dabaii.com/?action=show&id=67

解决方案看上去比较ok拉。但是 实际上 由于图片使用了

CSS代码
  1. position:relative;z-index:-1;  
这2个属性。所以 他不会受到父标签
CSS代码
  1. overflow:hidden;  
的控制。

也就是说  图片如果比外面的标签大 就不会被截取。目前还没有想到办法解决。

Tags: css, bug, ie, 更新

js折叠菜单

群里的rain.kx 需要一个做类似于我的电脑右侧的那些 折叠菜单.

大小: 26.06 K
尺寸: 203 x 349
浏览: 58 次
点击打开新窗口浏览全图

 

代码结构(rain.kx 提供的需求结构)

 

XML/HTML代码
  1. <div class="box">  
  2.         <div class="box_top"><h2>统计报表</h2><a href="#" class="operation">操作按钮</a></div>  
  3.         <ul class="box_content">  
  4.             <li><a href="">交班记录</a></li>  
  5.             <li><a href="">任意时间段收入报表</a></li>   
  6.             <li><a href="">按班次查收入报表</a></li>   
  7.             <li><a href="">上机时长统计报表</a></li>   
  8.         </ul>  
  9. </div>  

 

操作a按钮 ,实现打开和关闭ul

js

JavaScript代码
  1. <script>  
  2. (function operationBox (oTagName,OTagClass,oTagBoxClass){  
  3.     var oTag = document.getElementsByTagName(oTagName);  
  4.     for (var i = 0; i < oTag.length; i ++ ){  
  5.             if(oTag[i].className == OTagClass){  
  6.                  oTag[i].onclick = (function(){        
  7.                     var sayAlert = function() {   
  8.                         var oTagX = this.parentNode.parentNode.childNodes;  
  9.                         for (var ii = 0; ii < oTagX.length; ii++) {    
  10.                             if (oTagX[ii].className == oTagBoxClass){   
  11.                                if(oTagX[ii].style.display !="none") {  
  12.                                     oTagX[ii].style.display = 'none';  
  13.                                 }  
  14.                                 else{  
  15.                                     oTagX[ii].style.display = "block";  
  16.                                 }  
  17.                             }   
  18.                          }                 
  19.               }         
  20.           return sayAlert;         
  21.             })()  
  22.         }  
  23.         }  
  24.     })('a','operation','box_content')  
  25. </script>  
分析,首先 获取操作的a标签数组。然后获取和a标签在同一个父元素下面的ul列表。给a绑定事件。判断列表的状态。 每次点击翻转类表状态就ok了。由于 公司装的 系统是2003 我还没找到ftp软件 所以demo暂时不上传。sorry

 

Tags: js, 折叠菜单, css森林

CSS裸奔日

现在什么都高一个纪念日出来,搞得像一年到头都在过节一样。

今天是css裸奔日。所以把css给注释掉了。纪念一下自己 也是 一个web工作者,赶紧加入裸奔把,让这种专业文化发展起来。

Tags: css裸奔, 纪念, 专业文化

解决昨天发现的问题

 

XML/HTML代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>aoteman</title>  
  6. <style type="text/css" media="screen"><!--   
  7. a{display:block;}   
  8. span { display:block; width:300px; height:300px; cursor:pointer;  }   
  9. img{position:relative;z-index:-1; }   
  10. -->  
  11. </style>  
  12. </head>  
  13.   
  14. <body>  
  15. <a href="http://www.baidu.com" title=""><span><img src="http://www.baidu.com/img/baidu_logo.gif" alt="" /></span></a>  
  16. </body>  
  17. </html>  

 

昨天哪个问题 谢谢ashung 提供的思路. 

Tags: 链接, 问题

Records:71123456