BlogJava-野草-随笔分类-html/js

通用套打web端解决方法

野草 — Sat, 16 Dec 2006 13:29:00 GMT

类似于证件打印的套打模式，在 web 页面解决方法中比较棘手。这段时间忙里偷闲，好好研习了 dhtml 的相关技术写了一个以此抛砖引玉。

实现的功能

1 、可以调整显示数据的位置、字体和大小（certprint.css）；

2 、可以设置背景图片和图片大小；

3 、可以获得数据调整后的位置（方便数据库保存，无需每次都设置）；

4 、可以设置打印属性（仅限 IE ）： header/footer 、横向 / 纵向、打印页边距；

5 、可以跨浏览器使用（除打印设置）： IE 、 FireFox 、 Netscape;

技术点

1、元素拖拽技术 dragdrop.js ；

2、对象序列化 json.js ；

3、控制打印 ScriptX ；

4、 DHTML ；

5、浏览器兼容 w3c ；

使用方法

在你的项目中建立一个类似于 certprint.html 的动态页面，参照 toInit() 方法设置打印属性和需要打印数据，在打印数据调整完毕可以调用 collectDataPos() 获得调整后的数据位置，可以保存到数据库。

源码下载 ：通用套打

野草 2006-12-16 21:29 发表评论

（转）正则表达式的入门知识

野草 — Mon, 05 Jun 2006 01:15:00 GMT

摘自： http://blog.csdn.net/zbzgigi/archive/2006/05/30/763795.aspx

1、“.”为通配符，表示任何一个字符，例如：“a.c”可以匹配“anc”、“abc”、“acc”；
2、“[]”，在[]内可以指定要求匹配的字符，例如：“a[nbc]c”可以匹配“anc”、“abc”、“acc”；但不可以匹配“ancc”,a到z可以写成[a-z],0到9可以写成[0-9];

3、数量限定符号，表示匹配次数（或者叫做长度）的符号：

包括：“*”——0次或者多次
      “+”——1次或者多次
      “?”——0次或者1次
      “{n}”——匹配n次，n为整数
      “{n,m}”——匹配从n到m之间的某个数的次数；n和m都是整数；
      “{n,}”——匹配n到无穷次之间任意次数；
      “{,m}”——匹配0到m之间任意次数；
他们放到匹配格式的后面：
例如：
电话号码：024－84820482，02484820482(假设前面3或者4位，后面7或者8位，并且中间的减号可有可无)

都是符合规定的，那么可以用如下格式来匹配：[0-9]{3,4} \-? [0-9]{7,8}；
注意：“\”为转义字符，因为“-”在正则表达式用有代表一个范围的意义，例如：前面所说的[0-9]，

所以它需要转义字符“\”进行转义才可使用；
4、“^”为否符号，表示不想匹配的符号，例如：[^z][a-z]+可以匹配所有除“z”开头的以外的所有字

符串（长度大于2，因为“+”表示大于等于1的次数，从第二位开始都是小写英文字符）；
如果^放到[]的外边则表示以[]开头的字符串；^[az][a-z]+表示a或者z开头的长度大于等于2的英文字符

串；
5、“|”或运算符，例如：a[n|bc|cb]c可以匹配“abcc”,“anc”,“acbc”；
6、“$”以它前面的字符结尾的；例如：ab+$就可以被“abb”，“ab”匹配；
7、一些简单表示方法：
\d表示[0-9];\D表示[^0-9];\w表示[A-Z0-9];\W表示[^A-Z0-9];\s表示[\t\n\r\f],就是空格字符包括tab

，空格等等;\S表示[^\t\n\r\f]，就是非空格字符;
8、常用的匹配：
匹配中文字符： “[\u4e00-\u9fa5]”；
匹配双字节字符(包括汉字在内)：“[^\x00-\xff]”；
匹配空行的正则表达式：“\n[\s| ]*\r”；
匹配HTML标记的正则表达式：“/<(.*)>.*<\/\1>|<(.*) \/>/”；
匹配首尾空格的正则表达式：“(^\s*)|(\s*$)”；
匹配非负整数（正整数 + 0）：“^\d+$”；　　
匹配正整数：“^[0-9]*[1-9][0-9]*$”；
匹配非正整数（负整数 + 0）：“^((-\d+)|(0+))$”；
匹配负整数：“^-[0-9]*[1-9][0-9]*$”；
匹配整数：“^-?\d+$”；
匹配非负浮点数（正浮点数 + 0）：“^\d+(\.\d+)?$”
匹配正浮点数：“^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*

))$”；
^((-\d+(\.\d+)?)|(0+(\.0+)?))$　　//匹配非正浮点数（负浮点数 + 0）
^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$　　//匹配

负浮点数
匹配浮点数：“^(-?\d+)(\.\d+)?$”；
匹配由数字、26个英文字母或者下划线组成的字符串：“^\w+$”；
匹配email地址：“^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$”；
匹配url：“^[a-zA-z]+://匹配(\w+(-\w+)*)(\.(\w+(-\w+)*))*(\?\S*)?$”

下面是正则表达式中的一些常用模式。

/pattern/ 结果
. 匹配除换行符以外的所有字符
x? 匹配 0 次或一次 x 字符串
x* 匹配 0 次或多次 x 字符串，但匹配可能的最少次数
x+ 匹配 1 次或多次 x 字符串，但匹配可能的最少次数
.* 匹配 0 次或一次的任何字符
.+ 匹配 1 次或多次的任何字符
{m} 匹配刚好是 m 个的指定字符串
{m,n} 匹配在 m个以上 n个以下的指定字符串
{m,} 匹配 m个以上的指定字符串
[] 匹配符合 [] 内的字符
[^] 匹配不符合 [] 内的字符
[0-9] 匹配所有数字字符
[a-z] 匹配所有小写字母字符
[^0-9] 匹配所有非数字字符
[^a-z] 匹配所有非小写字母字符
^ 匹配字符开头的字符
$ 匹配字符结尾的字符
\d 匹配一个数字的字符，和 [0-9] 语法一样
\d+ 匹配多个数字字符串，和 [0-9]+ 语法一样
\D 非数字，其他同 \d
\D+ 非数字，其他同 \d+
\w 英文字母或数字的字符串，和 [a-zA-Z0-9] 语法一样
\w+ 和 [a-zA-Z0-9]+ 语法一样
\W 非英文字母或数字的字符串，和 [^a-zA-Z0-9] 语法一样
\W+ 和 [^a-zA-Z0-9]+ 语法一样
\s 空格，和 [\n\t\r\f] 语法一样
\s+ 和 [\n\t\r\f]+ 一样
\S 非空格，和 [^\n\t\r\f] 语法一样
\S+ 和 [^\n\t\r\f]+ 语法一样
\b 匹配以英文字母,数字为边界的字符串
\B 匹配不以英文字母,数值为边界的字符串
a|b|c 匹配符合a字符或是b字符或是c字符的字符串
abc 匹配含有 abc 的字符串
(pattern) () 这个符号会记住所找寻到的字符串，是一个很实用的语法。第一个 () 内所找到的字符串
变成 $1 这个变量或是 \1 变量，第二个 () 内所找到的字符串变成 $2 这个变量或是 \2 变量，以此
类推下去。
/pattern/i i 这个参数表示忽略英文大小写，也就是在匹配字符串的时候，不考虑英文的大小写问题。
\ 如果要在 pattern 模式中找寻一个特殊字符，如 "*"，则要在这个字符前加上 \ 符号，这样才会让特殊
字符失效
3、正则表达式的八大原则
　　如果在 Unix 中曾经使用过 sed、awk、grep 这些命令的话，相信对于正则表达式(Regular Expression)
不会感到陌生。下面给大家介绍几条正则表达式使用过程中的 8 大原则。

正则表达式在对付数据的战斗中可形成庞大的联盟——这常常是一场战争。我们要记住下面八条原则：

· 原则1：正则表达式有三种不同形式(匹配(m/ /)，替换(s/ / /eg)和转换(tr/ / /))。

· 原则2：正则表达式仅对标量进行匹配( $scalar =~ m/a/; 可以工作; @array =~ m/a/ 将把@array作为标量
对待，因此可能不会成功)。

· 原则3：正则表达式匹配一个给定模式的最早的可能匹配。缺省时，仅匹配或替换正则表达式
一次( $a = 'string string2'; $a =~ s/string/ /; 导致 $a = 'string 2')。

· 原则4：正则表达式能够处理双引号所能处理的任意和全部字符( $a =~ m/$varb/ 在匹配前把varb扩展为
变量；如果 $varb = 'a' $a = 'as'，$a =~ s/$varb/ /; 等价于 $a =~ s/a/ /; ，执行结果使 $a = " s" )。

· 原则5：正则表达式在求值过程中产生两种情况：结果状态和反向引用： $a=~ m/pattern/ 表示 $a 中是否有
子串 pattern 出现，$a =~ s/(word1)(word2)/$2$1/ 则“调换”这两个单词。

· 原则6：正则表达式的核心能力在于通配符和多重匹配运算符以及它们如何操作。$a =~ m/\w+/ 匹配一个或多个
单词字符；$a =~ m/\d/" 匹配零个或多个数字。

· 原则7：如果欲匹配不止一个字符集合，Perl使用 "|" 来增加灵活性。如果输入 m/(cat|dog)/ 则相当于“匹配
字符串 cat 或者 dog。

· 原则8：Perl用 (?..) 语法给正则表达式提供扩展功能。

野草 2006-06-05 09:15 发表评论

简单灵活的权限树

野草 — Sun, 14 May 2006 01:11:00 GMT

摘要: 最近写了一棵权限树，因为在写之前到网上 google 了一下，好像没有比较完整且简单的做法，故将结果与各位共享一下。我是将 dree 作了一些修改： 1、 ... 阅读全文

野草 2006-05-14 09:11 发表评论

html的“国际化”

野草 — Wed, 08 Mar 2006 13:24:00 GMT

在web应用开发起初，用户很希望看到将来系统的实际模型，一般我们都采用静态的html来建立demo，让用户有一个实际的感观。而我们的客户是多样化的，有可能有老外，如何让我们的demo显示不同的文字，而不需要修改每一张页面。有兴趣的朋友，将下列代码（1张静态页面、3个js文件）拷下来一看就知道了。

1、multi_lang.htm

html国际化

姓名：
年龄：
性别：

2、init.js

function initbody(){
var controller= new LanguageController();

name1.innerHTML=controller.language.titles["Name"];
age1.innerHTML=controller.language.titles["Age"];
gender1.innerHTML=controller.language.titles["Gender"];
}

3、en.js

function LanguageController() {
this.language = {

  lang: "zh-cn",

  buttons: {
   "ok":           "ok",
   "cancel":       "cancel"
  },

  titles: {
   "Name":         "name",
   "Age":          "age",
   "Gender":       "gender"
  }
};
}

4、zh-cn.js

function LanguageController() {
this.language = {

  lang: "zh-cn",

  buttons: {
   "ok":           "确定",
   "cancel":       "取消"
  },

  titles: {
   "Name":         "姓名",
   "Age":          "年龄",
   "Gender":       "性别"
  }
};
}

野草 2006-03-08 21:24 发表评论

使用js构建的国家树

野草 — Wed, 08 Mar 2006 13:23:00 GMT

摘要: 背景在jsp页面录入时，有这么一个字段“籍贯”，该字段可以用编码表示，以便日后作统计分析操作，但这需对全国地区进行编码，共计4千条左右。为了方便用户选择，原本我使用的是struts + dtree实现的国家树，这样的问题是：需和后台数据库交互，页面需要刷新，实时性较差。考虑全国地区编码相对比较稳定，所以我打算完全使用javascript实现。要求 1、根据当前用户所在地区编... 阅读全文

野草 2006-03-08 21:23 发表评论

解决htmlarea3.0编辑文本获得不了的问题

野草 — Wed, 08 Mar 2006 13:21:00 GMT

问题

在使用htmlarea3.0时，编写的文本后台获得不了。

分析

阅读htmlarea.js，发现

window.onunload = function() {

editor._textArea.value = editor.getHTML();

};

可见htmlarea编辑的文本是在window.onunload事件中填充到你定义的textarea中的。但此时有可能form post出去了，而window.onunload事件还没有执行完毕。

解决

注释以上脚本，在提交按钮事件中加入

//接受htmlarea的内容

document.all.textareaName.value = editor.getHTML();

野草 2006-03-08 21:21 发表评论

可以左右滚动的菜单

野草 — Wed, 08 Mar 2006 13:19:00 GMT

参照网上的资源作了简化修改，具体代码不做详细解释，大家一看就明白：

test1

test2

野草 2006-03-08 21:19 发表评论