权记 » 浏览器 http://www.quanlei.com 一个关于我们生活点滴的网站，一个记录我们酸甜苦辣的日志。 Thu, 02 Feb 2012 06:37:06 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 在Swing中做更多web的事情 http://www.quanlei.com/2011/09/swing-web-browser/ http://www.quanlei.com/2011/09/swing-web-browser/#comments Mon, 19 Sep 2011 12:37:37 +0000 小权 http://www.quanlei.com/?p=2754 无觅猜您也喜欢：
Swing Nixieclock（原子钟）效果
Swing Table上的常用技巧
Swing窗口Linux下不支持最大化问题
[09/49周主题] – Swing Tips
Opera浏览器HTML5体验版 无觅 ]]> 在Swing客户端中有时候想加载网页，Flash，甚至需要一个很不错的富文本编辑器，这些需求Swing本身没有，或者很弱，比如富文本的支持。

接下来给你介绍一个第三方的Library – DJNativeSwing

支持什么呢？

  • web浏览器支持，HTML、Javascript和Swing交互支持
  • 常见的JS富文本编辑器，比如FCKeditor,Ckeditor,TinyMCE,Dirty indicator等
  • 嵌套Flash
  • 语法高亮
  • mediaPlay(Win32)
  • 其他…

DJNativeSwing

DJNativeSwing

DJNativeSwing

DJNativeSwing

DJNativeSwing

用bShare分享或收藏本文

无觅猜您也喜欢：

Swing Nixieclock（原子钟）效果
Swing Table上的常用技巧
Swing窗口Linux下不支持最大化问题
[09/49周主题] – Swing Tips
Opera浏览器HTML5体验版
无觅
]]> http://www.quanlei.com/2011/09/swing-web-browser/feed/ 0 HTML5检测技术 http://www.quanlei.com/2011/02/html5%e6%a3%80%e6%b5%8b%e6%8a%80%e6%9c%af/ http://www.quanlei.com/2011/02/html5%e6%a3%80%e6%b5%8b%e6%8a%80%e6%9c%af/#comments Thu, 24 Feb 2011 13:34:26 +0000 小权 http://www.quanlei.com/?p=2142 无觅猜您也喜欢：
测试你的浏览器对HTML5的支持情况
Opera浏览器HTML5体验版
跨浏览器的HTML5 placeholder 实现
HTML5都变化了什么，加了什么？
HTML5 Geolocation 无觅 ]]> 有四种基本技术可以用于检测浏览器是否支持某种HTML5特性：

1、检测全局对象（诸如window或者navigator）是否拥有特定的属性；

2、创建一个元素，然后检测该元素的 DOM 对象是否拥有特定的属性。

3、创建一个元素，然后检测这个元素的 DOM 对象是否拥有特定的方法，同时调用这个方法并检查它的返回值。

4、创建一个元素，给这个元素的 DOM 对象设定特定的属性值， 然后检查浏览器是否保留了该属性值。

这是常见的自主检测的方法，不过现在没必要如此麻烦了，Moderniz是一个基于MIT许可证书发布的开源 Javascript 类库，用于检测浏览器是否支持 HTML5 及 CCS3特性。

加载后，直接使用可以检测你想检测的方法是否被浏览器所支持：

画布 检测：

if (Moderniz.canvas) {
   // 哇塞，支持，好吧，那就画点儿啥吧。
} else {
  // 晕，不支持，那只能想别的方法了。
}

画布文字 检测：

if (Moderniz.canvastext) {
   // 哇塞，支持，好吧，那就画点儿文字啥的。
} else {
  // 晕，不支持，那只能想别的方法了。
}

视频 检测：

if (Moderniz.video) {
   // 哇塞，支持，好吧，那就播放个视频吧。
} else {
  // 晕，不支持，那只能想别的方法了。
}

视频格式 检测：

if (Moderniz.video) {
   // 可以播放视频，但是播放哪一种格式呢？
   if (Moderniz.video.ogg) {
   // 尝试在Ogg容器中使用Ogg Theora+Vorbis
   else{
   //尝试在MP4容器中使用H.264视频+AAC音频
   }
} else {
  // 晕，不支持，那只能想别的方法了。
}

本地存储 检测：

if (Moderniz.localstorage) {
   // 哇塞，支持window.localStorge。
} else {
  // 晕，不支持，那只能想别的方法了。
}

Web Workers 检测：

if (Moderniz.webworkers) {
   // 哇塞，支持window.Worker。
} else {
  // 晕，不支持，那只能想别的方法了。
}

是否离线 Web 应用 检测：

if (Moderniz.applicationcache) {
   // 哇塞，支持window.applicationCache。
} else {
  // 晕，不支持，那只能想别的方法了。
}

地理位置 检测：

if (Moderniz.geolocation) {
   // 哇塞，支持navigator.geolocation。
} else {
  // 晕，不支持，那只能想别的方法了。
}

地理位置 检测：

if (Moderniz.geolocation) {
   // 哇塞，支持navigator.geolocation。
} else {
  // 晕，不支持，那只能想别的方法了。
}

输入框检测：
HTML5新增了很多语义输入框标签，具体使用哪个就自己加，这里以date为例，常见的还有email，time，datetime，url，tel，range等

if (Moderniz.inputtypes.date) {
   // 哇塞，支持type=date。
} else {
  // 晕，不支持，那只能想别的方法了。
}

占位文字 检测：

if (Moderniz.input.placeholder) {
   // 哇塞，这下search框的占位提示方便多了
} else {
  // 晕，不支持，那只能想别的方法了。
}

自动聚焦 检测：

if (Moderniz.input.autofocus) {
   // 哇塞，不需要脚本实现了
} else {
  // 晕，不支持，那只能想别的方法了。
}

用bShare分享或收藏本文

无觅猜您也喜欢：

测试你的浏览器对HTML5的支持情况
Opera浏览器HTML5体验版
跨浏览器的HTML5 placeholder 实现
HTML5都变化了什么，加了什么？
HTML5 Geolocation
无觅
]]> http://www.quanlei.com/2011/02/html5%e6%a3%80%e6%b5%8b%e6%8a%80%e6%9c%af/feed/ 1 跨浏览器的HTML5 placeholder 实现 http://www.quanlei.com/2010/09/%e8%b7%a8%e6%b5%8f%e8%a7%88%e5%99%a8%e7%9a%84html5-placeholder-%e5%ae%9e%e7%8e%b0/ http://www.quanlei.com/2010/09/%e8%b7%a8%e6%b5%8f%e8%a7%88%e5%99%a8%e7%9a%84html5-placeholder-%e5%ae%9e%e7%8e%b0/#comments Wed, 08 Sep 2010 09:44:58 +0000 小权 http://www.quanlei.com/?p=1673 无觅猜您也喜欢：
测试你的浏览器对HTML5的支持情况
HTML5 Geolocation
Opera浏览器HTML5体验版
HTML5都变化了什么，加了什么？
HTML5检测技术 无觅 ]]> HTML 5的input元素引入了placeholder的属性，就是为了实现input提示的，但是在不支持HTML5的浏览器下就要考虑兼容问题，下面的这个实现就很好的解决了兼容问题：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<style>
.placeholder {
	color: #a9a9a9;
}
</style>
</head>
<body>
<div class="row">
<input type="text" placeholder="请输入一些文字" />
</div>
<script>

(function() {
	var tmp = document.createElement("input");
	window.supports = {
		// 检测input是否支持placeholder特性
		placeholder: "placeholder" in tmp
	}
})();

// 绑定input的placeholder
function bindPlaceholder(input) {
	if(!window.supports.placeholder) {
		var jqInput = $(input),
			placeholder = jqInput.attr("placeholder");

		if(placeholder) {
			if(input.value == "") {
				input.value = placeholder;
				$(input).addClass("placeholder");
			}
			jqInput.focus(function() {
				if(this.value == placeholder) {
					$(this).removeClass("placeholder");
					this.value = "";
				}
			}).blur(function() {
				if(this.value == "") {
					$(this).addClass("placeholder");
					this.value = placeholder;
				}
			});
		}
	}
}
$("input[placeholder]").each(function() {
	bindPlaceholder(this);
});
</script>
</body>
</html>

原文出处：http://www.ued163.com/?p=1468

另有不使用placeholder的常规做法，比直接通过js操作input value要好：

<html>
<head>

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

<style>
.row {
  position: relative;
  padding: 1px;
}
.row .hint{
  opacity: 0.4;
  filter:alpha(opacity=40);
  padding: 2px 0 0 6px;
  position: absolute;
}
.row .textbox {
  height: 22px;
  outline: none;
  border: 1px solid Gray;
  padding: 4px 3px 2px;
  -webkit-border-radius: 2px
  -moz-border-radius: 2px;
}
.focus {
  padding: 0;
}
.focus .textbox {
  border: 2px solid #7B8AAC;
}

</style>
</head>
<body>
<div class="row">
  <label class="hint" for="textbox_name">
    <span>请输入查询内容？</span>
  </label>
  <input class="textbox" type="text" id="textbox_name" />
</div>
<script>
$(function() {
  $(".textbox").focus(function() {
    var self = $(this);
    self.closest(".row").addClass("focus");
    self.prev().css("display", "none");
  }).blur(function() {
    var self = $(this);
    self.closest(".row").removeClass("focus");
    if(self.val() == "") {
      self.prev().css("display", "inline");
    }
  });
});
</script>
</body>
</html>

原文出处：http://www.zhoumingzhi.com/2009/12/17/inline-form-labels/

用bShare分享或收藏本文

无觅猜您也喜欢：

测试你的浏览器对HTML5的支持情况
HTML5 Geolocation
Opera浏览器HTML5体验版
HTML5都变化了什么，加了什么？
HTML5检测技术
无觅
]]> http://www.quanlei.com/2010/09/%e8%b7%a8%e6%b5%8f%e8%a7%88%e5%99%a8%e7%9a%84html5-placeholder-%e5%ae%9e%e7%8e%b0/feed/ 0 转载：支付宝浏览器与操作系统统计报告(2010.04) http://www.quanlei.com/2010/05/%e8%bd%ac%e8%bd%bd%ef%bc%9a%e6%94%af%e4%bb%98%e5%ae%9d%e6%b5%8f%e8%a7%88%e5%99%a8%e4%b8%8e%e6%93%8d%e4%bd%9c%e7%b3%bb%e7%bb%9f%e7%bb%9f%e8%ae%a1%e6%8a%a5%e5%91%8a2010-04/ http://www.quanlei.com/2010/05/%e8%bd%ac%e8%bd%bd%ef%bc%9a%e6%94%af%e4%bb%98%e5%ae%9d%e6%b5%8f%e8%a7%88%e5%99%a8%e4%b8%8e%e6%93%8d%e4%bd%9c%e7%b3%bb%e7%bb%9f%e7%bb%9f%e8%ae%a1%e6%8a%a5%e5%91%8a2010-04/#comments Tue, 11 May 2010 05:54:56 +0000 小权 http://www.quanlei.com/?p=1552 无觅猜您也喜欢：
Notes: 银联手机支付
测试你的浏览器对HTML5的支持情况
为不同大小的浏览器视窗使用不同的样式表
跨浏览器的HTML5 placeholder 实现
Opera浏览器HTML5体验版 无觅 ]]> 支付宝注册用户已经突破 3 亿，2009 年网购交易额达到 2670 亿元 (via)，支付宝用户特征在一定程度上反映了中国电子商务用户的普遍情况。
基于支付宝网站流量统计数据，支付宝前端开发组最近发布了浏览器与操作系统统计报告。这份报告对电子支付行业以及所有互联网电子商务网站都具有现实意义。

原文：http://ued.alipay.com/2010/04/alipay-client-data-report/

用bShare分享或收藏本文

无觅猜您也喜欢：

Notes: 银联手机支付
测试你的浏览器对HTML5的支持情况
为不同大小的浏览器视窗使用不同的样式表
跨浏览器的HTML5 placeholder 实现
Opera浏览器HTML5体验版
无觅
]]> http://www.quanlei.com/2010/05/%e8%bd%ac%e8%bd%bd%ef%bc%9a%e6%94%af%e4%bb%98%e5%ae%9d%e6%b5%8f%e8%a7%88%e5%99%a8%e4%b8%8e%e6%93%8d%e4%bd%9c%e7%b3%bb%e7%bb%9f%e7%bb%9f%e8%ae%a1%e6%8a%a5%e5%91%8a2010-04/feed/ 0 为不同大小的浏览器视窗使用不同的样式表 http://www.quanlei.com/2010/04/different-stylesheets-for-differently-sized-browser-windows/ http://www.quanlei.com/2010/04/different-stylesheets-for-differently-sized-browser-windows/#comments Sat, 24 Apr 2010 11:26:12 +0000 小权 http://www.quanlei.com/?p=1473 无觅猜您也喜欢：
[翻译] Simple Tooltip with jQuery & CSS
测试你的浏览器对HTML5的支持情况
分享：CSS3渐变按钮
跨浏览器的HTML5 placeholder 实现
jQuery图像剪裁插件 – Jcrop 无觅 ]]> 同一个网站，访问它的浏览器可能会是不同的宽度，常见的有320px，480px，800px，1024px，1280px，1920px等，为不同大小的浏览器视窗提供不同的访问效果，提高用户的使用体验，同时网站本身也可以为不同受众提供不同的资源。

下面提供两种解决方案：

一、通过 W3C standard 来定义，例如：

<link rel="stylesheet" media="screen and (min-device-width: 800px)" href="800.css" />

上面的代码表示：当访问网站的设备浏览器宽度大于等于800px时，将使用800.css这个样式。

又如：

<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />

上面的代码表示：当访问网站的设备浏览器宽度在701px和900px之间时，将使用medium.css这个样式。

目前Mozilla， Opera和WebKit等浏览器的当前版本都支持这个标准，不幸的是IE浏览器并不支持此标准，包括IE8，以及IE9 Previous。

不要着急，方案二将解决此问题。

二、通过JQuery来动态调整页面样式
1、首先定义两个link，当然你也可以是一个，第二个是要更改的css

<link rel="stylesheet" type="text/css" href="main.css" />
<link id="size-stylesheet" rel="stylesheet" type="text/css" href="narrow.css" />

2、下面的JavaScript代码将根据不同的浏览器大小，更改css

unction adjustStyle(width) {
    width = parseInt(width);
    if (width < 701) {
        $("#size-stylesheet").attr("href", "css/narrow.css");
    } else if ((width >= 701) && (width < 900)) {
        $("#size-stylesheet").attr("href", "css/medium.css");
    } else {
       $("#size-stylesheet").attr("href", "css/wide.css");
    }
}

$(function() {
    adjustStyle($(this).width());
    $(window).resize(function() {
        adjustStyle($(this).width());
    });
});

查看例子：

例子1 例子2 例子3 下载所有例子

英文原址：http://css-tricks.com/resolution-specific-stylesheets/

用bShare分享或收藏本文

无觅猜您也喜欢：

[翻译] Simple Tooltip with jQuery & CSS
测试你的浏览器对HTML5的支持情况
分享：CSS3渐变按钮
跨浏览器的HTML5 placeholder 实现
jQuery图像剪裁插件 – Jcrop
无觅
]]> http://www.quanlei.com/2010/04/different-stylesheets-for-differently-sized-browser-windows/feed/ 1 本地图片预览(支持IE6，IE7，IE8， Firefox3) http://www.quanlei.com/2010/01/view-picture-on-local-machine/ http://www.quanlei.com/2010/01/view-picture-on-local-machine/#comments Tue, 12 Jan 2010 14:11:09 +0000 小权 http://www.quanlei.com/?p=1162 无觅猜您也喜欢：
IE6 window.location 跳转问题
XP下 IE6 英文系统 Date 问题
[10/14周主题] – IE6 hacks
IE6 IE7 FF的区别
IE and firefox comflict in web design 无觅 ]]> 最近在Web项目开发过程中遇到的本地图片预览的需求，虽然最后因为其他原因没能使用，但是也算有些了解，整理出来。

这里我们按浏览器分，主要包括IE6，IE7/8 和Firefox3， 不包含Opera，Safari和Chrome，这三个基本上需求很小，没有研究。

总结一下就是：

IE6下可以直接从file的value获取图片路径来显示预览。
IE7和IE8下通过select获取file的图片路径，再用滤镜来显示预览。
FireFox下调用file的getAsDataURL方法获取Data URI数据来显示预览。

下面是一个完整的Demo：

提示：你可以先修改部分代码再运行。

用bShare分享或收藏本文

无觅猜您也喜欢：

IE6 window.location 跳转问题
XP下 IE6 英文系统 Date 问题
[10/14周主题] – IE6 hacks
IE6 IE7 FF的区别
IE and firefox comflict in web design
无觅
]]> http://www.quanlei.com/2010/01/view-picture-on-local-machine/feed/ 2 [10/01周主题] – Web 项目开发中的常见问题 http://www.quanlei.com/2010/01/1001-week-subject-web-project-problems/ http://www.quanlei.com/2010/01/1001-week-subject-web-project-problems/#comments Sun, 10 Jan 2010 08:32:40 +0000 小权 http://www.quanlei.com/?p=1149 无觅猜您也喜欢：
[10/17 周主题] – Axure入项目
[09/48周主题] – JPA
在Swing中做更多web的事情
在web页面中提供打印功能
分享：web标准化交流会第二十期北京站总结 无觅 ]]> 这周来一直在赶一个Web项目，没多少时间focus到其他上面，于是这周的主题就干脆做个整理，整理下web项目开发时遇到的一些问题和解决办法。

本周主题：Web 项目开发中的常见问题

一、中文乱码

建议统一使用UTF8，或者全局做个filter处理。

二、表单校验

使用第三方校验框架， 而非自己去写，可以减少很多工作量。

三、Ajax的使用

首页尽量少用ajax，页面初次加载时常会加载不上来，尤其多个Ajax实例同时运行。

四、UI 规范

UI最好是出Demo，跟客户确认，定终稿，然后开发按最终效果图实现页面最好，否则没有页面或者效果图，即使有统一的规范，还是会浪费很多时间去调UI问题。

五、浏览器的兼容问题

虽然IE6基本上淘汰了，可老机器上使用IE6的还是不少的，Css 在处理兼容问题时，建议分开处理，在页面进行浏览器version判断，读取不同的css，这样管理和调整起来都方便。

六、比较完整的测试数据

页面框架搭完了，看着效果不错，可是填完数据后会发现和想象的不太一样。

七、用JPA Or JDBC 与数据库交互

JPA与JDBC相比之下，使用JPA大大减少了编程人员的工作量，因此还是偏向使用JPA，特殊环境下再选择JDBC

用bShare分享或收藏本文

无觅猜您也喜欢：

[10/17 周主题] – Axure入项目
[09/48周主题] – JPA
在Swing中做更多web的事情
在web页面中提供打印功能
分享：web标准化交流会第二十期北京站总结
无觅
]]> http://www.quanlei.com/2010/01/1001-week-subject-web-project-problems/feed/ 0 中国移动的网站能不能再做的烂点呢？ http://www.quanlei.com/2009/11/the-web-of-cmcc-so-bad/ http://www.quanlei.com/2009/11/the-web-of-cmcc-so-bad/#comments Mon, 30 Nov 2009 04:42:27 +0000 小权 http://www.quanlei.com/?p=937 无觅猜您也喜欢：
做网站看起来很简单
本地图片预览(支持IE6，IE7，IE8， Firefox3)
将网站的Theme和其他资源进行了项目托管
浦发的手机银行从来就没打开过
转载：每个中国人必须知道的国学常识 无觅 ]]> 我这里谈到的是中国移动北京分公司的网站，其他省市的网站没有去深入测试，估计是大同小异。

1、网站打开速度特别慢

不知道为什么中移动的网站打开超级慢，按理说中移动网站的带宽应该是没有问题的，但是不知为什么每次打开都特别慢，而且经常中断了，在不同的电脑上，不同的网络环境差不多，原因未知。相比之下看看人家中国银行的网站www.boc.cn(没有做广告的嫌疑，只是做个比较)，基本上瞬间打开，可能你会说静态网页和动态网页的区别，但是我觉得这不是根本问题，因为速度已经不是一个数量级上的差距了。有时接通10086，话务员查询时打开网站也很慢，让我听了很久音乐，可见中移动内部也是很慢的。下图是打开网站时的一个截图，四个页面有一个是中国银行的，其他三个都是中移动的，截图时间是打开后2分钟左右的样子，点击可看大图：

screenshot_003

2、网站对浏览器的兼容性

说到这个，那是超级烂，由于很久没有使用IE5.5和IE6了，不知道中移动的网站到底对哪个浏览器的兼容性好，反正我在IE7，IE8，Firefox3.5，Google Chrome上访问都有问题，IE7和IE8好在还凑合能使用，Firefox3.5和Google Chrome简直就没法用，就连一个小小的个人网站都知道去解决网站对浏览器兼容性的问题，试想中国最大的运营商和全球最大用户群体的电信企业，网站对浏览器的兼容性做到如此之烂，过去几年了还不去优化，实在是没话可说了，只能尽量少去使用或者不用。

3、“满意100”

忘记了中移动什么时候开始喊这个口号的，但是这几个月来，中移动的服务别说100分了，60分都达不到，10086打过去，客服90%的时间全席忙，网站的在线客服也是90%以上时间满员，处于等待状态，等待就等待吧，还经常断线，再进去前面又插进去几个客户了，继续等待继续断线，无语了，我昨天为了体验这个“满意100”，花了半个多小时打10086，没有打进去，花了20多分钟进行网站客服的咨询没能成功，客户有问题，但是却无法联系中移动客服，这样的服务如何做到“满意100”呢？

4、可能你会说，中移动服务这么烂，你为啥还用啊？

我有选择吗？ 前几年就中移动一家独大，其他运营商的服务比移动还烂，从最近几年开始，状况好些了，其他运营商也发展起来了，可我的号码用了N年了，换个号码多不方便大家又不是不知道，要是可以携号转运营商，我立马转。

==欢迎发表意见，欢迎转载==

无觅相关文章插件，快速提升流量

用bShare分享或收藏本文

无觅猜您也喜欢：

做网站看起来很简单
本地图片预览(支持IE6，IE7，IE8， Firefox3)
将网站的Theme和其他资源进行了项目托管
浦发的手机银行从来就没打开过
转载：每个中国人必须知道的国学常识
无觅
]]> http://www.quanlei.com/2009/11/the-web-of-cmcc-so-bad/feed/ 7