BlogJava-liangcmwn-文章分类-javascript

ckeditor的详细配置

liangcmwn — Thu, 13 Oct 2011 01:54:00 GMT

CKEditor 3 JavaScript API Documentation :

http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.htm

一、使用方法：

1、在页面中引入ckeditor核心文件ckeditor.js

2、在使用编辑器的地方插入HTML控件</span> </p> <p><span style="font-size: small;"><textarea id="TextArea1" cols="20" rows="2" class="ckeditor">

如果是ASP.NET环境，也可用服务器端控件

注意在控件中加上 class="ckeditor" 。

3、将相应的控件替换成编辑器代码

4、配置编辑器

ckeditor的配置都集中在 ckeditor/config.js 文件中，下面是一些常用的配置参数：

// 界面语言，默认为 'en'

config.language = 'zh-cn';

// 设置宽高

config.width = 400;

config.height = 400;

// 编辑器样式，有三种：'kama'（默认）、'office2003'、'v2'

config.skin = 'v2';

// 背景颜色

config.uiColor = '#FFF';

// 工具栏（基础'Basic'、全能'Full'、自定义）plugins/toolbar/plugin.js

config.toolbar = 'Basic';

config.toolbar = 'Full';

这将配合：
config.toolbar_Full = [
['Source','-','Save','NewPage','Preview','-','Templates'],
['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'],
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],
'/',
['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
['Link','Unlink','Anchor'],
['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
'/',
['Styles','Format','Font','FontSize'],
['TextColor','BGColor']
];

//工具栏是否可以被收缩
config.toolbarCanCollapse = true;

//工具栏的位置
config.toolbarLocation = 'top';//可选：bottom

//工具栏默认是否展开
config.toolbarStartupExpanded = true;

// 取消 “拖拽以改变尺寸”功能 plugins/resize/plugin.js
config.resize_enabled = false;

//改变大小的最大高度

config.resize_maxHeight = 3000;

//改变大小的最大宽度
config.resize_maxWidth = 3000;

//改变大小的最小高度
config.resize_minHeight = 250;

//改变大小的最小宽度
config.resize_minWidth = 750;
// 当提交包含有此编辑器的表单时，是否自动更新元素内的数据
config.autoUpdateElement = true;

// 设置是使用绝对目录还是相对目录，为空为相对目录
config.baseHref = ''

// 编辑器的z-index值
config.baseFloatZIndex = 10000;

//设置快捷键
config.keystrokes = [
[ CKEDITOR.ALT + 121 /*F10*/, 'toolbarFocus' ], //获取焦点
[ CKEDITOR.ALT + 122 /*F11*/, 'elementsPathFocus' ], //元素焦点

[ CKEDITOR.SHIFT + 121 /*F10*/, 'contextMenu' ], //文本菜单

[ CKEDITOR.CTRL + 90 /*Z*/, 'undo' ], //撤销
[ CKEDITOR.CTRL + 89 /*Y*/, 'redo' ], //重做
[ CKEDITOR.CTRL + CKEDITOR.SHIFT + 90 /*Z*/, 'redo' ], //

[ CKEDITOR.CTRL + 76 /*L*/, 'link' ], //链接

[ CKEDITOR.CTRL + 66 /*B*/, 'bold' ], //粗体
[ CKEDITOR.CTRL + 73 /*I*/, 'italic' ], //斜体
[ CKEDITOR.CTRL + 85 /*U*/, 'underline' ], //下划线

[ CKEDITOR.ALT + 109 /*-*/, 'toolbarCollapse' ]
]

//设置快捷键可能与浏览器快捷键冲突 plugins/keystrokes/plugin.js.
config.blockedKeystrokes = [
CKEDITOR.CTRL + 66 /*B*/,
CKEDITOR.CTRL + 73 /*I*/,
CKEDITOR.CTRL + 85 /*U*/
]

//设置编辑内元素的背景色的取值 plugins/colorbutton/plugin.js.
config.colorButton_backStyle = {
element : 'span',
styles : { 'background-color' : '#(color)' }
}

//设置前景色的取值 plugins/colorbutton/plugin.js
config.colorButton_colors = '000,800000,8B4513,2F4F4F,008080,000080,4B0082,696969,B22222,A52A2A,DAA520,

006400,40E0D0,0000CD,800080,808080,F00,FF8C00,FFD700,008000,0FF,00F,EE82EE,

A9A9A9,FFA07A,FFA500,FFFF00,00FF00,AFEEEE,ADD8E6,DDA0DD,D3D3D3,FFF0F5,

FAEBD7,FFFFE0,F0FFF0,F0FFFF,F0F8FF,E6E6FA,FFF’

//是否在选择颜色时显示“其它颜色”选项 plugins/colorbutton/plugin.js
config.colorButton_enableMore = false

//区块的前景色默认值设置 plugins/colorbutton/plugin.js
config.colorButton_foreStyle = {
element : 'span',
styles : { 'color' : '#(color)' }
};

//所需要添加的CSS文件在此添加可使用相对路径和网站的绝对路径
config.contentsCss = './contents.css';

//文字方向
config.contentsLangDirection = 'rtl'; //从左到右

//CKeditor的配置文件若不想配置留空即可
CKEDITOR.replace( 'myfiled', { customConfig : './config.js' } );

//界面编辑框的背景色 plugins/dialog/plugin.js
config.dialog_backgroundCoverColor = '#fffefd'; //可设置参考
config.dialog_backgroundCoverColor = 'white' //默认

//背景的不透明度数值应该在：0.0～1.0 之间 plugins/dialog/plugin.js
config.dialog_backgroundCoverOpacity = 0.5

//移动或者改变元素时边框的吸附距离单位：像素 plugins/dialog/plugin.js
config.dialog_magnetDistance = 20;

//是否拒绝本地拼写检查和提示默认为拒绝目前仅firefox和safari支持 plugins/wysiwygarea/plugin.js.
config.disableNativeSpellChecker = true

//进行表格编辑功能如：添加行或列目前仅firefox支持 plugins/wysiwygarea/plugin.js
config.disableNativeTableHandles = true; //默认为不开启

//是否开启图片和表格的改变大小的功能 config.disableObjectResizing = true;
config.disableObjectResizing = false //默认为开启

//设置HTML文档类型
config.docType = 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd%22' ;

//是否对编辑区域进行渲染 plugins/editingblock/plugin.js
config.editingBlock = true;

//编辑器中回车产生的标签
config.enterMode = CKEDITOR.ENTER_P; //可选：CKEDITOR.ENTER_BR或CKEDITOR.ENTER_DIV

//是否使用HTML实体进行输出 plugins/entities/plugin.js
config.entities = true;

//定义更多的实体 plugins/entities/plugin.js
config.entities_additional = '#39'; //其中#代替了&

//是否转换一些难以显示的字符为相应的HTML字符 plugins/entities/plugin.js
config.entities_greek = true;

//是否转换一些拉丁字符为HTML plugins/entities/plugin.js
config.entities_latin = true;

//是否转换一些特殊字符为ASCII字符如"This is Chinese: 汉语."转换为"This is Chinese: 汉语." plugins/entities/plugin.js
config.entities_processNumerical = false;

//添加新组件
config.extraPlugins = 'myplugin'; //非默认仅示例

//使用搜索时的高亮色 plugins/find/plugin.js
config.find_highlight = {
element : 'span',
styles : { 'background-color' : '#ff0', 'color' : '#00f' }
};

//默认的字体名 plugins/font/plugin.js
config.font_defaultLabel = 'Arial';

//字体编辑时的字符集可以添加常用的中文字符：宋体、楷体、黑体等 plugins/font/plugin.js
config.font_names = 'Arial;Times New Roman;Verdana';

    //文字的默认式样 plugins/font/plugin.js
config.font_style = {
element   : 'span',
styles   : { 'font-family' : '#(family)' },
overrides : [ { element : 'font', attributes : { 'face' : null } } ]
};

//字体默认大小 plugins/font/plugin.js
config.fontSize_defaultLabel = '12px';

//字体编辑时可选的字体大小 plugins/font/plugin.js
config.fontSize_sizes ='8/8px;9/9px;10/10px;11/11px;12/12px;14/14px;16/16px;18/18px;20/20px;22/22px;24/24px;26/26px;28/28px;36/36px;48/48px;72/72px'

    //设置字体大小时使用的式样 plugins/font/plugin.js
config.fontSize_style = {
element   : 'span',
styles   : { 'font-size' : '#(size)' },
overrides : [ { element : 'font', attributes : { 'size' : null } } ]
};

//是否强制复制来的内容去除格式 plugins/pastetext/plugin.js
config.forcePasteAsPlainText =false //不去除

//是否强制用“&”来代替“&”plugins/htmldataprocessor/plugin.js
config.forceSimpleAmpersand = false;

//对address标签进行格式化 plugins/format/plugin.js
config.format_address = { element : 'address', attributes : { class : 'styledAddress' } };

//对DIV标签自动进行格式化 plugins/format/plugin.js
config.format_div = { element : 'div', attributes : { class : 'normalDiv' } };

//对H1标签自动进行格式化 plugins/format/plugin.js
config.format_h1 = { element : 'h1', attributes : { class : 'contentTitle1' } };

//对H2标签自动进行格式化 plugins/format/plugin.js
config.format_h2 = { element : 'h2', attributes : { class : 'contentTitle2' } };

//对H3标签自动进行格式化 plugins/format/plugin.js
config.format_h1 = { element : 'h3', attributes : { class : 'contentTitle3' } };

//对H4标签自动进行格式化 plugins/format/plugin.js
config.format_h1 = { element : 'h4', attributes : { class : 'contentTitle4' } };

//对H5标签自动进行格式化 plugins/format/plugin.js
config.format_h1 = { element : 'h5', attributes : { class : 'contentTitle5' } };

//对H6标签自动进行格式化 plugins/format/plugin.js
config.format_h1 = { element : 'h6', attributes : { class : 'contentTitle6' } };

//对P标签自动进行格式化 plugins/format/plugin.js
config.format_p = { element : 'p', attributes : { class : 'normalPara' } };

//对PRE标签自动进行格式化 plugins/format/plugin.js
config.format_pre = { element : 'pre', attributes : { class : 'co de' } };

//用分号分隔的标签名字在工具栏上显示 plugins/format/plugin.js
config.format_tags = 'p;h1;h2;h3;h4;h5;h6;pre;address;div';

//是否使用完整的html编辑模式如使用，其源码将包含：等标签
config.fullPage = false;

//是否忽略段落中的空字符若不忽略则字符将以“”表示 plugins/wysiwygarea/plugin.js
config.ignoreEmptyParagraph = true;

//在清除图片属性框中的链接属性时是否同时清除两边的标签 plugins/image/plugin.js
config.image_removeLinkByEmptyURL = true;

//一组用逗号分隔的标签名称，显示在左下角的层次嵌套中 plugins/menu/plugin.js.
config.menu_groups ='clipboard,form,tablecell,tablecellproperties,tablerow,tablecolumn,table,anchor,link,image,flash,checkbox,radio,textfield,hiddenfield,imagebutton,button,select,textarea';

//显示子菜单时的延迟，单位：ms plugins/menu/plugin.js
config.menu_subMenuDelay = 400;

//当执行“新建”命令时，编辑器中的内容 plugins/newpage/plugin.js
config.newpage_html = '';

//当从word里复制文字进来时，是否进行文字的格式化去除 plugins/pastefromword/plugin.js
config.pasteFromWordIgnoreFontFace = true; //默认为忽略格式

//是否使用

等标签修饰或者代替从word文档中粘贴过来的内容 plugins/pastefromword/plugin.js
config.pasteFromWordKeepsStructure = false;

    //从word中粘贴内容时是否移除格式 plugins/pastefromword/plugin.js
config.pasteFromWordRemoveStyle = false;

    //对应后台语言的类型来对输出的HTML内容进行格式化，默认为空
config.protectedSource.push( /<\?[\s\S]?\?>/g );   // PHP Co de
config.protectedSource.push( //g );   // ASP Co de
config.protectedSource.push( /(]+>[\s|\S]?<\/asp:[^\>]+>)|(]+\/>)/gi );   // ASP.Net Co de

    //当输入：shift+Enter时插入的标签
config.shiftEnterMode = CKEDITOR.ENTER_P; //可选：CKEDITOR.ENTER_BR或CKEDITOR.ENTER_DIV

    //可选的表情替代字符 plugins/smiley/plugin.js.
config.smiley_descriptions = [
':)', ':(', ';)', ':D', ':/', ':P',
'', '', '', '', '', '',
'', ';(', '', '', '', '',
'', ':kiss', '' ];

    //对应的表情图片 plugins/smiley/plugin.js
config.smiley_images = [
'regular_smile.gif','sad_smile.gif','wink_smile.gif','teeth_smile.gif','confused_smile.gif','tounge_smile.gif',
'embaressed_smile.gif','omg_smile.gif','whatchutalkingabout_smile.gif','angry_smile.gif','angel_smile.gif','shades_smile.gif',
'devil_smile.gif','cry_smile.gif','lightbulb.gif','thumbs_down.gif','thumbs_up.gif','heart.gif',
'broken_heart.gif','kiss.gif','envelope.gif'];

    //表情的地址 plugins/smiley/plugin.js
config.smiley_path = 'plugins/smiley/images/';

    //页面载入时，编辑框是否立即获得焦点 plugins/editingblock/plugin.js plugins/editingblock/plugin.js.
config.startupFocus = false;

    //载入时，以何种方式编辑源码和所见即所得 "source"和"wysiwyg" plugins/editingblock/plugin.js.
config.startupMode ='wysiwyg';

    //载入时，是否显示框体的边框 plugins/showblocks/plugin.js
config.startupOutlineBlocks = false;

    //是否载入样式文件 plugins/stylescombo/plugin.js.
config.stylesCombo_stylesSet = 'default';
//以下为可选
config.stylesCombo_stylesSet = 'mystyles';
config.stylesCombo_stylesSet = 'mystyles:/editorstyles/styles.js';
config.stylesCombo_stylesSet = 'mystyles:http://www.example.com/editorstyles/styles.js';

    //起始的索引值
config.tabIndex = 0;

    //当用户键入TAB时，编辑器走过的空格数，( ) 当值为0时，焦点将移出编辑框 plugins/tab/plugin.js
config.tabSpaces = 0;

    //默认使用的模板 plugins/templates/plugin.js.
config.templates = 'default';

    //用逗号分隔的模板文件plugins/templates/plugin.js.
config.templates_files = [ 'plugins/templates/templates/default.js' ]

    //当使用模板时，“编辑内容将被替换”框是否选中 plugins/templates/plugin.js
config.templates_replaceContent = true;

    //主题
config.theme = 'default';

    //撤销的记录步数 plugins/undo/plugin.js
config.undoStackSize =20;

// 在 CKEditor 中集成 CKFinder，注意 ckfinder 的路径选择要正确。
//CKFinder.SetupCKEditor(null, '/ckfinder/');

二、一些使用技巧

1、在页面中即时设置编辑器

三、精简ckeditor

    在部署到Web服务器上时，下列文件夹和文件都可以删除：

    /_samples ：示例文件夹；

    /_source ：未压缩源程序；

    /lang文件夹下除 zh-cn.js、en.js 以外的文件（也可以根据需要保留其他语言文件）；

    根目录下的 changes.html(更新列表)，install.html(安装指向)，license.html(使用许可)；

from:http://robin88129.iteye.com/blog/1123222

liangcmwn 2011-10-13 09:54 发表评论

jquery获得select option的值和对select option的操作

liangcmwn — Tue, 06 Sep 2011 13:05:00 GMT

获取Select ：

获取select 选中的 text :

$("#ddlRegType").find("option:selected").text();

获取select选中的 value:

$("#ddlRegType ").val();

获取select选中的索引:

$("#ddlRegType ").get(0).selectedIndex;

设置select:

设置select 选中的索引：

$("#ddlRegType ").get(0).selectedIndex=index;//index为索引值

设置select 选中的value：

$("#ddlRegType ").attr("value","Normal“);

$("#ddlRegType ").val("Normal");

$("#ddlRegType ").get(0).value = value;

设置select 选中的text:

var count=$("#ddlRegType option").length;

for(var i=0;i     {           if($("#ddlRegType ").get(0).options[i].text == text)
        {
            $("#ddlRegType ").get(0).options[i].selected = true;

            break;
        }
    }

$("#select_id option[text='jQuery']").attr("selected", true);

设置select option项:

$("#select_id").append(""); //添加一项option

$("#select_id").prepend(""); //在前面插入一项option

$("#select_id option:last").remove(); //删除索引值最大的Option

$("#select_id option[index='0']").remove();//删除索引值为0的Option

$("#select_id option[value='3']").remove(); //删除值为3的Option

$("#select_id option[text='4']").remove(); //删除TEXT值为4的Option

清空 Select:

$("#ddlRegType ").empty();

jquery获得值：

.val()

.text()

设置值

.val('在这里设置值')

$("document").ready(function(){
$("#btn1").click(function(){
$("[name='checkbox']").attr("checked",'true');//全选
})
$("#btn2").click(function(){
$("[name='checkbox']").removeAttr("checked");//取消全选
})
$("#btn3").clic

liangcmwn 2011-09-06 21:05 发表评论

javascript函数库:校验|字符串|整型|最小值|最大值|非负数|浮点型|日期型

liangcmwn — Mon, 18 Jul 2011 07:27:00 GMT

————– 函数检索 ————–
trim函数: trim() lTrim() rTrim()
校验字符串是否为空: checkIsNotEmpty(str)
校验字符串是否为整型: checkIsInteger(str)
校验整型最小值: checkIntegerMinValue(str,val)
校验整型最大值: checkIntegerMaxValue(str,val)
校验整型是否为非负数: isNotNegativeInteger(str)
校验字符串是否为浮点型: checkIsDouble(str)
校验浮点型最小值: checkDoubleMinValue(str,val)
校验浮点型最大值: checkDoubleMaxValue(str,val)
校验浮点型是否为非负数: isNotNegativeDouble(str)
校验字符串是否为日期型: checkIsValidDate(str)
校验两个日期的先后: checkDateEarlier(strStart,strEnd)
校验字符串是否为email型: checkEmail(str)

校验字符串是否为中文: checkIsChinese(str)
计算字符串的长度，一个汉字两个字符: realLength()
校验字符串是否符合自定义正则表达式: checkMask(str,pat)
得到文件的后缀名: getFilePostfix(oFile)
————– 函数检索 ————–
*/

/**
* added by LxcJie 2004.6.25
* 去除多余空格函数
* trim:去除两边空格 lTrim:去除左空格 rTrim: 去除右空格
* 用法：
* var str = ” hello “;
* str = str.trim();
*/
String.prototype.trim = function()
{
return this.replace(/(^[\\s]*)|([\\s]*$)/g, “”);
}
String.prototype.lTrim = function()
{
return this.replace(/(^[\\s]*)/g, “”);
}
String.prototype.rTrim = function()
{
return this.replace(/([\\s]*$)/g, “”);
}
/********************************** Empty **************************************/
/**
*校验字符串是否为空
*返回值：
*如果不为空，定义校验通过，返回true
*如果为空，校验不通过，返回false 参考提示信息：输入域不能为空！
*/
function checkIsNotEmpty(str)
{
if(str.trim() == “”)
return false;
else
return true;
}//~~~
/*——————————— Empty ————————————–*/
/********************************** Integer *************************************/
/**
*校验字符串是否为整型
*返回值：
*如果为空，定义校验通过，返回true
*如果字串全部为数字，校验通过，返回true
*如果校验不通过，返回false 参考提示信息：输入域必须为数字！
*/
function checkIsInteger(str)
{
//如果为空，则通过校验
if(str == “”)
return true;
if(/^(\\-?)(\\d+)$/.test(str))
return true;
else
return false;
}//~~~
/**
*校验整型最小值
*str：要校验的串。 val：比较的值
*
*返回值：
*如果为空，定义校验通过，返回true
*如果满足条件，大于等于给定值，校验通过，返回true
*如果小于给定值，返回false 参考提示信息：输入域不能小于给定值！
*/
function checkIntegerMinValue(str,val)
{
//如果为空，则通过校验
if(str == “”)
return true;
if(typeof(val) != “string”)
val = val + “”;
if(checkIsInteger(str) == true)
{
if(parseInt(str,10)>=parseInt(val,10))
return true;
else
return false;
}
else
return false;
}//~~~
/**
*校验整型最大值
*str：要校验的串。 val：比较的值
*
*返回值：
*如果为空，定义校验通过，返回true
*如果满足条件，小于等于给定值，校验通过，返回true
*如果大于给定值，返回false 参考提示信息：输入值不能大于给定值！
*/
function checkIntegerMaxValue(str,val)
{
//如果为空，则通过校验
if(str == “”)
return true;
if(typeof(val) != “string”)
val = val + “”;
if(checkIsInteger(str) == true)
{
if(parseInt(str,10)<=parseInt(val,10))
return true;
else
return false;
}
else
return false;
}//~~~
/**
*校验整型是否为非负数
*str：要校验的串。
*
*返回值：
*如果为空，定义校验通过，返回true
*如果非负数，返回true
*如果是负数，返回false 参考提示信息：输入值不能是负数！
*/
function isNotNegativeInteger(str)
{
//如果为空，则通过校验
if(str == “”)
return true;
if(checkIsInteger(str) == true)
{
if(parseInt(str,10) < 0)
return false;
else
return true;
}
else
return false;
}//~~~
/*——————————— Integer ————————————–*/
/********************************** Double ****************************************/
/**
*校验字符串是否为浮点型
*返回值：
*如果为空，定义校验通过，返回true
*如果字串为浮点型，校验通过，返回true
*如果校验不通过，返回false 参考提示信息：输入域不是合法的浮点数！
*/
function checkIsDouble(str)
{
//如果为空，则通过校验
if(str == “”)
return true;
//如果是整数，则校验整数的有效性
if(str.indexOf(”.”) == -1)
{
if(checkIsInteger(str) == true)
return true;
else
return false;
}
else
{
if(/^(\\-?)(\\d+)(.{1})(\\d+)$/g.test(str))
return true;
else
return false;
}
}//~~~
/**
*校验浮点型最小值
*str：要校验的串。 val：比较的值
*
*返回值：
*如果为空，定义校验通过，返回true
*如果满足条件，大于等于给定值，校验通过，返回true
*如果小于给定值，返回false 参考提示信息：输入域不能小于给定值！
*/
function checkDoubleMinValue(str,val)
{
//如果为空，则通过校验
if(str == “”)
return true;
if(typeof(val) != “string”)
val = val + “”;
if(checkIsDouble(str) == true)
{
if(parseFloat(str)>=parseFloat(val))
return true;
else
return false;
}
else
return false;
}//~~~
/**
*校验浮点型最大值
*str：要校验的串。 val：比较的值
*
*返回值：
*如果为空，定义校验通过，返回true
*如果满足条件，小于等于给定值，校验通过，返回true
*如果大于给定值，返回false 参考提示信息：输入值不能大于给定值！
*/
function checkDoubleMaxValue(str,val)
{
//如果为空，则通过校验
if(str == “”)
return true;
if(typeof(val) != “string”)
val = val + “”;
if(checkIsDouble(str) == true)
{
if(parseFloat(str)<=parseFloat(val))
return true;
else
return false;
}
else
return false;
}//~~~
/**
*校验浮点型是否为非负数
*str：要校验的串。
*
*返回值：
*如果为空，定义校验通过，返回true
*如果非负数，返回true
*如果是负数，返回false 参考提示信息：输入值不能是负数！
*/
function isNotNegativeDouble(str)
{
//如果为空，则通过校验
if(str == “”)
return true;
if(checkIsDouble(str) == true)
{
if(parseFloat(str) < 0)
return false;
else
return true;
}
else
return false;
}//~~~
/*——————————— Double —————————————*/
/********************************** date ******************************************/
/**
*校验字符串是否为日期型
*返回值：
*如果为空，定义校验通过，返回true
*如果字串为日期型，校验通过，返回true
*如果日期不合法，返回false 参考提示信息：输入域的时间不合法！（yyyy-MM-dd）
*/
function checkIsValidDate(str)
{
//如果为空，则通过校验
if(str == “”)
return true;
var pattern = /^((\\d{4})|(\\d{2}))-(\\d{1,2})-(\\d{1,2})$/g;
if(!pattern.test(str))
return false;
var arrDate = str.split(”-”);
if(parseInt(arrDate[0],10) < 100)
arrDate[0] = 2000 + parseInt(arrDate[0],10) + “”;
var date = new Date(arrDate[0],(parseInt(arrDate[1],10) -1)+””,arrDate[2]);
if(date.getYear() == arrDate[0]
&& date.getMonth() == (parseInt(arrDate[1],10) -1)+””
&& date.getDate() == arrDate[2])
return true;
else
return false;
}//~~~
/**
*校验两个日期的先后
*返回值：
*如果其中有一个日期为空，校验通过, 返回true
*如果起始日期早于等于终止日期，校验通过，返回true
*如果起始日期晚于终止日期，返回false 参考提示信息：起始日期不能晚于结束日期。
*/
function checkDateEarlier(strStart,strEnd)
{
if(checkIsValidDate(strStart) == false || checkIsValidDate(strEnd) == false)
return false;
//如果有一个输入为空，则通过检验
if (( strStart == “” ) || ( strEnd == “” ))
return true;
var arr1 = strStart.split(”-”);
var arr2 = strEnd.split(”-”);
var date1 = new Date(arr1[0],parseInt(arr1[1].replace(/^0/,””),10) - 1,arr1[2]);
var date2 = new Date(arr2[0],parseInt(arr2[1].replace(/^0/,””),10) - 1,arr2[2]);
if(arr1[1].length == 1)
arr1[1] = “0″ + arr1[1];
if(arr1[2].length == 1)
arr1[2] = “0″ + arr1[2];
if(arr2[1].length == 1)
arr2[1] = “0″ + arr2[1];
if(arr2[2].length == 1)
arr2[2]=”0″ + arr2[2];
var d1 = arr1[0] + arr1[1] + arr1[2];
var d2 = arr2[0] + arr2[1] + arr2[2];
if(parseInt(d1,10) > parseInt(d2,10))
return false;
else
return true;
}//~~~
/*——————————— date —————————————–*/
/********************************** email *****************************************/
/**
*校验字符串是否为email型
*返回值：
*如果为空，定义校验通过，返回true
*如果字串为email型，校验通过，返回true
*如果email不合法，返回false 参考提示信息：Email的格式不正確！
*/
function checkEmail(str)
{
//如果为空，则通过校验
if(str == “”)
return true;
if (str.charAt(0) == “.” || str.charAt(0) == “@” || str.indexOf(\’@\’, 0) == -1
|| str.indexOf(\’.\’, 0) == -1 || str.lastIndexOf(”@”) == str.length-1 || str.lastIndexOf(”.”) == str.length-1)
return false;
else
return true;
}//~~~
/*——————————— email —————————————-*/
/********************************** chinese ***************************************/
/**
*校验字符串是否为中文
*返回值：
*如果为空，定义校验通过，返回true
*如果字串为中文，校验通过，返回true
*如果字串为非中文，返回false 参考提示信息：必须为中文！
*/
function checkIsChinese(str)
{
//如果值为空，通过校验
if (str == “”)
return true;
var pattern = /^([\\u4E00-\\u9FA5]|[\\uFE30-\\uFFA0])*$/gi;
if (pattern.test(str))
return true;
else
return false;
}//~~~
/**
* 计算字符串的长度，一个汉字两个字符
*/
String.prototype.realLength = function()
{
return this.replace(/[^\\x00-\\xff]/g,”**”).length;
}
/*——————————— chinese ————————————–*/
/********************************** mask ***************************************/
/**
*校验字符串是否符合自定义正则表达式
*str 要校验的字串 pat 自定义的正则表达式
*返回值：
*如果为空，定义校验通过，返回true
*如果字串符合，校验通过，返回true
*如果字串不符合，返回false 参考提示信息：必须满足***模式
*/
function checkMask(str,pat)
{
//如果值为空，通过校验
if (str == “”)
return true;
var pattern = new RegExp(pat,”gi”)
if (pattern.test(str))
return true;
else
return false;
}//~~~
/*——————————— mask ————————————–*/
/********************************** file ***************************************/
/**
* added by LxcJie 2004.6.25
* 得到文件的后缀名
* oFile为file控件对象
*/
function getFilePostfix(oFile)
{
if(oFile == null)
return null;
var pattern = /(.*)\\.(.*)$/gi;
if(typeof(oFile) == “object”)
{
if(oFile.value == null || oFile.value == “”)
return null;
var arr = pattern.exec(oFile.value);
return RegExp.$2;
}
else if(typeof(oFile) == “string”)
{
var arr = pattern.exec(oFile);
return RegExp.$2;
}
else
return null;
}//~~~
/*——————————— file ————————————–*/

liangcmwn 2011-07-18 15:27 发表评论

扩展精简版prototype lightbox 及市面上现有 lightbox 作品整理

liangcmwn — Mon, 11 Jul 2011 07:33:00 GMT

首先大概明确下什么是lightbox效果：

A script (JavaScript) that allows you to focus the users attention on a particular portion of the screen. It creates the equivalent of a modal dialog box - this means that while the user looks at this focused part of the screen, they can't interact with the rest of the screen.

精简版js 代码不到6K，基于prototype（自带1.4，但大致兼容1.6，无需script.aculo.us库，自然也没什么养眼的特效，这是保持瘦身的秘诀）。但似乎精简过头了，稍微扩展了下，加入了直接开窗口的方法，并支持窗口页面载入完毕后及窗口关闭后的回调事件，以适合项目使用。

待整理。

顺便整理下市面上现有 lightbox 作品：

Lightbox JS，（作者是Lokesh Dhakar），是所有lightbox效果的始祖版，独立实现（不依赖公共JS库），代码较为松散，但显然他的地位意义不在于他的代码，而是他的“效果”。在这个基础上衍生了很多“衍生版”的lightbox，包括上面所HACK的精简版。
最新版本1/19/06，支持键盘快捷键来关闭窗口。

Lightbox JS 现在发展到了Lightbox JS v2.0 (中文介绍)，基于prototype+script.aculo.us，因此开打窗口时的效果更为平滑、养眼，能根据窗口（图片）大小自动调整显示层的大小。最大的缺点是只支持图片的展示，因此才称为"light box"。要展现其他页面内容，有许多衍生（扩展）版可选，作者推荐 Lytebox 和ThickBox 。
最新版为：v2.04 Released 3/09/08。

Litebox，物如其名，是Lightbox JS v2.0 的精简版（但效果完全实现，不多也不少），基于moo.fix （prototype的精简版prototype.lite.js 3KB + mootools的特效库moo.fix.js 3KB），其中lightbox 效果实现代码litebox.js 18KB，全部文件合并压缩后约16KB左右，也可只用moo.fix.js + litebox.js 配合完整的prototype.js 使用。

Lytebox 是Lightbox JS v2.0 的衍生版，同样也是基于prototype+script.aculo.us，展示效果也跟Lightbox JS v2.0 完全一样，还可以用iframe展示内容，以便可以展示页面、Flash等更丰富的内容。但JS文件较大，接近40K。
最新版为：October 2, 2007 v3.22

GreyBox，22KB，独立实现，JS文件不少，设置也稍嫌麻烦，效果中规中矩。

GreyBox Redux，JS文件仅2KB，是GreyBox的jQuery 简单实现版，就是用个iframe来框住外部页，但还依赖最少2个图片+1个CSS文件类配合，只适合特殊场合临时用一下。

ThickBox （ThickBox类中的经典作品，中文演示），是基于jQuery的，是作者 Cody Lindley 既不满足Lightbox只能展示图片又不喜欢prototype+script.aculo.us组合的体积，就根据Greybox的功能用jQuery实现，而且是被jQuery官方收录的作品。既然能称得上为"thick box"，自然功能不弱（该有的都有了），但体积却一点也不thick，仅为12KB，压缩后才6KB，而jQuery自身压缩后可达20K，用jQuery的就爽了。

Lightbox Gone Wild，是Lightbox JS的衍生版，基于prototype，只需两个文件（除prototype.js之外），一个js (6KB，代码有精炼的余地)，一个css，只支持用AJAX读取页面内容然后用lightbox效果展示，只是半透明置顶层，无绚丽的动态载入效果，也无自动缩放，居中也是靠CSS，但视乎很受欢迎（2年来600多个留言，而且还继续增长中。。）

Slimbox，大概是基于MooTools 版的最佳实现了，只有6KB，功能却跟Lightbox JS v2.0 完全一样，而且背景淡出效果更为平滑（在线演示），是MooTools 用户的不二选择，而且目前还在活跃更新中。
最新版为：Slimbox 1.62 （Jun 01 2008）for MooTools 1.2

Shadowbox.js，（作者Michael J. I. Jackson）则可算是 lightbox 中的战斗机，号称支持市面常见的公共JS库：
    * Yahoo! User Interface Library
    * Ext (standalone)
    * Prototype + Scriptaculous
    * jQuery
    * MooTools (requires Fx.Styles and its dependancies)
    * Dojo Toolkit

展示效果基本跟 Lightbox JS v2.0 一样，而且支持外部页面、Flash等多媒体。十分具有开源风范，js代码跟分为源码包（带详细注释）、生产用包（去注释去空格换行等，约31KB，而各种公共JS库的接口文件不到2KB，但感觉还有使用公共JS库的必要了吗？）

prototype-window ，可以看作是旗舰版的thickbox by prototype+script.aculo.us，而且物如其名，已经不再是小打小闹的box级工具，而是完全的模拟窗口实现，窗口特效中的缩放啊、震动啊，要多牛逼有多牛逼。当然文件size也是旗舰级的（若要用好，必需还得引入一堆theme文件，包括CSS和图片），这也是唯一的缺点，适合“企业级”需求。

到jQuery插件库及WIKI中找了下，发现似乎没有 Lightbox JS v2.0 的纯jQuery 完全实现版（展示效果一样的），只找到近似的（但均只能展示图片）：
jQuery Lightbox Plugin (balupton edition) 这个在IE6中打开会挂起，在FF中正常。

lightbox by Warren Kewenki （效果细节不到位，如在IE中图片加载前不会自动居中）
Based on Lightbox 2 by Lokesh Dhakar. Originally written to make use of the Prototype framework, and Script.acalo.us, now altered to use jQuery.

其他人的整理：

6种lightbox效果源代码下载（带在线演示）（原文，空间已过期）

各种 lightbox 实现

lightbox效果的最简单实现原理

Which Lightbox is right for you?

liangcmwn 2011-07-11 15:33 发表评论