CSS选择器

=====================

CSS选择器笔记

一、基本选择器

序号 选择器 含义
1. * 通用元素选择器,匹配任何元素
2. E 标签选择器,匹配所有使用E标签的元素
3. .info class选择器,匹配所有class属性中包含info的元素
4. #footer id选择器,匹配所有id属性等于footer的元素

实例:

二、多元素的组合选择器

序号 选择器 含义
5. E,F 多元素选择器,同时匹配所有E元素或F元素,E和F之间用逗号分隔
6. E F 后代元素选择器,匹配所有属于E元素后代的F元素,E和F之间用空格分隔
7. E > F 子元素选择器,匹配所有E元素的子元素F
8. E + F 毗邻元素选择器,匹配所有紧随E元素之后的同级元素F

实例:

三、CSS 2.1 属性选择器

序号 选择器 含义
9. E[att] 匹配所有具有att属性的E元素,不考虑它的值。(注意:E在此处可以省略,比如“[cheacked]”。以下同。)
10. E[att=val] 匹配所有att属性等于“val”的E元素
11. E[att~=val] 匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素
12. E[att|=val] 匹配所有att属性具有多个连字号分隔(hyphen-separated)的值、其中一个值以“val”开头的E元素,主要用于lang属性,比如“en”、“en-us”、“en-gb”等等

实例:

四、CSS 2.1中的伪类

序号 选择器 含义
13. E:first-child 匹配父元素的第一个子元素
14. E:link 匹配所有未被点击的链接
15. E:visited 匹配所有已被点击的链接
16. E:active 匹配鼠标已经其上按下、还没有释放的E元素
17. E:hover 匹配鼠标悬停其上的E元素
18. E:focus 匹配获得当前焦点的E元素
19. E:lang(c) 匹配lang属性等于c的E元素

实例:

五、 CSS 2.1中的伪元素

序号 选择器 含义
20. E:first-line 匹配E元素的第一行
21. E:first-letter 匹配E元素的第一个字母
22. E:before 在E元素之前插入生成的内容
23. E:after 在E元素之后插入生成的内容

实例:

六、CSS 3的同级元素通用选择器

序号 选择器 含义
24. E ~ F 匹配任何在E元素之后的同级F元素

实例:

七、CSS 3 属性选择器

序号 选择器 含义
25. E[att^=”val”] 属性att的值以”val”开头的元素
26. E[att$=”val”] 属性att的值以”val”结尾的元素
27. E[att*=”val”] 属性att的值包含”val”字符串的元素

实例:

八、CSS 3中与用户界面有关的伪类

序号 选择器 含义
28. E:enabled 匹配表单中激活的元素
29. E:disabled 匹配表单中禁用的元素
30. E:checked 匹配表单中被选中的radio(单选框)或checkbox(复选框)元素
31. E::selection 匹配用户当前选中的元素

实例:

九、CSS 3中的结构性伪类

序号 选择器 含义
32. E:root 匹配文档的根元素,对于HTML文档,就是HTML元素
33. E:nth-child(n) 匹配其父元素的第n个子元素,第一个编号为1
34. E:nth-last-child(n) 匹配其父元素的倒数第n个子元素,第一个编号为1
35. E:nth-of-type(n) 与:nth-child()作用类似,但是仅匹配使用同种标签的元素
36. E:nth-last-of-type(n) 与:nth-last-child() 作用类似,但是仅匹配使用同种标签的元素
37. E:last-child 匹配父元素的最后一个子元素,等同于:nth-last-child(1)
38. E:first-of-type 匹配父元素下使用同种标签的第一个子元素,等同于:nth-of-type(1)
39. E:last-of-type 匹配父元素下使用同种标签的最后一个子元素,等同于:nth-last-of-type(1)
40. E:only-child 匹配父元素下仅有的一个子元素,等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)
41. E:only-of-type 匹配父元素下使用同种标签的唯一一个子元素,等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)
42. E:empty 匹配一个不包含任何子元素的元素,注意,文本节点也被看作子元素

实例:

十、CSS 3的反选伪类

序号 选择器 含义
43. E:not(s) 匹配不符合当前选择器的任何元素

实例:

十一、CSS 3中的 :target 伪类

序号 选择器 含义
44. E:target 匹配文档中特定”id”点击后的效果

请参看HTML DOG上关于该选择器的详细解释实例

7-vi文字界面下的文本处理器(Linux教程)

<style type=”text/css”>!–
@page { size: 21cm 29.7cm; margin: 2cm }
TD P { margin-bottom: 0cm }
P { margin-bottom: 0.21cm }
–>
</style>

7-vi文字界面下的文本处理器

vi文本处理器

1。vi的重要性

vi是Linux系统下最常规的而且可以应用于文字界面下的文本处理器。

在命令行终端的文字界面下工作经常要用到文本处理器来编辑Linux的各种配置文件,因此掌握vi的使用很重要。

vi有3种工作模式,输入vi [文件名]

a. 一般模式

一进入默认的是一般模式,该模式下不能插入主要可以完成查看,搜寻,删除,可以使用复制粘贴等功能。

b. 编辑模式

编辑模式其实和一般模式没有很大的区别,当在键盘上输入了i,o,a,r中的任何一个即就进入了编辑模式,可以继续输入更多内容。

c. 命令行模式

在一般模式或者编辑模式下,输入:或者/就进入命令行模式,光标移动到最后一行。这里就象普通文本编辑器的菜单栏一样,可以搜索数据,读取,复制,保存,字符转换,显示行号,退出vi等功能。

2。常用指令

各个模式下的常用指令,可以做成一个cheat sheets表格,使用的时候一边查阅一边使用。

命令列内容说明

如前所述,所谓的命令列或命令模式,就是在最下面一行没有显示『–INSERT–』或者『–REPLACE–』字样的时候。通常在命令列中的指令有下面几种:(注意,当按下 『:』 时,光标会自动移动到屏幕的最下面一行!)
 

一般模式:

移动光标

h 或 向左方向键

光标向左移动一个字符

j 或 向下方向键

光标向下移动一个字符

k 或 向上方向键

光标向上移动一个字符

l 或 向右方向键

光标向右移动一个字符

[Ctrl] + [f]

屏幕『向前』移动一页(常用)

[Ctrl] + [b]

屏幕『向后』移动一页(常用)

[Ctrl] + [d]

屏幕『向前』移动半页

[Ctrl] + [u]

屏幕『向后』移动半页

+

光标移动到非空格符的下一列

光标移动到非空格符的上一列

n<space>

按下数字后再按空格键,光标会向右移动这一行的 n 个字符。例如 20<space> 则光标会向后面移动 20 个字符距离。

0

这是数字『 0 』:移动到这一行的最前面字符处(常用)

$

移动到这一行的最后面字符处(常用)

H

光标移动到这个屏幕的最上方那一行

M

光标移动到这个屏幕的中央那一行

L

光标移动到这个屏幕的最下方那一行

G

移动到这个档案的最后一行(常用)

nG

移动到这个档案的第 n 行。例如 20G 则会移动到这个档案的 20 行(可配合 :set nu)

n<Enter>

光标向下移动 n 行(常用)

一般模式:

搜寻与取代

/word

向光标之后寻找一个字符串名称为 word 的字符串。(常用)

 word

向光标之前寻找一个字符串名称为 word 的字符串。

:n1,n2s/word1/word2/g

在第 n1 与 n2 行之间寻找 word1 这个字符串,并将该字符串取代为 word2 !(常用)

:1,$s/word1/word2/g

从第一行到最后一行寻找 word1 字符串,并将该字符串取代为 word2 !(常用)

:1,$s/word1/word2/gc

从第一行到最后一行寻找 word1 字符串,并将该字符串取代为 word2 !且在取代前显示提示字符给使用者确认(conform)是否需要取代!(常用)

一般模式:

删除、复制与贴上

x, X

x 为向后删除一个字符, X 为向前删除一个字符(常用)

nx

向后删除 n 个字符

dd

删除游标所在的那一整列(常用)

ndd

删除光标所在的向下 n 列,例如 20dd 则是删除 20 列(常用)

d1G

删除游标所在到第一行的所有数据

dG

删除游标所在到最后一行的所有数据

yy

复制游标所在的那一行(常用)

nyy

复制光标所在的向下 n 列,例如 20yy 则是复制 20 列(常用)

y1G

复制游标所在列到第一列的所有数据

yG

复制游标所在列到最后一列的所有数据

p, P

p 为复制的数据在光标下一行贴上,P 则为贴在游标上一行!(常用)

J

将光标所在列与下一列的数据结合成同一列

c

重复删除多个数据,例如向下删除 10 行,[ 10cj ]

u

复原前一个动作。(常用)

进入编辑模式

i, I

插入:在目前的光标所在处插入输入之文字,已存在的文字会向后退;(常用)

a, A

增加:由目前光标所在的下一个字开始输入,已存在的文字会向后退:(常用)

o, O

插入新的一行:从光标所在的下一行枝行首开始输入文字;(常用)

r, R

取代:r 会取代光标所在的那一个字符;R会一直取代光标所在的文字,直到按下 ESC 为止;(常用)

Esc

退出编辑模式,回到一般模式中(常用)

指令列命令模式

:w

将编辑的数据写入硬盘档案中(常用)

:w!

若档案属性为『只读』时,强制写入该档案

:q

离开 vi (常用)

:q!

若曾修改过档案,又不想储存,使用 ! 为强制离开不储存档案。

:wq

储存后离开,若为 :wq! 则为强制储存后离开(常用)

:e!

将档案还原到最原始的状态!

ZZ

若档案没有更动,则不储存离开,若档案已经经过更动,则储存后离开!

:w [filename]

将编辑的数据储存成另一个档案(类似另存新档)

:r [filename]

在编辑的数据中,读入另一个档案的数据。亦即将 『filename』 这个档案内容加到游标所在行后面

:set nu

显示行号,设定之后,会在每一行的前缀显示该行的行号

:set nonu

与 set nu 相反,为取消行号!

n1,n2 w [filename]

将 n1 到 n2 的内容储存成 filename 这个档案。

:! command

暂时离开 vi 到指令列模式下执行 command 的显示结果!例如[ :! ls /home ]

OK!会这些指令就已经很厉害了,因为常用到的指令也只有不到一半!通常 vi 的指令除了上面 VBird 注明的常用的几个外,其它是不用背的,你可以做一张简单的指令表在你的屏幕墙上,一有疑问可以马上的查询呦!


一个案例练习

来来来!测试一下您是否已经熟悉 vi 这个指令呢?请依照底下的需求进行您的指令动作( 请注意,该档案为 Mandrake 9.0 所附上的档案内容,如果是其它的 distribution ,可能结果会不太一样! ),然后看一下结果在屏幕前面显示什么?

  1. 请在 /root 这个目录下建立一个名为 vitest 的目录;

  2. 进入 vitest 这个目录当中;

  3. 将 /etc/man.config 拷贝到本目录底下;

  4. 使用 vi 开启本目录下的 man.config 这个档案;

  5. 在 vi 中设定一下行号;

  6. 移动到第62 行,向右移动 40 个字符,请问您看到的双引号内是什么目录?

  7. 移动到第一行,并且向下搜寻一下『 teTeX 』这个字符串,请问他在第几行?

  8. 接着下来,我要将 50 到 100 行之间的 man 改为 MAN ,并且一个一个挑选是否需要修改,如何下达指令?

  9. 修改完之后,突然反悔了,要全部复原,有哪些方法?

  10. 我要复制 51 到 60 行这十行的内容,并且贴到最后一行之后;

  11. 删除 11 到 30 行之间的 20 行;

  12. 将这个档案另存成一个 man.test.config 的檔名;

  13. 去到第 29 行,并且删除 15 个字符;

  14. 请问目前的档案有多少行与多少字符?

  15. 储存后离开吧!

整个的步骤可以如下所示:

  1. mkdir /root/vitest

  2. cd /root/vitest

  3. cp /etc/man.config .

  4. vi man.config

  5. : set nu

  6. 先按下 62G ,再按下 40 + 向右键,会看到『/dir/bin/foo』

  7. 先按下 1G ,然后按下 /teTeX 搜寻,会看到他在第 51 行!

  8. :50,100s/man/MAN/gc

  9. (1)简单的方法可以一直按 u 回复到原始状态,(2)使用不储存离开 :q! 之后,再重新读取一次该档案

  10. 51G 然后在 10yy 之后按下 G 到最后一行,再给他 p 贴上十行!

  11. 11G 之后,再给他 20dd 即可删除 20 行了;

  12. :w man.test.config

  13. 29G 之后,再给他 15x 即可删除 15 个字符;

  14. 135行,共 3903 个字符

  15. :wq!

如果您的结果都可以查的到,那么 vi 的使用上面应该没有太大的问题啦!剩下的问题会是在…..打字练习….

jquery选择器E+F

E + F

匹配所有的F元素,其中F元素为E元素的下一个元素(紧贴在E元素后的),且仅仅为下一个元素集合中的第一个。返回匹配集合

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script>
  $(document).ready(function(){
    $("label + input").css("color", "blue").val("Labeled!")
  });
  </script>
  
</head>
<body>
  <form>
    <label>Name:</label>
    <input name="name" />
    <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
    </fieldset>
  </form>
  <input name="none" />
</body>
</html>

 

$(“label + input”).css(“color”, “blue”).val(“Labeled!”)
将匹配满足label元素下一个为input元素,且为该集合的第一个元素的所有input元素,以下为匹配结果集

<input name=”name” />
<input name=”newsletter” />

ruby遍历文件夹所有文件

def traverse_dir(file_path)
  if File.directory  file_path
    Dir.foreach(file_path) do |file|
      if file!="." and file!=".."
        traverse_dir(file_path+"/"+file){|x| yield x}
      end
    end
  else
    yield  file_path
  end
end

s  = %q-D:/work/java/web-
traverse_dir(s){|f|
  if f.to_s() =~ /\.jsp$/ || f.to_s() =~ /\.css$/
    IO.readlines(f).each { |line|
      if line =~ /([^""']*gif)/
        puts " #$1"
      end
    }
    #puts f
  end
}

设计模式五,Observer

观察者(Observer)模式用于解决一个相当常见的问题:当某些其他对象改变状态时,如果一组对象需要进行相应的更新,那么应该如何处理呢?假定有一些数据(即文档)和两个视图,一个图形视图和一个文本视图,在更改“文档”数据时,必须通知这些视图更新它们自身,这就是观察者模式所要完成的任务。

以下代码完成Observer模式,采用内部内的方式,不过虽然实现了此模式,但内部类的代码不断重复,不是好的方法。

找到更适合的方法再考虑进行更新。


#ifndef OBSERVER_H
#define OBSERVER_H

class Observable;
class Argument {};

class Observer {
public:
  // Called by the observed object, whenever
  // the observed object is changed:
  virtual void update(Observable* o, Argument* arg) = 0;
  virtual ~Observer() {}
};
#endif // OBSERVER_H ///:~


#ifndef OBSERVABLE_H
#define OBSERVABLE_H
#include 
#include "Observer.h"

class Observable {
  bool changed;
  std::set<observer> observers;</observer>
protected:
  virtual void setChanged() { changed = true; }
  virtual void clearChanged() { changed = false; }
public:
  virtual void addObserver(Observer& o) {
    observers.insert(&o);
  }
  virtual void deleteObserver(Observer& o) {
    observers.erase(&o);
  }
  virtual void deleteObservers() {
    observers.clear();
  }
  virtual int countObservers() {
    return observers.size();
  }
  virtual bool hasChanged() { return changed; }
  // If this object has changed, notify all
  // of its observers:
  virtual void notifyObservers(Argument* arg = 0) {
    if(!hasChanged()) return;
    clearChanged(); // Not "changed" anymore
    std::set<observer>::iterator it;</observer>
    for(it = observers.begin();it != observers.end(); it++)
      (*it)->update(this, arg);
  }
  virtual ~Observable() {}
};
#endif // OBSERVABLE_H ///:~


//: C10:ObservedFlower.cpp
// Demonstration of "observer" pattern.
#include <algorithm></algorithm>
#include <iostream></iostream>
#include string>
#include <vector></vector>
#include "Observable.h"
using namespace std;

class Flower {
    bool isOpen;
public:
    Flower() : isOpen(false),
        openNotifier(this), closeNotifier(this) {}
    void open() { // Opens its petals
        isOpen = true;
        openNotifier.notifyObservers();
        closeNotifier.open();
    }
    void close() { // Closes its petals
        isOpen = false;
        closeNotifier.notifyObservers();
        openNotifier.close();
    }
    // Using the "inner class" idiom:
    class OpenNotifier;
    friend class Flower::OpenNotifier;
    class OpenNotifier : public Observable {
        Flower* parent;
        bool alreadyOpen;
    public:
        OpenNotifier(Flower* f) : parent(f),
            alreadyOpen(false) {}
        void notifyObservers(Argument* arg = 0) {
            if(parent->isOpen && !alreadyOpen) {
                setChanged();
                Observable::notifyObservers();
                alreadyOpen = true;
            }
        }
        void close() { alreadyOpen = false; }
    } openNotifier;
    class CloseNotifier;
    friend class Flower::CloseNotifier;
    class CloseNotifier : public Observable {
        Flower* parent;
        bool alreadyClosed;
    public:
        CloseNotifier(Flower* f) : parent(f),
            alreadyClosed(false) {}
        void notifyObservers(Argument* arg = 0) {
            if(!parent->isOpen && !alreadyClosed) {
                setChanged();
                Observable::notifyObservers();
                alreadyClosed = true;
            }
        }
        void open() { alreadyClosed = false; }
    } closeNotifier;
};

class Bee {
    string name;
    // An "inner class" for observing openings:
    class OpenObserver;
    friend class Bee::OpenObserver;
    class OpenObserver : public Observer {
        Bee* parent;
    public:
        OpenObserver(Bee* b) : parent(b) {}
        void update(Observable*, Argument *) {
            cout "Bee " name
                "'s breakfast time!" 

  
        }
    } openObsrv;
    // Another "inner class" for closings:
    class CloseObserver;
    friend class Bee::CloseObserver;
    class CloseObserver : public Observer {
        Bee* parent;
    public:
        CloseObserver(Bee* b) : parent(b) {}
        void update(Observable*, Argument *) {
            cout "Bee " name
                "'s bed time!" 

  
        }
    } closeObsrv;
public:
    Bee(string nm) : name(nm),
        openObsrv(this), closeObsrv(this) {}
    Observer& openObserver() { return openObsrv; }
    Observer& closeObserver() { return closeObsrv;}
};

class Hummingbird {
    string name;
    class OpenObserver;
    friend class Hummingbird::OpenObserver;
    class OpenObserver : public Observer {
        Hummingbird* parent;
    public:
        OpenObserver(Hummingbird* h) : parent(h) {}
        void update(Observable*, Argument *) {
            cout "Hummingbird " name
                "'s breakfast time!" 

  
        }
    } openObsrv;
    class CloseObserver;
    friend class Hummingbird::CloseObserver;
    class CloseObserver : public Observer {
        Hummingbird* parent;
    public:
        CloseObserver(Hummingbird* h) : parent(h) {}
        void update(Observable*, Argument *) {
            cout "Hummingbird " name
                "'s bed time!" 

  
        }
    } closeObsrv;
public:
    Hummingbird(string nm) : name(nm),
        openObsrv(this), closeObsrv(this) {}
    Observer& openObserver() { return openObsrv; }
    Observer& closeObserver() { return closeObsrv;}
};

int main() {
    Flower f;
    Bee ba("A"), bb("B");
    Hummingbird ha("A"), hb("B");
    f.openNotifier.addObserver(ha.openObserver());
    f.openNotifier.addObserver(hb.openObserver());
    f.openNotifier.addObserver(ba.openObserver());
    f.openNotifier.addObserver(bb.openObserver());
    f.closeNotifier.addObserver(ha.closeObserver());
    f.closeNotifier.addObserver(hb.closeObserver());
    f.closeNotifier.addObserver(ba.closeObserver());
    f.closeNotifier.addObserver(bb.closeObserver());
    // Hummingbird B decides to sleep in:
    f.openNotifier.deleteObserver(hb.openObserver());
    // Something changes that interests observers:
    f.open();
    f.open(); // It's already open, no change.
    // Bee A doesn't want to go to bed:
    f.closeNotifier.deleteObserver(
        ba.closeObserver());
    f.close();
    f.close(); // It's already closed; no change
    f.openNotifier.deleteObservers();
    f.open();
    f.close();
} ///:~

<style type=”text/css”>
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }</style>

2010.04.13———Ext之MessageBox进度条等待条带图像的消息框

2010.04.13———Ext 之 MessageBox 进度条 等待条 带图像的消息框

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>MessageBox</title>
    <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
    <!-- ext-base.js必须在ext-all前面,不然,Ext无法识别 -->
    <script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="extjs/ext-all.js"></script>
<style type="text/css">
.ext-mb-download {
	background:transparent url(images/MessageBox/download.gif) no-repeat top left;
	height:30px;
}
</style>

<script type="text/javascript">
Ext.onReady(function(){
	Ext.get("b1").on("click",function(event){
		Ext.Msg.alert("祝贺","你老婆生了!",showMessage);
		/*当用户点击按钮或者"X"时,都会调用这个函数,并且默认返回消息框上面按钮的id
		 
		*/
	});
	Ext.get("b2").on("click",function(event){
		Ext.Msg.confirm("请问","你确定要了却此生吗?",showMessage);
		/*当用户点击按钮或者"X"时,都会调用这个函数,并且默认返回消息框上面按钮的id*/
	});
	Ext.get("b3").on("click",function(event){
		Ext.Msg.prompt("提示","请输入你最恨的人?",showMessageText);
		/*当用户点击按钮或者"X"时,都会调用这个函数,并且默认返回消息框上面按钮的id和输入的文本*/
	});
	Ext.get("b4").on("click",function(event){
		Ext.Msg.show({//MessageBox是单例模式,不能实例化,所以一般通过这个show方法来建立MessageBox
			title: "输入框",
			msg: "请输入一段诗词:",
			width: 300,
			buttons: {ok:"很好",cancel:"离开"},
			multiline: true,//提示用户输入多行文本
			fn: showMessageText,
			/*
			也是传两个参数,一个id,一个text
			被按下的按钮的ID,属于如下情况之一: 
			1.ok 
			2.yes 
			3.no 
			4.cancel
			*/
			animEl:"b4"//一个id或者元素,作为当打开和关闭消息框时动画效果的起点(终点) 
		});
	});
	Ext.get("b5").on("click",function(event){
		Ext.Msg.show({
			title: "图像",
			msg: "注意左边的这个图像<br /> 帅不帅?",
			buttons: Ext.Msg.YESNOCANCEL,
			fn: showMessage,
			animEl:"b4",
			icon: Ext.MessageBox.QUESTION
			/*
			提供一个背景图片,被用作对话框body的图标 (例如Ext.MessageBox.WARNING)
			可以为一个一个CSS类;
			*/
		});
	});
	Ext.get("b6").on("click",function(event){
		Ext.Msg.show({
			title: "进度条",
			msg: "加载数据",
			progressText: "加载中...",//当progress = true时在进展条上面显示的文本 
			progress: true,//设置为true以显示一个进展条
			width: 300,
			animEl:"b6"
		});
		 var f = function(v){
	            return function(){
	                if(v == 12){
	                    Ext.Msg.hide();//隐藏可见的消息框
	                    Ext.Msg.alert("恭喜","恭喜,数据已加载完成");
	                }else{
	                    var i = v/11;
	                    Ext.Msg.updateProgress(i, "已完成"+Math.round(100*i)+'%',"开始加载");
	                    /*
	                                                                    更新一个进度条上的文本(progressText)和进度条body里面的文本(msg)。
	                                                                    只与通过 Ext.MessageBox.progress 或者
	                                                                    通过调用 Ext.MessageBox.show 同时progress:true初始化的消息框相关。
	                                                                    三个参数:
	                    1.是0--1之间的一个数
	                    2.是进度条上的文本 ,就是progressText
	                    3.是进度条消息框上的文本,就是msg                                             
	                    */
	                }
	           };
	       };
	       for(var i = 1; i < 13; i++){
	           setTimeout(f(i), i*500);//隔一段时间,执行一次
	       }
			
	});
	Ext.get("b7").on("click",function(event){
		Ext.Msg.show({
			//title: "保存",
			msg: "保存数据中,请稍等...",
			progressText: "保存中..",
			width: 300,
			wait: true,
			waitConfig: {interval:200},
	        icon: "ext-mb-download",//一个在上面定义的CSS类
	        animEl: "b7"
		});
		setTimeout(function(){
			Ext.Msg.hide();
			Ext.Msg.alert("恭喜","恭喜,数据已保存完成");
		},5000);
	});

	/*
	一些Ext本身带的背景图片
	*/
	Ext.fly('info').dom.value = Ext.MessageBox.INFO;
    Ext.fly('question').dom.value = Ext.MessageBox.QUESTION;
    Ext.fly('warning').dom.value = Ext.MessageBox.WARNING;
    Ext.fly('error').dom.value = Ext.MessageBox.ERROR;
	Ext.get("b8").on("click",function(event){
		Ext.Msg.show({
			title: "呵呵",
			msg: "注意左边图像的变换",
			buttons: Ext.Msg.OK,
			animEl: "b8",
			fn: showMessage,
			icon: Ext.get('icons').dom.value
		});
	});
});

function showMessage(btn){
	alert("你点击了"+btn);
}

function showMessageText(btn,text){
	alert("你点击了"+btn+",你输入了"+text);
}


</script>
</head>
  
<body>
<p>
	<b>alert弹出按钮</b> 
	<button id="b1" >show</button>
</p><br />
<p>
	<b>confirm确认按钮</b>
	<button id="b2" >show</button>
</p><br />
<p>
	<b>prompt输入按钮</b>
	<button id="b3" >show</button>
</p><br />
<p>
	<b>MessageBox输入文本按钮</b>
	<button id="b4" >show</button>
</p><br />
<p>
	<b>MessageBox带图像的消息框</b>
	<button id="b5" >show</button>
</p><br />
<p>
	<b>MessageBox进度条</b>
	<button id="b6" >show</button>
</p><br />
<p>
	<b>MessageBox等待条</b>
	<button id="b7" >show</button>
</p><br />
<p>
    <b>变换图像</b><br />
    选择所需要的图像
    <select id="icons">
        <option id="error" selected="selected">错误</option>
        <option id="info">提示</option>
        <option id="question">问答</option>

        <option id="warning">警告</option>
    </select>
    <button id="b8">Show</button>
</p>

</body>
</html>

VSS2005自动备份/恢复

@echo off
@title Backing up SourceSafe databases

SET VSS_DB=E:\RuiLanCodeManageVSS\
set BakPath=D:\VSSBackUp\

FOR /F “tokens=1-3 delims=- ” %%i IN (‘date /t’) DO SET DATE=%%i-%%j-%%k
FOR /F “tokens=2-2” %%i IN (‘date /t’) DO SET DAY=%%i

ssarc.exe -d- -s%VSS_DB% -yadmin,meiyoumima -o%BakPath%Backup_output_log(%DATE%%DAY%).txt -l %BakPath%Backup_Database(%DATE%%DAY%).ssa $/

if errorlevel 1 (
echo 备份失败
) ELSE (
echo 备份完成
)

@echo on

注意文件要放入你的VSS安装目录下

您可以吧它生成.bat文件后加入作业保证定期备份

修复vss Projects 文件错误(必须断开网络)

<style type=”text/css”>
TABLE { TABLE-LAYOUT: fixed; WORD-WRAP: break-word; }</style><style type=”text/css”>
.lineBorderBlue1{ BORDER-TOP: # 9 1px groove; BORDER-BOTTOM: # 9 1px groove; BORDER-LEFT: # 9 1px groove; BORDER-RIGHT: # 9 1px groove; background-color:#efefef;}</style>

rd E:\ProjectVSS\data\backup /s /q
“C:\Program Files\Microsoft Visual SourceSafe\analyze.exe” -F -V3 -D “e:\projectvss\data”

漂亮的JS日期控件

1. 新建CalendarWidget.js文件, 内容如下:

// Calendar Widget

function CalendarWidget(InstanceName) {
 // /Global Tag
 this.instanceName = InstanceName;
 // /Properties
 this.separator = “-“;
 this.oBtnOKTitle = “OK”;
 this.oBtnTodayTitle = “Today”;
 this.oBtnCancelTitle = “Cancel”;
 this.hour=”HH”;
 this.minute=”MM”;
 this.second=”SS”;
 this.weekDaySting = new Array(“S”, “M”, “T”, “W”, “T”, “F”, “S”);
 this.monthSting = new Array(“January”, “February”, “March”, “April”, “May”,
   “June”, “July”, “August”, “September”, “October”, “November”,
   “December”);
 this.Width = 200;
 this.currDate = new Date();
 this.today = new Date();
 this.startYear = 1970;
 this.endYear = 2099;
 // /Css
 this.normalfontColor = “#666666”;
 this.selectedfontColor = “red”;
 this.divBorderCss = “1px solid #BCD0DE”;
 this.titleTableBgColor = “#98B8CD”;
 this.tableBorderColor = “#CCCCCC”
 // /Method
 this.Init = CalendarInit;
 this.Fill = CalendarFill;
 this.Refresh = CalendarRefresh;
 this.Restore = CalendarRestore;
 // /HTMLObject
 this.oTaget = null;
 this.oPreviousCell = null;
 this.sDIVID = InstanceName + “_Div”;
 this.sTABLEID = InstanceName + “_Table”;
 this.sMONTHID = InstanceName + “_Month”;
 this.sYEARID = InstanceName + “_Year”;
 // /TIME
 this.sMINUTEID = InstanceName + “_Minute”;
 this.sSECONDID = InstanceName + “_Second”;
 this.sHOURID = InstanceName + “_Hour”;
 // /ETCOBJ
 this.oBTNOK = InstanceName + “_OK”;
 this.oTIMEDIVID = InstanceName + “_TIMEDIV”;
 this.sTODAYBTNID = InstanceName + “_TODAYBTN”;
}
// /Create panel
function CalendarInit() {
 var sMonth, sYear
 sMonth = this.currDate.getMonth();
 sYear = this.currDate.getYear();
 htmlAll = “<div id='” + this.sDIVID
   + “‘ style=’display:none;position:absolute;width:” + this.Width
   + “;border:” + this.divBorderCss
   + “;padding:2px;background-color:#FFFFFF;z-index:10;’>”;
 htmlAll += “<div align=’center’ style=’z-index:10;’>”;
 // / Month
 htmloMonth = “<select id='” + this.sMONTHID
   + “‘ onchange=CalendarMonthChange(” + this.instanceName
   + “) style=’width:50%;z-index:10;’>”;
 for (i = 0; i < 12; i++) {
  htmloMonth += “<option value='” + i + “‘>” + this.monthSting[i]
    + “</option>”;
 }
 htmloMonth += “</select>”;
 // / Year
 htmloYear = “<select id='” + this.sYEARID
   + “‘ onchange=CalendarYearChange(” + this.instanceName
   + “) style=’width:50%;z-index:10;’>”;
 for (i = this.startYear; i <= this.endYear; i++) {
  htmloYear += “<option value='” + i + “‘>” + i + “</option>”;
 }
 htmloYear += “</select></div>”;
 // / Day
 htmloDayTable = “<table id='” + this.sTABLEID
   + “‘ width=’100%’ border=0 cellpadding=0 cellspacing=1 bgcolor='”
   + this.tableBorderColor + “‘ sytle=’z-index:10;’>”;
 htmloDayTable += “<tbody bgcolor=’#ffffff’style=’font-size:13px’>”;
 for (i = 0; i <= 6; i++) {
  if (i == 0)
   htmloDayTable += “<tr bgcolor='” + this.titleTableBgColor + “‘>”;
  else
   htmloDayTable += “<tr>”;
  for (j = 0; j < 7; j++) {

   if (i == 0) {
    htmloDayTable += “<td height=’20’ align=’center’ valign=’middle’ style=’cursor:hand’>”;
    htmloDayTable += this.weekDaySting[j] + “</td>”
   } else {
    htmloDayTable += “<td height=’20’ align=’center’ valign=’middle’ style=’cursor:hand'”;
    htmloDayTable += ” onmouseover=CalendarCellsMsOver(“
      + this.instanceName + “)”;
    htmloDayTable += ” onmouseout=CalendarCellsMsOut(“
      + this.instanceName + “)”;
    htmloDayTable += ” onclick=CalendarCellsClick(this,”
      + this.instanceName + “)>”;
    htmloDayTable += ” </td>”
   }
  }
  htmloDayTable += “</tr>”;
 }
 htmloDayTable += “</tbody></table>”;
 // / Time HH:MM:SS
 htmloTime = “<div id='”+ this.oTIMEDIVID +”‘ align=’center’ style=’width:100%;z-index:10;display:none’>”;
 htmloTime += “<select id='”+ this.sHOURID +”‘ style=’width:28%;z-index:10;’>”;
 for (i = 0; i < 24; i++) {
  val = CalendarDblNum(i);
  htmloTime += “<option value='” + val + “‘>” + val + “</option>”;
 }
 htmloTime += “</select>” + this.hour;
 htmloTime += “<select id='”+ this.sMINUTEID +”‘ style=’width:28%;z-index:10;’>”;
 for (i = 0; i < 60; i++) {
  val = CalendarDblNum(i);
  htmloTime += “<option value='” + val + “‘>” + val + “</option>”;
 }
 htmloTime += “</select>”+ this.minute;
 htmloTime += “<select id='”+ this.sSECONDID +”‘ style=’width:26%;z-index:10;’>”;
 for (i = 0; i < 60; i++) {
  val = CalendarDblNum(i);
  htmloTime += “<option value='” + val + “‘>” + val + “</option>”;
 }
 htmloTime += “</select>”+ this.second;
 htmloTime += “</div>”;
 // / OK Button
 htmloBtnOK = “<div align=’center’ style=’padding:3px;z-index:10;’>”
 htmloBtnOK += “<button id='”+ this.oBTNOK
   + “‘ style=’width:30%;border:1px solid #BCD0DE;cursor:hand'”
 htmloBtnOK += ” onclick=CalendarOkClick(” + this.instanceName + “)>”
   + this.oBtnOKTitle + “</button> “
 // / Today Button
 htmloButton = “<button id='”+ this.sTODAYBTNID
   + “‘ style=’width:30%;border:1px solid #BCD0DE;cursor:hand'”
 htmloButton += ” onclick=CalendarTodayClick(” + this.instanceName + “)>”
   + this.oBtnTodayTitle + “</button> “
 // / Reset Button
 htmloButton += “<button style=’width:30%;border:1px solid #BCD0DE;cursor:hand'”
 htmloButton += ” onclick=CalendarCancel(” + this.instanceName + “)>”
   + this.oBtnCancelTitle + “</button> “
 htmloButton += “</div>”
 // / All
 htmlAll = htmlAll + htmloMonth + htmloYear + htmloDayTable + htmloTime + htmloBtnOK + htmloButton
   + “</div>”;
 document.write(htmlAll);
 this.Fill();
}
// /
function CalendarFill() {
 var sMonth, sYear, sWeekDay, sToday, oTable, currRow, MaxDay, iDaySn, sIndex, rowIndex, cellIndex, oSelectMonth, oSelectYear
 sMonth = this.currDate.getMonth();
 sYear = this.currDate.getYear();
 sWeekDay = (new Date(sYear, sMonth, 1)).getDay();
 sToday = this.currDate.getDate();
 iDaySn = 1
 oTable = document.all[this.sTABLEID];
 currRow = oTable.rows[1];
 MaxDay = CalendarGetMaxDay(sYear, sMonth);

 oSelectMonth = document.all[this.sMONTHID]
 oSelectMonth.selectedIndex = sMonth;
 oSelectYear = document.all[this.sYEARID]
 for (i = 0; i < oSelectYear.length; i++) {
  if (parseInt(oSelectYear.options[i].value) == sYear)
   oSelectYear.selectedIndex = i;
 }
 // //
 for (rowIndex = 1; rowIndex <= 6; rowIndex++) {
  if (iDaySn > MaxDay)
   break;
  currRow = oTable.rows[rowIndex];
  cellIndex = 0;
  if (rowIndex == 1)
   cellIndex = sWeekDay;
  for (; cellIndex < currRow.cells.length; cellIndex++) {
   if (iDaySn == sToday) {
    currRow.cells[cellIndex].innerHTML = “<font color='”
      + this.selectedfontColor + “‘><i><b>” + iDaySn
      + “</b></i></font>”;
    this.oPreviousCell = currRow.cells[cellIndex];
   } else {
    currRow.cells[cellIndex].innerHTML = iDaySn;
    currRow.cells[cellIndex].style.color = this.normalfontColor;
   }
   CalendarCellSetCss(0, currRow.cells[cellIndex]);
   iDaySn++;
   if (iDaySn > MaxDay)
    break;
  }
 }
}
// / Clear Data
function CalendarRestore() {
 var i, j, oTable
 oTable = document.all[this.sTABLEID]
 for (i = 1; i < oTable.rows.length; i++) {
  for (j = 0; j < oTable.rows[i].cells.length; j++) {
   CalendarCellSetCss(0, oTable.rows[i].cells[j]);
   oTable.rows[i].cells[j].innerHTML = ” “;
  }
 }
}
// / refresh
function CalendarRefresh(newDate) {
 this.currDate = newDate;
 this.Restore();
 this.Fill();
}
// / Cell MouseOver
function CalendarCellsMsOver(oInstance) {
 var myCell = event.srcElement;
 CalendarCellSetCss(0, oInstance.oPreviousCell);
 if (myCell) {
  CalendarCellSetCss(1, myCell);
  oInstance.oPreviousCell = myCell;
 }
}
// //// Cell MouseOut
function CalendarCellsMsOut(oInstance) {
 var myCell = event.srcElement;
 CalendarCellSetCss(0, myCell);
}
// / Year Change
function CalendarYearChange(oInstance) {
 var sDay, sMonth, sYear, newDate
 sDay = oInstance.currDate.getDate();
 sMonth = oInstance.currDate.getMonth();
 sYear = document.all[oInstance.sYEARID].value
 newDate = new Date(sYear, sMonth, sDay);
 oInstance.Refresh(newDate);
}
// / Month Change
function CalendarMonthChange(oInstance) {
 var sDay, sMonth, sYear, newDate
 sDay = oInstance.currDate.getDate();
 sMonth = document.all[oInstance.sMONTHID].value
 sYear = oInstance.currDate.getYear();
 newDate = new Date(sYear, sMonth, sDay);
 oInstance.Refresh(newDate);
}
function CalendarCellsClick(oCell, oInstance) {
 var sDay, sMonth, sYear, newDate
 sYear = oInstance.currDate.getFullYear();
 sMonth = oInstance.currDate.getMonth();
 sDay = oInstance.currDate.getDate();
 if (oCell != null && oCell.innerText != null
   && oCell.innerText.length > 0) {
  sDay = parseInt(oCell.innerText);
  if (sDay != oInstance.currDate.getDate()) {
   newDate = new Date(sYear, sMonth, sDay);
   oInstance.Refresh(newDate);
  }
 } else {
  return “”;
 }
}

// / “OK” button Click
function CalendarOkClick(oInstance){
 sYear = oInstance.currDate.getFullYear();
 sMonth = oInstance.currDate.getMonth();
 sDay = oInstance.currDate.getDate();
 sTime = CalendarWidget.getSelectedTime(oInstance);
 sDateString = sYear + oInstance.separator + CalendarDblNum(sMonth + 1)
  + oInstance.separator + CalendarDblNum(sDay) + sTime;
 
 // set DateString
 var tagName = oInstance.oTaget.tagName.toLowerCase();
 if (tagName == “input”) {
  oInstance.oTaget.value = sDateString;
 } else if (tagName == “label”
  || tagName == “span”
  || tagName == “div”) {
  if (oInstance.oTaget.attributes[“value”] != null)
   oInstance.oTaget.value = sDateString;
  oInstance.oTaget.innerText = sDateString;
 }
 // Close
 CalendarClose(oInstance);
 return sDateString;
}

// / Get Time
CalendarWidget.getSelectedTime = function (oInstance) {
 _timeDiv = document.all[oInstance.oTIMEDIVID];
 if (_timeDiv != null && _timeDiv.style.display != “none”) {
  _hour = document.all[oInstance.sHOURID].value;
  _minute = document.all[oInstance.sMINUTEID].value;
  _second = document.all[oInstance.sSECONDID].value;
  return ” ” + _hour + “:” + _minute + “:” +  _second;
 } else {
  return “”;
 }
}

// / “Today” button Click
function CalendarTodayClick(oInstance) {
 _hour = document.all[oInstance.sHOURID];
 _minute = document.all[oInstance.sMINUTEID];
 _second = document.all[oInstance.sSECONDID];
 // Set Current Time
 var _tody = new Date();
 _hour.value = CalendarDblNum(_tody.getHours());
 _minute.value = CalendarDblNum(_tody.getMinutes());
 _second.value = CalendarDblNum(_tody.getSeconds());
 oInstance.Refresh(_tody);
}
// / Get date content
CalendarWidget.getDateString = function(oInputSrc, oInstance, oMode){
 if (oInputSrc && oInstance) {
  var CalendarDiv = document.all[oInstance.sDIVID];
  oInstance.oTaget = oInputSrc;
  _timeDiv = document.all[oInstance.oTIMEDIVID];
  _timeDiv.style.display = oMode == “1”   “block” : “none”;
  
  CalendarDiv.style.pixelLeft = CalendargetPos(oInputSrc, “Left”);
  CalendarDiv.style.pixelTop = CalendargetPos(oInputSrc, “Top”)
    + oInputSrc.offsetHeight;
  CalendarDiv.style.display = (CalendarDiv.style.display == “none”)   “”
    : “none”;
 }
}
// / Set Cell Css
function CalendarCellSetCss(sMode, oCell) {
 // sMode
 // 0: OnMouserOut 1: OnMouseOver
 if (sMode) {
  oCell.style.border = “1px solid #5589AA”;
  oCell.style.backgroundColor = “#BCD0DE”;
  oCell.style.zIndex = “10”;
 } else {
  oCell.style.border = “1px solid #FFFFFF”;
  oCell.style.backgroundColor = “#FFFFFF”;
  oCell.style.zIndex = “10”;
 }
}
// / Get MaxDay of current month
function CalendarGetMaxDay(nowYear, nowMonth) {
 var nextMonth, nextYear, currDate, nextDate, theMaxDay
 nextMonth = nowMonth + 1;
 if (nextMonth > 11) {
  nextYear = nowYear + 1;
  nextMonth = 0;
 } else {
  nextYear = nowYear;
 }
 currDate = new Date(nowYear, nowMonth, 1);
 nextDate = new Date(nextYear, nextMonth, 1);
 theMaxDay = (nextDate – currDate) / (24 * 60 * 60 * 1000);
 return theMaxDay;
}
// / Get Absolute Position
function CalendargetPos(el, ePro) {
 var ePos = 0;
 while (el != null) {
  ePos += el[“offset” + ePro];
  el = el.offsetParent;
 }
 return ePos;
}

function CalendarDblNum(num) {
 if (num < 10)
  return “0” + num;
 else
  return num;
}

// /Close
function CalendarClose(oInstance){
 var CalendarDiv = document.all[oInstance.sDIVID];
 CalendarDiv.style.display = “none”;
}

// /Cancel
function CalendarCancel(oInstance) {
 var tagName = oInstance.oTaget.tagName.toLowerCase();
 if (tagName == “input”) {
  oInstance.oTaget.value = “”;
 } else if (tagName == “label”
  || tagName == “span”
  || tagName == “div”) {
  if (oInstance.oTaget.attributes[“value”] != null)
   oInstance.oTaget.value = “”;
  oInstance.oTaget.innerText = “”;
 }
 CalendarClose(oInstance);
}

// /Calendar Instance Method
Calendar_Instance = function($instanceName){
 var $instanceObj = new CalendarWidget($instanceName);
 $instanceObj.weekDaySting = new Array(“日”, “一”, “二”, “三”, “四”, “五”, “六”);
 $instanceObj.monthSting = new Array(“一月”, “二月”, “三月”, “四月”, “五月”, “六月”, “七月”,
   “八月”, “九月”, “十月”, “十一月”, “十二月”);
 $instanceObj.hour = “时”;
 $instanceObj.minute = “分”;
 $instanceObj.second = “秒”;
 $instanceObj.oBtnOKTitle = “确定”;
 $instanceObj.oBtnTodayTitle = “今天”;
 $instanceObj.oBtnCancelTitle = “重置”;
 $instanceObj.Init();
 return $instanceObj;
}
// /Instance Calendar
var oCalendarInstance = Calendar_Instance(“oCalendarInstance”);

 

2. 外部调用代码

CalendarWidget.getDateString(destObj, oCalendarInstance, mode);

 

参数说明

@param destObj   目标对象,即接受日期内容的对象

@param oCalendarInstance // 日期控件实例化对象

@param mode  // 显示模式(“1″, 显示“时:分:秒”;”0”, 不显示)

nginx资源定向cssjs路径问题

今天玩玩项目,学学nginx发现还不错,速度还可以,但是CSS JS确无法使用,原来Iginx配置时需要对不同类型的文件配置规则,真是很郁闷,不过想想也还是很有道理。闲暇之际,把配置贴上来。
#user nobody;
worker_processes 1;

error_log logs/error.log;

pid logs/nginx.pid;

events {
worker_connections 1024;
}

http {
include mime.types;
default_type application/octet-stream;

#log_format main ‘$remote_addr – $remote_user [$time_local] “$request” ‘
# ‘$status $body_bytes_sent “$http_referer” ‘
# ‘”$http_user_agent” “$http_x_forwarded_for”‘;

access_log logs/access.log ;

sendfile on;
#tcp_nopush on;

#keepalive_timeout 0;
keepalive_timeout 65;

#gzip on;

server {
listen 8081 default;
server_name localhost;

charset utf-8;

location / {
index index.php;
if (!-e $request_filename) {
#rewrite ^/myapp/(.*\.(css|js|jpg|gif|png))$ /$1 last;
rewrite ^/(.*)$ /index.php/$1;
break;
}
}

location ~ .+\.php($|/) {
set $script $uri;
set $path_info “/”;
if ($uri ~ “^(.+\.php)(/.+)”) {
set $script $1;
set $path_info $2;
}
include fcgi.conf;
root D:\Apache2.2\htdocs\myblog;
fastcgi_pass 127.0.0.1:9000;
fastcgi_index index.php IF_REWRITE=1;

fastcgi_param PATH_INFO $path_info;
fastcgi_param SCRIPT_FILENAME $document_root/$script;
fastcgi_param SCRIPT_NAME $script;
}

location ~* .(jpg|gif|png|js|css)$ {
root D:\Apache2.2\htdocs\myblog;
if (-f $request_filename) {
expires max;
break;
}
}

}

}