开发 web 桌面类程序几个必须关注的细节
HoorayOS 写了差不多快2年了,在我的坚持下也有一部分人打算着手自己也写套类似的程序,我想我可以提供一点经验。
俗话说细节决定成败,开发2年多来,我看过大大小小类似的程序不下20个,各有优点也各有缺点。或许是处女座的强迫症导致我不能容忍这些缺点在我的程序上出现,所以一直完善至今。
以下是我初步整理的几处容易被忽视的细节:
一、当浏览器改变大小时,桌面图标无法重新排序
这个细节相对比较容易被注意,不细说。
反面教材:http://www.cdesk.org/demo/demo.html
二、当浏览器改变大小时,打开的窗口无法重新定位
这个问题会导致你的窗口可能在显示区域之外,无法进行任何操作,虽然你可以将浏览器恢复原先大小,将窗口拖动到适合位置,再改变浏览器大小。
反面教材:http://www.muzilei.com/demo/desktop3.0/index.html
同样问题还出现在挂件上,如 Q+web 就有这问题
反面教材:http://web2.qq.com/webqq.html
三、通过鼠标划取,可以选中文字
如上图,就是这种问题,简单测试方法可以按下 CTRL + A。反面教材:http://www.cdesk.org/demo/demo.html
四、当桌面图标过多时,超出置顶显示区域,被隐藏在外的图标无法进行操作
当你解决第一个问题的时候,立马就会碰到这个极端的情况,你可以强制把浏览器缩小到一个极小的窗口测试。
解决办法就是增加一个滚动条,或者模拟一个滚动条。反面教材:http://www.a-jie.com/webdesk/default.stm
五、无法通过点击窗口内部区域进行多个窗口间的置顶切换
你可以在电脑上开2个窗口,比如2个文件夹,将其重叠,边角有覆盖即可,然后分别点击窗口内部(非标题部分),你会发现你点击哪个窗口,哪个窗口就会被置顶到最上面。
而在 web 端实现这个问题需要一点技巧,因为大部分窗口里都是放个了 iframe,而 iframe 又是无法获取到点击事件的,解决办法就是当窗口处于非置顶时,在iframe上覆盖一个透明的遮罩层,然后给这个遮罩层绑定点击事件,用来处理置顶效果。
反面教材:http://32100.net
六、flash 应用遮罩层无法将其遮罩
这个问题是随着上一个问题出现的,如果 iframe 里加载的是一个 flash 程序,因为是第三方的网站,如果没有做过处理,flash 可能会一直置顶,即使有遮罩层也无法将其覆盖。
对于这个问题,技术上无法判断出 iframe 里是有有 flash,所以只能人为操作。HoorayOS 的做法是在创建应用的时候需要选择是否为 flash 应用这一选项,如果选是,则当窗口不处于置顶时,将 iframe 直接隐藏,或者直接移出浏览器外面,如设置 left:-9999px
七、拖动对象时,没有阻止默认动作,导致拖动出新窗口
这问题一般容易出现上图标拖动上,文字链接也会出现这问题。解决办法很简单,就是用 preventDefault() 方法。
反面教材:http://www.a-jie.com/webdesk/default.stm (你可以按住开始按钮,拖动一下然后放开左键)
八、让我想一想,就先到这吧
本文仅做为技术交流,以上出现的反面教材链接,如有冒犯,还请见谅。
开发 web 桌面类程序几个必须关注的细节的更多相关文章
- Electron与WEB桌面应用程序开发及其它
这几天在构思项目,研究了一下Electron,记录下来. 说起WEB桌面程序,当前最火的就是Electron了. Electron的架构用一句话总结,就是一个main.js进程加上一个或数个chrom ...
- QtSoap开发web services客户端程序
首先需要下载QtSoap开源包,下载地址为: http://www.filestube.com/q/qtsoap+download, 我使用的是:qtsoap-2.6-opensource(不 ...
- Web桌面应用框架3:Web桌面应用开发的N种Style
研究Web桌面应用开发有一段时间了,总结了Web桌面应用开发的一些主流方式. 一.前端Style 这种方式的就是直接实现一个Web程序,再封装一个浏览器展示,相当粗暴和有效.著名的框架就是Electr ...
- Web桌面应用框架2:著名的WEB桌面应用分析
前一篇文章里,分析了包括NW.js和electron这种纯JS框架在内的几种Web桌面应用开发方式,实际上还有一种最古老的方式,那就是嵌入WebView的方式. 嵌入WebView的方式和整个程序都是 ...
- Spring Boot 2.x基础教程:使用 Thymeleaf开发Web页面
通过本系列教程的前几章内容(API开发.数据访问).我们已经具备完成一个涵盖数据存储.提供HTTP接口的完整后端服务了.依托这些技能,我们已经可以配合前端开发人员,一起来完成一些前后端分离的Web项目 ...
- PHP-GTK 扩展(用PHP编写桌面应用程序)
PHP能做什么? PHP-GTK (构建桌面应用程序在PHP中使用PHP-GTK) 普及一下知识php如何做桌面客户端 [PHP技术]PHP开发Windows桌面应用程序实例 实战PHP/GTK 哪位 ...
- 用Delphi7开发Web Service程序 转
转:http://rosehacker.blog.51cto.com/2528968/450160 用Delphi7开发Web Service程序,并把服务程序放在IIS Web服务器上提供给 ...
- android widget 开发实例 : 桌面便签程序的实现具体解释和源代码 (上)
如有错漏请不吝拍砖指正,转载请注明出处,很感谢 桌面便签软件是android上经常使用软件的一种,比方比較早的Sticky Note,就曾很流行, Sticky Note的介绍能够參见 http:// ...
- Visual Studio 2012 开发环境配置+控制台工具+桌面应用程序
一.界面布局视图设置 1.窗口的布局.控制台窗口运行恢复到开发环境的设置方法 也可以保存好设好的个性化设置,导入设置: 2.视图|服务器资源管理器(sever explorer) 可以访问数据源.服务 ...
随机推荐
- static、const和static const
http://blog.csdn.net/rainkin1993/article/details/8068558 #include<iostream> using namespace st ...
- WPF自定义控件与样式(7)-列表控件DataGrid与ListView自定义样式
一.前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要内容: Dat ...
- 替换变量&和&&
替换变量可看作是占位符 一. 单个&符号替换 SQL语句中最基本.最普遍元素替换形式是单个&符号替换.&符号是用来在语句中指定替换变量的符号.当执行语句时,Oracle服务器处 ...
- Web 前端开发精华文章集锦(jQuery、HTML5、CSS3)【系列十九】
<Web 前端开发精华文章推荐>2013年第七期(总第十九期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HTML5 和 C ...
- plsql导入excel时报错:ORA-01036: 非法变量名/编号
导入oracle数据,选择工具->odbc导入->Excel 然后关于日期的插入出错,修改后如下:
- Halcon编程-基于纹理的mara检测
表面瑕疵检测是机器视觉领域非常重要的一个应用.机器视觉是集光学.机电和计算机三个领域的一门不算新的技术.但目前表面瑕疵检测在学界主要是计算机专业或者控制专业瞄准图像处理方向在做,而视觉光学系统这一块主 ...
- react路由深度解析
先看一段代码能否秒懂很重要 这是app.js 全局js的入口 import React from 'react' import { render } from 'react-dom' import ...
- SQL Server时间粒度系列----第1节时间粒度概述
本文目录列表: 1.什么是时间粒度?2.SQL Server提供的时间粒度3.SQL Server时间粒度代码演示 4.SQL Server基准日期 5.总结语6.参考清单列表 什么是时间粒度 ...
- Chrome开发者工具详解(2)-Network面板
Chrome开发者工具详解(2)-Network面板 注: 这一篇主要讲解面板Network,参考了Google的相关文档,主要用于公司内部技术分享. Chrome开发者工具面板 面板上包含了Elem ...
- 十五个常用的jquery代码段
十五个常用的jquery代码段 回到顶部按钮 通过使用 jQuery 中的 animate 和 scrollTop 方法,你无需插件便可创建一个简单地回到顶部动画: 1 // Back to top ...