澳门搏彩官方网 > Web前端 >

JS仿iGoogle自定义首页模块拖拽特效的方法

基于 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 的极点实行访谈,能够应用服务器端Infiniti的总括及存款和储蓄能源,顾客数量保存在服务器端,安全性较高。

澳门在线官网 1

有关本领

当前营造 Web 操作系统的前端技艺首要有 Flex、Silverlight、ActiveX 插件等等,它们各有一点优短处。

Flex

Flex 是一个理想的富顾客端应用框架,专心于页面展现,Adobe 职业维护,统意气风发稳固,并且其脚本语言 ActionScript3 是面向对象的,非常相符程序猿使用。缺点则是功耗高,占用带宽多,对运动应用的支撑性差。

Silverlight

Silverlight 是由微软推出的用来跟 Flash 抗衡的 CRUISERIA(富网络接纳)施工方案,优点是颇负硬件级的加快功用,但它最近仍不成熟,对非 Windows 系统的援救性并远远不够好,且学习难度极大。

ActiveX 插件

ActiveX 插件相近是微软坐褥的 奥迪Q7IA 实施方案,它是多个怒放的减轻方案,能够相称各类语言,可是它的后天不良也是显著的,客商供给调节浏览器的林芝等第并下载插件才具运维RAV4IA 应用,非常大地回退了安全性。

HTML5

为推进 web 标准化运动的前进,W3C 推出了下一代 HTML 的行业内部 – HTML5,为无数的厂家所支撑,因而有着特出的前途。它有以下特征:首先,为增长客户体验,加强了 web 网页的表现质量;其次,为适应 中华VIA 应用的向上,追加了地面数据库等 web 应用的效应;再一次,由于中度标准化甚至超级多浏览器厂商的卖力援救,它的包容性和安全性极高;最终它是大器晚成种轻松的语言,轻便为科普开荒者掌握。更为难得的是,由于节俭和功耗低,在移动设备上 HTML5 将装有更加大的优势。由此更相符如 Web 操作系统风姿罗曼蒂克类的 EscortIA 应用的前端开拓。

系统简要介绍

本系统基于 HTML5 开荒,利用 HTML5 引进的有余新本领如拖拽 API、录制标签、当地数据库、draw API、三十二线程开辟、离线编制程序等提供了三个着力的 Web 操作系统意况,包涵了对桌面包车型客车支撑、应用程序的扶持,提供了一个简短的录制播放器和记事本以至一个时钟,并对系统日志进行了笔录,别的还提供了对离线状态的支持。

桌面完结

系统对桌面包车型的士扶植至关心重视要包罗应用程序Logo的开拓与拖拽,以致桌面包车型大巴上下文菜单等。

桌面拖拽

桌面包车型客车构造由自然数额的 div 组成,它们依照程序依次排列在矩形的桌面上,为应用程序Logo的张开与拖拽提供了着力的扶助。

清单 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 事件的监听,将被拖拽的应用程序Logo所在的 div 记录下来,作为拖拽的源。

项目清单 2. 拖拽辅助

XHTML

iconHolder.add伊夫ntListener("dragstart", function(evState of Qatar { var dt = ev.dataTransfer; dt.setData("text/plain", ev.currentTarget.idState of Qatar;// 记录被拖拽Logo的 id }, false卡塔尔(قطر‎; iconHolder.add伊芙ntListener("drop", function(evState of Qatar { var dt = ev.dataTransfer; var srcIconHolderId = dt.getData("text/plain"卡塔尔(قطر‎; var srcIconHolder = document.getElementById(srcIconHolderIdState of Qatar; // 要是拖拽至回笼站,则删掉被拖拽Logo,否则调换两Logo位置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 中的应用程序Logo转移至目标 div 中。若指标 div 中已满含应用程序Logo,则将四个图标的职分调换。若回笼站Logo处于目的 div 中,回收站将发挥作用并将源 div 中的应用程序Logo删除。图 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(卡塔尔(قطر‎.getTime(卡塔尔; 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, evState of Qatar{ 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++State of Qatar{ 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 == 0State of Qatar{// 若文件官样文章,则用相应文本替代 var dt = e.dataTransfer; var text = dt.getData("text/plain"卡塔尔; var p = document.createElement("p"卡塔尔; p.innerHTML += text; dropbox.appendChild(pState of Qatar; return; } for (var i = 0; i < files.length; i++卡塔尔(قطر‎ { var file = files[i]; var fileProcessor = dropbox.firstChild; fileProcessor.classList.add("obj"卡塔尔国; fileProcessor.file = file; // 添Gavin件 var reader = new FileReader(State of Qatar; reader.onload = (// 读取文件内容 function(aFileProcessor卡塔尔国 { return function(eState of Qatar { aFileProcessor.src = e.target.result; }; } 卡塔尔(fileProcessor卡塔尔(قطر‎; reader.readAsDataU奥迪Q5L(fileState of Qatar; } }

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( 这里是摄像标签 卡塔尔(قطر‎添Gavin书,然后利用 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(卡塔尔(قطر‎.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(?, ?, ?State of Qatar', [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 是还是不是存在,若子虚乌有,则开创它。第1盘部实行一条 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(State of Qatar; t.setTime(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卡塔尔国; } }卡塔尔(قطر‎; }State of Qatar;

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 == fileIdState of Qatar{ db.transaction(function(txState of Qatar { tx.executeSql('UPDATE TextFiles SET title=?, content=? WHERE idx='+fileId, [fileTitle, fileContent], function(tx, rs卡塔尔(قطر‎ { alert("update successfully"卡塔尔(قطر‎; }State of Qatar; }卡塔尔国; 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 方法在桌面上为新文书档案创设一个文书档案Logo。清单 14 展现了 createFileIcon 方法的切切实实进度。

项目清单 14. 创造文书档案Logo

XHTML

function createFileIcon(fileIdState of Qatar{ var iconHolder; for(var i=1;i<=120;i++卡塔尔国{// 查询第三个为空的地方 iconHolder = document.getElementById('iconHolder' + if(!iconHolder.firstChild State of Qatar{ var text = document.createElement('img'卡塔尔; text.src = "images/text.gif"; text.id = fileId; iconHolder.appendChild(textState of Qatar; 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.valueState of Qatar;// 创立文本文书档案 }; var openedFileId = ev.currentTarget.id; if(openDatabase != undefinedState of Qatardb.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,然后创制三个文书档案Logo,并将其填充至 div。文书档案Logo有三个 id 属性对应文档id。最终为文书档案Logo添加点击事件管理函数,当点击文书档案Logo时,会首先张开记事本,然后依据文书档案Logo的 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'State of Qatar;// 那是二个二维的图像 context.lineWidth = 2; context.translate(64, 64卡塔尔国;// 定义原点 // 伊始化分针 context.begin帕特h(State of Qatar; 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/30State of Qatar; context.lineTo(mhx, mhyState of Qatar;// 至分针末端所在地点 context.closePath(State of Qatar; context.stroke(State of Qatar; // 开首化时针 context.beginPath(卡塔尔(قطر‎; context.moveTo(0,0卡塔尔国;// 从原点开首 var date = new Date(卡塔尔国; var hour = date.getHours(卡塔尔国; if(hour>=12State of Qatar 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(eventState of Qatar{ context.clearRect(-64, -64, 128, 128卡塔尔(قطر‎;// 清空分针和时针 // 重画分针 context.beginPath(卡塔尔; context.moveTo(0,0卡塔尔;// 从原点开头 var date = new Date(State of Qatar; 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(State of Qatar; context.moveTo(0,0卡塔尔(قطر‎;// 从原点开始 var date = new Date(卡塔尔国; var hour = date.getHours(State of Qatar; if(hour>=12State of Qatar hour = hour - 12; var minute = date.getMinutes(State of Qatar; 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

JS仿iGoogle自定义首页模块拖拽特效的不二等秘书诀

 那篇作品首要介绍了JS仿i谷歌自定义首页模块拖拽特效的点子,实例解析了页面包车型大巴结构及拖拽的贯彻技能,极其富有实用价值,供给的朋友可以参照下

 

 

本文实例呈报了JS仿i谷歌(GoogleState of Qatar自定义首页模块拖拽特效的方式。分享给我们供我们仿照效法。具体得以完结方式如下:

 

代码如下:

<!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) {
//设置点击是还是不是透明,暗许透明百分之四十
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].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.borderWidthState of Qatar + "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 > tmpDownState of Qatar {///从最上面插入虚线框
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仿iGoogle自定义首页模块拖拽特效的办法,实例解析了页面包车型大巴布局及拖拽的实...

有关随笔

连锁搜索:

前些天看啥

招来手艺库

回去首页

  • iphone自定义怎么校正互联网标记字符
  • HTCXshot通话背景设置情势
  • C#Winform使用增添方法自定义富文本框(RichTex
  • 五个静态UITabelView的解决方案----CTStaticTableV
  • 急速掌握Android八个常用自定义控件Toast Aler
  • Android动圈耳机线控详细明白,蓝牙5.0动圈耳机按键监听(仿

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

上一篇:没有了
下一篇:没有了