手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜的Vultr , 注册 | 登陆
浏览模式: 标准 | 列表2024年11月的文章

JavaScript类型总览(图) --来自周爱民的博客

一张图,来自周爱民的博客。
原文地址是:http://blog.csdn.net/aimingoo/article/details/6676530
用周爱民的话来说,这张图是:来自于《JavaScript语言精髓与编程实践》第三章P184页。
第二版说是会改,那么,在没改之前可以参考一下:
大小: 98.67 K
尺寸: 500 x 375
浏览: 1399 次
点击打开新窗口浏览全图
文末还提到了一些补充一下图中用到的概念:

XML/HTML代码
  1. 1、内置(Build-in)对象与原生(Naitve)对象的区别在于:前者总是在引擎初始化阶段就被创建好的对象,是后者的一个子集;而后者包括了一些在运行过程中动态创建的对象。  
  2.   
  3. 2、引擎扩展对象是一个并不太大的集合,一般来说比较确定,它们也属于引擎的原生对象(但不属于ECMA规范的原生对象)。  
  4.   
  5. 3、宿主对象不是引擎的原生对象,而是由宿主框架通过某种机制注册到JavaScript引擎中的对象。  
  6.   
  7. 4、一些宿主会把自己提供的对象/构造器也称为“原生对象”,例如Internet Explorer 7就把它提供的XMLHttpRequest()称为原生的——与此相对的是在它的更早先版本中通过“new ActiveXObject('Microsoft.XMLHTTP')”这样的方法创建的对象。这种情况下,读者应注意到“宿主的原生对象”与“引擎的原生对象”之间的差异。  

 

HTML5拖放上传

html5中有一个特性就是以前一直常说的拖放上传,其实这个功能要实现的话真的不太难,但我对于DOM的操作并不是特别了解,因此我找了一些资料做备份
1、xheditor中的代码
2、html5的一些教程

xheditor中的代码很少,只有区区几行:

JavaScript代码[jBody是基中的一个元素对象,类似于$('#xxxdiv')]
  1. jBody.bind('dragenter dragover',function(ev){var types;if((types=ev.originalEvent.dataTransfer.types)&&$.inArray('Files', types)!==-1)return false;}).bind('drop',function(ev){  
  2.     var dataTransfer=ev.originalEvent.dataTransfer,fileList;  
  3.     if(dataTransfer&&(fileList=dataTransfer.files)&&fileList.length>0){  
  4.         var i,cmd,arrCmd=['Link','Img','Flash','Media'],arrExt=[],strExt;  
  5.         for(i in arrCmd){  
  6.             cmd=arrCmd[i];  
  7.             if(settings['up'+cmd+'Url']&&settings['up'+cmd+'Url'].match(/^[^!].*/i))arrExt.push(cmd+':,'+settings['up'+cmd+'Ext']);//允许上传  
  8.         }  
  9.         if(arrExt.length===0)return false;//禁止上传  
  10.         else strExt=arrExt.join(',');  
  11.         function getCmd(fileList){  
  12.             var match,fileExt,cmd;  
  13.             for(i=0;i<fileList.length;i++){  
  14.                 fileExt=fileList[i].fileName.replace(/.+\./,'');  
  15.                 if(match=strExt.match(new RegExp('(\\w+):[^:]*,'+fileExt+'(?:,|$)','i'))){  
  16.                     if(!cmd)cmd=match[1];  
  17.                     else if(cmd!==match[1])return 2;  
  18.                 }  
  19.                 else return 1;  
  20.             }  
  21.             return cmd;                   
  22.         }  
  23.         cmd=getCmd(fileList);  
  24.         if(cmd===1)alert('上传文件的扩展名必需为:'+strExt.replace(/\w+:,/g,''));  
  25.         else if(cmd===2)alert('每次只能拖放上传同一类型文件');  
  26.         else if(cmd){  
  27.             _this.startUpload(fileList,settings['up'+cmd+'Url'],'*',function(arrMsg){  
  28.                 var arrUrl=[],msg,onUpload=settings.onUpload;  
  29.                 if(onUpload)onUpload(arrMsg);//用户上传回调  
  30.                 for(i in arrMsg){  
  31.                     msg=arrMsg[i];  
  32.                     url=is(msg,'string')?msg:msg.url;  
  33.                     if(url.substr(0,1)==='!')url=url.substr(1);  
  34.                     arrUrl.push(url);  
  35.                 }  
  36.                 _this.exec(cmd);  
  37.                 $('#xhe'+cmd+'Url').val(arrUrl.join(' '));  
  38.                 $('#xheSave').click();  
  39.             });  
  40.         }  
  41.         return false;  
  42.     }  
  43. });  

也有这样的:HTML5拖放(Drag&Drop)API详细介绍和示例,当然这里我就不多贴代码了。不过文中最后一段是告诉我们有哪些事件可以用:

可以使用的新事件一共有这些:

dragstart
A drag has been initiated, with the dragged element as the event target.
drag
The mouse has moved, with the dragged element as the event target.
dragenter
The dragged element has been moved into a drop listener, with the drop listener element as the event target.
dragover
The dragged element has been moved over a drop listener, with the drop listener element as the event target. Since the default behavior is to cancel drops, returning false or calling preventDefault() in the event handler indicates that a drop is allowed here.
dragleave
The dragged element has been moved out of a drop listener, with the drop listener element as the event target.
drop
The dragged element has been successfully dropped on a drop listener, with the drop listener element as the event target.
dragend
A drag has been ended, successfully or not, with the dragged element as the event target.

并且注意能够被拖拽的元素一定要有这个属性:draggable=”true”

在web上面拖放一直以来都是个难题(strange beast),但是至少现在我们有一堆丰富的API了…. 所以也许这个方式会开始大行其道呢?

 

Tags: xheditor

昨天出去喝了杯咖啡

昨天。。。
大小: 39.67 K
尺寸: 461 x 376
浏览: 1259 次
点击打开新窗口浏览全图
纯属娱乐

Tags: 鬼节, 中元

苹果官方:Introduction to WebKit DOM Programming Topics

这是一篇来自苹果官方的教程,原来我也没想到过,居然可以用JS来调用Object-C中的东东。其实想想,这应该是可以,要知道,象maxthon这些浏览器,可就是早就能够调用他们的核心组件了,当然,也是用JS的。firefox也是类似。。。所以Safari应该也是可以支持的。
官方文章地址是:http://developer.apple.com/library/mac/#documentation/AppleApplications/Conceptual/SafariJSProgTopics/WebKitJavaScript.html

看看他们是怎么写的,
Important: This is a preliminary document. Although it has been reviewed for technical accuracy, it is not final. Apple is supplying this information to help you adopt the technologies and programming interfaces described herein. This information is subject to change, and software implemented according to this document should be vetted against final documentation. For information about updates to this and other developer documentation, you can check the ADC Reference Library Revision List. To receive notification of documentation updates, you can sign up for a free Apple Developer Connection Online membership and receive the bi-weekly ADC News e-mail newsletter. See http://developer.apple.com/products/for more details about ADC membership.)

还有。。。

Who Should Read This Document?

This document is designed for a number of different audiences:

  • If you are a web content developer—developing web sites and embedded JavaScript applications—you should read about Safari’s JavaScript support and how scripts operate within WebKit-based applications.

  • If you are a Cocoa and WebKit developer, you should read about how to integrate JavaScript into your WebKit views and how to enhance your user experience in doing so.

  • If you are a Dashboard developer, you should read about integrating JavaScript into your widgets to provide a better user experience and more advanced features to your users.

Organization of This Document

The topic contains the following articles:

See Also

  • Safari HTML Reference provides descriptions of HTML tags, attributes, and other markup.

  • Safari CSS Reference provides descriptions of CSS properties and constants.

  • Safari Web Content Guide provides information about designing web content for iPhone.

  • Dashboard Programming Topics provides information on the technologies available to you when creating a Dashboard widget. Additional Dashboard documents and sample code can be found in the Reference Library > Apple Applications > Dashboard.

  • Apple JavaScript Coding Guidelines provides general tips about the JavaScript programming language.

  • The Reference Library > Apple Applications > Safari section of the ADC Reference Library provides useful information on WebKit, the technology that provides Apple’s JavaScript runtime.

果然还是官方的资料最多,NND,平时搜点资料都搜不到,还是官方给的方案最多啊。

Tags: javascript, object-c, dom, webkit

HTML中尺寸对比

做网页的时候,总是会用到一些尺寸,那么这些尺寸的规格又各是什么呢?这里有个表格可以做个简单的对比,可以让你在看到这些尺寸的时候能够知道如何进行换算成自己所熟悉的尺寸单位:

 

Points

Pixels

Ems

Percent

6pt

8px

0.5em

50%

7pt

9px

0.55em

55%

7.5pt

10px

0.625em

62.5%

8pt

11px

0.7em

70%

9pt

12px

0.75em

75%

10pt

13px

0.8em

80%

10.5pt

14px

0.875em

87.5%

11pt

15px

0.95em

95%

12pt

16px

1em

100%

13pt

17px

1.05em

105%

13.5pt

18px

1.125em

112.5%

14pt

19px

1.2em

120%

14.5pt

20px

1.25em

125%

15pt

21px

1.3em

130%

16pt

22px

1.4em

140%

17pt

23px

1.45em

145%

18pt

24px

1.5em

150%

20pt

26px

1.6em

160%

22pt

29px

1.8em

180%

24pt

32px

2em

200%

26pt

35px

2.2em

220%

27pt

36px

2.25em

225%

28pt

37px

2.3em

230%

29pt

38px

2.35em

235%

30pt

40px

2.45em

245%

32pt

42px

2.55em

255%

34pt

45px

2.75em

275%

36pt

48px

3em

300%


其实本来已经发表了,但不知怎么的,文章消失了。郁闷,只好重发一遍,其实也是给自己做个参考了。