学习日记 » JavaScript https://www.softwareace.cn 时刻想着为自己的产品多做一些对他好的事情 Fri, 20 Mar 2026 06:58:28 +0000 zh-CN hourly 1 Can (a ==1 && a== 2 && a==3) ever evaluate to true? https://www.softwareace.cn/?p=1722 https://www.softwareace.cn/?p=1722#comments Thu, 25 Jan 2018 09:14:27 +0000 http://www.softwareace.cn/?p=1722 https://stackoverflow.com/questions/48270127/can-a-1-a-2-a-3-ever-evaluate-to-true

const a = {
  i: 1,
  toString: function () {
    return a.i++;
  }
}

if(a == 1 && a == 2 && a == 3) {
  console.log('Hello World!');
}

 

]]> https://www.softwareace.cn/?feed=rss2&p=1722 0 动态加载js和css https://www.softwareace.cn/?p=1641 https://www.softwareace.cn/?p=1641#comments Wed, 10 May 2017 02:17:48 +0000 http://www.softwareace.cn/?p=1641 开发过程中经常需要动态加载js和css，今天特意总结了一下常用的方法。

 1、动态加载js

　　方法一：动态加载js文件

// 动态加载js脚本文件
function loadScript(url) {
  var script = document.createElement("script");
  script.type = "text/javascript";
  script.src = url;
  document.body.appendChild(script);
}
// 测试
loadScript("javascript/lib/cookie.js");

方法二：动态加载js脚本

// 动态加载js脚本
    function loadScriptString(code) {
        var script = document.createElement("script");
        script.type = "text/javascript";
        try{
            // firefox、safari、chrome和Opera
            script.appendChild(document.createTextNode(code));
        }catch(ex) {
            // IE早期的浏览器 ,需要使用script的text属性来指定javascript代码。
            script.text = code;
        }
        document.body.appendChild(script);
    }
    // 测试
    var text = "function test(){alert('test');}";
    loadScriptString(text);
    test();

 

2、动态加载css

　　方法一：动态加载css文件

// 动态加载css文件
    function loadStyles(url) {
        var link = document.createElement("link");
        link.type = "text/css";
        link.rel = "stylesheet";
        link.href = url;
        document.getElementsByTagName("head")[0].appendChild(link);
    }
    // 测试
    loadStyles("css/secondindex.css");

方法二：动态加载css脚本

// 动态加载css脚本
    function loadStyleString(cssText) {
        var style = document.createElement("style");
        style.type = "text/css";
        try{
            // firefox、safari、chrome和Opera
            style.appendChild(document.createTextNode(cssText));
        }catch(ex) {
            // IE早期的浏览器 ,需要使用style元素的stylesheet属性的cssText属性
            style.styleSheet.cssText = cssText;
        }
        document.getElementsByTagName("head")[0].appendChild(style);
    }
    // 测试
    var css = "body{color:blue;}";
    loadStyleString(css);

 

]]> https://www.softwareace.cn/?feed=rss2&p=1641 0 获取浏览器语言的完美方案 https://www.softwareace.cn/?p=1638 https://www.softwareace.cn/?p=1638#comments Tue, 02 May 2017 01:58:24 +0000 http://www.softwareace.cn/?p=1638

http://www.w3help.org/zh-cn/causes/BX2040

 

标准参考

 

无

问题描述

各浏览器对 navigator 对象中几个与语言相关的属性（language、userLanguage、browserLanguage、 systemLanguage）的返回值存在很大的差异。

造成的影响

由于不同浏览器对这几个属性的返回值有很大差异，同时返回的有效值的大小写也有差异。若在获取当前浏览器语言的时候没有考虑到这些差异则可能造成兼容性问题。

受影响的浏览器

所有浏览器

问题分析

首先查看一下 navigator 对象中的这几个与 language 相关的属性。

navigator 对象包含有关浏览器的信息。没有应用于 navigator 对象的公开标准，不过所有浏览器都支持该对象。但是其内部一些属性及其返回值在各浏览器并不统一。

  • language：返回当前的浏览器语言（来自 Mozilla Developer Center）
  • userLanguage：返回操作系统设定的自然语言（来自 MSDN）
  • browserLanguage：返回当前的浏览器语言（来自 MSDN）
  • systemLanguage：返回当前操作系统的缺省语言（来自 MSDN）

关于 navigator 对象的更多资料，请参见：MSDN、Mozilla Developer Center。

对于浏览器，Mozilla Developer Center 中的 language 属性与 MSDN 中的 browserLanguage 属性描述很像。

分析以下代码：

<script>
document.write('navigator.language:'+navigator.language);
document.write('<br>navigator.userLanguage:'+navigator.userLanguage);
document.write('<br>navigator.browserLanguage:'+navigator.browserLanguage);
document.write('<br>navigator.systemLanguage:'+navigator.systemLanguage);
</script>

代码中打印出了各浏览器对于这 4 个属性返回值的情况：

IE6 IE7 IE8 Firefox Chrome Safari Opera
navigator.language undefined zh-CN zh-CN
navigator.userLanguage zh-cn undefined zh-cn
navigator.browserLanguage zh-cn undefined zh-cn
navigator.systemLanguage zh-cn undefined undefined

解决方案

可以使用下面的代码获取当前浏览器语言：

<span style="color: #ff0000;"><strong>(navigator.language || navigator.browserLanguage).toLowerCase()</strong></span>

 

示例：<以下示例由博主吕津增加>

 

PS:

如下图所示，navigator.browserLanguage、navigator.systemLanguage、navigator.userLanguage这三个属性对FireFox不支持。

http://www.w3school.com.cn/tiy/t.asp?f=hdom_navigator

 

]]> https://www.softwareace.cn/?feed=rss2&p=1638 0 JQuery获取浏览器窗口的可视区域高度和宽度,滚动条高度 https://www.softwareace.cn/?p=1635 https://www.softwareace.cn/?p=1635#comments Mon, 24 Apr 2017 09:31:52 +0000 http://www.softwareace.cn/?p=1635 
alert($(window).height()); //浏览器时下窗口可视区域高度
alert($(document).height()); //浏览器时下窗口文档的高度
alert($(document.body).height());//浏览器时下窗口文档body的高度
alert($(document.body).outerHeight(true));//浏览器时下窗口文档body的总高度 包括border padding margin
alert($(window).width()); //浏览器时下窗口可视区域宽度
alert($(document).width());//浏览器时下窗口文档对于象宽度
alert($(document.body).width());//浏览器时下窗口文档body的高度
alert($(document.body).outerWidth(true));//浏览器时下窗口文档body的总宽度 包括border padding margin
  
alert($(document).scrollTop()); //获取滚动条到顶部的垂直高度
alert($(document).scrollLeft()); //获取滚动条到左边的垂直宽度

 

]]> https://www.softwareace.cn/?feed=rss2&p=1635 0 javascript canvas show circle picture https://www.softwareace.cn/?p=1310 https://www.softwareace.cn/?p=1310#comments Mon, 04 May 2015 02:18:51 +0000 http://www.softwareace.cn/?p=1310 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title>Canvas tutorial</title>
    <script type="text/javascript">
      function draw(){
        var canvas = document.getElementById('tutorial');
        if (canvas.getContext){
          var ctx = canvas.getContext('2d');

          var thumbImg = document.createElement('img');

          thumbImg.src = 'http://s1.sinaimg.cn/orignal/6e0be9fbh94318b5f9120&690';
          thumbImg.onload = function() {
              ctx.save();
              ctx.beginPath();
              ctx.arc(50, 50, 50, 0, Math.PI * 2, true);
              ctx.closePath();
              ctx.clip();

              ctx.drawImage(thumbImg, 0, 0, 100, 100);

              ctx.beginPath();
              ctx.arc(0, 0, 50, 0, Math.PI * 2, true);
              ctx.clip();
              ctx.closePath();
              ctx.restore();
          };

        }
      }


    </script>
    <style type="text/css">
      canvas { border: 1px solid black; }
    </style>
  </head>
  <body onload="draw();">
    <canvas id="tutorial" width="150" height="150"></canvas>
  </body>
</html>

 

]]> https://www.softwareace.cn/?feed=rss2&p=1310 0 javascript生成UUID的两种方式 https://www.softwareace.cn/?p=1198 https://www.softwareace.cn/?p=1198#comments Wed, 11 Feb 2015 05:27:20 +0000 http://www.softwareace.cn/?p=1198 

/*!
Math.uuid.js (v1.4)
http://www.broofa.com
mailto:robert@broofa.com
 
Copyright (c) 2010 Robert Kieffer
Dual licensed under the MIT and GPL licenses.
*/
 
/*
 * Generate a random uuid.
 *
 * USAGE: Math.uuid(length, radix)
 *   length - the desired number of characters
 *   radix  - the number of allowable values for each character.
 *
 * EXAMPLES:
 *   // No arguments  - returns RFC4122, version 4 ID
 *   >>> Math.uuid()
 *   "92329D39-6F5C-4520-ABFC-AAB64544E172"
 *
 *   // One argument - returns ID of the specified length
 *   >>> Math.uuid(15)     // 15 character ID (default base=62)
 *   "VcydxgltxrVZSTV"
 *
 *   // Two arguments - returns ID of the specified length, and radix. (Radix must be <= 62)
 *   >>> Math.uuid(8, 2)  // 8 character ID (base=2)
 *   "01001010"
 *   >>> Math.uuid(8, 10) // 8 character ID (base=10)
 *   "47473046"
 *   >>> Math.uuid(8, 16) // 8 character ID (base=16)
 *   "098F4D35"
 */
(function() {
  // Private array of chars to use
  var CHARS = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
 
  Math.uuid = function (len, radix) {
    var chars = CHARS, uuid = [], i;
    radix = radix || chars.length;
 
    if (len) {
      // Compact form
      for (i = 0; i < len; i++) uuid[i] = chars[0 | Math.random()*radix];
    } else {
      // rfc4122, version 4 form
      var r;
 
      // rfc4122 requires these characters
      uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-';
      uuid[14] = '4';
 
      // Fill in random data.  At i==19 set the high bits of clock sequence as
      // per rfc4122, sec. 4.1.5
      for (i = 0; i < 36; i++) {
        if (!uuid[i]) {
          r = 0 | Math.random()*16;
          uuid[i] = chars[(i == 19) ? (r & 0x3) | 0x8 : r];
        }
      }
    }
 
    return uuid.join('');
  };
 
  // A more performant, but slightly bulkier, RFC4122v4 solution.  We boost performance
  // by minimizing calls to random()
  Math.uuidFast = function() {
    var chars = CHARS, uuid = new Array(36), rnd=0, r;
    for (var i = 0; i < 36; i++) {
      if (i==8 || i==13 ||  i==18 || i==23) {
        uuid[i] = '-';
      } else if (i==14) {
        uuid[i] = '4';
      } else {
        if (rnd <= 0x02) rnd = 0x2000000 + (Math.random()*0x1000000)|0;
        r = rnd & 0xf;
        rnd = rnd >> 4;
        uuid[i] = chars[(i == 19) ? (r & 0x3) | 0x8 : r];
      }
    }
    return uuid.join('');
  };
 
  // A more compact, but less performant, RFC4122v4 solution:
  Math.uuidCompact = function() {
    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
      var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);
      return v.toString(16);
    });
  };
})();

 

/*

uuid.js - Version 0.2
JavaScript Class to create a UUID like identifier

Copyright (C) 2006-2008, Erik Giberti (AF-Design), All rights reserved.

This program is free software; you can redistribute it and/or modify it under 
the terms of the GNU General Public License as published by the Free Software 
Foundation; either version 2 of the License, or (at your option) any later 
version.

This program is distributed in the hope that it will be useful, but WITHOUT ANY 
WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A 
PARTICULAR PURPOSE. See the GNU General Public License for more details.

You should have received a copy of the GNU General Public License along with 
this program; if not, write to the Free Software Foundation, Inc., 59 Temple 
Place, Suite 330, Boston, MA 02111-1307 USA

The latest version of this file can be downloaded from
http://www.af-design.com/resources/javascript_uuid.php

HISTORY:
6/5/06 	- Initial Release
5/22/08 - Updated code to run faster, removed randrange(min,max) in favor of
          a simpler rand(max) function. Reduced overhead by using getTime() 
          method of date class (suggestion by James Hall).

KNOWN ISSUES:
- Still no way to get MAC address in JavaScript
- Research into other versions of UUID show promising possibilities 
  (more research needed)
- Documentation needs improvement

*/

// On creation of a UUID object, set it's initial value
function UUID(){
	this.id = this.createUUID();
}

// When asked what this Object is, lie and return it's value
UUID.prototype.valueOf = function(){ return this.id; }
UUID.prototype.toString = function(){ return this.id; }

//
// INSTANCE SPECIFIC METHODS
//

UUID.prototype.createUUID = function(){
	//
	// Loose interpretation of the specification DCE 1.1: Remote Procedure Call
	// described at http://www.opengroup.org/onlinepubs/009629399/apdxa.htm#tagtcjh_37
	// since JavaScript doesn't allow access to internal systems, the last 48 bits 
	// of the node section is made up using a series of random numbers (6 octets long).
	//  
	var dg = new Date(1582, 10, 15, 0, 0, 0, 0);
	var dc = new Date();
	var t = dc.getTime() - dg.getTime();
	var h = '-';
	var tl = UUID.getIntegerBits(t,0,31);
	var tm = UUID.getIntegerBits(t,32,47);
	var thv = UUID.getIntegerBits(t,48,59) + '1'; // version 1, security version is 2
	var csar = UUID.getIntegerBits(UUID.rand(4095),0,7);
	var csl = UUID.getIntegerBits(UUID.rand(4095),0,7);

	// since detection of anything about the machine/browser is far to buggy, 
	// include some more random numbers here
	// if NIC or an IP can be obtained reliably, that should be put in
	// here instead.
	var n = UUID.getIntegerBits(UUID.rand(8191),0,7) + 
			UUID.getIntegerBits(UUID.rand(8191),8,15) + 
			UUID.getIntegerBits(UUID.rand(8191),0,7) + 
			UUID.getIntegerBits(UUID.rand(8191),8,15) + 
			UUID.getIntegerBits(UUID.rand(8191),0,15); // this last number is two octets long
	return tl + h + tm + h + thv + h + csar + csl + h + n; 
}


//
// GENERAL METHODS (Not instance specific)
//


// Pull out only certain bits from a very large integer, used to get the time
// code information for the first part of a UUID. Will return zero's if there 
// aren't enough bits to shift where it needs to.
UUID.getIntegerBits = function(val,start,end){
	var base16 = UUID.returnBase(val,16);
	var quadArray = new Array();
	var quadString = '';
	var i = 0;
	for(i=0;i<base16.length;i++){
		quadArray.push(base16.substring(i,i+1));	
	}
	for(i=Math.floor(start/4);i<=Math.floor(end/4);i++){
		if(!quadArray[i] || quadArray[i] == '') quadString += '0';
		else quadString += quadArray[i];
	}
	return quadString;
}

// Numeric Base Conversion algorithm from irt.org
// In base 16: 0=0, 5=5, 10=A, 15=F
UUID.returnBase = function(number, base){
	//
	// Copyright 1996-2006 irt.org, All Rights Reserved.	
	//
	// Downloaded from: http://www.irt.org/script/146.htm	
	// modified to work in this class by Erik Giberti
	var convert = ['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];
    if (number < base) var output = convert[number];
    else {
        var MSD = '' + Math.floor(number / base);
        var LSD = number - MSD*base;
        if (MSD >= base) var output = this.returnBase(MSD,base) + convert[LSD];
        else var output = convert[MSD] + convert[LSD];
    }
    return output;
}

// pick a random number within a range of numbers
// int b rand(int a); where 0 <= b <= a
UUID.rand = function(max){
	return Math.floor(Math.random() * max);
}

// end of UUID class file

 

]]> https://www.softwareace.cn/?feed=rss2&p=1198 0 use js set element style https://www.softwareace.cn/?p=1115 https://www.softwareace.cn/?p=1115#comments Tue, 20 Jan 2015 06:00:16 +0000 http://www.softwareace.cn/?p=1115 

var colorSpan = document.getElementById( 'btn-color-span');
colorSpan.style.backgroundColor = color;

 

]]> https://www.softwareace.cn/?feed=rss2&p=1115 0 KindEditor/初始化参数 https://www.softwareace.cn/?p=1109 https://www.softwareace.cn/?p=1109#comments Wed, 14 Jan 2015 03:49:09 +0000 http://www.softwareace.cn/?p=1109 KindEditor | 使用方法 | 初始化参数|添加自定义插件|API文档|常见问题
  • width

编辑器的宽度，可以设置px或%，比textarea输入框样式表宽度优先度高。

数据类型: String； 默认值: textarea输入框的宽度

示例:

K.create('#id', {
        width : '700px'
});

  • height

编辑器的高度，只能设置px，比textarea输入框样式表高度优先度高。

数据类型: String； 默认值: textarea输入框的高度

  • minWidth

指定编辑器最小宽度，单位为px。

数据类型: Int； 默认值: 650

  • items

配置编辑器的工具栏，其中”/”表示换行，”|”表示分隔符。

数据类型: Array；

默认值:

[
        'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'cut', 'copy', 'paste',
        'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
        'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
        'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',
        'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
        'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image',
        'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'map', 'code', 'pagebreak',
        'link', 'unlink', '|', 'about'
]

  • noDisableItems

designMode 为false时，要保留的工具栏图标。

数据类型: Array； 默认值: [‘source’, ‘fullscreen’]

  • filterMode

true时过滤HTML代码，false时允许输入任何代码。

数据类型: Boolean； 默认值: false

  • htmlTags

指定要保留的HTML标记和属性。Object的key为HTML标签名，value为HTML属性数组，”.”开始的属性表示style属性。

数据类型: Object； 默认值:

{
        font : ['color', 'size', 'face', '.background-color'],
        span : [
                '.color', '.background-color', '.font-size', '.font-family', '.background',
                '.font-weight', '.font-style', '.text-decoration', '.vertical-align', '.line-height'
        ],
        div : [
                'align', '.border', '.margin', '.padding', '.text-align', '.color',
                '.background-color', '.font-size', '.font-family', '.font-weight', '.background',
                '.font-style', '.text-decoration', '.vertical-align', '.margin-left'
        ],
        table: [
                'border', 'cellspacing', 'cellpadding', 'width', 'height', 'align', 'bordercolor',
                '.padding', '.margin', '.border', 'bgcolor', '.text-align', '.color', '.background-color',
                '.font-size', '.font-family', '.font-weight', '.font-style', '.text-decoration', '.background',
                '.width', '.height'
        ],
        'td,th': [
                'align', 'valign', 'width', 'height', 'colspan', 'rowspan', 'bgcolor',
                '.text-align', '.color', '.background-color', '.font-size', '.font-family', '.font-weight',
                '.font-style', '.text-decoration', '.vertical-align', '.background'
        ],
        a : ['href', 'target', 'name'],
        embed : ['src', 'width', 'height', 'type', 'loop', 'autostart', 'quality', '.width', '.height', 'align', 'allowscriptaccess'],
        img : ['src', 'width', 'height', 'border', 'alt', 'title', '.width', '.height'],
        'p,ol,ul,li,blockquote,h1,h2,h3,h4,h5,h6' : [
                'align', '.text-align', '.color', '.background-color', '.font-size', '.font-family', '.background',
                '.font-weight', '.font-style', '.text-decoration', '.vertical-align', '.text-indent', '.margin-left'
        ],
        pre : ['class'],
        'hr,br,tbody,tr,strong,b,sub,sup,em,i,u,strike' : []
}

  • wellFormatMode

true时美化HTML数据。

数据类型: Boolean； 默认值: true

  • resizeType

2或1或0，2时可以拖动改变宽度和高度，1时只能改变高度，0时不能拖动。

数据类型: Int； 默认值: 2

  • themeType

指定主题风格，可设置”default”、”simple”，指定simple时需要引入simple.css。

数据类型: String； 默认值: “default”

示例:

&lt;link rel="stylesheet" href="../themes/default/default.css" /&gt;
&lt;link rel="stylesheet" href="../themes/simple/simple.css" /&gt;
&lt;script charset="utf-8" src="../kindeditor.js"&gt;&lt;/script&gt;
&lt;script charset="utf-8" src="../lang/zh_CN.js"&gt;&lt;/script&gt;
&lt;script&gt;
        var editor;
        KindEditor.ready(function(K) {
                editor = K.create('#editor_id', {
                        themeType : 'simple'
                });
        });
&lt;/script&gt;

  • langType

指定语言，可设置”en”、”zh_CN”，需要引入lang/[langType].js。

数据类型: String； 默认值: “zh_CN”

示例:

&lt;link rel="stylesheet" href="../themes/default/default.css" /&gt;
&lt;script charset="utf-8" src="../kindeditor.js"&gt;&lt;/script&gt;
&lt;script charset="utf-8" src="../lang/en.js"&gt;&lt;/script&gt;
&lt;script&gt;
        var editor;
        KindEditor.ready(function(K) {
                editor = K.create('#editor_id', {
                        langType : 'en'
                });
        });
&lt;/script&gt;

  • designMode

可视化模式或代码模式

数据类型: Boolean； 默认值: true

  • fullscreenMode

true时加载编辑器后变成全屏模式。

数据类型: Boolean； 默认值: false

  • basePath

指定编辑器的根目录路径。

数据类型: String； 默认值: 根据kindeditor.js文件名自动获取

  • themesPath

指定编辑器的themes目录路径。

数据类型: String； 默认值: basePath + ‘themes/’

  • pluginsPath

指定编辑器的plugins目录路径。

数据类型: String； 默认值: basePath + ‘plugins/’

  • langPath

指定编辑器的lang目录路径。

数据类型: String； 默认值: basePath + ‘lang/’

  • minChangeSize

undo/redo文字输入最小变化长度，当输入的文字变化小于这个长度时不会添加到undo记录里。

数据类型: String； 默认值: 5

  • urlType

改变站内本地URL，可设置”“、”relative”、”absolute”、”domain”。空为不修改URL，relative为相对路径，absolute为绝对路径，domain为带域名的绝对路径。

数据类型: String； 默认值: “”

  • newlineTag

设置回车换行标签，可设置”p”、”br”。

数据类型: String； 默认值: “p”

  • pasteType

设置粘贴类型，0:禁止粘贴, 1:纯文本粘贴, 2:HTML粘贴

数据类型: Int； 默认值: 2

  • dialogAlignType

设置弹出框(dialog)的对齐类型，可设置”“、”page”，指定page时按当前页面居中，指定空时按编辑器居中。

数据类型: String； 默认值: “page”

  • shadowMode

true时弹出层(dialog)显示阴影。

数据类型: Boolean； 默认值: true

  • useContextmenu

true时使用右键菜单，false时屏蔽右键菜单。

数据类型: Boolean； 默认值: true

  • syncType

同步数据的方式，可设置”“、”form”，值为form时提交form时自动同步，空时不会自动同步。

数据类型: String； 默认值: “form”

  • indentChar

wellFormatMode 为true时，HTML代码缩进字符。

数据类型: String； 默认值: “\t”

  • cssPath

指定编辑器iframe document的CSS文件，用于设置可视化区域的样式。

数据类型: String或Array； 默认值: 空

  • cssData

指定编辑器iframe document的CSS数据，用于设置可视化区域的样式。

数据类型: String； 默认值: 空

  • bodyClass

指定编辑器iframe document body的className。

数据类型: String； 默认值: “ke-content”

  • colorTable

指定取色器里的颜色。

数据类型: Array； 默认值:

[
        ['#E53333', '#E56600', '#FF9900', '#64451D', '#DFC5A4', '#FFE500'],
        ['#009900', '#006600', '#99BB00', '#B8D100', '#60D978', '#00D5FF'],
        ['#337FE5', '#003399', '#4C33E5', '#9933E5', '#CC33E5', '#EE33EE'],
        ['#FFFFFF', '#CCCCCC', '#999999', '#666666', '#333333', '#000000']
]

  • afterCreate

设置编辑器创建后执行的回调函数。

数据类型: Function； 默认值: 无

  • afterChange

编辑器内容发生变化后执行的回调函数。

数据类型: Function； 默认值: 无

  • afterTab

按下TAB键后执行的的回调函数。

数据类型: Function； 默认值: 插入4个空格的函数

  • afterFocus

编辑器聚焦(focus)时执行的回调函数。

数据类型: Function； 默认值: 无

  • afterBlur

编辑器失去焦点(blur)时执行的回调函数。

数据类型: Function； 默认值: 无

  • afterUpload

上传文件后执行的回调函数。

数据类型: Function； 默认值: 无

KindEditor.ready(function(K) {
        K.create('#id', {
                afterUpload : function(url) {
                        alert(url);
                }
        });
});

  • uploadJson

指定上传文件的服务器端程序。

数据类型: String； 默认值: basePath + ‘php/upload_json.php’

  • fileManagerJson

指定浏览远程图片的服务器端程序。

数据类型: String； 默认值: basePath + ‘php/file_manager_json.php’

  • allowPreviewEmoticons

true时鼠标放在表情上可以预览表情。

数据类型: Boolean； 默认值: true

  • allowImageUpload

true时显示图片上传按钮。

数据类型: Boolean； 默认值: true

  • allowFlashUpload

true时显示Flash上传按钮。

数据类型: Boolean； 默认值: true

  • allowMediaUpload

true时显示视音频上传按钮。

数据类型: Boolean； 默认值: true

  • allowFileManager

true时显示浏览远程服务器按钮。

数据类型: Boolean； 默认值: false

  • fontSizeTable

指定文字大小。

数据类型: Array； 默认值:

['9px', '10px', '12px', '14px', '16px', '18px', '24px', '32px']

参考来源

  • http://www.zzbaike.com/wiki/KindEditor/%E5%88%9D%E5%A7%8B%E5%8C%96%E5%8F%82%E6%95%B0
]]> https://www.softwareace.cn/?feed=rss2&p=1109 0 js+flash 剪切板复制粘贴 兼容ie chrome firefox flash10 https://www.softwareace.cn/?p=1102 https://www.softwareace.cn/?p=1102#comments Thu, 08 Jan 2015 07:40:09 +0000 http://www.softwareace.cn/?p=1102 Zero Clipboard的实现原理

Zero Clipboard 利用透明的Flash让其漂浮在复制按钮之上，这样其实点击的不是按钮而是 Flash ，这样将需要的内容传入Flash，再通过Flash的复制功能把传入的内容复制到剪贴板。

Zero Clipboard的安装方法

其实也不算安装啦，就是使用前的准备工作。

首先需要下载 Zero Clipboard的压缩包，解压后把文件夹中两个文件：ZeroClipboard.js 和 ZeroClipboard.swf 放入到你的项目中。

然后把在你要使用复制功能的页面中引入Zero Clipboard的js文件：ZeroClipboard.js
如下代码：

 

<script type=”text/javascript” src=”ZeroClipboard.js”></script>

注意：以上 ZeroClipboard.js, ZeroClipboard.swf需要放在同一路径下。如果不在同一路径，可使用ZeroClipboard.setMoviePath( “Flash路径” );来设置ZeroClipboard.swf 地址

Zero Clipboard实现简单跨浏览器复制

varclip=newZeroClipboard.Client();// 新建一个对象
clip.setHandCursor(true);// 设置鼠标为手型
clip.setText(“哈哈”);// 设置要复制的文本。
 clip.glue(“copy-botton”);// 注册一个 button，参数为 id。点击这个 button 就会复制。这个 button 不一定要求是一个 input 按钮，也可以是其他 DOM 元素。和上一句位置不可调换

这样，这样基本功能实现了，点击按钮就可以复制设置好的文本了。你可能注意到了，待复制的文本是固定的，如果想要动态改变的怎么办，比如复制一个输入框中的内容。不用担心，下面会讲到的。

Zero Clipboard的高级功能

1、reposition() 方法

因为按钮上漂浮有一个 Flash 按钮，所以当页面大小发生变化时，Flash 按钮可能会错位，这样就点不着了。 不要紧，Zero Clipboard 提供了一个 reposition() 方法，可以重新计算 Flash 按钮的位置。我们可以将它绑定到 resize 事件上。如下面代码是在jQuery下实现的resize事件重新设置按钮位置：

$(window).resize(function(){clip.reposition();});

2、hide() 和 show() 方法

这两个方法可以隐藏和显示 Flash 按钮 。其中 show() 方法会调用 reposition() 方法。

3、setCSSEffects() 方法

当鼠标移到按钮上或点击时，由于有 Flash 按钮的遮挡，所以像 css “:hover”, “:active” 等伪类可能会失效。setCSSEffects() 方法就是解决这个问题。首先我们需要将伪类改成类，比如：

#copy-botton:hover{border-color:#FF6633;}// 可以改成下面的“:hover”改成“.hover”#copy-botton.hover{border-color:#FF6633;}

我们可以调用 clip.setCSSEffects( true ); 这样 Zero Clipboard 会自动为我们处理：将类 .hover 当成伪类 :hover 。

4、getHTML() 方法

如果你想自己实例一个 Flash ，不用 Zero Clipboard 的附着方法，那么这个方法就可以帮上忙了。它接受两个参数，分别为 Flash 的宽度和高度。返回的是 Flash 对应的 HTML 代码。例如：

varhtml=clip.getHTML(150,20);

你可以用 innerHTML 或直接 document.write(); 进行输出。
以下是测试输出的组装完毕的HTML 代码：

<embed id=”ZeroClipboardMovie_1″ src=”zeroclipboard/ZeroClipboard.swf” loop=”false” menu=”false” quality=”best” bgcolor=”#ffffff” width=”150″ height=”20″ name=”ZeroClipboardMovie_1″ align=”middle” allowScriptAccess=”always” allowFullScreen=”false” type=”application/x-shockwave-flash” pluginspage=”http://www.macromedia.com/go/getflashplayer” flashvars=”id=1&width=150&height=20″ wmode=”transparent” />

IE 的 Flash JavaScript 通信接口上有一个 bug 。你必须插入一个 object 标签到一个已存在的 DOM 元素中。并且在写入 innerHTML 之前请确保该元素已经 appendChild 方法插入到 DOM 中。

Zero Clipboard 事件处理

Zero Clipboard 提供了一些事件，你可以自定义函数处理这些事件。Zero Clipboard 事件处理函数为 addEventListener(); 例如当 Flash 完全载入后会触发一个事件 “load” 。

clip.addEventListener(“load”,function(client){alert(“Flash 加载完毕！”);});

Zero Clipboard 会将 clip 对象作为参数传入。即上例中的 “client” 。
还有 “load” 也可以写成 “onLoad”，其他的事件也可以这样。
其他事件还包括：

mouseOver 鼠标移上事件
mouseOut 鼠标移出事件
mouseDown 鼠标按下事件
mouseUp 鼠标松开事件
complete 复制成功事件

其中 mouseOver 事件和 complete 事件比较常用。
前面说过，如果需要动态改变待复制的内容，那 mouseOver 事件就可以派上用场了。例如需要动态复制一个 id 为 test 的输入框中的值，我们可以在鼠标 over 的时候重新设置值。

clip.addEventListener(“mouseOver”,function(client){var test = document.getElementById(“test”); client.setText(test.value);// 重新设置要复制的值});//复制成功： clip.addEventListener(“complete”,function(){alert(“复制成功！”);});
 
另外一种实现方法，和这个差不多

从 discuz! 里扒出来的(简易实现), 代码如下:

var clipboardswfdata;

var setcopy_gettext = function(){
    clipboardswfdata = document.getElementById('data').value;
    window.document.clipboardswf.SetVariable('str', clipboardswfdata);
}

var floatwin = function(){
    alert('copy success, ' + clipboardswfdata);
}

 

<input type="text" name="data" value="xxxxx11111" id ="data" />
<div id="clipboard_content">
<span class="clipinner" id="clipinner">点此复制到剪贴板
<embed name="clipboardswf" class="clipboardswf" id="clipboardswf" onmouseover="setcopy_gettext()" devicefont="false" src="./clipboard.swf" menu="false" allowscriptaccess="sameDomain" swliveconnect="true" wmode="transparent" type="application/x-shockwave-flash" height="20" width="100"></span>
</div>

 

<style type="text/css">
body {font-size:12px;}
.clipinner {position:relative;}
.clipboardswf {position:absolute; left:0; top:0;}
</style>

 

演示地址: http://www.lsproc.com/demo/cliboard/demo.html另: 没有对ie单独处理, ie中推荐使用 window.clipboardData

演示代码下载: http://www.lsproc.com/wiki/_media/snippets:clipboard.zip

另: google code 上有个 zeroclipboard 的项目, 如果想要方便的话, 也可以使用
地址: http://code.google.com/p/zeroclipboard/

]]> https://www.softwareace.cn/?feed=rss2&p=1102 0 js RDF Parser https://www.softwareace.cn/?p=1056 https://www.softwareace.cn/?p=1056#comments Tue, 02 Dec 2014 10:38:07 +0000 http://www.softwareace.cn/?p=1056 

const PREFIX_NS_EM = "http://www.mozilla.org/2004/em-rdf#";
var xmlString = '<?xml version="1.0" encoding="utf-8"?><RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"><Description about="urn:mozilla:install-manifest"><em:id>PortableTester@jetpack</em:id><em:version>initial</em:version><em:type>2</em:type><em:bootstrap>true</em:bootstrap><em:unpack>false</em:unpack><!--Firefox--><em:targetApplication><Description><em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id><em:minVersion>7.0</em:minVersion><em:maxVersion>27.0</em:maxVersion></Description></em:targetApplication><!--Front End MetaData--><em:name>PortableTester</em:name><em:description>Test addon that tries to figure out if Firefox is portable or not.</em:description><em:creator>Noitidart</em:creator><em:optionsURL>options url here</em:optionsURL></Description></RDF>';
var rdfParser = Cc['@mozilla.org/rdf/xml-parser;1'].createInstance(Ci.nsIRDFXMLParser);
var ds = Cc['@mozilla.org/rdf/datasource;1?name=in-memory-datasource'].createInstance(Ci.nsIRDFDataSource);

var emptyUri = Services.io.newURI('urn:none', null, null);
rdfParser.parseString(ds, emptyUri, xmlString);
var resources = ds.GetAllResources()
while (resources.hasMoreElements()) {
  let resource = resources.getNext().QueryInterface(Ci.nsIRDFResource);
  let arcs = ds.ArcLabelsOut(resource);
  while (arcs.hasMoreElements()) {
    let arc = arcs.getNext().QueryInterface(Ci.nsIRDFResource);
    let prop = arc.ValueUTF8.substring(PREFIX_NS_EM.length)
    let targets = ds.GetTargets(resource, arc, true);
    while (targets.hasMoreElements()) {
      let target = targets.getNext();
      if (target instanceof Ci.nsIRDFResource) {
        console.log(prop, "Resource node, recurse");
      }
      else if (target instanceof Ci.nsIRDFLiteral) {
        console.log(prop, target.Value); //are non ASCII characters encoded?
      }
      else if (target instanceof Ci.nsIRDFInt) {
        console.log(prop, target.Value);
      }
    }
  }
}

 

]]> https://www.softwareace.cn/?feed=rss2&p=1056 0