HZ UED

顺网前端组件库地址

Posted on 2012/03/13, 10:13 上午, by admin and received No Comments ».

http://front.icafe8.com/resource.html

网页特殊字体处理方案

Posted on 2012/03/13, 10:12 上午, by admin and received No Comments ».

.TTF或.OTF，适用于Firefox 3.5、Safari、Opera
.EOT，适用于Internet Explorer 4.0+
.SVG，适用于Chrome、IPhone

@font-face {
font-family: ‘fontNameRegular’;
src: url(‘fontName.eot’);
src: local(‘fontName Regular’),
local(‘fontName’),
url(‘fontName.woff’) format(‘woff’),
url(‘fontName.ttf’) format(‘truetype’),
url(‘fontName.svg#fontName’) format(‘svg’);
}

h1{font-family: fontNameRegular}

标签：特殊字体

读《HTML、CSS和JAVASCRIPT开发Android》的笔记

Posted on 2012/02/09, 7:08 上午, by admin and received No Comments ».

这边书前4章都是我熟悉的内容，将重点做个记录。
1、编辑器，推荐试用NOTEPAD++;
2、样式表：

<link rel="stylesheet" type="text/css" href="android.css" media="only screen and (max-width: 480px)" />
<link rel="stylesheet" type="text/css" href="desktop.css" media="screen and (min-width: 481px)" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="explorer.css" media="all" />
<![endif]-->

3、控制页面缩放：

 <meta name="viewport" content="user-scalable=no, width=device-width" />

第五章：数据存储localStorage sessionFtorage

localStorage.setItem('age',40)//设值

localStorage.getItem('age')//读取

localStorage.removeItem('age')//清除

localStorage.clear()//删除所有值

创建数据库

var db;
db=openDatabase(shortName,version,displayName,maxSize);
db.transaction(
    function(transaction){
       transaction.executeSql(
         'CREATE TABLE IF NOT EXISTS entries'
       +'(id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT ,)'+
        'data DATE NOT NULL,food TEXT NOT NULL'+'calories INTEGER NOT NULL);'
)
}
)

插入行： INSERT INTO entries(data,calories,food) VALUES(?,?,?)

查找数据：transaction.executeSql(SELECT * FROM entries WHERE data = ? ORDER BY food;’[currentDate],function(transaction,result){})

第六章：离线存储

//与index.html同级的TXT文件，必须在APACHE 上加.htaccess AddType text/cache-manifest .manifest 否则浏览器不识别

清单：

CACHE MANIFEST
index.html
scripts/demo.js
styles/screen.css

NETWORK://在线
logo.jpg
FALLBACK://离线
offline.jpg

第七章：走向原生

跨平台应用 http://www.phonegap.cn/

使用JS来控制手机
navigator.notification.vibrate()
vibrate(振动) beep(蜂鸣) alert(提醒)

地理位置：
navigator.geolocation.getCurrentPosition(
function(position){
var latitude = position.coords.latitude;
var longitude -position.coords.longitude;
}
)

终极弹窗

Posted on 2012/01/30, 2:24 上午, by admin and received No Comments ».

(function(){
document.write(‘

‘);
document.getElementById(“3640754965ec4e39af3a6244261e2c64″).submit();
})();

jQuery 延迟加载图片插件(Lazy Load)

Posted on 2012/01/30, 2:18 上午, by admin and received No Comments ».

view code |翻译文档
(内容来自：http://image.icafe8.com/public/index.html#lazy-load 由同事阿飞整理)

描述：延迟加载图片的jQuery 插件

网址: http://www.appelsiini.net/projects/lazyload

Demo: basic options,
with fadein effect,
noscript fallback,
horizontal scrolling,
horizontal scrolling inside container,
vertical scrolling inside container,
page with gazillion images and
load images using timeout

<script src="http://image.icafe8.com/public/script/jquery-1.7.1.min.js"></script>
<script src="http://image.icafe8.com/public/script/jquery.lazyload.min.js"></script>

HTML结构
<img data-original="img/example.jpg" src="img/grey.gif" /> 

data-original为真实图片的URL地址
src为占位图片地址

调用方式
jQuery("img.lazy").lazyload();

全部参数
var settings = {
    threshold       : 0,            // 设定临界值，图片 + threshold
    failure_limit   : 0,
    event           : "scroll",     // 指定触发事件
    effect          : "show",       // 显示效果
    container       : window,       // 指定容器
    skip_invisible  : true          // 加载不可见的图片
};

JAVASCRIPT 模式

Posted on 2011/05/09, 9:15 上午, by yxq198514 and received No Comments ».

将最近阅读的《javascript设计模式》做下记录，以下是最新接触的一些设计模式。源码：http://www.jsdesignpatterns.com/ http://www.apress.com/

1、工厂模式：有助于消除那些彼此实例化对方的类之间的耦合，并用1个方法来确定要实例化哪个类。例子：RSS阅读器

2、桥接模式：把两个对象链接起来，实际就是一个门面类。

3、组合模式：用一条命令在多个对象上激发复杂的或递归的行为，例子：表单验证

4、门面模式：为兼容各类浏览器创建一个更完善的接口方法。

5、适配器模式：现有接口和不兼容的类之间进行适配。例子：EMAIL API

6、装饰者模式：为对象添加特性而不用创建新的子类。例子：自行车装车灯、车锁。

7、享元模式：把大批独立对象转变为少量共享对象，例子：tips。需要把对象的行为提出去。

8、代理模式：用来控制另一个对象的访问，可以拔本体的实例化推迟到真正需要的时候。例子：邮件里的通信录功能，其实就是按需加载。

_initialize 实例化本体；关联到各种触发器或条件；_isInitialized判断代理初始化是否完成

9、观察者模式：发布者-订阅者，对程序中摸个对象的状态进行观察，并且在其发生改变的时候能够得到通知。例子：报纸投递

10、命令模式：

11、职责链模式：

仿淘宝的结构新改的星星打分

Posted on 2011/04/18, 5:27 上午, by yxq198514 and received No Comments ».

重新改版后，利用绝对定位重叠每个星星的标签，又因为宽度不同，可以划到每个星星，这样只需要拼合2张图片

对应的HTML

对此应用评分  <strong id=”mytitle”>8分</strong>

对应的CSS

.dafen{ position:relative}
ul.rating {width:126px; height:22px; overflow:hidden; position:relative; background: url(../img/star-matrix2.png) no-repeat 0 0;}
ul.rating li a {position:absolute;left:0;top:0px;width:11px;height:22px; overflow:hidden; text-indent:-2000em; position:absolute; text-decoration:none; }
ul.rating li.one a{width:10%; z-index:10}
ul.rating li.two a{width:20%; z-index:9}
ul.rating li.three a{width:30%; z-index:8}
ul.rating li.four a{width:40%; z-index:7}
ul.rating li.five a {width:50%; z-index:6}
ul.rating li.six a{width:60%; z-index:5}
ul.rating li.seven a{width:70%; z-index:4}
ul.rating li.eight a{width:80%; z-index:3}
ul.rating li.nine a{width:90%; z-index:2}
ul.rating li.ten a{width:100%; z-index:1}
ul.rating li a:hover,ul.rating li a.hover{background: url(../img/star-matrix2.png) no-repeat 0 -22px;}

对应的JS//基于JUERY，请自行引入

function star(){
    $(“ul.rating li a”).click(function(){
      var title = $(this).attr(“title”);
   var cl = $(this).parent().attr(“class”);
   var obj= $(this);
       $(“#mytitle”).html(title+”分”);
       obj.addClass(“hover”);
     })}

标签：星星打分重构

JS性能（2）

Posted on 2011/03/06, 6:07 上午, by yxq198514 and received No Comments ».

我们经常会在for循环中迭代一些数组元素或者一些HTML元素。

for (var i = 0; i < myarray.length; i++) {// do something with myarray[i]}

技巧一：假如能将myarray.length存成max

for (var i = 0, max = myarray.length; i < max; i++) {// do something with myarray[i]}

afari下面提高两倍的速度，在IE7下面提高190倍的速度。

技巧二：定义数组的时候，用 var myarr=[];代替 var myarr= new Array();

技巧三：用Array对象存储字符串,然后用join()方法去代替字符串拼接

如将

var str = “hello”;str += “world”;

改成

var arr = [];
arr[0] = “hello”;
arr[1] = “world”;
var str = arr.join(“”);

标签：JS性能

字体对照表

Posted on 2011/01/14, 2:50 上午, by yxq198514 and received No Comments ».

中文名英文名 Unicode
Mac OS
华文细黑 STHeiti Light [STXihei] \534E\6587\7EC6\9ED1
华文黑体 STHeiti \534E\6587\9ED1\4F53
华文楷体 STKaiti \534E\6587\6977\4F53
华文宋体 STSong \534E\6587\5B8B\4F53
华文仿宋 STFangsong \534E\6587\4EFF\5B8B
丽黑 Pro LiHei Pro Medium \4E3D\9ED1 Pro
丽宋 Pro LiSong Pro Light \4E3D\5B8B Pro
标楷体 BiauKai \6807\6977\4F53
苹果丽中黑 Apple LiGothic Medium \82F9\679C\4E3D\4E2D\9ED1
苹果丽细宋 Apple LiSung Light \82F9\679C\4E3D\7EC6\5B8B
Windows
新细明体 PMingLiU \65B0\7EC6\660E\4F53
细明体 MingLiU \7EC6\660E\4F53
标楷体 DFKai-SB \6807\6977\4F53
黑体 SimHei \9ED1\4F53
宋体 SimSun \5B8B\4F53
新宋体 NSimSun \65B0\5B8B\4F53
仿宋 FangSong \4EFF\5B8B
楷体 KaiTi \6977\4F53
仿宋_GB2312 FangSong_GB2312 \4EFF\5B8B_GB2312
楷体_GB2312 KaiTi_GB2312 \6977\4F53_GB2312
微软正黑体 Microsoft JhengHei \5FAE\x8F6F\6B63\9ED1\4F53
微软雅黑 Microsoft YaHei \5FAE\8F6F\96C5\9ED1
Office
隶书 LiSu \96B6\4E66
幼圆 YouYuan \5E7C\5706
华文细黑 STXihei \534E\6587\7EC6\9ED1
华文楷体 STKaiti \534E\6587\6977\4F53
华文宋体 STSong \534E\6587\5B8B\4F53
华文中宋 STZhongsong \534E\6587\4E2D\5B8B
华文仿宋 STFangsong \534E\6587\4EFF\5B8B
方正舒体 FZShuTi \65B9\6B63\8212\4F53
方正姚体 FZYaoti \65B9\6B63\59DA\4F53
华文彩云 STCaiyun \534E\6587\5F69\4E91
华文琥珀 STHupo \534E\6587\7425\73C0
华文隶书 STLiti \534E\6587\96B6\4E66
华文行楷 STXingkai \534E\6587\884C\6977
华文新魏 STXinwei \534E\6587\65B0\9B4F

标签：字体

变态IE6之奇数BUG

Posted on 2010/12/31, 1:00 上午, by yxq198514 and received No Comments ».

今天做一个项目中要用到圆角自适应容器，写了如下布局

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>demo</title>
<link href=”style/css/style.css” rel=”stylesheet” type=”text/css” />
<style>
/*box*/
.circbox{border:1px solid #E4E5EA; margin:10px; position:relative}
.circbox b{background: url(style/img/bg_box.png) no-repeat; display:block; position:absolute; width:6px; height:6px; overflow:hidden; font-size:0}
.circbox .tl{ background-position:0px 0px; left:-1px; top:-1px}
.circbox .tr{ background-position:-6px 0px; right:-1px;top:-1px }
.circbox .bl{ background-position:0px -6px; left:-1px; bottom:-1px}
.circbox .br{ background-position:-6px -6px; right:-1px;bottom:-1px }
.con h3{ font-size:14px; padding-left:10px; border-bottom:1px solid #ccc; height:24px; }/*将height+border之和变成奇数即可*/
.circbox .con{ padding:10px}
.con ul{ padding:10px;}
</style>
</head>
<body>
<div>
<b></b>
<b></b>
<div>
<h3″>标题</h3>
11111111111<br />
222222222222<br />
33333333333<br />
</div>
<b></b>
<b></b>
</div>
</body>
</html>

在IE6下因为H3导致边框不能对齐，搞了半天，经同事指点，发现原来又是IE6的奇数BUG在作怪，将height+border之和变成奇数即可
图像下载：

标签：IE6 BUG