威尼斯人线上娱乐

【威尼斯人线上娱乐】依照HTML5营造Web操作系统,JS仿iGoogle自定义首页模块拖拽特效的方法

1 2月 , 2019  

根据 HTML5 打造 Web 操作系统

2012/09/29 · HTML5,
JavaScript · 1
评论 ·
HTML5,
Javascript

来源:IBM
Developerworks

简介: Web
操作系统有着传统操作系统不可能比拟的优势,如可以随时随地使用其余极端进行走访,数据保存在服务器端,空间更大,数据安全性更好,可以选择服务器端的
CPU、内存等资源开展越发复杂的演算。但是当下的 Web 操作系统前端大多基于
Flex、Silverlight、ActiveX
插件等技术开发,存在着对运动装备的支撑性差,终端安全性差,开发难度大等缺陷。

HTML5 是下一代 web
语言的规范,具有包容性好,安全性高,效率充裕,开发便民等优点,越发适合如
Web 操作系统一类的富客户端网络应用的前端开发。本文将显得如何拔取 HTML5
提供的有余新技巧如:本地数据库、多线程开发、视频援救、离线编程等打造一个着力的
Web 操作系统。

简介

价值观的操作系统有着一些难以战胜的症结,如仅能在本地终端访问,或仅协理有限的长距离访问,限于本地终端的资源,统计能力薄弱,存储空间有限,紧缺有力的防火墙等一序列安全机制,安全性较差。鉴于以上缺点,Web
操作系统应运而生 – Web
操作系统是一种基于浏览器的杜撰的操作系统,用户通过浏览器可以在中间进行应用程序的操作,以及有关数据的积存。Web
操作系统提供的主干服务有文本文档的创始与存储,音频视频文件的播音与储存,提供对时间音讯的帮助等,更高级的服务则含有即时通信,邮件甚至游戏等劳务。Web
操作系统克制了观念操作系统的弱点,在互联网的支撑下,它可以在其它时刻,任什么地点点经由任何援救Web
的终端举行走访,可以采纳服务器端无限的乘除及存储资源,用户数量保存在服务器端,安全性较高。

威尼斯人线上娱乐 1

有关技能

近年来营造 Web 操作系统的前端技术紧要有 Flex、Silverlight、ActiveX
插件等等,它们各有局地优缺点。

Flex

Flex 是一个理想的富客户端应用框架,专注于页面展现,Adobe
专业维护,统一稳定,而且其脚本语言 ActionScript3
是面向对象的,十分适合程序员使用。缺点则是功耗高,占用带宽多,对运动应用的接济性差。

Silverlight

Silverlight 是由微软推出的用来跟 Flash 抗衡的
RIA(富互连网应用)解决方案,优点是所有硬件级的增速作用,但它近日仍不成熟,对非
Windows 系统的协理性并不够好,且学习难度较大。

ActiveX 插件

ActiveX 插件同样是微软生产的 RIA
解决方案,它是一个盛开的化解方案,能够包容七种语言,可是它的症结也是明摆着的,用户须求调整浏览器的平安等级并下载插件才能运行
RIA 应用,极大地降落了安全性。

HTML5

为推进 web 标准化运动的进化,W3C 推出了下一代 HTML 的业内 –
HTML5,为众多的信用社所援救,由此所有可以的前景。它有以下特点:首先,为增进用户体验,强化了
web 网页的表现品质;其次,为适应 RIA 应用的开拓进取,追加了地点数据库等 web
应用的意义;再次,由于中度标准化以及无数浏览器厂商的不竭援救,它的包容性和安全性非常高;末了它是一种不难的言语,容易为科普开发者通晓。更为难能可贵的是,由于节省和功耗低,在移动装备上
HTML5 将拥有更大的优势。由此更适合如 Web 操作系统一类的 RIA
应用的前端开发。

系统简介

本系统依据 HTML5 开发,利用 HTML5 引入的多样新技巧如拖拽
API、视频标签、本地数据库、draw
API、四线程开发、离线编程等提供了一个主干的 Web
操作系统环境,包罗了对桌面的协理、应用程序的支持,提供了一个简约的摄像播放器和记事本以及一个时钟,并对系统日志举办了记录,别的还提供了对离线状态的支撑。

桌面完结

系统对桌面的支撑重点不外乎应用程序图标的打开与拖拽,以及桌面的上下文菜单等。

桌面拖拽

桌面的布局由自然数额的 div
组成,它们根据程序依次排列在矩形的桌面上,为应用程序图标的开辟与拖拽提供了基本的协助。

清单 1. 创建 div

XHTML

var iconHolder = document.createElement(“div”); iconHolder.id =
‘iconHolder’ + i; iconHolder.className = “iconHolder”;
mainDiv.appendChild(iconHolder);

1
2
3
4
var iconHolder = document.createElement("div");
iconHolder.id = ‘iconHolder’ + i;
iconHolder.className = "iconHolder";
mainDiv.appendChild(iconHolder);

HTML5 提供了对 drag 事件的援助,大大简化了贯彻拖拽的难度。通过对
dragstart 事件的监听,将被拖拽的应用程序图标所在的 div
记录下来,作为拖拽的源。

清单 2. 拖拽协理

XHTML

iconHolder.add伊夫ntListener(“dragstart”, function(ev) { var dt =
ev.dataTransfer; dt.setData(“text/plain”, ev.currentTarget.id);//
记录被拖拽图标的 id }, false); iconHolder.add伊芙ntListener(“drop”,
function(ev) { var dt = ev.dataTransfer; var srcIconHolderId =
dt.getData(“text/plain”); var srcIconHolder =
document.getElementById(srcIconHolderId); //
若是拖拽至回收站,则删掉被拖拽图标,否则互换两图标位置if(ev.currentTarget.firstChild && ev.currentTarget.firstChild.id ==
“recycleBin” && srcIconHolder.firstChild.id != “recycleBin”){
srcIconHolder.innerHTML = “”; }else if(ev.currentTarget.firstChild){ var
temp = ev.currentTarget.firstChild;
ev.currentTarget.appendChild(srcIconHolder.firstChild);
srcIconHolder.appendChild(temp); }else{
ev.currentTarget.appendChild(srcIconHolder.firstChild); } }, false);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
iconHolder.addEventListener("dragstart", function(ev) {
var dt = ev.dataTransfer;
dt.setData("text/plain", ev.currentTarget.id);// 记录被拖拽图标的 id
}, false);
 
iconHolder.addEventListener("drop", function(ev) {
var dt = ev.dataTransfer;
var srcIconHolderId = dt.getData("text/plain");
var srcIconHolder = document.getElementById(srcIconHolderId);
 
// 如果拖拽至回收站,则删掉被拖拽图标,否则互换两图标位置
if(ev.currentTarget.firstChild && ev.currentTarget.firstChild.id == "recycleBin" &&
srcIconHolder.firstChild.id != "recycleBin"){
                srcIconHolder.innerHTML = "";
}else if(ev.currentTarget.firstChild){
        var temp =  ev.currentTarget.firstChild;
        ev.currentTarget.appendChild(srcIconHolder.firstChild);
        srcIconHolder.appendChild(temp);
}else{
       ev.currentTarget.appendChild(srcIconHolder.firstChild);
}
}, false);

透过对 drop 事件的监听,可以获得拖拽的源,以及拖拽的靶子 div。若目标 div
为空,则将源 div 中的应用程序图标转移至目标 div 中。若目的 div
中已带有应用程序图标,则将七个图标的岗位沟通。若回收站图标处于目的 div
中,回收站将发挥效用并将源 div 中的应用程序图标删除。图 1
来得了桌面拖拽的功能。

图 1. 桌面拖拽效果

威尼斯人线上娱乐 2次第打开

先后可以以三种格局打开,左键点击或通过上下文菜单打开。

因此监听 div 的 onclick 事件,获取要开拓的应用程序 id,并运用 openApp
方法打开相应的应用程序可达成对左键点击的帮助。

清单 3. 左键点击

XHTML

iconHolder.onclick = function(ev){ if(ev.currentTarget.firstChild){
openApp(ev.currentTarget.firstChild.id); ev.stopPropagation(); } };

1
2
3
4
5
6
iconHolder.onclick =  function(ev){
if(ev.currentTarget.firstChild){
        openApp(ev.currentTarget.firstChild.id);
        ev.stopPropagation();
}
};

通过监听 div 的 oncontextmenu 事件,获取要开拓的应用程序 id,并行使
openAppContextMenu
方法突显相应应用程序的上下文菜单,可完成对右键上下文菜单的支撑。

清单 4. 上下文菜单

XHTML

iconHolder.oncontextmenu = function(ev){
if(ev.currentTarget.firstChild){
openAppContextMenu(ev.currentTarget.firstChild.id, ev);
ev.stopPropagation(); } return false; };

1
2
3
4
5
6
7
iconHolder.oncontextmenu =  function(ev){
if(ev.currentTarget.firstChild){
        openAppContextMenu(ev.currentTarget.firstChild.id, ev);
        ev.stopPropagation();
}
return false;
};

运用相应应用程序的
id,可以获取相应应用程序的台本,并施行,同时在系统日志中记录下相应的操作。

清单 5. 顺序打开

XHTML

function openApp(appId){ var time = new Date().get提姆e(); var action =
“open app”; var details = “open: ” + appId; addHistory(time, action,
details);// 记录系统日志 var appScript = getAppScript(appId);//
获取应用程序脚本 eval(appScript);// 执行应用程序 }

1
2
3
4
5
6
7
8
function openApp(appId){
    var time = new Date().getTime();
    var action = "open app";
    var details = "open: " + appId;
    addHistory(time, action, details);// 记录系统日志
    var appScript = getAppScript(appId);// 获取应用程序脚本
    eval(appScript);// 执行应用程序
}

清单 6. 开拓程序上下文菜单

XHTML

function openAppContextMenu(appId, ev){ var appContextMenu =
document.getElementById(“appContextMenu”);
appContextMenu.style.display=”block”;// 令上下文菜单可见appContextMenu.style.pixelTop=ev.clientY;// 设置内外文菜单地点appContextMenu.style.pixelLeft=ev.clientX;
appContextMenu.style.background = “#eee”; appContextMenu.style.color =
“black”; appContextMenu.style.fontSize = “30”;
appContextMenu.style.width = “200px”; appContextMenu.style.height =
“220px”; appContextMenu.style.opacity = 0.5;// 令上下文菜单透明度为 50%
appContextMenu.innerHTML = “”; // 获取应用程序相应上下文菜单的内容 var
apps = getApps(); for(var i=0; i<apps.length; i++){
if(apps[i].appId == appId){ for(var j=0;
j<apps[i].contextMenu.length; j++){ appContextMenu.innerHTML +=
“<div class=’appContextMenuItem’
onclick=\”appContextMenu.style.display=’none’;” +
apps[i].contextMenu[j].action + “\”
onmouseover=’this.style.background=\”darkblue\”‘
onmouseout=’this.style.background=\”#eee\”‘>”
+apps[i].contextMenu[j].name+”</div>”; } break; } } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
function openAppContextMenu(appId, ev){
var appContextMenu = document.getElementById("appContextMenu");
appContextMenu.style.display="block";// 令上下文菜单可见
appContextMenu.style.pixelTop=ev.clientY;// 设置上下文菜单位置
appContextMenu.style.pixelLeft=ev.clientX;
appContextMenu.style.background = "#eee";
appContextMenu.style.color = "black";
appContextMenu.style.fontSize = "30";
appContextMenu.style.width = "200px";
appContextMenu.style.height = "220px";
appContextMenu.style.opacity = 0.5;// 令上下文菜单透明度为 50%
appContextMenu.innerHTML = "";
 
// 获取应用程序相应上下文菜单的内容
var apps = getApps();
for(var i=0; i<apps.length; i++){
                if(apps[i].appId == appId){
                        for(var j=0; j<apps[i].contextMenu.length; j++){
                        appContextMenu.innerHTML += "<div class=’appContextMenuItem’
                        onclick=\"appContextMenu.style.display=’none’;" +
                        apps[i].contextMenu[j].action + "\"
                        onmouseover=’this.style.background=\"darkblue\"’
                        onmouseout=’this.style.background=\"#eee\"’>"
                        +apps[i].contextMenu[j].name+"</div>";
                        }
                        break;
                 }  
}
}

应用程序的上下文菜单由名为 appContextMenu 的 div 落成,将 oncontextmenu
事件中的 clientX 及 clientY 作为上下文菜单现身的职位,并将其透明度设置为
0.5。利用相应应用程序的 id
获取上下文菜单对应的始末,并将其填写至上下文菜单。

图 2 突显了应用程序上下文菜单打开时的法力。

图 2. 应用程序上下文菜单

威尼斯人线上娱乐 3上下文菜单

桌面上下文菜单的完成情势与应用程序上下文菜单的兑现情势为主类似,图 3
和图 4 分别是桌面以及职务栏的上下文菜单。

图 3. 桌面上下文菜单

威尼斯人线上娱乐 4

 图 4. 职务栏上下文菜单

威尼斯人线上娱乐 5视频播放器

系统提供了一个简易的视频播放器,它支持从系统外部拖拽摄像文件进行播报。

切合互联网媒体的前进,HTML5 提供了视频标签 video
以便于增强对摄像的支撑,大大简化了 web
播放器开发的难度,开发人士仅凭几行代码,就足以付出出一个基本作用完善的视频播放器。

清单 7. 视频标签的成立

XHTML

var video = document.createElement(‘video’); video.id =’video’;
video.src =”; video.width = 370; video.height = 260; video.controls =
‘controls’; video.className = ‘video’; appHolder.appendChild(video);
addDragSupport(appHolder);

1
2
3
4
5
6
7
8
9
var video = document.createElement(‘video’);
video.id =’video’;
video.src =”;
video.width  = 370;
video.height = 260;
video.controls = ‘controls’;
video.className = ‘video’;
appHolder.appendChild(video);
addDragSupport(appHolder);

清单 7 中结构了一个 video 标签并将其添加到一个名为 appHolder 的 div
中。代码的尾声一行为其添加了拖拽的支撑。

HTML5 不但帮助浏览器内的拖拽,也支撑浏览器与当地系统之间的拖拽。清单 8
突显了为一个 div 添加拖拽帮助的进度。

清单 8. 添加拖拽协助

JavaScript

function addDragSupport(dropbox){ document.addEventListener(“dragenter”,
function(e){ }, false); document.addEventListener(“dragleave”,
function(e){ }, false); dropbox.addEventListener(“dragenter”,
function(e){ }, false); dropbox.addEventListener(“dragleave”,
function(e){ }, false); dropbox.addEventListener(“dragenter”,
function(e){ e.stopPropagation(); e.preventDefault(); }, false);
dropbox.addEventListener(“dragover”, function(e){ e.stopPropagation();
e.preventDefault(); }, false); dropbox.addEventListener(“drop”,
function(e){ handleFiles(e.dataTransfer.files, e.currentTarget, e);
e.stopPropagation(); e.preventDefault(); }, false); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function addDragSupport(dropbox){
document.addEventListener("dragenter", function(e){
}, false);
document.addEventListener("dragleave", function(e){
}, false);
dropbox.addEventListener("dragenter", function(e){
}, false);
dropbox.addEventListener("dragleave", function(e){
}, false);
dropbox.addEventListener("dragenter", function(e){
e.stopPropagation();
e.preventDefault();
}, false);
dropbox.addEventListener("dragover", function(e){
e.stopPropagation();
e.preventDefault();
}, false);
dropbox.addEventListener("drop", function(e){
handleFiles(e.dataTransfer.files, e.currentTarget, e);
e.stopPropagation();
e.preventDefault();              
}, false);  
}

个中,handleFiles 函数表达了如何对拖拽的文件进行处理。

清单 9. 拖拽处理

JavaScript

function handleFiles(files, dropbox, e) { if(files.length == 0){//
若文件不设有,则用相应文本代替 var dt = e.dataTransfer; var text =
dt.getData(“text/plain”); var p = document.createElement(“p”);
p.innerHTML += text; dropbox.appendChild(p); return; } for (var i = 0; i
< files.length; i++) { var file = files[i]; var fileProcessor =
dropbox.firstChild; fileProcessor.classList.add(“obj”);
fileProcessor.file = file; // 添加文件 var reader = new FileReader();
reader.onload = (// 读取文件内容 function(aFileProcessor) { return
function(e) { aFileProcessor.src = e.target.result; }; }
)(fileProcessor); reader.readAsDataURL(file); } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
function handleFiles(files, dropbox, e) {
    if(files.length == 0){// 若文件不存在,则用相应文本代替
         var dt = e.dataTransfer;
         var text = dt.getData("text/plain");
         var p = document.createElement("p");
         p.innerHTML += text;
         dropbox.appendChild(p);
         return;
}
 
for (var i = 0; i < files.length; i++) {
         var file = files[i];
         var fileProcessor = dropbox.firstChild;
         fileProcessor.classList.add("obj");
         fileProcessor.file = file; // 添加文件
 
         var reader = new FileReader();
         reader.onload = (// 读取文件内容
         function(aFileProcessor) {
                 return function(e) {
                 aFileProcessor.src = e.target.result;
};
}
)(fileProcessor);
  reader.readAsDataURL(file);
}
}

handleFiles
函数首先判断文件是或不是存在,若不设有,则以相应文字代替,若存在,则对

抱有文件相继举行拍卖。向 fileprocessor( 那里是录像标签 )
添加文书,然后采取 FileReader 读取文件内容至 fileprocessor 开展处理。

图 5 展现了拖拽一个摄像文件 movie.ogg 到播放器的效用。

图 5. 视频播放

威尼斯人线上娱乐 6

地面存储

Web
操作系统常常将多数数额存储于服务器端,那样做的益处总而言之,数据存储空间更大,安全性更好。然则如此做也有不足之处,由于网络的安居依旧较本地磁盘差,所以在退出互连网的场景下,Web
操作系统不能得到相应的多寡资源,因而 Web
操作系统要求肯定的造访当地存储空间的力量,当然本地存储空间仅是当做劳动器端存储的一个补充,它的空间有限,访问也饱受肯定的限定。

直接以来,HTML 以 Cookie
作为访问当地空间的法子,可是,这种办法有着众多败笔和不足,如存储的数据格式过于简短,日常仅为键值对;存储的半空中尺寸有限。为此,HTML5
提供了本地数据库以增强地方存储空间的拜访能力,它是一个简化版的数据库,可以帮忙模拟的
SQL 以及不难的事务处理等功效。

系统为永葆地点存储,创制了一个名为 MyData 的数据库。清单 10
突显了数据库成立的进度。

清单 10. 创造数据库

XHTML

var db; var openDatabase; if(openDatabase != undefined) db =
openDatabase(‘MyData’, ”, ‘My Database’, 102400);

1
2
3
4
var db;
var openDatabase;
if(openDatabase != undefined)
     db = openDatabase(‘MyData’, ”, ‘My Database’, 102400);

里面 MyData 为数据库的名号,省略的参数为数据库的本子,My Database
为呈现的称呼,最终的数字为数据库预估长度(以字节为单位)。

系统日志将系统在某一时间的一举一动操作记录下来,本地数据库为其提供仓储支持。日志在数据库中存储为表
History,包含 3 个字段,分别为时间,操作,及操作的详细音信。清单 11
呈现了系统是何等记录日志的。

清单 11. 日志记录

XHTML

var time = new Date().get提姆e(); var action = “open app”; var details =
“open: ” + appId; addHistory(time, action, details);//
向系统日志中添加一条记下 function addHistory(time, action, details){
if(openDatabase != undefined) db.transaction( function(tx) {
tx.executeSql(‘CREATE TABLE IF NOT EXISTS History(time INTEGER, action
TEXT, details TEXT)’,[]);// 创立日志记录表 tx.executeSql(‘INSERT INTO
History VALUES(?, ?, ?)’, [time, action, details], // 插入一条日志
function(tx, rs) { //alert(“store: “+time+”-“+action+”-“+details); },
function(tx, error) { //alert(error.source + “::” + error.message); });
}); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var time = new Date().getTime();  
var action = "open app";
var details = "open: " + appId;
addHistory(time, action, details);// 向系统日志中添加一条记录
 
function addHistory(time, action, details){
if(openDatabase != undefined)
db.transaction(
function(tx) {
tx.executeSql(‘CREATE TABLE IF NOT EXISTS History(time INTEGER,
action TEXT, details TEXT)’,[]);// 创建日志记录表  
tx.executeSql(‘INSERT INTO History VALUES(?, ?, ?)’, [time,
action, details], // 插入一条日志
function(tx, rs) {  
//alert("store: "+time+"-"+action+"-"+details);  
              },  
function(tx, error) {
    //alert(error.source + "::" + error.message);  
});  
});  
}

清单的率先局地显得了哪些调用日志记录,第二片段显得了日记记录的事无巨细经过。在一个
transaction 中,首先判断表 History
是或不是存在,若不设有,则创制它。第二有的举办一条 SQL
语句,向数据库中插入当前的日记。

由此查找表 History,大家可以查阅系统日志,清单 12
显示了何等从数据库中询问系统日志,并将其出示出来。

清单 12. 日记突显

XHTML

var historyTable = document.getElementById(“historyTable”); // 定义表头
historyTable.innerHTML = “”; var th = document.createElement(‘thead’);
th.style = “color:#CC3300”; var th1 = document.createElement(‘td’);
th1.align = “center”; th1.width=300; th1.innerHTML = “Time”; var th2 =
document.createElement(‘td’); th2.align = “center”; th2.width=100;
th2.innerHTML = “Action”; var th3 = document.createElement(‘td’);
th3.align = “center”; th3.width=150; th3.innerHTML = “Details”;
th.appendChild(th1); th.appendChild(th2); th.appendChild(th3);
historyTable.appendChild(th); if(openDatabase != undefined)
db.transaction(function(tx) { tx.executeSql(‘SELECT * FROM History’,
[], function(tx, rs) { // 将日志逐条展现到表的各行中 for(var i = 0; i
< rs.rows.length && i<15; i++) { var tr =
document.createElement(‘tr’); var td1 = document.createElement(‘td’);
td1.style.paddingLeft = “3px”; td1.style.paddingRight = “3px”; var t =
new Date(); t.set提姆e(rs.rows.item(i).time); td1.innerHTML =
t.toLocaleDateString()+ ” “+t.toLocale提姆eString(); var td2 =
document.createElement(‘td’); td2.style.paddingLeft = “3px”;
td2.style.paddingRight = “3px”; td2.innerHTML = rs.rows.item(i).action;
var td3 = document.createElement(‘td’); td3.style.paddingLeft = “3px”;
td3.style.paddingRight = “3px”; td3.innerHTML = rs.rows.item(i).details;
tr.appendChild(td1); tr.appendChild(td2); tr.appendChild(td3);
historyTable.appendChild(tr); } }); });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
var historyTable = document.getElementById("historyTable");
 
// 定义表头
historyTable.innerHTML = "";
var th = document.createElement(‘thead’);
th.style = "color:#CC3300";
var th1 = document.createElement(‘td’);
th1.align = "center";
th1.width=300;
th1.innerHTML = "Time";
var th2 = document.createElement(‘td’);
th2.align = "center";
th2.width=100;
th2.innerHTML = "Action";
var th3 = document.createElement(‘td’);
th3.align = "center";
th3.width=150;
th3.innerHTML = "Details";
th.appendChild(th1);  
th.appendChild(th2);  
th.appendChild(th3);
historyTable.appendChild(th);
 
if(openDatabase != undefined)
db.transaction(function(tx) {    
tx.executeSql(‘SELECT * FROM History’, [], function(tx, rs)
{  
      // 将日志逐条显示到表的各行中
for(var i = 0; i < rs.rows.length && i<15; i++) {                    
var tr = document.createElement(‘tr’);
var td1 = document.createElement(‘td’);
td1.style.paddingLeft = "3px";
td1.style.paddingRight = "3px";
 
var t = new Date();  
t.setTime(rs.rows.item(i).time);  
td1.innerHTML = t.toLocaleDateString()+
" "+t.toLocaleTimeString();
 
var td2 = document.createElement(‘td’);  
td2.style.paddingLeft = "3px";
td2.style.paddingRight = "3px";
td2.innerHTML = rs.rows.item(i).action;
 
var td3 = document.createElement(‘td’);
td3.style.paddingLeft = "3px";
td3.style.paddingRight = "3px";
td3.innerHTML = rs.rows.item(i).details;  
 
tr.appendChild(td1);  
tr.appendChild(td2);  
tr.appendChild(td3);
 
historyTable.appendChild(tr);                  
}  
});  
});

清单 12 中,首先取得用于呈现的日记的 HTML 表格
historyTable,并安装其样式及表头。

接下来在一个 transaction( 事务 ) 中,执行一条 SQL
语句,查询系统日志,并将每条日志添加为 historyTable 中的一行以便显示。图
6 显示了系统日志的职能。

图 6. 系统日志

威尼斯人线上娱乐 7

记事本

系统提供了一个简约的记事本,完结了文本文档的基本操作。文本文档蕴涵标题和情节三个显式属性,以及一个名为
id
的隐式属性。与系统日志类似,本地数据库为文本数据的仓储提供了底部的支持。图
7 展现了记事本程序的界面。

图 7. 记事本

威尼斯人线上娱乐 8

当编辑完文档的标题与内容后,点击左上角的保存按钮,将履行 createFile
函数。清单 13 展现了 createFile 函数的事无巨细经过。

清单 13. 创设文件

XHTML

function createFile(fileId, fileTitle, fileContent){ var idx = 1; var
update = false;//false 表示新建,true 代表修改 if(openDatabase !=
undefined) db.transaction(function(tx) { tx.executeSql(‘CREATE TABLE IF
NOT EXISTS TextFiles(idx INTEGER, title TEXT, content TEXT)’,[]);//
成立文本文档表 tx.executeSql(‘SELECT * FROM TextFiles’, [],
function(tx, rs){ for(var i = 0; i < rs.rows.length; i++) { //
若文档存在,则修改它 if(rs.rows.item(i).idx == fileId){
db.transaction(function(tx) { tx.executeSql(‘UPDATE TextFiles SET
title=?, content=? WHERE idx=’+fileId, [fileTitle, fileContent],
function(tx, rs) { alert(“update successfully”); }); }); return; } } //
若文档不设有,则新建一个文档 if(rs.rows.length>0) idx =
rs.rows.item(rs.rows.length-1).idx + 1; db.transaction(function(tx) {
tx.executeSql(‘INSERT INTO TextFiles VALUES(?, ?, ?)’, [idx, fileTitle,
fileContent], function(tx, rs){ alert(“save successfully:
“+idx+”-“+fileTitle+ “-“+fileContent); createFileIcon(idx); },
function(tx, error) { alert(error.source + “::” + error.message); });
}); }); }); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
function createFile(fileId, fileTitle, fileContent){
     var idx = 1;
     var update = false;//false 表示新建,true 表示修改
 
     if(openDatabase != undefined)
         db.transaction(function(tx) {
         tx.executeSql(‘CREATE TABLE IF NOT EXISTS TextFiles(idx INTEGER,
         title TEXT, content TEXT)’,[]);// 创建文本文档表
         tx.executeSql(‘SELECT * FROM TextFiles’, [], function(tx, rs){
             for(var i = 0; i < rs.rows.length; i++) {
                // 若文档存在,则修改它
                 if(rs.rows.item(i).idx == fileId){
                     db.transaction(function(tx) {    
                     tx.executeSql(‘UPDATE TextFiles
                     SET title=?, content=?
                     WHERE idx=’+fileId,
                     [fileTitle, fileContent],
                     function(tx, rs) {  
                             alert("update successfully");
                     });  
                 });
                 return;
             }        
}    
// 若文档不存在,则新建一个文档        
if(rs.rows.length>0)
idx = rs.rows.item(rs.rows.length-1).idx + 1;
db.transaction(function(tx) {                        
tx.executeSql(‘INSERT INTO TextFiles VALUES(?, ?, ?)’, [idx, fileTitle, fileContent],
               function(tx, rs){  
               alert("save successfully: "+idx+"-"+fileTitle+ "-"+fileContent);  
               createFileIcon(idx);  
},  
function(tx, error) {
                alert(error.source + "::" + error.message);  
                 });  
             });
         });
     });
}

清单 13 首先在一个 transaction 中,首先判断用于存储文本文档的表
TextFiles 是不是存在,若不存在,则开创它。然后经过查询表 TextFiles
判断文本文档是或不是存在,若存在,则当前操作为更新操作,程序将推行一条 SQL
语句,对近期文本文档进行更新。若不存在,则取当前最大文档 id 并加 1
作为新文档的 id,并履行一条 SQL 语句,将文档音讯,包含文档
id,以及标题和内容插入到数据库中,并于插入操作甘休后的回调方法中,利用
createFileIcon 方法在桌面上为新文档成立一个文档图标。清单 14 显示了
createFileIcon 方法的具体经过。

清单 14. 创立文档图标

XHTML

function createFileIcon(fileId){ var iconHolder; for(var
i=1;i<=120;i++){// 查询第三个为空的地点 iconHolder =
document.getElementById(‘iconHolder’ + if(!iconHolder.firstChild ){ var
text = document.createElement(‘img’); text.src = “images/text.gif”;
text.id = fileId; iconHolder.appendChild(text); text.onclick =
function(ev){ if(ev.currentTarget){ openApp(‘notebook’);//
打开记事本应用程序 var saveHolder =
document.getElementById(‘saveHolder’); saveHolder.onclick = function(){
var title = document.getElementById(‘title’); var content =
document.getElementById(‘content’); createFile(fileId, title.value,
content.value);// 创制文本文档 }; var openedFileId =
ev.currentTarget.id; if(openDatabase != undefined)
db.transaction(function(tx) {// 查询数据库,突显文档内容
tx.executeSql(‘SELECT * FROM TextFiles’, [], function(tx, rs){
for(var i = 0; i < rs.rows.length; i++) { if((rs.rows.item(i).idx+””)
== (openedFileId+””)){ var title = document.getElementById(‘title’); var
content = document.getElementById(‘content’); title.value =
rs.rows.item(i).title; content.value = rs.rows.item(i).content;} } });
}); ev.stopPropagation(); } }; break; } }//for }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
function createFileIcon(fileId){
     var iconHolder;
     for(var i=1;i<=120;i++){// 查询第一个为空的位置
         iconHolder = document.getElementById(‘iconHolder’ + if(!iconHolder.firstChild ){
             var text = document.createElement(‘img’);
             text.src = "images/text.gif";
             text.id = fileId;
             iconHolder.appendChild(text);
             text.onclick =  function(ev){  
                 if(ev.currentTarget){
                 openApp(‘notebook’);// 打开记事本应用程序
                 var saveHolder = document.getElementById(‘saveHolder’);
                 saveHolder.onclick  = function(){
                     var title = document.getElementById(‘title’);
                     var content = document.getElementById(‘content’);
                     createFile(fileId, title.value, content.value);// 创建文本文档
                 };
 
             var openedFileId = ev.currentTarget.id;
             if(openDatabase != undefined)
             db.transaction(function(tx) {// 查询数据库,显示文档内容
             tx.executeSql(‘SELECT * FROM TextFiles’, [], function(tx, rs){
                 for(var i = 0; i < rs.rows.length; i++) {  
                 if((rs.rows.item(i).idx+"") == (openedFileId+"")){
                     var title = document.getElementById(‘title’);
                     var content = document.getElementById(‘content’);          
                     title.value = rs.rows.item(i).title;                  
                     content.value = rs.rows.item(i).content;}    
                              }
                });
});
   ev.stopPropagation();
}
};
break;
}    
}//for
}

清单 14 首先在桌面中找寻一个空的 div,然后创设一个文档图标,并将其填充至
div。文档图标有一个 id 属性对应文档
id。最后为文档图标添加点击事件处理函数,当点击文档图标时,会首先打开记事本,然后按照文档图标的
id 查询数据库,提取文档的标题和情节开展显示。

图 8 显示了创设后的文本文档,点击后的效率如图 7 所示。

图 8. 文本文档

威尼斯人线上娱乐 9时钟

系统提供了一个简单的时钟用以突显当前岁月,它由一个表面以及分针和时针组成,能够随着年华的转移动态地转移。以往的
web 应用使用 JavaScript 或 Flash 已毕此类功效,其复杂同理可得。借助
HTML5 的 draw
API,可以轻松地画出所需的图片,极大的便民了此类应用的营造,别的,HTML5
还提供了以前 JavaScript 不可能支撑的三十二线程编程,大大抓好了 web
应用的交互性和丰硕性。

钟表有一个基本的表盘,它仅是一副简单的图纸,如图 9 所示。

图 9. 表盘

威尼斯人线上娱乐 10

在表面之上,建有一个 canvas( 画布 ),如清单 15 所示。

清单 15. 画布

JavaScript

<canvas id=”canvas” width=”128px” height=”128px”></canvas>

1
<canvas id="canvas" width="128px" height="128px"></canvas>

接下去,清单 17
将在画布上模拟出时钟以及分针,在那之前,额外必要一个后台线程用以统计时间,它被定义在名为
time.js 的单独脚本文件中,如清单 16 所示。

清单 16. 后台线程

XHTML

onmessage = function(event) { //var i = 1; setInterval(function() {
//i++; postMessage(“”); }, 60000); };

1
2
3
4
5
6
7
8
onmessage = function(event)
{
//var i = 1;
    setInterval(function() {
    //i++;
    postMessage("");
    }, 60000);
};

每过 60 分钟,后台线程将会上前台线程发送一个空音信,以告知前台线程有 60
分钟已经死亡了。

清单 17. 前台线程的开始化

XHTML

var canvas = document.getElementById(“canvas”); if (canvas == null)
return false; var context = canvas.getContext(‘2d’);//
那是一个二维的图像 context.lineWidth = 2; context.translate(64, 64);//
定义原点 // 初叶化分针 context.beginPath(); context.moveTo(0,0);//
从原点开端 var date = new Date(); var mhx =
37*Math.cos((date.getMinutes()-15)*Math.PI/30); var mhy =
37*Math.sin((date.getMinutes()-15)*Math.PI/30); context.lineTo(mhx,
mhy);// 至分针末端所在地方 context.closePath(); context.stroke(); //
发轫化时针 context.beginPath(); context.moveTo(0,0);// 从原点初始 var
date = new Date(); var hour = date.getHours(); if(hour>=12) hour =
hour – 12; var minute = date.getMinutes(); var hhx =
27*Math.cos((hour-3)*Math.PI/6 + minute*Math.PI/360); var hhy =
27*Math.sin((hour-3)*Math.PI/6 + minute*Math.PI/360);
context.lineTo(hhx, hhy);// 至时针末端所在地方 context.closePath();
context.stroke();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
var canvas = document.getElementById("canvas");
if (canvas == null)  
return false;  
var context = canvas.getContext(‘2d’);// 这是一个二维的图像
context.lineWidth = 2;
context.translate(64, 64);// 定义原点
 
// 初始化分针
context.beginPath();
context.moveTo(0,0);// 从原点开始
var date = new Date();
var mhx = 37*Math.cos((date.getMinutes()-15)*Math.PI/30);
var mhy = 37*Math.sin((date.getMinutes()-15)*Math.PI/30);
context.lineTo(mhx, mhy);// 至分针末端所在位置
context.closePath();
context.stroke();
 
// 初始化时针
context.beginPath();
context.moveTo(0,0);// 从原点开始
var date = new Date();
var hour = date.getHours();
if(hour>=12)
hour = hour – 12;
var minute = date.getMinutes();
var hhx = 27*Math.cos((hour-3)*Math.PI/6 + minute*Math.PI/360);
var hhy = 27*Math.sin((hour-3)*Math.PI/6 + minute*Math.PI/360);
context.lineTo(hhx, hhy);// 至时针末端所在位置
context.closePath();
context.stroke();

前台线程首先会拿走
canvas,并设置表盘中央为坐标原点。然后,获取当今日子,计算分针当前所应指向的坐标,然后从原点出发,画出分针。对于时针,若系统为
24 时辰制,必要首先转化为 12 时辰制,此后的拍卖类似于分针。

接下去,要求将前台与后台线程联系起来,利用 HTML5
提供的三三十二线程编程方法,表明 Worker 对象作为后台线程的代办,并运用
onmessage 事件,对后台线程发出的新闻举行处理。

清单 18. 前台线程的 onmessage 事件

XHTML

var worker = new Worker(“js/timer.js”); worker.onmessage =
function(event){ context.clearRect(-64, -64, 128, 128);// 清空分针和时针
// 重画分针 context.beginPath(); context.moveTo(0,0);// 从原点初始 var
date = new Date(); var mhx =
37*Math.cos((date.getMinutes()-15)*Math.PI/30); var mhy =
37*Math.sin((date.getMinutes()-15)*Math.PI/30); context.lineTo(mhx,
mhy);// 至分针末端所在位置 context.closePath(); context.stroke(); //
重画时针 context.beginPath(); context.moveTo(0,0);// 从原点开头 var date
= new Date(); var hour = date.getHours(); if(hour>=12) hour = hour –
12; var minute = date.getMinutes(); var hhx =
27*Math.cos((hour-3)*Math.PI/6 + minute*Math.PI/360); var hhy =
27*Math.sin((hour-3)*Math.PI/6 + minute*Math.PI/360);
context.lineTo(hhx, hhy);// 至时针末端所在地点 context.closePath();
context.stroke(); }; worker.postMessage(“”);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
var worker = new Worker("js/timer.js");
 
worker.onmessage = function(event){
 
    context.clearRect(-64, -64, 128, 128);// 清空分针和时针
 
    // 重画分针
    context.beginPath();
    context.moveTo(0,0);// 从原点开始  
    var date = new Date();
    var mhx = 37*Math.cos((date.getMinutes()-15)*Math.PI/30);
    var mhy = 37*Math.sin((date.getMinutes()-15)*Math.PI/30);
    context.lineTo(mhx, mhy);// 至分针末端所在位置
    context.closePath();
    context.stroke();
 
        // 重画时针
    context.beginPath();
    context.moveTo(0,0);// 从原点开始  
    var date = new Date();
    var hour = date.getHours();
    if(hour>=12)
    hour = hour – 12;
    var minute = date.getMinutes();
    var hhx = 27*Math.cos((hour-3)*Math.PI/6 + minute*Math.PI/360);
    var hhy = 27*Math.sin((hour-3)*Math.PI/6 + minute*Math.PI/360);
    context.lineTo(hhx, hhy);// 至时针末端所在位置
    context.closePath();
    context.stroke();
    };
    worker.postMessage("");

每过 60
分钟,后台线程将会上前台线程发送一个空音信,前台线程接收到音讯后,首先,清空
canvas,然后重新得到当前时间,总括分针以及时针对应的坐标,天公地道复画出时针和分针,从而做到对分针以及时针的更新,最后,每过
1 分钟,表盘更新五遍,从而模拟出动态时针的成效,如图 10 所示。

图 10. 时钟

威尼斯人线上娱乐 11离线支持

即使 Web
操作系统的助益是可以利用互连网随时随处举行走访。不过在不可以访问网络的情事下,Web
操作系统便无计可施发挥功效。由此 Web
操作系统有必不可少在离线状态下,仍是可以对有的行使及其功能进行援救。事实上,各样浏览器已提供了多样四种的缓存机制以提供对离线应用的援助,然后这么些缓存机制往往是临时性的,不可控的。HTML5
为开发人员提供了化解此题材的另一种途径,它提供了一种永久性的,自定义的缓存方法,使得
Web 操作系统可以在离线的现象下,如故协理部分使用的功用。

HTML5
离线帮助的着力是一个缓存清单,其中列出了须要缓存的公文,本系统中的缓存文件
index.manifest,如清单 19 所示。

清单 19. 缓存清单

XHTML

CACHE MANIFEST #version 1.10 CACHE: index.html js/app.js js/clock.js
js/data.js js/database.js js/desktop.js js/history.js js/taskbar.js
js/timer.js js/file.js js/utils.js css/index.css images/appHolder1.png
images/background.jpg images/clock.png images/close.gif
images/computer.gif images/history.png images/network.gif
images/recycleBin.gif images/startIcon.png images/taskBar.png
images/vidioplayer.gif images/notebook.gif images/text.gif
images/save.gif movs/movie.ogg sounds/WindowsLogonSound.wav

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
CACHE MANIFEST
#version 1.10
CACHE:
index.html
js/app.js
js/clock.js
js/data.js
js/database.js
js/desktop.js
js/history.js
js/taskbar.js
js/timer.js
js/file.js
js/utils.js
css/index.css
images/appHolder1.png
images/background.jpg
images/clock.png
images/close.gif
images/computer.gif
images/history.png
images/network.gif
images/recycleBin.gif
images/startIcon.png
images/taskBar.png
images/vidioplayer.gif
images/notebook.gif
images/text.gif
images/save.gif
movs/movie.ogg
sounds/WindowsLogonSound.wav

个中,CACHE MANIFEST 标示本文件为缓存文件,#version 1.10
标示了本文件的本子。

CACHE
之后所列支的则是开发人士自定义的情节,其中带有了所有在离线状态下用户访问应用程序所不可或缺的文书。

缓存清单定义停止后,在 index.html
中插入这几个清单文件名,那样,当浏览器加载那一个页面的时候,会活动缓存清单文件中所罗列的文书。

清单 20. 运用缓存清单

XHTML

<html manifest=”index.manifest”>

1
<html manifest="index.manifest">

值得一提的是,若要扶助离线缓存,除客户端浏览器的援救以外,服务端的支撑也是必需的,就本系统所使用的
tomcat 而言,需求在其布置文件 web.xml 中添加清单 21 所示的条目。

清单 21. 劳动器端缓存配置

XHTML

<mime-mapping> <extension>manifest</extension>
<mime-type>text/cache-manifest</mime-type>
</mime-mapping>

1
2
3
4
<mime-mapping>
<extension>manifest</extension>
<mime-type>text/cache-manifest</mime-type>
</mime-mapping>

终极,禁用本地机械的互联网,重新打开浏览器并访问 Web
操作系统所在的网址,系统中的大多数应用程序依旧得以正常工作,如图 11
所示。

图 11. 离线系统

威尼斯人线上娱乐 12结束语

本文介绍了 Web
操作系统的基本知识,并与价值观的操作系统进行了相比,进而介绍了 HTML5
那种新技巧为 Web 操作系统开发带来的补益,并与观念的 web
前端开发技术进行了比较,最后经过创设一个着力的 Web 操作系统详细的变现了
Web 操作系统的基本方式和效能以及襄助其运转的 web
前端开发技术是怎么样兑现其实际效果的。从本文的座谈中得以看到,基于 HTML5
的 Web 操作系统是前景的一大趋势,必将逐步走入人们的平日生活工作中去。

赞 2 收藏 1
评论

威尼斯人线上娱乐 13

简介: Web
操作系统有着传统操作系统无法比拟的优势,如可以随时各处使用别的极端举行访问,数据保存在服务器端,空间更大,数据安全性更好,可以动用服务器端的
CPU、内存等资源开展更为复杂的演算。然则当下的 Web 操作系统前端大多基于
Flex、Silverlight、ActiveX
插件等技术开发,存在着对移动装备的协助性差,终端安全性差,开发难度大等老毛病。
HTML5 是下一代 web
语言的业内,具有包容性好,安全性高,功效丰硕,开发便民等优点,更加契合如
Web 操作系统一类的富客户端网络拔取的前端开发。本文将体现怎么样使用 HTML5
提供的八种新技巧如:本地数据库、二十四线程开发、视频帮衬、离线编程等营造一个骨干的
Web 操作系统。
简介
传统的操作系统有着一些难以制服的败笔,如仅能在该地终端访问,或仅接济少数的远程访问,限于本地终端的资源,总结能力脆弱,存储空间有限,缺少有力的防火墙等一种类安全体制,安全性较差。鉴于以上缺点,Web
操作系统应运而生 – Web
操作系统是一种基于浏览器的虚构的操作系统,用户通过浏览器可以在里头进展应用程序的操作,以及有关数据的存储。Web
操作系统提供的为主服务有文本文档的创造与储存,音频视频文件的播音与仓储,提供对时间新闻的辅助等,更尖端的劳务则含有即时通讯,邮件甚至游戏等劳动。Web
操作系统打败了价值观操作系统的老毛病,在网络的支持下,它可以在任曾几何时刻,任哪个地点方经由任何援救Web
的终极举行访问,可以运用服务器端无限的计算及存储资源,用户数据保存在劳动器端,安全性较高。

本文实例讲述了JS仿i谷歌自定义首页模块拖拽特效的形式。分享给我们供大家参考。具体完结格局如下:

JS仿i谷歌自定义首页模块拖拽特效的主意

 那篇作品紧要介绍了JS仿i谷歌(Google)自定义首页模块拖拽特效的不二法门,实例分析了页面的布局及拖拽的落成技术,分外具有实用价值,必要的心上人可以参照下

 

 

正文实例讲述了JS仿i谷歌(Google)自定义首页模块拖拽特效的法门。分享给我们供大家参考。具体贯彻情势如下:

 

代码如下:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“;
<html xmlns=”” >
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″
/>
<title>JS仿i谷歌(Google)自定义首页模块拖拽效果</title>
<script type=”text/javascript”>
var Common = {
getEvent: function() {//ie/ff
if (document.all) {
return window.event;
}
func = getEvent.caller;
while (func != null) {
var arg0 = func.arguments[0];
if (arg0) {
if ((arg0.constructor == Event || arg0.constructor == MouseEvent) ||
(typeof (arg0) == “object” && arg0.preventDefault &&
arg0.stopPropagation)) {
return arg0;
}
}
func = func.caller;
}
return null;
},
getMousePos: function(ev) {
if (!ev) {
ev = this.getEvent();
}
if (ev.pageX || ev.pageY) {
return {
x: ev.pageX,
y: ev.pageY
};
}

 

if (document.documentElement && document.documentElement.scrollTop) {
return {
x: ev.clientX + document.documentElement.scrollLeft –
document.documentElement.clientLeft,
y: ev.clientY + document.documentElement.scrollTop –
document.documentElement.clientTop
};
}
else if (document.body) {
return {
x: ev.clientX + document.body.scrollLeft – document.body.clientLeft,
y: ev.clientY + document.body.scrollTop – document.body.clientTop
};
}
},
getElementPos: function(el) {
el = this.getItself(el);
var _x = 0, _y = 0;
do {
_x += el.offsetLeft;
_y += el.offsetTop;
} while (el = el.offsetParent);
return { x: _x, y: _y };
},
getItself: function(id) {
return “string” == typeof id ? document.getElementById(id) : id;
},
getViewportSize: { w: (window.innerWidth) ? window.innerWidth :
(document.documentElement && document.documentElement.clientWidth) ?
document.documentElement.clientWidth :
(document.body?document.body.offsetWidth:0), h: (window.innerHeight) ?
window.innerHeight : (document.documentElement &&
document.documentElement.clientHeight) ?
document.documentElement.clientHeight : (document.body ?
document.body.offsetHeight : 0) },
isIE: document.all ? true : false,
setOuterHtml: function(obj, html) {
var Objrange = document.createRange();
obj.innerHTML = html;
Objrange.selectNodeContents(obj);
var frag = Objrange.extractContents();
obj.parentNode.insertBefore(frag, obj);
obj.parentNode.removeChild(obj);
},
firstChild: function(parentObj, tagName) {
if (Common.isIE) {
return parentObj.firstChild;
}
else {
var arr = parentObj.getElementsByTagName(tagName);
return arr[0];
}
},
lastChild: function(parentObj, tagName) {
if (Common.isIE) {
return parentObj.lastChild;
}
else {
var arr = parentObj.getElementsByTagName(tagName);
return arr[arr.length – 1];
}
},
setCookie: function(name, value) {
document.cookie = name + “=” + value;
},
getCookie: function(name) {
var strCookie = document.cookie;
var arrCookie = strCookie.split(“; “);
for (var i = 0; i < arrCookie.length; i++) {
var arr = arrCookie[i].split(“=”);
if (!arr[1]) {
return “”;
}
if (arr[0] == name) {
return arr[1];
}
}
return “”;
},
delCookie: function(name) {
var exp = new Date();
exp.setTime(exp.getTime() – 1);
var cval = this.getCookie(name);
if (cval != null) document.cookie = name + “=” + cval + “;expires=” +
exp.toGMTString();
}
}
var Class = {
create: function() {
return function() { this.init.apply(this, arguments); }
}
}
var Drag = Class.create();
Drag.prototype = {
init: function(titleBar, dragDiv, Options) {
//设置点击是不是透明,默许透明60%
titleBar = Common.getItself(titleBar);
dragDiv = Common.getItself(dragDiv);
this.dragArea = { maxLeft: -9999, maxRight: 9999, maxTop: -9999,
maxBottom: 9999 };
if (Options) {
this.opacity = Options.opacity ? (isNaN(parseInt(Options.opacity)) ? 100
: parseInt(Options.opacity)) : 100;
if (Options.area) {
if (Options.area.left && !isNaN(parseInt(Options.area.left))) {
this.dragArea.maxLeft = Options.area.left };
if (Options.area.right && !isNaN(parseInt(Options.area.right))) {
this.dragArea.maxRight = Options.area.right };
if (Options.area.top && !isNaN(parseInt(Options.area.top))) {
this.dragArea.maxTop = Options.area.top };
if (Options.area.bottom && !isNaN(parseInt(Options.area.bottom))) {
this.dragArea.maxBottom = Options.area.bottom };
}
}
else {
this.opacity = 60;
}
this.originDragDiv = null;
this.tmpX = 0;
this.tmpY = 0;
this.moveable = false;
this.dragArray = [];

var dragObj = this;
var dragTbl = document.getElementById(“dragTable”);

titleBar.onmousedown = function(e) {
var ev = e || window.event || Common.getEvent();
//只同意通过鼠标左键进行拖拽,IE鼠标左键为1 FireFox为0
if (Common.isIE && ev.button == 1 || !Common.isIE && ev.button == 0) {
}
else {
return false;
}

//处理万分意况:在最上/下边MOVE时不碰着现有DIV的状态下,又赶回发轫拖拽的列最上/下方
var tmpColId;
for (c = 0; c < dragTbl.rows[0].cells.length; c++) {
for (k = 0; k <
dragTbl.rows[0].cells[c].getElementsByTagName(“DIV”).length; k++)
{
if (dragDiv.id ==
dragTbl.rows[0].cells[c].getElementsByTagName(“DIV”)[k].id) {
tmpColId = c;
break;
}
}
}
var tmpPosFirstChild =
Common.getElementPos(Common.firstChild(dragTbl.rows[0]【威尼斯人线上娱乐】依照HTML5营造Web操作系统,JS仿iGoogle自定义首页模块拖拽特效的方法。.cells[tmpColId],
“DIV”));
var tmpPosLastChild =
Common.getElementPos(Common.lastChild(dragTbl.rows[0].cells[tmpColId],
“DIV”));
var tmpObj = { colId: tmpColId, firstChildUp: tmpPosFirstChild.y,
lastChildDown: tmpPosLastChild.y +
Common.lastChild(dragTbl.rows[0].cells[tmpColId],
“DIV”).offsetHeight };

//保存当前可拖拽各容器的所在地方
dragObj.dragArray = dragObj.RegDragsPos();

//插入虚线框
var dashedElement = document.createElement(“div”);
dashedElement.style.cssText = dragDiv.style.cssText;
dashedElement.style.border = ” dashed 2px #aaa “;
dashedElement.style.marginBottom = “6px”;
dashedElement.style.width = dragDiv.offsetWidth – 2 *
parseInt(dashedElement.style.borderWidth) + “px”;
//减去boderWidth使虚线框大小保持与dragDiv一致
dashedElement.style.height = dragDiv.offsetHeight – 2 *
parseInt(dashedElement.style.borderWidth) + “px”; //加上px 保证FF正确
dashedElement.style.position = “relative”;
if (dragDiv.nextSibling) {
dragDiv.parentNode.insertBefore(dashedElement, dragDiv.nextSibling);
}
else {
dragDiv.parentNode.appendChild(dashedElement);
}
//拖动时成为absolute
dragDiv.style.width = dragDiv.offsetWidth + “px”;
dragDiv.style.position = “absolute”;

dragObj.moveable = true;
dragDiv.style.zIndex = dragObj.GetZindex() + 1;

var downPos = Common.getMousePos(ev);
dragObj.tmpX = downPos.x – dragDiv.offsetLeft;
dragObj.tmpY = downPos.y – dragDiv.offsetTop;

if (Common.isIE) {
dragDiv.setCapture();
} else {
window.captureEvents(Event.mousemove);
}

dragObj.SetOpacity(dragDiv, dragObj.opacity);

//FireFox 去除容器内拖拽图片难题
if (ev.preventDefault) {
ev.preventDefault();
ev.stopPropagation();
}

document.onmousemove = function(e) {
if (dragObj.moveable) {
var ev = e || window.event || Common.getEvent();
//IE 去除容器内拖拽图片难点
if (document.all) //IE
{
ev.returnValue = false;
}

var movePos = Common.getMousePos(ev);
dragDiv.style.left = Math.max(Math.min(movePos.x – dragObj.tmpX,
dragObj.dragArea.maxRight), dragObj.dragArea.maxLeft) + “px”;
dragDiv.style.top = Math.max(Math.min(movePos.y – dragObj.tmpY,
dragObj.dragArea.maxBottom), dragObj.dragArea.maxTop) + “px”;

var targetDiv = null;
for (var k = 0; k < dragObj.dragArray.length; k++) {
if (dragDiv == dragObj.dragArray[i]) {
continue;
}

if (movePos.x > dragObj.dragArray[k].PosLeft && movePos.x <
dragObj.dragArray[k].PosLeft + dragObj.dragArray[k].PosWidth
&& movePos.y > dragObj.dragArray[k].PosTop && movePos.y <
dragObj.dragArray[k].PosTop + dragObj.dragArray[k].PosHeight
) {
targetDiv = document.getElementById(dragObj.dragArray[k].DragId);
if (movePos.y < dragObj.dragArray[k].PosTop +
dragObj.dragArray[k].PosHeight / 2) {
//往上移
dashedElement.style.width = targetDiv.offsetWidth – 2 *
parseInt(dashedElement.style.borderWidth) + “px”;
targetDiv.parentNode.insertBefore(dashedElement, targetDiv);
}
else {
//往下移
dashedElement.style.width = targetDiv.offsetWidth – 2 *
parseInt(dashedElement.style.borderWidth) + “px”;
if (targetDiv.nextSibling) {
targetDiv.parentNode.insertBefore(dashedElement,
targetDiv.nextSibling);
}
else {
targetDiv.parentNode.appendChild(dashedElement);
}
}
}
}

for (j = 0; j < dragTbl.rows[0].cells.length; j++) {
var startLeft = Common.getElementPos(dragTbl.rows[0].cells[j]).x;
if (movePos.x > startLeft && movePos.x < startLeft +
dragTbl.rows[0].cells[j]威尼斯人线上娱乐 ,.offsetWidth) {
///列无DIV
if (dragTbl.rows[0].cells[j].getElementsByTagName(“div”).length ==
0) {
dashedElement.style.width = dragTbl.rows[0].cells[j].offsetWidth – 2
* parseInt(dashedElement.style.borderWidth) + “px”;
dragTbl.rows[0].cells[j].appendChild(dashedElement);
}
else {
var posFirstChild =
Common.getElementPos(Common.firstChild(dragTbl.rows[0].cells[j],
“DIV”));
var posLastChild =
Common.getElementPos(Common.lastChild(dragTbl.rows[0].cells[j],
“DIV”));
//处理相当处境:在最上/下边MOVE时不碰到现有DIV的景色下,又赶回开头拖拽的列最上/下方
var tmpUp, tmpDown;
if (tmpObj.colId == j) {
tmpUp = tmpObj.firstChildUp;
tmpDown = tmpObj.lastChildDown;
}
else {
tmpUp = posFirstChild.y;
tmpDown = posLastChild.y +
Common.lastChild(dragTbl.rows[0].cells[j], “DIV”).offsetHeight;
}

if (movePos.y < tmpUp) {///从最下面插入虚线框
dashedElement.style.width =
Common.firstChild(dragTbl.rows[0].cells[j], “DIV”).offsetWidth – 2
* parseInt(dashedElement.style.borderWidth) + “px”;
dragTbl.rows[0].cells[j].insertBefore(dashedElement,
Common.firstChild(dragTbl.rows[0].cells[j], “DIV”));
}
else if (movePos.y > tmpDown) {///从最上面插入虚线框
dashedElement.style.width =
Common.lastChild(dragTbl.rows[0].cells[j], “DIV”).offsetWidth – 2 *
parseInt(dashedElement.style.borderWidth) + “px”;
dragTbl.rows[0].cells[j].appendChild(dashedElement);
}

}
}
}
}
};

document.onmouseup = function() {
if (dragObj.moveable) {
if (Common.isIE) {
dragDiv.releaseCapture();
}
else {
window.releaseEvents(dragDiv.mousemove);
}
dragObj.SetOpacity(dragDiv, 100);
dragObj.moveable = false;
dragObj.tmpX = 0;
dragObj.tmpY = 0;

//务必写在此IF内
dragDiv.style.left = “”;
dragDiv.style.top = “”;

dragDiv.style.width = “”;
dragDiv.style.position = “”;
dashedElement.parentNode.insertBefore(dragDiv, dashedElement);
dashedElement.parentNode.removeChild(dashedElement);
}

};

}
},
SetOpacity: function(dragDiv, n) {
if (Common.isIE) {
dragDiv.filters.alpha.opacity = n;
}
else {
dragDiv.style.opacity = n / 100;
}

},
GetZindex: function() {
var maxZindex = 0;
var divs = document.getElementsByTagName(“div”);
for (z = 0; z < divs.length; z++) {
maxZindex = Math.max(maxZindex, divs[z].style.zIndex);
}
return maxZindex;
},
RegDragsPos: function() {
var arrDragDivs = new Array();
var dragTbl = document.getElementById(“dragTable”);
var tmpDiv, tmpPos;
for (i = 0; i < dragTbl.getElementsByTagName(“div”).length; i++) {
tmpDiv = dragTbl.getElementsByTagName(“div”)[i];
if (tmpDiv.className == “dragDiv”) {
tmpPos = Common.getElementPos(tmpDiv);
arrDragDivs.push({ DragId: tmpDiv.id, PosLeft: tmpPos.x, PosTop:
tmpPos.y, PosWidth: tmpDiv.offsetWidth, PosHeight: tmpDiv.offsetHeight
});
}
}
return arrDragDivs;
}
}

window.onload = function() {
var dragTbl = document.getElementById(“dragTable”);
if (Common.getCookie(“configArr”)) {
var configArr = eval(“(” + Common.getCookie(“configArr”) + “)”);
for (i = 0; i < dragTbl.rows[0].cells.length; i++) {
for (j = 0; j < configArr[i].length; j++) {
dragTbl.rows[0].cells[i].appendChild(document.getElementById(configArr[i][j]));
}
}
}
new Drag(“titleBar1”, “dragDiv1”);
new Drag(“titleBar2”, “dragDiv2”);
new Drag(“titleBar3”, “dragDiv3”);
new Drag(“titleBar4”, “dragDiv4”);
new Drag(“titleBar5”, “dragDiv5”);
}

window.onunload = function() {
var dragTbl = document.getElementById(“dragTable”);
var configArr = “”;
for (i = 0; i < dragTbl.rows[0].cells.length; i++) {
var tmpStr = “”;
for (j = 0; j <
dragTbl.rows[0].cells[i].getElementsByTagName(“DIV”).length; j++)
{
tmpStr += (tmpStr == “” ? “” : “,”) + “‘” +
dragTbl.rows[0].cells[i].getElementsByTagName(“DIV”)[j].id +
“‘”;
}
configArr += (configArr == “” ? “” : “,”) + “[” + tmpStr + “]”;
}
//format like:
[[‘dragDiv3′,’dragDiv5’],[‘dragDiv4′,’dragDiv1’],[‘dragDiv2’]]
Common.setCookie(“configArr”, “[” + configArr + “]”);
}
</script>
<style type=”text/css”>
.spanDiv{
position:relative;
width:5px;
height:5px;
}

.dragDiv,.nodragDiv{
position:relative;
filter:alpha(opacity=100);
opacity:1;
margin-bottom:6px;
background-color:#FFFFFF;
}
</style>
</head>
<body >
<script type=”text/javascript”>

</script>
<table id=”dragTable” cellpadding=”3″ style=” border:solid 0px
green;width:98%;”>
<tr>
<td valign=”top” style=”width:30%”>
<div class=”dragDiv” id=”dragDiv1″ >
<table cellpadding=”0″ cellspacing=”0″ border=”1″
style=”width:100%;border-collapse:collapse; border-color:Blue”>
<tr id=”titleBar1″ style=”height:22px; text-align:left;
background-color:#547BC9;color:White; padding:3px;cursor:move;”>
<th align=”left” unselectable=”on” >Title1</th>
</tr>
<tr style=”height:130px;padding:3px;” align=”left” valign=”top”
>
<td
unselectable=”on”>那里的字相比较长….我来了….中国….中国…海外.,看一下有没有溢出></td>
</tr>
</table>
</div>
<div class=”dragDiv” id=”dragDiv2″>
<table cellpadding=”0″ cellspacing=”0″ border=”1″
style=”width:100%;border-collapse:collapse; border-color:Blue”>
<tr id=”titleBar2″ style=”height:22px; text-align:left;
background-color:#547BC9;color:White; padding:3px;cursor:move;”>
<th align=”left” unselectable=”on” >Title2</th>
</tr>
<tr style=”height:130px;padding:3px;” align=”left” valign=”top”
>
<td unselectable=”on”>Content2…</td>
</tr>
</table>
</div>
</td>
<td valign=”top” style=”width:50%”>
<div class=”dragDiv” id=”dragDiv3″>
<table cellpadding=”0″ cellspacing=”0″ border=”1″
style=”width:100%;border-collapse:collapse; border-color:Blue”>
<tr id=”titleBar3″ style=”height:22px; text-align:left;
background-color:#547BC9;color:White; padding:3px;cursor:move;”>
<th align=”left” unselectable=”on” >Title3</th>
</tr>
<tr style=”height:230px;padding:3px;” align=”left” valign=”top”
>
<td unselectable=”on”>Content3…</td>
</tr>
</table>
</div>
</td>
<td valign=”top” style=”width:20%”>
<div class=”dragDiv” id=”dragDiv4″>
<table cellpadding=”0″ cellspacing=”0″ border=”1″
style=”width:100%;border-collapse:collapse; border-color:Blue”>
<tr id=”titleBar4″ style=”height:22px; text-align:left;
background-color:#547BC9;color:White; padding:3px;cursor:move;”>
<th align=”left” unselectable=”on” >Title4</th>
</tr>
<tr style=”height:130px;padding:3px;” align=”left” valign=”top”
>
<td unselectable=”on”>Content4…</td>
</tr>
</table>
</div>
<div class=”dragDiv” id=”dragDiv5″>
<table cellpadding=”0″ cellspacing=”0″ border=”1″
style=”width:100%;border-collapse:collapse; border-color:Blue”>
<tr id=”titleBar5″ style=”height:22px; text-align:left;
background-color:#547BC9;color:White; padding:3px;cursor:move;”>
<th align=”left” unselectable=”on” >Title5</th>
</tr>
<tr style=”height:130px;padding:3px;” align=”left” valign=”top”
>
<td unselectable=”on”>Content5…</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</body>
</html>

<br><br><hr>
收集于网络,只为兴趣与学习调换,不作商业用途。</font></p>

 

但愿本文所述对大家的javascript程序设计有着辅助。

那篇小说首要介绍了JS仿i谷歌(Google)自定义首页模块拖拽特效的章程,实例分析了页面的布局及拖拽的实…

相关技术
时下打造 Web 操作系统的前端技术紧要有 Flex、Silverlight、ActiveX
插件等等,它们各有局地优缺点。
Flex
Flex 是一个绝妙的富客户端应用框架,专注于页面突显,Adobe
专业维护,统一稳定,而且其脚本语言 ActionScript3
是面向对象的,卓殊适合程序员使用。缺点则是耗电高,占用带宽多,对活动采取的帮衬性差。
Silverlight
Silverlight 是由微软生产的用来跟 Flash 抗衡的
RIA(富互连网接纳)解决方案,优点是拥有硬件级的加快作用,但它近来仍不成熟,对非
Windows 系统的支持性并不够好,且学习难度较大。
ActiveX 插件
ActiveX 插件同样是微软生产的 RIA
解决方案,它是一个开放的解决方案,可以同盟多样语言,不过它的败笔也是显然的,用户要求调整浏览器的安全等级并下载插件才能运行
RIA 应用,极大地降落了安全性。
HTML5
为推进 web 标准化运动的升华,W3C 推出了下一代 HTML 的正式 –
HTML5,为广大的商家所援救,因而有所可以的前景。它有以下特点:首先,为增强用户体验,强化了
web 网页的显现品质;其次,为适应 RIA 应用的进化,追加了地点数据库等 web
应用的成效;再一次,由于中度标准化以及众多浏览器厂商的卖力协助,它的包容性和安全性非凡高;最终它是一种精简的语言,不难为普遍开发者精晓。更为难得的是,由于节俭和耗电低,在移动设备上
HTML5 将有着更大的优势。因而更适合如 Web 操作系统一类的 RIA
应用的前端开发。
系统简介
本系统基于 HTML5 开发,利用 HTML5 引入的有余新技巧如拖拽
API、视频标签、本地数据库、draw
API、多线程开发、离线编程等提供了一个主干的 Web
操作系统环境,包括了对桌面的支撑、应用程序的支撑,提供了一个简单的摄像播放器和记事本以及一个时钟,并对系统日志举办了笔录,其它还提供了对离线状态的协理。
桌面落成
系统对桌面的支撑至关主要不外乎应用程序图标的打开与拖拽,以及桌面的上下文菜单等。
桌面拖拽
桌面的布局由自然数量的 div
组成,它们根据程序依次排列在矩形的桌面上,为应用程序图标的打开与拖拽提供了要旨的支撑。
清单 1. 创建 div
 
var iconHolder = document.createElement(“div”);
 iconHolder.id = ‘iconHolder’ + i;
 iconHolder.className = “iconHolder”;
 mainDiv.appendChild(iconHolder);
HTML5 提供了对 drag 事件的支撑,大大简化了贯彻拖拽的难度。通过对
dragstart 事件的监听,将被拖拽的应用程序图标所在的 div
记录下来,作为拖拽的源。
清单 2. 拖拽援救
 
iconHolder.addEventListener(“dragstart”, function(ev) {
 var dt = ev.dataTransfer;
 dt.setData(“text/plain”, ev.currentTarget.id);// 记录被拖拽图标的 id
 }, false);
 
 iconHolder.addEventListener(“drop”, function(ev) {
 var dt = ev.dataTransfer;
 var srcIconHolderId = dt.getData(“text/plain”);
 var srcIconHolder = document.getElementById(srcIconHolderId);
 
 // 倘诺拖拽至回收站,则删掉被拖拽图标,否则沟通两图标地方
 if(ev.currentTarget.firstChild && ev.currentTarget.firstChild.id ==
“recycleBin” &&
 srcIconHolder.firstChild.id != “recycleBin”){
                srcIconHolder.innerHTML = “”;
 }else if(ev.currentTarget.firstChild){
        var temp =  ev.currentTarget.firstChild;
        ev.currentTarget.appendChild(srcIconHolder.firstChild);
        srcIconHolder.appendChild(temp);
 }else{
       ev.currentTarget.appendChild(srcIconHolder.firstChild);
 }
 }, false);
因而对 drop 事件的监听,可以取得拖拽的源,以及拖拽的对象 div。若目的 div
为空,则将源 div 中的应用程序图标转移至目标 div 中。若目的 div
中已涵盖应用程序图标,则将五个图标的职位沟通。若回收站图标处于目的 div
中,回收站将发挥作用并将源 div 中的应用程序图标删除。图 1
显得了桌面拖拽的功力。
图 1.
桌面拖拽效果威尼斯人线上娱乐 14
先后打开
次第可以以三种方法打开,左键点击或透过上下文菜单打开。
经过监听 div 的 onclick 事件,获取要开辟的应用程序 id,并动用 openApp
方法打开相应的应用程序可完毕对左键点击的匡助。
清单 3. 左键点击
 
iconHolder.onclick =  function(ev){
 if(ev.currentTarget.firstChild){
        openApp(ev.currentTarget.firstChild.id);
        ev.stopPropagation();
 }
 };
经过监听 div 的 oncontextmenu 事件,获取要打开的应用程序 id,并选用openAppContextMenu
方法展现相应应用程序的上下文菜单,可完结对右键上下文菜单的支撑。
清单 4. 上下文菜单
 
iconHolder.oncontextmenu =  function(ev){
 if(ev.currentTarget.firstChild){
        openAppContextMenu(ev.currentTarget.firstChild.id, ev);
        ev.stopPropagation();
 }
 return false;
 };
动用相应应用程序的
id,可以收获相应应用程序的本子,并实施,同时在系统日志中记录下相应的操作。
清单 5. 主次打开
 
function openApp(appId){
    var time = new Date().getTime();
    var action = “open app”;
    var details = “open: ” + appId;
    addHistory(time, action, details);// 记录系统日志
    var appScript = getAppScript(appId);// 获取应用程序脚本
    eval(appScript);// 执行应用程序
 }
清单 6. 开辟程序上下文菜单
 
function openAppContextMenu(appId, ev){
 var appContextMenu = document.getElementById(“appContextMenu”);
 appContextMenu.style.display=”block”;// 令上下文菜单可知
 appContextMenu.style.pixelTop=ev.clientY;// 设置上下文菜单地点
 appContextMenu.style.pixelLeft=ev.clientX;
 appContextMenu.style.background = “#eee”;
 appContextMenu.style.color = “black”;
 appContextMenu.style.fontSize = “30”;
 appContextMenu.style.width = “200px”;
 appContextMenu.style.height = “220px”;
 appContextMenu.style.opacity = 0.5;// 令上下文菜单透明度为 50%
 appContextMenu.innerHTML = “”;
 
 // 获取应用程序相应上下文菜单的情节
 var apps = getApps();
 for(var i=0; i<apps.length; i++){
                if(apps[i].appId == appId){
                        for(var j=0; j<apps[i].contextMenu.length;
j++){
                        appContextMenu.innerHTML += “<div
class=’appContextMenuItem’
                        onclick=\”appContextMenu.style.display=’none’;”

复制代码 代码如下:

有关小说

连带搜索:

前日看什么

检索技术库

重回首页

  • iphone自定义怎么修改网络标识字符
  • 摩托罗拉Xshot通话背景设置方法
  • C#Winform使用扩张方法自定义富文本框(RichTex
  • 一个静态UITabelView的缓解方案—-CTStaticTableV
  • 神速领会Android七个常用自定义控件Toast
    Aler
  • Android动铁耳机线控详解,Bluetooth动铁耳机按钮监听(仿

相关频道:
HTML/CSS  HTML5  Javascript  jQuery  AJax教程  前者代码  正则表明式  Flex教程  WEB前端教程  

  •                         apps[i].contextMenu[j].action + “\”
                           
    onmouseover=’this.style.background=\”darkblue\”‘
                           
    onmouseout=’this.style.background=\”#eee\”‘>”
                           
    +apps[i].contextMenu[j].name+”</div>”;
                            }
                            break;
                     }  
     }
     }
    应用程序的上下文菜单由名为 appContextMenu 的 div 完成,将 oncontextmenu
    事件中的 clientX 及 clientY 作为上下文菜单出现的地点,并将其透明度设置为
    0.5。利用相应应用程序的 id
    获取上下文菜单对应的情节,并将其填写至上下文菜单。
    图 2 突显了应用程序上下文菜单打开时的职能。
    图 2.
    应用程序上下文菜单威尼斯人线上娱乐 15
    上下文菜单
    桌面上下文菜单的贯彻情势与应用程序上下文菜单的落到实处方式为主相仿,图 3
    和图 4 分别是桌面以及任务栏的上下文菜单。
    图 3.
    桌面上下文菜单威尼斯人线上娱乐 16

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“;
<html xmlns=”” >
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″
/>
    <title>JS仿i谷歌(Google)自定义首页模块拖拽效果</title>
    <script type=”text/javascript”>
        var Common = {
            getEvent: function() {//ie/ff
                if (document.all) {
                    return window.event;
                }
                func = getEvent.caller;
                while (func != null) {
                    var arg0 = func.arguments[0];
                    if (arg0) {
                        if ((arg0.constructor == Event ||
arg0.constructor == MouseEvent) || (typeof (arg0) == “object” &&
arg0.preventDefault && arg0.stopPropagation)) {
                            return arg0;
                        }
                    }
                    func = func.caller;
                }
                return null;
            },
            getMousePos: function(ev) {
                if (!ev) {
                    ev = this.getEvent();
                }
                if (ev.pageX || ev.pageY) {
                    return {
                        x: ev.pageX,
                        y: ev.pageY
                    };
                }

帮客评论

 图 4.
职分栏上下文菜单威尼斯人线上娱乐 17
视频播放器
系统提供了一个简约的视频播放器,它协理从系统外部拖拽摄像文件进行播放。
切合互连网媒体的升高,HTML5 提供了视频标签 video
以便于拉长对视频的支撑,大大简化了 web
播放器开发的难度,开发人士仅凭几行代码,就足以付出出一个基本功效完善的视频播放器。
清单 7. 摄像标签的创立
 
var video = document.createElement(‘video’);
 video.id =’video’;
 video.src =”;
 video.width  = 370;
 video.height = 260;
 video.controls = ‘controls’;
 video.className = ‘video’;
 appHolder.appendChild(video);
 addDragSupport(appHolder);
清单 7 中结构了一个 video 标签并将其添加到一个名为 appHolder 的 div
中。代码的结尾一行为其添加了拖拽的帮衬。
HTML5 不但扶助浏览器内的拖拽,也支撑浏览器与地点系统里头的拖拽。清单 8
突显了为一个 div 添加拖拽帮忙的进程。
清单 8. 添加拖拽援救
 
function addDragSupport(dropbox){
 document.addEventListener(“dragenter”, function(e){
 }, false);
 document.addEventListener(“dragleave”, function(e){
 }, false);
 dropbox.addEventListener(“dragenter”, function(e){
 }, false);
 dropbox.addEventListener(“dragleave”, function(e){
 }, false);
 dropbox.addEventListener(“dragenter”, function(e){
 e.stopPropagation();
 e.preventDefault();
 }, false);
 dropbox.addEventListener(“dragover”, function(e){
 e.stopPropagation();
 e.preventDefault();
 }, false);
 dropbox.addEventListener(“drop”, function(e){
 handleFiles(e.dataTransfer.files, e.currentTarget, e);
 e.stopPropagation();
 e.preventDefault();             
 }, false); 
 }
个中,handleFiles 函数表明了怎么样对拖拽的文本举行拍卖。
清单 9. 拖拽处理
 
function handleFiles(files, dropbox, e) {
    if(files.length == 0){// 若文件不存在,则用相应文本代替
         var dt = e.dataTransfer;
         var text = dt.getData(“text/plain”);
         var p = document.createElement(“p”);
         p.innerHTML += text;
         dropbox.appendChild(p);
         return;
 }
 
 for (var i = 0; i < files.length; i++) {
         var file = files[i];
         var fileProcessor = dropbox.firstChild;
         fileProcessor.classList.add(“obj”);
         fileProcessor.file = file; // 添加文书
 
         var reader = new FileReader();
         reader.onload = (// 读取文件内容
         function(aFileProcessor) {
                 return function(e) {
                 aFileProcessor.src = e.target.result;
 };
 }
 )(fileProcessor);
  reader.readAsDataURL(file);
 }
 }
handleFiles
函数首先判断文件是不是存在,若不存在,则以相应文字代替,若存在,则对
所有文件相继举办处理。向 fileprocessor( 这里是摄像标签 )
添加文件,然后选取 File里德r 读取文件内容至 fileprocessor 开展处理。
图 5 突显了拖拽一个视频文件 movie.ogg 到播放器的效益。
图 5.
摄像播放威尼斯人线上娱乐 18

                if (document.documentElement &&
document.documentElement.scrollTop) {
                    return {
                        x: ev.clientX +
document.documentElement.scrollLeft –
document.documentElement.clientLeft,
                        y: ev.clientY +
document.documentElement.scrollTop –
document.documentElement.clientTop
                    };
                }
                else if (document.body) {
                    return {
                        x: ev.clientX + document.body.scrollLeft –
document.body.clientLeft,
                        y: ev.clientY + document.body.scrollTop –
document.body.clientTop
                    };
                }
            },
            getElementPos: function(el) {
                el = this.getItself(el);
                var _x = 0, _y = 0;
                do {
                    _x += el.offsetLeft;
                    _y += el.offsetTop;
                } while (el = el.offsetParent);
                return { x: _x, y: _y };
            },
            getItself: function(id) {
                return “string” == typeof id ?
document.getElementById(id) : id;
            },
            getViewportSize: { w: (window.innerWidth) ?
window.innerWidth : (document.documentElement &&
document.documentElement.clientWidth) ?
document.documentElement.clientWidth :
(document.body?document.body.offsetWidth:0), h: (window.innerHeight) ?
window.innerHeight : (document.documentElement &&
document.documentElement.clientHeight) ?
document.documentElement.clientHeight : (document.body ?
document.body.offsetHeight : 0) },
            isIE: document.all ? true : false,
            setOuterHtml: function(obj, html) {
                var Objrange = document.createRange();
                obj.innerHTML = html;
                Objrange.selectNodeContents(obj);
                var frag = Objrange.extractContents();
                obj.parentNode.insertBefore(frag, obj);
                obj.parentNode.removeChild(obj);
            },
            firstChild: function(parentObj, tagName) {
                if (Common.isIE) {
                    return parentObj.firstChild;
                }
                else {
                    var arr = parentObj.getElementsByTagName(tagName);
                    return arr[0];
                }
            },
            lastChild: function(parentObj, tagName) {
                if (Common.isIE) {
                    return parentObj.lastChild;
                }
                else {
                    var arr = parentObj.getElementsByTagName(tagName);
                    return arr[arr.length – 1];
                }
            },
            setCookie: function(name, value) {
                document.cookie = name + “=” + value;
            },
            getCookie: function(name) {
                var strCookie = document.cookie;
                var arrCookie = strCookie.split(“; “);
                for (var i = 0; i < arrCookie.length; i++) {
                    var arr = arrCookie[i].split(“=”);
                    if (!arr[1]) {
                        return “”;
                    }
                    if (arr[0] == name) {
                        return arr[1];
                    }
                }
                return “”;
            },
            delCookie: function(name) {
                var exp = new Date();
                exp.setTime(exp.getTime() – 1);
                var cval = this.getCookie(name);
                if (cval != null) document.cookie = name + “=” + cval +
“;expires=” + exp.toGMTString();
            }
        }
        var Class = {
            create: function() {
                return function() { this.init.apply(this, arguments);
}
            }
        }
        var Drag = Class.create();
        Drag.prototype = {
            init: function(titleBar, dragDiv, Options) {
                //设置点击是不是透明,默许透明60%
                titleBar = Common.getItself(titleBar);
                dragDiv = Common.getItself(dragDiv);
                this.dragArea = { maxLeft: -9999, maxRight: 9999,
maxTop: -9999, maxBottom: 9999 };
                if (Options) {
                    this.opacity = Options.opacity ?
(isNaN(parseInt(Options.opacity)) ? 100 : parseInt(Options.opacity)) :
100;
                    if (Options.area) {
                        if (Options.area.left &&
!isNaN(parseInt(Options.area.left))) { this.dragArea.maxLeft =
Options.area.left };
                        if (Options.area.right &&
!isNaN(parseInt(Options.area.right))) { this.dragArea.maxRight =
Options.area.right };
                        if (Options.area.top &&
!isNaN(parseInt(Options.area.top))) { this.dragArea.maxTop =
Options.area.top };
                        if (Options.area.bottom &&
!isNaN(parseInt(Options.area.bottom))) { this.dragArea.maxBottom =
Options.area.bottom };
                    }
                }
                else {
                    this.opacity = 60;
                }
                this.originDragDiv = null;
                this.tmpX = 0;
                this.tmpY = 0;
                this.moveable = false;
                this.dragArray = [];

地方存储
Web
操作系统平日将多数数量存储于劳动器端,那样做的益处不言而喻,数据存储空间更大,安全性更好。但是如此做也有不足之处,由于网络的祥和仍然较本地磁盘差,所以在退出网络的场所下,Web
操作系统无法获取相应的多少资源,由此 Web
操作系统要求自然的访问当地存储空间的力量,当然本地存储空间仅是作为劳务器端存储的一个补给,它的上空有限,访问也饱尝一定的范围。
直接以来,HTML 以 Cookie
作为走访当地空间的办法,但是,那种方法有着众多缺陷和不足,如存储的多少格式过于不难,平日仅为键值对;存储的长空大小有限。为此,HTML5
提供了地面数据库以增加地点存储空间的访问能力,它是一个简化版的数据库,可以匡助模拟的
SQL 以及简单的事务处理等职能。
系统为支撑地点存储,创立了一个名为 MyData 的数据库。清单 10
呈现了数据库创制的历程。
清单 10. 创立数据库
 
var db;
var openDatabase;
if(openDatabase != undefined)
    db = openDatabase(‘MyData’, ”, ‘My Database’, 102400);
中间 MyData 为数据库的称号,省略的参数为数据库的版本,My Database
为显示的称谓,最终的数字为数据库预估长度(以字节为单位)。
系统日志将系统在某一时间的行为操作记录下来,本地数据库为其提供仓储援救。日志在数据库中蕴藏为表
History,包括 3 个字段,分别为时间,操作,及操作的详细音信。清单 11
显示了系统是哪些记录日志的。
清单 11. 日记记录
 
var time = new Date().getTime(); 
 var action = “open app”;
 var details = “open: ” + appId;
 addHistory(time, action, details);// 向系统日志中添加一条记下
 
 function addHistory(time, action, details){
 if(openDatabase != undefined)
 db.transaction(
 function(tx) {
 tx.executeSql(‘CREATE TABLE IF NOT EXISTS History(time INTEGER,
 action TEXT, details TEXT)’,[]);// 创制日志记录表 
 tx.executeSql(‘INSERT INTO History VALUES(?, ?, ?)’, [time,
 action, details], // 插入一条日志
 function(tx, rs) { 
 //alert(“store: “+time+”-“+action+”-“+details);  
              }, 
 function(tx, error) {
    //alert(error.source + “::” + error.message); 
 }); 
 }); 
 }
清单的第一局地显得了何等调用日志记录,第二片段显得了日志记录的详细进程。在一个
transaction 中,首先判断表 History
是还是不是存在,若不存在,则开创它。第二局地进行一条 SQL
语句,向数据库中插入当前的日记。
因而查找表 History,大家可以查阅系统日志,清单 12
展现了怎么着从数据库中查询系统日志,并将其出示出来。
清单 12. 日记呈现
 
var historyTable = document.getElementById(“historyTable”);
 
 // 定义表头
 historyTable.innerHTML = “”;
 var th = document.createElement(‘thead’);
 th.style = “color:#CC3300”;
 var th1 = document.createElement(‘td’);
 th1.align = “center”;
 th1.width=300;
 th1.innerHTML = “Time”;
 var th2 = document.createElement(‘td’);
 th2.align = “center”;
 th2.width=100;
 th2.innerHTML = “Action”;
 var th3 = document.createElement(‘td’);
 th3.align = “center”;
 th3.width=150;
 th3.innerHTML = “Details”;
 th.appendChild(th1); 
 th.appendChild(th2); 
 th.appendChild(th3);
 historyTable.appendChild(th);
 
 if(openDatabase != undefined)
 db.transaction(function(tx) {   
 tx.executeSql(‘SELECT * FROM History’, [], function(tx, rs)
 { 
      // 将日志逐条显示到表的各行中
 for(var i = 0; i < rs.rows.length && i<15; i++)
{                   
 var tr = document.createElement(‘tr’);
 var td1 = document.createElement(‘td’);
 td1.style.paddingLeft = “3px”;
 td1.style.paddingRight = “3px”;
 
 var t = new Date(); 
 t.setTime(rs.rows.item(i).time); 
 td1.innerHTML = t.toLocaleDateString()+
” “+t.toLocaleTimeString();
 
 var td2 = document.createElement(‘td’); 
 td2.style.paddingLeft = “3px”;
 td2.style.paddingRight = “3px”;
 td2.innerHTML = rs.rows.item(i).action;
 
 var td3 = document.createElement(‘td’);
 td3.style.paddingLeft = “3px”;
 td3.style.paddingRight = “3px”;
 td3.innerHTML = rs.rows.item(i).details; 
 
 tr.appendChild(td1); 
 tr.appendChild(td2); 
 tr.appendChild(td3);
 
 historyTable.appendChild(tr);                  
 } 
 }); 
 });
清单 12 中,首先得到用于显示的日记的 HTML 表格
historyTable,并安装其样式及表头。
然后在一个 transaction( 事务 ) 中,执行一条 SQL
语句,查询系统日志,并将每条日志添加为 historyTable 中的一行以便彰显。图
6 突显了系统日志的效率。
图 6.
系统日志威尼斯人线上娱乐 19

                var dragObj = this;
                var dragTbl = document.getElementById(“dragTable”);

记事本
系统提供了一个不难的记事本,完结了文本文档的基本操作。文本文档包罗标题和内容七个显式属性,以及一个名为
id
的隐式属性。与系统日志类似,本地数据库为文本数据的储存提供了底部的支撑。图
7 呈现了记事本程序的界面。
图 7.
记事本威尼斯人线上娱乐 20

                titleBar.onmousedown = function(e) {
                    var ev = e || window.event || Common.getEvent();
                    //只同意通过鼠标左键进行拖拽,IE鼠标左键为1
FireFox为0
                    if (Common.isIE && ev.button == 1 || !Common.isIE &&
ev.button == 0) {
                    }
                    else {
                        return false;
                    }

当编辑完文档的标题与内容后,点击左上角的保留按钮,将实施 createFile
函数。清单 13 突显了 createFile 函数的详实进度。
清单 13. 创制文件
 
function createFile(fileId, fileTitle, fileContent){
     var idx = 1;
     var update = false;//false 表示新建,true 表示修改
 
     if(openDatabase != undefined)
         db.transaction(function(tx) {
         tx.executeSql(‘CREATE TABLE IF NOT EXISTS TextFiles(idx
INTEGER,
         title TEXT, content TEXT)’,[]);// 创制文本文档表
         tx.executeSql(‘SELECT * FROM TextFiles’, [], function(tx,
rs){
             for(var i = 0; i < rs.rows.length; i++) {
                // 若文档存在,则修改它
                 if(rs.rows.item(i).idx == fileId){
                     db.transaction(function(tx) {   
                     tx.executeSql(‘UPDATE TextFiles
                     SET title=?, content=?
                     WHERE idx=’+fileId,
                     [fileTitle, fileContent],
                     function(tx, rs) {  
                             alert(“update successfully”);
                     }); 
                 });
                 return;
             }        
 }   
 // 若文档不设有,则新建一个文档        
 if(rs.rows.length>0)
 idx = rs.rows.item(rs.rows.length-1).idx + 1;
 db.transaction(function(tx) {                        
 tx.executeSql(‘INSERT INTO TextFiles VALUES(?, ?, ?)’, [idx,
fileTitle, fileContent],
               function(tx, rs){ 
               alert(“save successfully: “+idx+”-“+fileTitle+
“-“+fileContent); 
               createFileIcon(idx); 
 }, 
 function(tx, error) {
                alert(error.source + “::” + error.message); 
                 }); 
             });
         });
     });
 }
清单 13 首先在一个 transaction 中,首先判断用于存储文本文档的表
TextFiles 是不是留存,若不存在,则创立它。然后经过查询表 TextFiles
判断文本文档是还是不是存在,若存在,则当前操作为更新操作,程序将履行一条 SQL
语句,对方今文本文档进行更新。若不设有,则取当前最大文档 id 并加 1
看成新文档的 id,并执行一条 SQL 语句,将文档音信,包蕴文档
id,以及标题和内容插入到数据库中,并于插入操作停止后的回调方法中,利用
createFileIcon 方法在桌面上为新文档创设一个文档图标。清单 14 突显了
createFileIcon 方法的求实进度。
清单 14. 创办文档图标
 
function createFileIcon(fileId){
     var iconHolder;
     for(var i=1;i<=120;i++){// 查询首个为空的地方
         iconHolder = document.getElementById(‘iconHolder’ +
if(!iconHolder.firstChild ){
             var text = document.createElement(‘img’);
             text.src = “images/text.gif”;
             text.id = fileId;
             iconHolder.appendChild(text);
             text.onclick =  function(ev){ 
                 if(ev.currentTarget){
                 openApp(‘notebook’);// 打开记事本应用程序
                 var saveHolder =
document.getElementById(‘saveHolder’);
                 saveHolder.onclick  = function(){
                     var title = document.getElementById(‘title’);
                     var content = document.getElementById(‘content’);
                     createFile(fileId, title.value, content.value);//
创立文本文档
                 };
 
             var openedFileId = ev.currentTarget.id;
             if(openDatabase != undefined)
             db.transaction(function(tx) {// 查询数据库,展现文档内容
             tx.executeSql(‘SELECT * FROM TextFiles’, [],
function(tx, rs){
                 for(var i = 0; i < rs.rows.length; i++) { 
                 if((rs.rows.item(i).idx+””) == (openedFileId+””)){
                     var title = document.getElementById(‘title’);
                     var content =
document.getElementById(‘content’);          
                     title.value =
rs.rows.item(i).title;                  
                     content.value = rs.rows.item(i).content;}    
                              }
                });
 });
   ev.stopPropagation();
 }
 };
 break;
 }    
 }//for
 }
清单 14 首先在桌面中搜索一个空的 div,然后创设一个文档图标,并将其填充至
div。文档图标有一个 id 属性对应文档
id。最终为文档图标添加点击事件处理函数,当点击文档图标时,会率先打开记事本,然后按照文档图标的
id 查询数据库,提取文档的标题和情节进行展现。
图 8 突显了创办后的文本文档,点击后的效益如图 7
所示。威尼斯人线上娱乐 21
图 8. 文本文档
时钟
系统提供了一个简约的钟表用以彰显当前时间,它由一个表面以及分针和时针组成,可以随着时光的变化动态地转移。以往的
web 应用使用 JavaScript 或 Flash 达成此类功用,其复杂同理可得。借助
HTML5 的 draw
API,可以轻松地画出所需的图样,极大的有利了此类应用的营造,别的,HTML5
还提供了以往 JavaScript 不可能支撑的二十四线程编程,大大增强了 web
应用的交互性和丰硕性。
钟表有一个主干的表盘,它仅是一副简单的图纸,如图 9 所示。
图 9.
表盘威尼斯人线上娱乐 22

                   
//处理分外处境:在最上/下边MOVE时不蒙受现有DIV的意况下,又赶回开头拖拽的列最上/下方
                    var tmpColId;
                    for (c = 0; c < dragTbl.rows[0].cells.length;
c++) {
                        for (k = 0; k <
dragTbl.rows[0].cells[c].getElementsByTagName(“DIV”).length; k++)
{
                            if (dragDiv.id ==
dragTbl.rows[0].cells[c].getElementsByTagName(“DIV”)[k].id) {
                                tmpColId = c;
                                break;
                            }
                        }
                    }
                    var tmpPosFirstChild =
Common.getElementPos(Common.firstChild(dragTbl.rows[0].cells[tmpColId],
“DIV”));
                    var tmpPosLastChild =
Common.getElementPos(Common.lastChild(dragTbl.rows[0].cells[tmpColId],
“DIV”));
                    var tmpObj = { colId: tmpColId, firstChildUp:
tmpPosFirstChild.y, lastChildDown: tmpPosLastChild.y +
Common.lastChild(dragTbl.rows[0].cells[tmpColId],
“DIV”).offsetHeight };

在表面之上,建有一个 canvas( 画布 ),如清单 15 所示。
清单 15. 画布
1
<canvas id=”canvas” width=”128px” height=”128px”></canvas>
接下去,清单 17
将在画布上模拟出时钟以及分针,在这在此之前,额外须要一个后台线程用以总括时间,它被定义在名为
time.js 的单独脚本文件中,如清单 16 所示。
清单 16. 后台线程
 
onmessage = function(event)
 {
 //var i = 1;
    setInterval(function() {
    //i++;
    postMessage(“”);
    }, 60000);
 };
每过 60 分钟,后台线程将会上前台线程发送一个空新闻,以报告前台线程有 60
分钟已经离世了。
清单 17. 前台线程的开首化
 
var canvas = document.getElementById(“canvas”);
 if (canvas == null) 
 return false; 
 var context = canvas.getContext(‘2d’);// 这是一个二维的图像
 context.lineWidth = 2;
 context.translate(64, 64);// 定义原点
 
 // 开端化分针
 context.beginPath();
 context.moveTo(0,0);// 从原点起初
 var date = new Date();
 var mhx = 37*Math.cos((date.getMinutes()-15)*Math.PI/30);
 var mhy = 37*Math.sin((date.getMinutes()-15)*Math.PI/30);
 context.lineTo(mhx, mhy);// 至分针末端所在地方
 context.closePath();
 context.stroke();
 
 // 初始化时针
 context.beginPath();
 context.moveTo(0,0);// 从原点开始
 var date = new Date();
 var hour = date.getHours();
 if(hour>=12)
 hour = hour – 12;
 var minute = date.getMinutes();
 var hhx = 27*Math.cos((hour-3)*Math.PI/6 + minute*Math.PI/360);
 var hhy = 27*Math.sin((hour-3)*Math.PI/6 + minute*Math.PI/360);
 context.lineTo(hhx, hhy);// 至时针末端所在地方
 context.closePath();
 context.stroke();
前台线程首先会拿走
canvas,并设置表盘中央为坐标原点。然后,获取当前时间,统计分针当前所应指向的坐标,然后从原点出发,画出分针。对于时针,若系统为
24 小时制,要求首先转化为 12 小时制,此后的拍卖接近于分针。
接下去,必要将前台与后台线程联系起来,利用 HTML5
提供的八线程编程方法,表明 Worker 对象作为后台线程的代理,并运用
onmessage 事件,对后台线程发出的音讯进行处理。
清单 18. 前台线程的 onmessage 事件
1
var worker = new Worker(“js/timer.js”);
 
 worker.onmessage = function(event){
 
    context.clearRect(-64, -64, 128, 128);// 清空分针和时针
 
    // 重画分针
    context.beginPath();
    context.moveTo(0,0);// 从原点开首 
    var date = new Date();
    var mhx = 37*Math.cos((date.getMinutes()-15)*Math.PI/30);
    var mhy = 37*Math.sin((date.getMinutes()-15)*Math.PI/30);
    context.lineTo(mhx, mhy);// 至分针末端所在地点
    context.closePath();
    context.stroke();
 
        // 重画时针
    context.beginPath();
    context.moveTo(0,0);// 从原点初阶 
    var date = new Date();
    var hour = date.getHours();
    if(hour>=12)
    hour = hour – 12;
    var minute = date.getMinutes();
    var hhx = 27*Math.cos((hour-3)*Math.PI/6 + minute*Math.PI/360);
    var hhy = 27*Math.sin((hour-3)*Math.PI/6 + minute*Math.PI/360);
    context.lineTo(hhx, hhy);// 至时针末端所在地点
    context.closePath();
    context.stroke();
    };
    worker.postMessage(“”);
每过 60
分钟,后台线程将会上前台线程发送一个空音信,前台线程接收到音信后,首先,清空
canvas,然后再度获得当前时刻,计算分针以及时针对应的坐标,玉石俱焚复画出时针和分针,从而做到对分针以及时针的更新,最后,每过
1 分钟,表盘更新三次,从而模拟出动态时针的效率,如图 10
所示。威尼斯人线上娱乐 23
图 10. 时钟
离线支持
即使如此 Web
操作系统的亮点是足以利用网络随时遍地进行访问。可是在无法访问互连网的意况下,Web
操作系统便无能为力发挥功效。由此 Web
操作系统有必不可少在离线状态下,还可以对有些接纳及其职能拓展支撑。事实上,各类浏览器已提供了各个种种的缓存机制以提供对离线应用的支撑,然后那几个缓存机制往往是暂时性的,不可控的。HTML5
为开发人士提供了化解此难题的另一种途径,它提供了一种永久性的,自定义的缓存方法,使得
Web 操作系统可以在离线的情景下,如故援救部分选择的法力。
HTML5
离线扶助的主导是一个缓存清单,其中列出了亟需缓存的文书,本系统中的缓存文件
index.manifest,如清单 19 所示。
清单 19. 缓存清单
 
CACHE MANIFEST
#version 1.10
CACHE:
index.html
js/app.js
js/clock.js
js/data.js
js/database.js
js/desktop.js
js/history.js
js/taskbar.js
js/timer.js
js/file.js
js/utils.js
css/index.css
images/appHolder1.png
images/background.jpg
images/clock.png
images/close.gif
images/computer.gif
images/history.png
images/network.gif
images/recycleBin.gif
images/startIcon.png
images/taskBar.png
images/vidioplayer.gif
images/notebook.gif
images/text.gif
images/save.gif
movs/movie.ogg
sounds/WindowsLogonSound.wav
里头,CACHE MANIFEST 标示本文件为缓存文件,#version 1.10
标示了本文件的本子。
CACHE
之后所列支的则是开发人士自定义的始末,其中含有了有着在离线状态下用户访问应用程序所必备的文本。
缓存清单定义截止后,在 index.html
中插入那些清单文件名,那样,当浏览器加载那个页面的时候,会自动缓存清单文件中所罗列的文件。
清单 20. 行使缓存清单
1
<html manifest=”index.manifest”>
值得一提的是,若要帮衬离线缓存,除客户端浏览器的支撑以外,服务端的支撑也是必备的,就本系统所运用的
tomcat 而言,须要在其陈设文件 web.xml 中添加清单 21 所示的条款。
清单 21. 服务器端缓存配置
 
<mime-mapping>
 <extension>manifest</extension>
 <mime-type>text/cache-manifest</mime-type>
 </mime-mapping>
终极,禁用本地机械的互连网,重新打开浏览器并走访 Web
操作系统所在的网址,系统中的一大半应用程序依旧能够正常办事,如图 11
所示。威尼斯人线上娱乐 24
  

                    //保存当前可拖拽各容器的所在地点
          dragObj.dragArray = dragObj.RegDragsPos();

Web
操作系统有着传统操作系统不可以比拟的优势,如可以随时四处使用其余极端进行走访,数据保存在服务器端,空间更大,数据安…

                    //插入虚线框
                    var dashedElement = document.createElement(“div”);
                    dashedElement.style.cssText =
dragDiv.style.cssText;
                    dashedElement.style.border = ” dashed 2px #aaa “;
                    dashedElement.style.marginBottom = “6px”;
                    dashedElement.style.width = dragDiv.offsetWidth – 2
* parseInt(dashedElement.style.borderWidth) + “px”;
//减去boderWidth使虚线框大小保持与dragDiv一致
         dashedElement.style.height = dragDiv.offsetHeight – 2 *
parseInt(dashedElement.style.borderWidth) + “px”; //加上px
保证FF正确                   
          dashedElement.style.position = “relative”;
                    if (dragDiv.nextSibling) {
                        dragDiv.parentNode.insertBefore(dashedElement,
dragDiv.nextSibling);
                    }
                    else {
                        dragDiv.parentNode.appendChild(dashedElement);
                    }
                    //拖动时成为absolute
                    dragDiv.style.width = dragDiv.offsetWidth + “px”;
                    dragDiv.style.position = “absolute”;

                    dragObj.moveable = true;
                    dragDiv.style.zIndex = dragObj.GetZindex() + 1;

                    var downPos = Common.getMousePos(ev);
                    dragObj.tmpX = downPos.x – dragDiv.offsetLeft;
                    dragObj.tmpY = downPos.y – dragDiv.offsetTop;

                    if (Common.isIE) {
                        dragDiv.setCapture();
                    } else {
                        window.captureEvents(Event.mousemove);
                    }

                    dragObj.SetOpacity(dragDiv, dragObj.opacity);

                    //FireFox 去除容器内拖拽图片难点
                    if (ev.preventDefault) {
                        ev.preventDefault();
                        ev.stopPropagation();
                    }

                    document.onmousemove = function(e) {
                        if (dragObj.moveable) {
                            var ev = e || window.event ||
Common.getEvent();
                            //IE 去除容器内拖拽图片难题
                            if (document.all) //IE
                            {
                                ev.returnValue = false;
                            }

                            var movePos = Common.getMousePos(ev);
                            dragDiv.style.left =
Math.max(Math.min(movePos.x – dragObj.tmpX, dragObj.dragArea.maxRight),
dragObj.dragArea.maxLeft) + “px”;
                            dragDiv.style.top =
Math.max(Math.min(movePos.y – dragObj.tmpY, dragObj.dragArea.maxBottom),
dragObj.dragArea.maxTop) + “px”;

                            var targetDiv = null;
                            for (var k = 0; k <
dragObj.dragArray.length; k++) {
                                if (dragDiv == dragObj.dragArray[i])
{
                                    continue;
                                }

                                if (movePos.x >
dragObj.dragArray[k].PosLeft && movePos.x <
dragObj.dragArray[k].PosLeft + dragObj.dragArray[k].PosWidth
                                    && movePos.y >
dragObj.dragArray[k].PosTop && movePos.y <
dragObj.dragArray[k].PosTop + dragObj.dragArray[k].PosHeight
                                ) {
                                    targetDiv =
document.getElementById(dragObj.dragArray[k].DragId);
                                    if (movePos.y <
dragObj.dragArray[k].PosTop + dragObj.dragArray[k].PosHeight / 2)
{
                                        //往上移
                                        dashedElement.style.width =
targetDiv.offsetWidth – 2 * parseInt(dashedElement.style.borderWidth) +
“px”;
                                       
targetDiv.parentNode.insertBefore(dashedElement, targetDiv);
                                    }
                                    else {
                                        //往下移
                                        dashedElement.style.width =
targetDiv.offsetWidth – 2 * parseInt(dashedElement.style.borderWidth) +
“px”;
                                        if (targetDiv.nextSibling) {
                                           
targetDiv.parentNode.insertBefore(dashedElement,
targetDiv.nextSibling);
                                        }
                                        else {
                                           
targetDiv.parentNode.appendChild(dashedElement);
                                        }
                                    }
                                }
                            }
                           
                            for (j = 0; j <
dragTbl.rows[0].cells.length; j++) {
                                var startLeft =
Common.getElementPos(dragTbl.rows[0].cells[j]).x;
                                if (movePos.x > startLeft &&
movePos.x < startLeft + dragTbl.rows[0].cells[j].offsetWidth) {
                                    ///列无DIV
                                    if
(dragTbl.rows[0].cells[j].getElementsByTagName(“div”).length == 0)
{
                                        dashedElement.style.width =
dragTbl.rows[0].cells[j].offsetWidth – 2 *
parseInt(dashedElement.style.borderWidth) + “px”;
                                       
dragTbl.rows[0].cells[j].appendChild(dashedElement);
                                    }
                                    else {
                                        var posFirstChild =
Common.getElementPos(Common.firstChild(dragTbl.rows[0].cells[j],
“DIV”));
                                        var posLastChild =
Common.getElementPos(Common.lastChild(dragTbl.rows[0].cells[j],
“DIV”));
                                       
//处理非凡处境:在最上/上面MOVE时不碰到现有DIV的事态下,又重回伊始拖拽的列最上/下方
                                        var tmpUp, tmpDown;
                                        if (tmpObj.colId == j) {
                                            tmpUp =
tmpObj.firstChildUp;
                                            tmpDown =
tmpObj.lastChildDown;
                                        }
                                        else {
                                            tmpUp = posFirstChild.y;
                                            tmpDown = posLastChild.y +
Common.lastChild(dragTbl.rows[0].cells[j], “DIV”).offsetHeight;
                                        }

                                        if (movePos.y < tmpUp)
{///从最上面插入虚线框
                                            dashedElement.style.width =
Common.firstChild(dragTbl.rows[0].cells[j], “DIV”).offsetWidth – 2
* parseInt(dashedElement.style.borderWidth) + “px”;
                                           
dragTbl.rows[0].cells[j].insertBefore(dashedElement,
Common.firstChild(dragTbl.rows[0].cells[j], “DIV”));
                                        }
                                        else if (movePos.y > tmpDown)
{///从最上面插入虚线框
                                            dashedElement.style.width =
Common.lastChild(dragTbl.rows[0].cells[j], “DIV”).offsetWidth – 2 *
parseInt(dashedElement.style.borderWidth) + “px”;
                                           
dragTbl.rows[0].cells[j].appendChild(dashedElement);
                                        }

                                    }
                                }
                            }
                        }
                    };

                    document.onmouseup = function() {
                        if (dragObj.moveable) {
                            if (Common.isIE) {
                                dragDiv.releaseCapture();
                            }
                            else {
                               
window.releaseEvents(dragDiv.mousemove);
                            }
                            dragObj.SetOpacity(dragDiv, 100);
                            dragObj.moveable = false;
                            dragObj.tmpX = 0;
                            dragObj.tmpY = 0;

                            //务必写在此IF内
                            dragDiv.style.left = “”;
                            dragDiv.style.top = “”;

                            dragDiv.style.width = “”;
                            dragDiv.style.position = “”; 
                           
dashedElement.parentNode.insertBefore(dragDiv, dashedElement);
                           
dashedElement.parentNode.removeChild(dashedElement);
                        }

                    };

                }
            },
            SetOpacity: function(dragDiv, n) {
                if (Common.isIE) {
                    dragDiv.filters.alpha.opacity = n;
                }
                else {
                    dragDiv.style.opacity = n / 100;
                }

            },
            GetZindex: function() {
                var maxZindex = 0;
                var divs = document.getElementsByTagName(“div”);
                for (z = 0; z < divs.length; z++) {
                    maxZindex = Math.max(maxZindex,
divs[z].style.zIndex);
                }
                return maxZindex;
            },
            RegDragsPos: function() {
                var arrDragDivs = new Array();
                var dragTbl = document.getElementById(“dragTable”);
                var tmpDiv, tmpPos;
                for (i = 0; i <
dragTbl.getElementsByTagName(“div”).length; i++) {
                    tmpDiv = dragTbl.getElementsByTagName(“div”)[i];
                    if (tmpDiv.className == “dragDiv”) {
                        tmpPos = Common.getElementPos(tmpDiv);
                        arrDragDivs.push({ DragId: tmpDiv.id, PosLeft:
tmpPos.x, PosTop: tmpPos.y, PosWidth: tmpDiv.offsetWidth, PosHeight:
tmpDiv.offsetHeight });
                    }
                }
                return arrDragDivs;
            }
        }

        window.onload = function() {
            var dragTbl = document.getElementById(“dragTable”);
            if (Common.getCookie(“configArr”)) {
                var configArr = eval(“(” + Common.getCookie(“configArr”)

  • “)”);
                    for (i = 0; i < dragTbl.rows[0].cells.length; i++)
    {
                        for (j = 0; j < configArr[i].length; j++) {
                           
    dragTbl.rows[0].cells[i].appendChild(document.getElementById(configArr[i][j]));
                        }
                    }
                }
                new Drag(“titleBar1”, “dragDiv1”);
                new Drag(“titleBar2”, “dragDiv2”);
                new Drag(“titleBar3”, “dragDiv3”);
                new Drag(“titleBar4”, “dragDiv4”);
                new Drag(“titleBar5”, “dragDiv5”);
            }

        window.onunload = function() {
            var dragTbl = document.getElementById(“dragTable”);
            var configArr = “”;
            for (i = 0; i < dragTbl.rows[0].cells.length; i++) {
                var tmpStr = “”;
                for (j = 0; j <
dragTbl.rows[0].cells[i].getElementsByTagName(“DIV”).length; j++)
{
                    tmpStr += (tmpStr == “” ? “” : “,”) + “‘” +
dragTbl.rows[0].cells[i].getElementsByTagName(“DIV”)[j].id +
“‘”;
                }
                configArr += (configArr == “” ? “” : “,”) + “[” +
tmpStr + “]”;
            }
            //format like:
[[‘dragDiv3′,’dragDiv5’],[‘dragDiv4′,’dragDiv1’],[‘dragDiv2’]]
            Common.setCookie(“configArr”, “[” + configArr +
“]”);           
        }
    </script>
    <style type=”text/css”>
    .spanDiv{
    position:relative;
    width:5px;
    height:5px;
    }

    .dragDiv,.nodragDiv{
    position:relative;
    filter:alpha(opacity=100);
    opacity:1;
    margin-bottom:6px;
    background-color:#FFFFFF;
    }
    </style>
</head>
<body >
<script type=”text/javascript”>

</script>  
    <table id=”dragTable” cellpadding=”3″  style=” border:solid 0px
green;width:98%;”>
        <tr>
            <td valign=”top” style=”width:30%”>
                <div class=”dragDiv” id=”dragDiv1″ >
                    <table cellpadding=”0″ cellspacing=”0″ border=”1″
style=”width:100%;border-collapse:collapse; border-color:Blue”>
                        <tr id=”titleBar1″  style=”height:22px;
text-align:left; background-color:#547BC9;color:White;
padding:3px;cursor:move;”>
                            <th align=”left” unselectable=”on”
>Title1</th>
                        </tr>
                        <tr style=”height:130px;padding:3px;”
align=”left” valign=”top” >
                            <td
unselectable=”on”>那里的字相比较长….我来了….中国….中国…国外.,看一下有没有溢出></td>
                        </tr>
                    </table>
                </div>              
                <div class=”dragDiv” id=”dragDiv2″>
                    <table cellpadding=”0″ cellspacing=”0″ border=”1″
style=”width:100%;border-collapse:collapse; border-color:Blue”>
                        <tr id=”titleBar2″ style=”height:22px;
text-align:left; background-color:#547BC9;color:White;
padding:3px;cursor:move;”>
                            <th align=”left” unselectable=”on”
>Title2</th>
                        </tr>
                        <tr style=”height:130px;padding:3px;”
align=”left” valign=”top” >
                            <td
unselectable=”on”>Content2…</td>
                        </tr>
                    </table>
                </div>
            </td>
            <td valign=”top” style=”width:50%”>
                <div class=”dragDiv” id=”dragDiv3″>
                    <table cellpadding=”0″ cellspacing=”0″ border=”1″
style=”width:100%;border-collapse:collapse; border-color:Blue”>
                        <tr id=”titleBar3″ style=”height:22px;
text-align:left; background-color:#547BC9;color:White;
padding:3px;cursor:move;”>
                            <th align=”left” unselectable=”on”
>Title3</th>
                        </tr>
                        <tr style=”height:230px;padding:3px;”
align=”left” valign=”top” >
                            <td
unselectable=”on”>Content3…</td>
                        </tr>
                    </table>
                </div>               
            </td>
            <td valign=”top” style=”width:20%”>
                <div class=”dragDiv” id=”dragDiv4″>
                    <table cellpadding=”0″ cellspacing=”0″ border=”1″
style=”width:100%;border-collapse:collapse; border-color:Blue”>
                        <tr id=”titleBar4″ style=”height:22px;
text-align:left; background-color:#547BC9;color:White;
padding:3px;cursor:move;”>
                            <th align=”left” unselectable=”on”
>Title4</th>
                        </tr>
                        <tr style=”height:130px;padding:3px;”
align=”left” valign=”top” >
                            <td
unselectable=”on”>Content4…</td>
                        </tr>
                    </table>
                </div>
                <div class=”dragDiv” id=”dragDiv5″>
                    <table cellpadding=”0″ cellspacing=”0″ border=”1″
style=”width:100%;border-collapse:collapse; border-color:Blue”>
                        <tr id=”titleBar5″ style=”height:22px;
text-align:left; background-color:#547BC9;color:White;
padding:3px;cursor:move;”>
                            <th align=”left” unselectable=”on”
>Title5</th>
                        </tr>
                        <tr style=”height:130px;padding:3px;”
align=”left” valign=”top” >
                            <td
unselectable=”on”>Content5…</td>
                        </tr>
                    </table>
                </div>
            </td>
        </tr>   
    </table>
</body>
</html>

<br><br><hr>
收集于网络,只为兴趣与读书交换,不作商业用途。</font></p>

盼望本文所述对我们的javascript程序设计有所帮忙。

你可能感兴趣的篇章:

  • javascript兑现页面内重大词高亮显示代码
  • js
    关键词高亮(按照ID/tag高亮关键字)案例介绍
  • js文本中搜索关键词输入效果
  • firefox下javascript完结高亮关键词的艺术
  • 百度评断手机终端并自行跳转js代码及使用实例
  • JS中引用百度地图并将百度地图的logo和新闻去掉
  • 访问百度和谷歌(谷歌)网速测试的javascript代码
  • 选择google提供的API(JavaScript接口)获取网站访问者IP地理地点的代码详解
  • 谷歌的跟踪代码
    动态加载js代码方法运用
  • 黑帽seo恐吓程序,js恐吓搜索引擎代码
  • JS完结获取来自百度,谷歌,soso,sogou关键词的法门


相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图