CSS雕虫小技:八卦五行布图法介绍

本质和优点



先申明一下,这里不是在谈玄论道,说八卦五行,我只是利用了一下这几个数字传统的知名度,以及阴阳说中问题归纳和状态演化的技法。

这里所说的布图,就是一种将诺干背景小图片合并在一起(传说中的CSS滑动门技术);这里说的布图说的就是如何组织这些零散的小图片。

口诛笔伐:糟糕的绝对位置布图法:

常见的办法是把一堆相关的图片通过绝对位置放在一个文件中,比如【0,0】放置一个编辑按钮,【0,40】放置一个删除按钮【0,60】放置一个保存按钮。等等。

如此最大的问题是:无关的图片被杂乱无章的堆砌在一起。后期的维护将越来越繁琐。最后将是一场噩梦。

那么,我们如何更好的布图呢?

首先,让我们抛弃我们使用绝对位置的习惯,理由是:

1.绝对位置不便记忆:

绝对位置都是一些数字标示,非常难记,相对位置是个有限集合,绝对位置有无限的状态。

2.绝对位置不便适应需求的变更:

比如我们一个小图片,最初是 18*18,于是,我们布图的时候,间隔为20.

但是后来开发了一套大图标皮肤,小图标的大小变成21*21,溢出了。。。,改吧,慢慢改吧,我们有的是时间。。。

3.绝对位置在编辑的时候也比较麻烦:

而相对位置,你可能只要打开你的布局管理器,轻轻点击几下对齐图标。

如果有一些小调整,绝对位置布局的时候,我们要小心的计算出新的布局位置,更新文档,更新相关代码,通知相关工程师。。。。

4.增加沟通成本:

因为绝对位置的无穷性,我们无法给数值表示的相对位置赋予通用的适合的语意,无穷的状态我们需要依赖无穷的文档。

(我们估计没有这种文档,一旦需要调整,打电话问吧,希望你能找对人。。。)。

而相对位置,只有有限的状态,我们可以清晰的给出位置的约定语意。文档的最高境界也就是不需要文档。

5.糟糕的自适应性:

这点不必解释,绝对布图法根本就不具备这一特征。



太极生两仪,两仪生四相,四相生八卦。

最朴素的图标只有一个状态,这很简单,我们制作一张很朴素的图片即可。

然后我们想加上一个鼠标放上去的激活效果。于是我们有了两种状态。这时候,我们可以采用左右两端布图。

之后呢,鼠标按下去是不是也要有一个新的状态?哦,还差点忘了,更重要的,功能禁用了我们也需要一个状态。至此四大天王到齐了,各自找个角落呆着吧。

我们常见的也就是这四种状态:

1.正常:

2.鼠标放上

3.鼠标点击

4.禁用

如果我把这四种状态自左上起,顺时针排列,我们还可以达到一个惊人的自适应性。

当我们只准备了一个图标的时候,吧他做成整幅度的图片,那么四种状态都显示为正常的图标。

需要增加状态2的时候,只需要扩展右段新图片。同样,一切正常(disablle状态不被支持,显示为正常状态,按下和鼠标移上效果一致也是一个理想的巧合)。

当需要鼠标按下的时候,扩展下方图标。同样,一切正常。

这四种状态的组合,我称之为斜四相。对应样式单为 “.quad-x-”

但是,我们的八卦可是有八个方位的,不要轻易浪费了,怎么办呢?

老子说了:”万物负阴而抱阳,冲气以为和”。

这是我们客观世界普遍纯在的规律。

比如,我们有一个展开的图标,那么我们极有可能需要一个关闭的图标。我们有一个保存按钮,那么,我们极有可能也需要一个打开的功能。

这两类事物相互对立的东西必然有紧密关联,完全应该安排在一起。

于是,我们吧原来的布局位置,顺时针旋转45度,一个正四相产生了。对应样式为:“.quad-y-”

待续。。。。

java读取(正则表达式分析)网页内容

  由于原来的“插入代码”复制方法要把转义符过滤掉,所以下面用文本粘贴:

package com.xiaofeng.picup;

import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStreamReader;
import java.net.MalformedURLException;
import java.net.URL;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.regex.Matcher;
import java.util.regex.Pattern;

/**
 *
 * @author 晓峰2007.1.18 抓取雅虎知识堂的文章标题及内容(测试) 手动输入网址抓取,可进一步自动抓取整个知识堂的全部内容
 *
 */
public class WebContent
{
 /**
  * 读取一个网页全部内容
  */
 public String getOneHtml(final String htmlurl) throws IOException
 {
  URL url;
  String temp;
  final StringBuffer sb = new StringBuffer();
  try
  {
   url = new URL(htmlurl);
   final BufferedReader in = new BufferedReader(new InputStreamReader(url.openStream(), “utf-8”));// 读取网页全部内容
   while ((temp = in.readLine()) != null)
   {
    sb.append(temp);
   }
   in.close();
  }
  catch (final MalformedURLException me)
  {
   System.out.println(“你输入的URL格式有问题!请仔细输入”);
   me.getMessage();
   throw me;
  }
  catch (final IOException e)
  {
   e.printStackTrace();
   throw e;
  }
  return sb.toString();
 }

 /**
  *
  * @param s
  * @return 获得网页标题
  */
 public String getTitle(final String s)
 {
  String regex;
  String title = “”;
  final List<String> list = new ArrayList<String>();
  regex = “<title>.* </title>”;
  final Pattern pa = Pattern.compile(regex, Pattern.CANON_EQ);
  final Matcher ma = pa.matcher(s);
  while (ma.find())
  {
   list.add(ma.group());
  }
  for (int i = 0; i < list.size(); i++)
  {
   title = title + list.get(i);
  }
  return outTag(title);
 }

 /**
  *
  * @param s
  * @return 获得链接
  */
 public List<String> getLink(final String s)
 {
  String regex;
  final List<String> list = new ArrayList<String>();
  regex = “<a[^>]*href=(\”([^\”]*)\”|\'([^\’]*)\’|([^\\s>]*))[^>]*>(.* )</a>”;
  final Pattern pa = Pattern.compile(regex, Pattern.DOTALL);
  final Matcher ma = pa.matcher(s);
  while (ma.find())
  {
   list.add(ma.group());
  }
  return list;
 }

 /**
  *
  * @param s
  * @return 获得脚本代码
  */
 public List<String> getScript(final String s)
 {
  String regex;
  final List<String> list = new ArrayList<String>();
  regex = “<script.* </script>”;
  final Pattern pa = Pattern.compile(regex, Pattern.DOTALL);
  final Matcher ma = pa.matcher(s);
  while (ma.find())
  {
   list.add(ma.group());
  }
  return list;
 }

 /**
  *
  * @param s
  * @return 获得CSS
  */
 public List<String> getCSS(final String s)
 {
  String regex;
  final List<String> list = new ArrayList<String>();
  regex = “<style.* </style>”;
  final Pattern pa = Pattern.compile(regex, Pattern.DOTALL);
  final Matcher ma = pa.matcher(s);
  while (ma.find())
  {
   list.add(ma.group());
  }
  return list;
 }

 /**
  *
  * @param s
  * @return 去掉标记
  */
 public String outTag(final String s)
 {
  return s.replaceAll(“<.* >”, “”);
 }

 /**
  *
  * @param s
  * @return 获取雅虎知识堂文章标题及内容
  */
 public HashMap<String, String> getFromYahoo(final String s)
 {
  final HashMap<String, String> hm = new HashMap<String, String>();
  final StringBuffer sb = new StringBuffer();
  String html = “”;
  System.out.println(“\n——————开始读取网页(” + s + “)——————–“);
  try
  {
   html = getOneHtml(s);
  }
  catch (final Exception e)
  {
   e.getMessage();
  }
  // System.out.println(html);
  System.out.println(“——————读取网页(” + s + “)结束——————–\n”);
  System.out.println(“——————分析(” + s + “)结果如下——————–\n”);
  String title = outTag(getTitle(html));
  title = title.replaceAll(“_雅虎知识堂”, “”);
  // Pattern pa=Pattern.compile(“<div
  // class=\”original\”>(.* )((\r\n)*)(.* )((\r\n)*)(.* )</div>”,Pattern.DOTALL);
  final Pattern pa = Pattern.compile(“<div class=\”original\”>(.* )</p></div>”, Pattern.DOTALL);
  final Matcher ma = pa.matcher(html);
  while (ma.find())
  {
   sb.append(ma.group());
  }
  String temp = sb.toString();
  temp = temp.replaceAll(“(<br>)+ “, “\n”);// 转化换行
  temp = temp.replaceAll(“<p><em>.* </em></p>”, “”);// 去图片注释
  hm.put(“title”, title);
  hm.put(“original”, outTag(temp));
  return hm;

 }

 /**
  *
  * @param args
  *            测试一组网页,针对雅虎知识堂
  */
 public static void main(final String args[])
 {
  String url = “”;
  final List<String> list = new ArrayList<String>();
  System.out.print(“输入URL,一行一个,输入结束后输入 go 程序开始运行:   \n”);
  /*
   * http://ks.cn.yahoo.com/question/1307121201133.html
   * http://ks.cn.yahoo.com/question/1307121101907.html
   * http://ks.cn.yahoo.com/question/1307121101907_2.html
   * http://ks.cn.yahoo.com/question/1307121101907_3.html
   * http://ks.cn.yahoo.com/question/1307121101907_4.html
   * http://ks.cn.yahoo.com/question/1307121101907_5.html
   * http://ks.cn.yahoo.com/question/1307121101907_6.html
   * http://ks.cn.yahoo.com/question/1307121101907_7.html
   * http://ks.cn.yahoo.com/question/1307121101907_8.html
   */
  final BufferedReader br = new BufferedReader(new InputStreamReader(System.in));
  try
  {
   while (!(url = br.readLine()).equals(“go”))
   {
    list.add(url);
   }
  }
  catch (final Exception e)
  {
   e.getMessage();
  }
  final WebContent wc = new WebContent();
  HashMap<String, String> hm = new HashMap<String, String>();
  for (int i = 0; i < list.size(); i++)
  {
   hm = wc.getFromYahoo(list.get(i));
   System.out.println(“标题: ” + hm.get(“title”));
   System.out.println(“内容: \n” + hm.get(“original”));
  }
  /*
   * String htmlurl[] = {
   * “http://ks.cn.yahoo.com/question/1307121201133.html“,
   * “http://ks.cn.yahoo.com/question/1307121101907.html“,
   * “http://ks.cn.yahoo.com/question/1307121101907_2.html“,
   * “http://ks.cn.yahoo.com/question/1307121101907_3.html“,
   * “http://ks.cn.yahoo.com/question/1307121101907_4.html“,
   * “http://ks.cn.yahoo.com/question/1307121101907_5.html“,
   * “http://ks.cn.yahoo.com/question/1307121101907_6.html“,
   * “http://ks.cn.yahoo.com/question/1307121101907_7.html“,
   * “http://ks.cn.yahoo.com/question/1307121101907_8.html” }; WebContent
   * wc = new WebContent(); HashMap<String, String> hm = new HashMap<String,
   * String>(); for (int i = 0; i < htmlurl.length; i++) { hm =
   * wc.getFromYahoo(htmlurl[i]); System.out.println(“标题: ” +
   * hm.get(“title”)); System.out.println(“内容: \n” + hm.get(“original”)); }
   */
  /*
   * String html=””; String link=””; String sscript=””; String content=””;
   * System.out.println(htmlurl+” 开始读取网页内容:”);
   * html=wc.getOneHtml(htmlurl); System.out.println(htmlurl+”
   * 读取完毕开始分析……”); html=html.replaceAll(“(<script.* )((\r\n)*)(.* )((\r\n)*)(.* )(</script>)”,”
   * “);//去除脚本 html=html.replaceAll(“(<style.* )((\r\n)*)(.* )((\r\n)*)(.* )(</style>)”,”
   * “);//去掉CSS html=html.replaceAll(“<title>.* </title>”,” “);//除去页面标题
   * html=html.replaceAll(“<a[^>]*href=(\”([^\”]*)\”|\'([^\’]*)\’|([^\\s>]*))[^>]*>(.* )</a>”,”
   * “);//去掉链接 html=html.replaceAll(“(\\s){2,} “,” “);//除去多余空格
   * html=wc.outTag(html);//多余标记 System.out.println(html);
   */

  /*
   * String s[]=html.split(” +”); for(int i=0;i<s.length;i++){
   * content=(content.length()>s[i].length()) content:s[i]; }
   * System.out.println(content);
   */

  // System.out.println(htmlurl+”网页内容结束”);
  /*
   * System.out.println(htmlurl+”网页脚本开始:”); List
   * script=wc.getScript(html); for(int i=0;i<script.size();i++){
   * System.out.println(script.get(i)); }
   * System.out.println(htmlurl+”网页脚本结束:”);
   *
   * System.out.println(htmlurl+”CSS开始:”); List css=wc.getCSS(html);
   * for(int i=0;i<css.size();i++){ System.out.println(css.get(i)); }
   * System.out.println(htmlurl+”CSS结束:”);
   *
   * System.out.println(htmlurl+”全部链接内容开始:”); List list=wc.getLink(html);
   * for(int i=0;i<list.size();i++){ link=list.get(i).toString(); }
   * System.out.println(htmlurl+”全部链接内容结束:”);
   *
   * System.out.println(“内容”); System.out.println(wc.outTag(html));
   */
 }
}

package com.xiaofeng.picup;

import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStreamReader;
import java.net.MalformedURLException;
import java.net.URL;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.regex.Matcher;
import java.util.regex.Pattern;

/** *//**
 * 
 * 
@author 晓峰2007.1.18 抓取雅虎知识堂的文章标题及内容(测试) 手动输入网址抓取,可进一步自动抓取整个知识堂的全部内容
 * 
 
*/

public class WebContent {
    
/** *//**
     * 读取一个网页全部内容
     
*/

    
public String getOneHtml(String htmlurl) throws IOException{
        URL url;
        String temp;
        StringBuffer sb 
= new StringBuffer();
        
try {
            url 
= new URL(htmlurl);
            BufferedReader in 
= new BufferedReader(new InputStreamReader(url
                    .openStream(), 
utf-8));// 读取网页全部内容
            while ((temp = in.readLine()) != null{
                sb.append(temp);
            }

            in.close();
        }
catch(MalformedURLException me){
            System.out.println(
你输入的URL格式有问题!请仔细输入);
            me.getMessage();
            
throw me;
        }
catch (IOException e) {
            e.printStackTrace();
            
throw e;
        }

        
return sb.toString();
    }


    
/** *//**
     * 
     * 
@param s
     * 
@return 获得网页标题
     
*/

    
public String getTitle(String s) {
        String regex;
        String title 
= “”;
        List
<String> list = new ArrayList<String>();
        regex 
= <title>.* </title>;
        Pattern pa 
= Pattern.compile(regex, Pattern.CANON_EQ);
        Matcher ma 
= pa.matcher(s);
        
while (ma.find()) {
            list.add(ma.group());
        }

        
for (int i = 0; i < list.size(); i++{
            title 
= title + list.get(i);
        }

        
return outTag(title);
    }


    
/** *//**
     * 
     * 
@param s
     * 
@return 获得链接
     
*/

    
public List<String> getLink(String s) {
        String regex;
        List
<String> list = new ArrayList<String>();
        regex 
= <a[^>]*href=(“([^”]*)”|'([^’]*)’|([^\s>]*))[^>]*>(.* )</a>;
        Pattern pa 
= Pattern.compile(regex, Pattern.DOTALL);
        Matcher ma 
= pa.matcher(s);
        
while (ma.find()) {
            list.add(ma.group());
        }

        
return list;
    }


    
/** *//**
     * 
     * 
@param s
     * 
@return 获得脚本代码
     
*/

    
public List<String> getScript(String s) {
        String regex;
        List
<String> list = new ArrayList<String>();
        regex 
= <script.* </script>;
        Pattern pa 
= Pattern.compile(regex, Pattern.DOTALL);
        Matcher ma 
= pa.matcher(s);
        
while (ma.find()) {
            list.add(ma.group());
        }

        
return list;
    }


    
/** *//**
     * 
     * 
@param s
     * 
@return 获得CSS
     
*/

    
public List<String> getCSS(String s) {
        String regex;
        List
<String> list = new ArrayList<String>();
        regex 
= <style.* </style>;
        Pattern pa 
= Pattern.compile(regex, Pattern.DOTALL);
        Matcher ma 
= pa.matcher(s);
        
while (ma.find()) 

Web前端优化最佳实践之图片篇

1. 优化图片 (Optimize Images)

使用 GIF
、JPG 还是 PNG
格式的图片  尽可能的使用 PNG
格式的图片,更多的功能,更小的尺寸(与 GIF
相比)。

对于 PNG
图片,考虑用 Pngcrush
或类似的工具进行优化。常见的工具如下表:

  • pngcrush

    http://pmt.sourceforge.net/pngcrush/
  • pngrewrite

    http://www.pobox.com/~jason1/pngrewrite/
  • OptiPNG

    http://www.cs.toronto.edu/~cosmin/pngtech/optipng/ (refer: 教程
    )
  • PNGOut

    http://advsys.net/ken/utils.htm

JPEG
图片的优化工具:

必需要强调的是,图片设计的同学啊,请考虑设计面向 Web 的图片
,不要动不动就设计超过可接受尺寸之外大家伙,这应该是一种习惯,而不是什么高超的技能,只需要记住就成了。

 

2. 使用 CSS
Sprites 技巧对图片优化 (Optimize CSS
Sprites)

之前提到过,简单的说就是”利用 CSS
background 相关元素进行背景图绝对定位”,把多次 HTTP
调用变为一次调用,更多参考:CSS Sprites: Image Slicing’s Kiss of Death

补充一下:对于这个技巧我曾经见到有人滥用的。把多个背景图片揉成一个,减少 HTTP 调用,这是一个很好的思路。但一定要记住这个大图片不能太”重”,我看到过 100 多K 的背景图。一个图片就把整个网站拖得很慢。比较好的例子可以参考雅虎关系的这个图
.

 

3. 不要在 HTML
中使用缩放图片 (Don’t Scale Images in HTML
)

更多的时候,可能是因为偷懒而没有制作合适大小的图片,如果是批量处理图片的话,可能一条 ImageMagic
命令(convert )就能搞定 。必须提及的是,看到太多的对图片拉伸很难看的页面,救救这些页面!

 

4. 用更小的并且可缓存的 favicon.ico (Make favicon.ico Small and Cacheable)

更小,可缓存,这两条可能都不是问题。问题是,太多站点根本没有 favicon.ico
。有的时候,判断独立域名的 Blog 是否专业,基本看一下是否有 favicon.ico 就差不多了。

 

在最近的 Velocity 2008 技术大会上,Yahoo! 的 Stoyan Stefanov 做的 Image Optimization: How Many of These 7 Mistakes Are You Making
也非常有参考价值。结合一起说一下。

YAHOOYUI3简单入门

Yui 3的简单用法:

一、调用方法:

既然我们是使用的Yui这个js库,那么肯定第一步就是引用这个文件,刚才在上面已经说了我们要使用的是yui-min.js这个文件,当然你可以对他进行改名,你只需要到你下载的yui库的文件中找到他,将其拷到你需要的目录就OK啦,那么掉用方法的是:

在之间插入以下代码:

<script src=”yui-min.js” type=”text/javascript”></script>注意:src后面的地址请根据实际情况填写,当然你也可以使用官方提供的地址,请看: <script src=”http://yui.yahooapis.com/3.0.0pr2/build/yui/yui-min.js” type=”text/javascript”></script>

我个人觉得如果你仅仅想试一下yui的功能,可以用用官方的地址,免得自己下载啦,嘿嘿!

二、实现我们的功能

当我们已经调用好Yui这个js库以后,接下来就得看我们自己的了,如何通过Yui来实现我们想要的功能呢,嘿嘿,请看:

1、Yui 3最基本的使用格式:

YUI().use(”node”, function(Y) {

// 书写你的js代码

});

就是要使用Yui 3提供的方法,就必须得将他们写在上面这个大括号之内,不然无法使用。

2、Yui 3获取对象的方法:她获取对象的方法有很多种,下面我们来看看常用的几种方法:(在使用这些方法的时候都需要在方法前加Y)

a、get()方法

get方法获取id和class对象的方法:Y.get(”#id”);Y.get(”.class”);

注意,在括号中必须用引号将他们引起来,看看,如果你对CSS很熟悉的话,就应该知道,我们在为id书写样式的时候前面用的是#,为class书写 样式的时候前面使用的是.号。在Yui 3的get方法中也是这样的。那么get方法获取到的都是单个对象,还有就是如果你又想获取一个对象,他又有Id又有class的呢,那也可以使用get 方法:Y.get(”#id”).get(”.class”);这样就可以啦。

b、all()方法

刚才我们看了get方法获取的都是单个对象,那如果我们想获取所有据有相同class的属性的对象怎么办,哈哈,不要急,Yui想到了,他提供了很 多种方法,但是我觉得最简单的一种方法就是:Y.all(”.calss”);这样就可以获取到了所有据有class名称的class的对象,注意,这里 得到是一个数据。

3、addClass()

这个一看,就应该明白了吧,我们经常在js中都可能用到的为一个对象增加class,哈哈,在这里我们可以使用它啦,使用方法就是:myNode.addClass(’foo’);

4、styles()

光有了设置class还不行,因为有时候我们还需要设置对象的style值,故而引入了styles()方法,使用方法:myNode.setStyle(’opacity’, 0.5);

5、Yui事件监听函数:

Y.on(事件,函数,对象);

如果你对js比较熟悉的话,你应该清楚,js中有事件监听函数,但是IE和DOM是有区别的,注意,Opera支持IE和DOM的两种监听函数,以 前为了兼容多个浏览器,我们需要单独写一个兼容的函数,而在Yui3不需要,如果你想使用的话,可以直接使用Y.on(事件,函数,对象);

事件分为多种,一般我们经常用到的是鼠标与键盘:

鼠标:click,dblclick,mouseover,mousedown,mousemove,mouseup

我们只需要将相应的事件用引号包起来填入事件的值就行了。还有就是这里的对象可以接受单个的对象,他还可以接受数组,比如单个的id,我们可以使 用#id,也可以设置id下的标签,#id li,还可以使用为多个对象设置,就是上面说到的是数组方式[“#id”,”#id1″]依次类推。

yui不仅仅只有这几个方法的,还有很多,比如 set,get,appendChild,test,removeClass,getXY,getX,gety还有很多很多,

Related Articles

EXT核心API详解(六)

Ext.Fx类

对于我这样的懒鬼而言,Fx类是核心类库中最激动人心的一个类,它不是最重要的,却是最实用的一个类

定义了一些常用的特效方法,不妨自己多动手试试下面的方法,很有趣的

fadeIn( [Object options] ) : Ext.Element

渐显 options参数有以下属性

callback:Function    完成后的回叫方法

scope:Object         目标

easing:String        行为方法 默认值是:easeOut,可选值在ext_base中找到,但没有说明,以下内容从yahoo ui中找到的

easeNone:匀速

easeIn:开始慢且加速

easeOut:开始快且减速

easeBoth:开始慢且减速

easeInStrong:开始慢且加速,t的四次方

easeOutStrong:开始快且减速,t的四次方

easeBothStrong:开始慢且减速,t的四次方

elasticIn:

elasticOut:

elasticBoth:

backIn:

backOut:

backBoth:

bounceIn:

bounceOut:

bounceBoth:

太多,慢慢体会吧

afterCls:String        事件完成后元素的样式

duration:Number        事件完成时间(以秒为单位)

remove:Boolean        事件完成后元素销毁 

useDisplay:Boolean    隐藏元素是否使用display或visibility属性 

afterStyle:String/Object/Function        事件完成后应用样式

block:Boolean        块状化 

concurrent:Boolean    顺序还是同时执行?

stopFx :Boolean    当前效果完成后随合的效果是否将停止和移除

fadeOut( [Object options] ) : Ext.Element

渐隐 fadeOut和fadeIn能使用一个特别的endOpacity属性以指示结束时的透明度

例:el.fadeIn({duration:5,endOpacity:0.7});

frame( [String color], [Number count], [Object options] ) : Ext.Element

边框变亮扩展然后渐隐

例:el.frame(“ff0000”, 10, { duration: 3 })

ghost( [String anchor], [Object options] ) : Ext.Element

渐渐滑出视图,anchor定义

tl     左上角(默认)

t      上居中

tr     右上角

l      左边界的中央

c      居中

r      右边界的中央

bl     左下角

b      下居中

br     右下角

例:

el.ghost(‘b’, {

    easing: ‘easeOut’,

    duration: .5

    remove: false,

    useDisplay: false

});

hasActiveFx() : Boolean

指示元素是否当前有特效正在活动

hasFxBlock() : Boolean

是否有特效阻塞了

highlight( [String color], [Object options] ) : Ext.Element

高亮显示当前元素

例:el.highlight(“ffff9c”, {

    attr: “background-color”, //can be any valid CSS property (attribute) that supports a color value

    endColor: (current color) or “ffffff”,

    easing: ‘easeIn’,

    duration: 1

});

pause( Number seconds ) : Ext.Element

暂停

puff( [Object options] ) : Ext.Element

吹,吹,吹个大气球,元素渐大并隐没

例:el.puff({

    easing: ‘easeOut’,

    duration: .5,

    remove: false,

    useDisplay: false

});

scale( Number width, Number height, [Object options] ) : Ext.Element

缩放

例:el.scale(

    [element’s width],

    [element’s height], {

    easing: ‘easeOut’,

    duration: .35

});

sequenceFx()

排队特效

shift( Object options ) : Ext.Element

位移,并可重置大小,透明度等

例:

el.shift({

    width: [element’s width],

    height: [element’s height],

    x: [element’s x position],

    y: [element’s y position],

    opacity: [element’s opacity],

    easing: ‘easeOut’,

    duration: .35

});

slideIn( [String anchor], [Object options] ) : Ext.Element

slideOut( [String anchor], [Object options] ) : Ext.Element

滑入/滑出

例:el.slideIn(‘t’, {

    easing: ‘easeOut’,

    duration: .5

});

stopFx() : Ext.Element

停止特效

switchOff( [Object options] ) : Ext.Element

收起并隐没

例:

el.switchOff({

    easing: ‘easeIn’,

    duration: .3,

    remove: false,

    useDisplay: false

});

syncFx() : Ext.Element

异步特效

CSS中px和em的区别

在设计页面字体的时候,我们通常选择的是px而不是em。在国内,无论是哪种类型的网站,大到新浪、搜狐小到一些个人站点都是这么做的。不为别的,就是因为他易用。而国外的网站则基本上都采用em作为字体的单位,他们考虑到的是网站的可扩展性。这样一来,网站的维护也就相对简单些。要改大或改小某些字体就不会影响到页面的整体布局。前者就很有可能出项布局错乱的现象。

文字的单位建议用px,块与块之间的单位用px。

首先,em不是固定的,它会继承父级元素的字体大小。雅虎的Yahoo fonts CSS 建议字体大小都用%表示,他们提供了一张px和%相互转换的表:

  • 10px => 77%
  • 11px => 85%
  • 12px => 93% (was 93)
  • 13px => 100%
  • 14px => 108% (was 107)
  • 15px => 116% (was 114)
  • 16px => 123.1% (was 122)
  • 17px => 131% (was 129)
  • 18px => 138.5% (was 136)
  • 19px => 146.5% (was 144)
  • 20px => 153.9% (was 152)
  • 21px => 161.6% (was 159)
  • 22px => 167%
  • 23px => 174%
  • 24px => 182%
  • 25px => 189%
  • 26px => 197%

ExtJS效果库-Ext.Fx详解

对于我这样的懒鬼而言,Fx类是核心类库中最激动人心的一个类,它不是最重要的,却是最实用的一个类

定义了一些常用的特效方法,不妨自己多动手试试下面的方法,很有趣的

fadeIn( [Object options] ) : Ext.Element

渐显 options参数有以下属性

callback:Function 完成后的回叫方法

scope:Object 目标

easing:String 行为方法 默认值是:easeOut,可选值在ext_base中找到,但没有说明,以下内容从yahoo ui中找到的

easeNone:匀速

easeIn:开始慢且加速

easeOut:开始快且减速

easeBoth:开始慢且减速

easeInStrong:开始慢且加速,t的四次方

easeOutStrong:开始快且减速,t的四次方

easeBothStrong:开始慢且减速,t的四次方

elasticIn:

elasticOut:

elasticBoth:

backIn:

backOut:

backBoth:

bounceIn:

bounceOut:

bounceBoth:

太多,慢慢体会吧

afterCls:String 事件完成后元素的样式

duration:Number 事件完成时间(以秒为单位)

remove:Boolean 事件完成后元素销毁 

useDisplay:Boolean 隐藏元素是否使用display或visibility属性 

afterStyle:String/Object/Function 事件完成后应用样式

block:Boolean 块状化 

concurrent:Boolean 顺序还是同时执行?

stopFx :Boolean 当前效果完成后随合的效果是否将停止和移除

fadeOut( [Object options] ) : Ext.Element

渐隐 fadeOut和fadeIn能使用一个特别的endOpacity属性以指示结束时的透明度

例:el.fadeIn({duration:5,endOpacity:0.7});

frame( [String color], [Number count], [Object options] ) : Ext.Element

边框变亮扩展然后渐隐

例:el.frame(“ff0000”, 10, { duration: 3 })

ghost( [String anchor], [Object options] ) : Ext.Element

渐渐滑出视图,anchor定义

tl 左上角(默认)

t 上居中

tr 右上角

l 左边界的中央

c 居中

r 右边界的中央

bl 左下角

b 下居中

br 右下角

例:

el.ghost(‘b’, {

easing: ‘easeOut’,

duration: .5

remove: false,

useDisplay: false

});

hasActiveFx() : Boolean

指示元素是否当前有特效正在活动

hasFxBlock() : Boolean

是否有特效阻塞了

highlight( [String color], [Object options] ) : Ext.Element

高亮显示当前元素

例:el.highlight(“ffff9c”, {

attr: “background-color”, //can be any valid CSS property (attribute) that supports a color value

endColor: (current color) or “ffffff”,

easing: ‘easeIn’,

duration: 1

});

pause( Number seconds ) : Ext.Element

暂停

puff( [Object options] ) : Ext.Element

吹,吹,吹个大气球,元素渐大并隐没

例:el.puff({

easing: ‘easeOut’,

duration: .5,

remove: false,

useDisplay: false

});

scale( Number width, Number height, [Object options] ) : Ext.Element

缩放

例:el.scale(

[element’s width],

[element’s height], {

easing: ‘easeOut’,

duration: .35

});

sequenceFx()

排队特效

shift( Object options ) : Ext.Element

位移,并可重置大小,透明度等

例:

el.shift({

width: [element’s width],

height: [element’s height],

x: [element’s x position],

y: [element’s y position],

opacity: [element’s opacity],

easing: ‘easeOut’,

duration: .35

});

slideIn( [String anchor], [Object options] ) : Ext.Element

slideOut( [String anchor], [Object options] ) : Ext.Element

滑入/滑出

例:el.slideIn(‘t’, {

easing: ‘easeOut’,

duration: .5

});

stopFx() : Ext.Element

停止特效

switchOff( [Object options] ) : Ext.Element

收起并隐没

例:

el.switchOff({

easing: ‘easeIn’,

duration: .3,

remove: false,

useDisplay: false

});

syncFx() : Ext.Element

异步特效

Cookie-freeDomains

所谓 Cookie-free Domains, 翻译成中文叫”饼干免费域名”

但是翻译英文的时候有一种高深的语法叫倒装, 一般同学难以理解就不用转牛角尖了

说白了就是反过来翻译, 那么正确的翻译就是 免费饼干域名!

聪明的同学一看就明白了

有点呆的同学继续听我讲

免费饼干域名 说白了就是这个域名不会产生cookie

为什么不能让域名产生 cookie 呢 

当浏览器向服务器请求一张静态的图片前,会先发送同域名下的 cookie,服务器对于这些 cookie 不会做任何处理。因此它们只是在毫无意义的消耗带宽。所以你应该确保对于静态内容的请求是无coockie的请求。

域名加WWW的好处是什么 

如果我给 http://ooxx.me 设置了cookie,那么会感染所有子域名, 请求 http://plz.ooxx.me/logo.gif 时便会带上讨厌的cookie

但如果我给 http://www.ooxx.me 设置了cookie, 并不会感染其他子域名或主域名

域名不加WWW的好处

也许女孩子们不喜欢,但没错, 不加 WWW 的唯一好处就是 短

毫无疑问, 咱的域名都是被污染过的, 无法通过开一个二级域名存放图片CSS JS等静态资源

但咱有钱,可以买个域名专门放图片

Yahoo!使用的是 ymig.com,YouTube使用的是ytimg.com,

Amazon使用的是images-anazon.com, Miao.in使用的是 mediatempl.com(卖掉了)

插播广告: 世界上最大域名贩子 Godaddy.com , 只需要花$0.89 就可以买一个 .info 域名, 做 Cookie-free Domians 不是很二的选择

PS:续费很贵,用完就丢掉…

Use Cookie-free Domains for Components

When the browser makes a request for a static image and sends cookies together with the request, the server doesn’t have any use for those cookies. So they only create network traffic for no good reason. You should make sure static components are requested with cookie-free requests. Create a subdomain and host all your static components there.

If your domain is www.example.org, you can host your static components on static.example.org. However, if you’ve already set cookies on the top-level domain example.org as opposed to www.example.org, then all the requests to static.example.org will include those cookies. In this case, you can buy a whole new domain, host your static components there, and keep this domain cookie-free. Yahoo! uses yimg.com, YouTube uses ytimg.com, Amazon uses images-amazon.com and so on.

Another benefit of hosting static components on a cookie-free domain is that some proxies might refuse to cache the components that are requested with cookies. On a related note, if you wonder if you should use example.org or www.example.org for your home page, consider the cookie impact. Omitting www leaves you no choice but to write cookies to *.example.org, so for performance reasons it’s best to use the www subdomain and write the cookies to that subdomain.

[转] ScrapingYahoo!SearchwithWeb::Scraper

from http://menno.b10m.net/blog/blosxom/perl
该文章是用来解析取得到的html的资料,有用到xpath的概念

Scraping websites is usually pretty boring and annoying, but for some reason it always comes back. Tatsuhiko

Miyagawa comes to the rescue! His Web::Scraper makes scraping the web easy and fast.

Since the documentation is scarce (there are the POD and the slides of a presentation I missed), I’ll post

this blog entry in which I’ll show how to effectively scrape Yahoo! Search.

First we’ll define what we want to see. We’ll going to run a query for ‘Perl’. From that page, we want to

fetch the following things:

* title (the linked text)
* url (the actual link)
* description (the text beneath the link)

So let’s start our first little script:
[code]
use Data::Dumper;#该模块用来输出相关的结构
use URI;
use Web::Scraper;

my $yahoo = scraper {
process “a.yschttl”, ‘title’ => ‘TEXT’, ‘url’ => ‘@href’;
process “div.yschabstr”, ‘description’ => “TEXT”;

result ‘description’, ‘title’, ‘url’;
};

print Dumper $yahoo->scrape(URI->new(“http://search.yahoo.com/search p=Perl”));
[/code]
Now what happens here  The important stuff can be found in the process statements. Basically, you may

translate those lines to “Fetch an A-element with the CSS class named ‘yschttl’ and put the text in ‘title’,

and the href value in url. Then fetch the text of the div with the class named ‘yschabstr’ and put that in

description.

The result looks something like this:

$VAR1 = {
‘url’ => ‘http://www.perl.com/’,
‘title’ => ‘Perl.com’,
‘description’ => ‘Central resource for Perl developers. It contains
the Perl Language, edited by Tom Christiansen, and the Perl Reference, edited
by Clay Irving.’
};

Fun and a good start, but hey, do we really get only one result for a query on ‘Perl’  No way! We need a

loop!

The slides tell you to append ‘[]’ to the key, to enable looping. The process lines then look like this:

process “a.yschttl”, ‘title[]’ => ‘TEXT’, ‘url[]’ => ‘@href’;
process “div.yschabstr”, ‘description[]’ => “TEXT”;

And when we run it now, the result looks like this:

$VAR1 = {
‘url’ => [
‘http://www.perl.com/’,
‘http://www.perl.org/’,
‘http://www.perl.com/download.csp’,

],
‘title’ => [
‘Perl.com’,
‘Perl Mongers’,
‘Getting Perl’,

],
‘description’ => [
‘Central resource for Perl developers. It contains
the Perl Language, edited by Tom Christiansen, and the Perl Reference, edited by
Clay Irving.’,
‘Nonprofit organization, established to support the
Perl community.’,
‘Instructions on downloading a Perl interpreter for
your computer platform. … On CPAN, you will find Perl source in the /src
directory. …’,

]
};

That looks a lot better! We now get all the search results and could loop through the different arrays to get

the right title with the right url. But still we shouldn’t be satisfied, for we don’t want three arrays, we

want one array of hashes! For that we need a little trickery; we need another process line! All the stuff we

grab already is located in a big ordered list (the OL-element), so let’s find that one first, and for each

list element (LI) find our title,url and description. For this we don’t use the CSS selectors, but we’ll go

for the XPath selectors (heck, we can do both, so why not ).

To grab an XPath I really suggest firebug , a FireFox addon. With the easy point and click interface, you can

grab the path within seconds.

use Data::Dumper;
use URI;
use Web::Scraper;

my $yahoo = scraper {
process “/html/body/div[5]/div/div/div[2]/ol/li”, ‘results[]’ => scraper {
process “a.yschttl”, ‘title’ => ‘TEXT’, ‘url’ => ‘@href’;
process “div.yschabstr”, ‘description’ => “TEXT”;

result ‘description’, ‘title’, ‘url’;
};
result ‘results’;
};

print Dumper $yahoo->scrape( URI->new(“http://search.yahoo.com/search p=Perl”) );

You see that we switched our title, url and description fields back to the old notation (without []), for we

don’t want to loop those fields. We’ve moved the looping a step higher, being to the li-elements. Then we

open another scraper which will dump the hashes into the results array (note the ‘[]’ in ‘results[]’).

The result is exactly what we wanted:

$VAR1 = [
{
‘url’ => ‘http://www.perl.com/’,
‘title’ => ‘Perl.com’,
‘description’ => ‘Central resource for Perl developers. It
contains the Perl Language, edited by Tom Christiansen, and the Perl Reference,
edited by Clay Irving.’
},
{
‘url’ => ‘http://www.perl.org/’,
‘title’ => ‘Perl Mongers’,
‘description’ => ‘Nonprofit organization, established to support
the Perl community.’
},
{
‘url’ => ‘http://www.perl.com/download.csp’,
‘title’ => ‘Getting Perl’,
‘description’ => ‘Instructions on downloading a Perl interpreter
for your computer platform. … On CPAN, you will find Perl source in the /src
directory. …’
},

];

Again Tatsuhiko impresses me with a Perl module. Well done! Very well done!

Update: Tatsuhiko had some wise words on this article:

A couple of things:

You might just skip result() stuff if you’re returning the entire hash, which is the default. (The API is

stolen from Ruby’s one that needs result() for some reason, but my perl port doesn’t require) Now with less

code 🙂

The use of nested scraper in your example seems pretty good, but using hash reference could be also useful,

like:

my $yahoo = scraper {
process “a.yschttl”, ‘results[]’, {
title => ‘TEXT’, url => ‘@href’,
};
};

This way you’ll get title and url from TEXT and @href from a.yschttl, which would be handier if you don’t

need the description. TIMTOWTDI 🙂

[转载]EXT核心API详解(六)

[转载]EXT核心API详解(六)-Ext.Fx

Ext.Fx类

对于我这样的懒鬼而言,Fx类是核心类库中最激动人心的一个类,它不是最重要的,却是最实用的一个类

定义了一些常用的特效方法,不妨自己多动手试试下面的方法,很有趣的

fadeIn( [Object options] ) : Ext.Element

渐显 options参数有以下属性

callback:Function    完成后的回叫方法

scope:Object        目标

easing:String        行为方法 默认值是:easeOut,可选值在ext_base中找到,但没有说明,以下内容从yahoo ui中找到的

easeNone:匀速

easeIn:开始慢且加速

easeOut:开始快且减速

easeBoth:开始慢且减速

easeInStrong:开始慢且加速,t的四次方

easeOutStrong:开始快且减速,t的四次方

easeBothStrong:开始慢且减速,t的四次方

elasticIn:

elasticOut:

elasticBoth:

backIn:

backOut:

backBoth:

bounceIn:

bounceOut:

bounceBoth:

太多,慢慢体会吧

afterCls:String        事件完成后元素的样式

duration:Number        事件完成时间(以秒为单位)

remove:Boolean        事件完成后元素销毁 

useDisplay:Boolean    隐藏元素是否使用display或visibility属性 

afterStyle:String/Object/Function        事件完成后应用样式

block:Boolean        块状化 

concurrent:Boolean    顺序还是同时执行?

stopFx :Boolean    当前效果完成后随合的效果是否将停止和移除

fadeOut( [Object options] ) : Ext.Element

渐隐 fadeOut和fadeIn能使用一个特别的endOpacity属性以指示结束时的透明度

例:el.fadeIn({duration:5,endOpacity:0.7});

frame( [String color], [Number count], [Object options] ) : Ext.Element

边框变亮扩展然后渐隐

例:el.frame(“ff0000”, 10, { duration: 3 })

ghost( [String anchor], [Object options] ) : Ext.Element

渐渐滑出视图,anchor定义

tl     左上角(默认)

t      上居中

tr     右上角

l      左边界的中央

c      居中

r      右边界的中央

bl     左下角

b      下居中

br     右下角

例:

el.ghost(‘b’, {

    easing: ‘easeOut’,

    duration: .5

    remove: false,

    useDisplay: false

});

hasActiveFx() : Boolean

指示元素是否当前有特效正在活动

hasFxBlock() : Boolean

是否有特效阻塞了

highlight( [String color], [Object options] ) : Ext.Element

高亮显示当前元素

例:el.highlight(“ffff9c”, {

    attr: “background-color”, //can be any valid CSS property (attribute) that supports a color value

    endColor: (current color) or “ffffff”,

    easing: ‘easeIn’,

    duration: 1

});

pause( Number seconds ) : Ext.Element

暂停

puff( [Object options] ) : Ext.Element

吹,吹,吹个大气球,元素渐大并隐没

例:el.puff({

    easing: ‘easeOut’,

    duration: .5,

    remove: false,

    useDisplay: false

});

scale( Number width, Number height, [Object options] ) : Ext.Element

缩放

例:el.scale(

    [element’s width],

    [element’s height], {

    easing: ‘easeOut’,

    duration: .35

});

sequenceFx()

排队特效

shift( Object options ) : Ext.Element

位移,并可重置大小,透明度等

例:

el.shift({

    width: [element’s width],

    height: [element’s height],

    x: [element’s x position],

    y: [element’s y position],

    opacity: [element’s opacity],

    easing: ‘easeOut’,

    duration: .35

});

slideIn( [String anchor], [Object options] ) : Ext.Element

slideOut( [String anchor], [Object options] ) : Ext.Element

滑入/滑出

例:el.slideIn(‘t’, {

    easing: ‘easeOut’,

    duration: .5

});

stopFx() : Ext.Element

停止特效

switchOff( [Object options] ) : Ext.Element

收起并隐没

例:

el.switchOff({

    easing: ‘easeIn’,

    duration: .3,

    remove: false,

    useDisplay: false

});

syncFx() : Ext.Element

异步特效