生活在別處 : Javascript

{ Category Archives } Javascript

jQuery Tab

推荐一 jQuery 实现 Tab 的插件，代码很简短，而且调用也非常简单。head 加上:

<script type="text/javascript" src="jquery.idTabs.min.js"></script>

class="idTabs" element 中，任何<a href="#tabs">以这种形式调用，被点击时都会显示对应 id="tab" element 中的内容。如下：

<ul class="idTabs">
  <li><a href="#jquery">jQuery</a></li>
  <li><a href="#official">Tabs 3</a></li>
</ul>
<div id="jquery">If you haven't checked out ...</div>
<div id="official">idTabs is only a simple ...</div>

demo

Tagged jQuery

跳出.each()

$.each(objs, function(i, n) {
    if(n.attr('checked') == true) {
        return false;
    }
});

return false 跳出 jQuery .each().

换到新的公司后，有专门的前端工程师，以至于之前知道的 JS 也都忘记。而最近做内部沟通系统时，一切需要自己实现，才又捡起来。

Tagged jQuery

2011 05 23 gettyying jQuery Comments (0)

jQuery 表格插件汇总

Tagged jQuery

2010 04 29 gettyying jQuery Comments (0)

JavaScript 全半角转换

规律：半角空格的 charCode 为 32, 全角空格为 12288. 其他半角字符 ( 33 – 126 ) 与全角 ( 65281 – 65374 ) 的对应关系是：均相差 65248.

找好规律，代码就好写了：

var hash = {'32' : '\u3000'};
// 半角转全角
function sbc2dbc(str) {
    var ret = [], i = 0, len = str.length, code, chr;
    for (; i< len; ++i) {
        code = str.charCodeAt(i);
        chr = hash[code];
        if (!chr && code > 31 && code< 127) {
           chr = hash[code] = String.fromCharCode(code + 65248);
        }
        ret[i] = chr ? chr : str.charAt(i);
    }
    return ret.join('');
}

同理：

var hash = {'12288' : ' '};
// 全角转半角
function dbc2sbc(str) {
    var ret = [], i = 0, len = str.length, code, chr;
    for (; i< len; ++i) {
        code = str.charCodeAt(i);
        chr = hash[code];
        if (!chr && code > 65280 && code< 65375) {
            chr = hash[code] = String.fromCharCode(code - 65248);
        }
        ret[i] = chr ? chr : str.charAt(i);
    }
    return ret.join('');
}

上面的代码会将 33 - 126 中间的符号也转换。很多时候，这并不是我们需要的（比如将 @ 转换为＠）。下面的代码侵入性更小：

var hash = {};
// 半角转全角。仅转换 [0-9a-zA-Z]
function sbc2dbc_w(str) {
    var ret = [], i = 0, len = str.length, code, chr;
    for (; i< len; ++i) {
        code = str.charCodeAt(i);
        chr = hash[code];
        if (!chr &&
            (47< code && code< 58 ||
             64< code && code< 91 ||
             96< code && code< 123)) {
            chr = hash[code] = String.fromCharCode(code + 65248);
        }
        ret[i] = chr ? chr : str.charAt(i);
    }
    return ret.join('');
}

Tagged Javascript

2010 04 17 gettyying Comments (0)

得到月份天数

32 - new Date(year, month, 32).getDate();

Tagged Javascript

2010 03 15 gettyying Comments (0)

Closure Tools：Google的javascript库

FROM: Google的javascript库

Google 开发了那么多 web application, 由于 web 浏览器和 web 标准的差异性, 势必需要一套库来解放 Google 的这些程序天才, 让他们从无聊的底层代码解脱出来, 关注算法, 关注应用程序逻辑.

之前, Google 说也在用 YUI 和 ext js 等 Javascript 库, 但去看看它的程序代码就会疑惑, 几乎没有任何痕迹显示在用这些库. 当然, Google 也有一套工具：GWT. 用java代码来编写 web applicationi, 完全无视浏览器的存在, 但是显而易见的就是, 既然代码全是java代码转换而来, 肯定少不了也写包裹性质的代码, 性能必然有不小的折扣, 而且随着应用的扩大, 这个折扣也是直线上升的, 更重要的是, 数据被藏了起来, 我想任何希望自己数据被搜索引擎索引的开发者, 都是不能接受的. 所以, 除了做企业应用的开发商, 不会有多少人感兴趣. 至今, 我只看到 Google profile 在用GWT. 种种迹象表明, Google 内部一定有套大而全的 Javascript 库.

今天, Google 说出了这个秘密：Closure Tools. 由三个部分组成, 其中的 Closure Library 从概念上来说, 是一个和 YUI 和 ext js 可比较的, 大而全的 Javascript 库. 谷歌做了个比喻, 说这个库类似于 c++ 的 STL, 由于它还有 UI 的 widget, 我想至少还要加上类似微软 MFC/WTL 的作用. 可见这个库在 Google 内部是非常重要, 和被广泛采用的. 它的功能非常广泛, 整个的结构是按需消费的, 除了 base.js 以外, 其它组件都是可选, 具体的组件列表在这里, 一些 demo 在这里. 使用上第一感觉就是, 非常的踏实, 该有的都有, 使用虽然不像 jQuery 那样精炼, 但也非常合理和简洁. 比 jQuery 好的就是不要去满地儿找插件, 我的预测是 YUI 将进一步边缘化, ext js 很难会有新用户了. 而 jQuery 由于其 lightweight 的特点, 应该能和 Closure Library 并存.

Colsure Tools 的其它两个部件分别是一个 Javascript 的优化器：Closure Compiler, 和一个 Javascript 的Template系统：Closure Templates. 这个 Javascript 的优化器不是简单的javascipt minimal的工具, 它会深入分析你的 Javascript 代码, 从而产生更精炼, 效率更高的代码. 比如如果有个变量没用到, 优化器会删掉它.

另一个是一个 Javascript 的 Template 系统, 我觉得更像是一个DSL(Domain-specific language). 它的目的是把数据表示成这个 DSL, 通过它再去生成HTML. 我们知道HTML本身就是表示数据的 DSL, XML 也是, 由于浏览器和 DocType 的差异性, 表示成 HTML 有点不够保险, 但是我们还有 JSON, 对 web 来说, 这可能是最高效的 DSL了, 再造一门 DSL, 有多大的必要性, 值得商榷, 何况这个 Google 的这个 DSL, 特点并不明显.

Tagged Google, Javascript

2010 03 13 gettyying Comments (0)

IE6下设置透明背景函数

function correctPNG() {
  for(var i = 0; i < document.images.length; i++) {
      var img = document.images[i]
      var imgName = img.src.toUpperCase()
      if (imgName.substring(imgName.length-3, imgName.length) == "PNG"){
          var imgID = (img.id) ? "id='" + img.id + "' " : ""
          var imgClass = (img.className) ? "class='" + img.className + "' " : ""
          var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
          var imgStyle = "display:inline-block;" + img.style.cssText
          if (img.align == "left") imgStyle = "float:left;" + imgStyle
          if (img.align == "right") imgStyle = "float:right;" + imgStyle
          if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
          var strNewHTML = "&lt;span " + imgID + imgClass + imgTitle
          + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
          + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
          + "(src=\'" + img.src + "\', sizingMethod='scale');\"&gt;&lt;/span&gt;"
          img.outerHTML = strNewHTML
          i = i-1
      }
  }
}

Tagged Javascript, opacity

2010 01 28 gettyying Comments (0)

RGB 转化为十六进制

function zero_fill_hex(num, digits) {
  var s = num.toString(16);
  while (s.length < digits)
    s = "0" + s;
  return s;
}

function rgb2hex(rgb) {

  if (rgb.charAt(0) == '#')
    return rgb;
  var n = Number(rgb);
  var ds = rgb.split(/\D+/);
  var decimal = Number(ds[1]) * 65536 + Number(ds[2]) * 256 + Number(ds[3]);
  return "#" + zero_fill_hex(decimal, 6);
}
rgb2hex('rgb(255, 255, 255)');

Tagged Javascript

2010 01 09 gettyying Comments (0)

颜色拾取器

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>颜色选择器</title>
<style type="text/css">
body{
  text-align:center;
}
</style>
</head>
<body>
<p>
<script type="text/javascript" language="javascript">
<!--
var ColorHex = Array('00','33','66','99','CC','FF')
var SpColorHex = new Array('FF0000','00FF00','0000FF','FFFF00','00FFFF','FF00FF')
var current = null;
var select_opener = '';
function initcolor(evt) {
  var colorTable=''
  for (i=0;i<2;i++) {
    for (j=0;j<6;j++) {
      colorTable=colorTable+'<tr height=15>'
      colorTable=colorTable+'<td width=15 style="background-color:#000000">'
      if (i==0){
        colorTable=colorTable+'<td width=15 style="cursor:pointer;background-color:#'+ColorHex[j]+ColorHex[j]+ColorHex[j]+'" onclick="doclick(this.style.backgroundColor)">'}
      else{
        colorTable=colorTable+'<td width=15 style="cursor:pointer;background-color:#'+SpColorHex[j]+'" onclick="doclick(this.style.backgroundColor)">'}
      colorTable=colorTable+'<td width=15 style="background-color:#000000">'
      for (k=0;k<3;k++) {
        for (l=0;l<6;l++) {
          colorTable=colorTable+'<td width=15 style="cursor:pointer;background-color:#'+ColorHex[k+i*3]+ColorHex[l]+ColorHex[j]+'" onclick="doclick(this.style.backgroundColor)">'
        }
      }
    }
  }
  colorTable='<table border="0" cellspacing="0" cellpadding="0" style="border:1px #000000 solid;border-bottom:none;border-collapse: collapse;width:337px;" bordercolor="000000">'
  +'<tr height=20><td colspan=21 bgcolor=#ffffff style="font:12px tahoma;padding-left:2px;">'
  +'<span style="float:left;color:#999999;"></span>'
  +'<span style="float:right;padding-right:3px;cursor:pointer;" onclick="colorclose()">×关闭</span>'
  +'</td></table>'
  +'<table border="1" cellspacing="0" cellpadding="0" style="border-collapse: collapse" bordercolor="000000" style="cursor:pointer;">'
  +colorTable+'</table>';
  document.getElementById("colorpane").innerHTML=colorTable;
  var current_x = document.getElementById(select_opener).offsetLeft;
  var current_y = document.getElementById(select_opener).offsetTop;

  document.getElementById("colorpane").style.left = current_x + "px";
  document.getElementById("colorpane").style.top = current_y + "px";
}
function doclick(obj){
  document.getElementById(select_opener).value = rgb2hex(obj);
  colorclose();
}
function colorclose(){
  document.getElementById("colorpane").style.display = "none";
}
function coloropen(event, opener){
  document.getElementById("colorpane").style.display = "";
  select_opener = opener;
}

//转到固定长度的十六进制字符串，不够则补0
function zero_fill_hex(num, digits) {
  var s = num.toString(16);
  while (s.length < digits)
    s = "0" + s;
  return s;
}

function rgb2hex(rgb) {

  if (rgb.charAt(0) == '#')
    return rgb;
  var n = Number(rgb);
  var ds = rgb.split(/\D+/);
  var decimal = Number(ds[1]) * 65536 + Number(ds[2]) * 256 + Number(ds[3]);
  return "#" + zero_fill_hex(decimal, 6);
}
window.onload = initcolor;
</script>
</p>
<p> </p>
<p> </p>
<p> </p>
<p>
<input type="text" value="颜色选择" onclick="coloropen(event, 'inputcolor')" id="inputcolor" />
</p>
<p> </p>
<div id="colorpane" style="position:absolute;z-index:999;display:none;"></div>
</body>
</html>

Tagged Javascript

2010 01 09 gettyying Comments (0)

hoverIntent 鼠标事件插件

hoverIntent jQuery Plugin

Tagged Javascript, jQuery, Plugin

2009 12 28 gettyying jQuery
Plugin Comments (3)

生活在別處

{ Category Archives } Javascript

jQuery Tab

跳出.each()

jQuery 表格插件汇总

JavaScript 全半角转换

得到月份天数

Closure Tools：Google的javascript库

IE6下设置透明背景函数

RGB 转化为十六进制

颜色拾取器

hoverIntent 鼠标事件插件

Categories

RECENT POSTS

RECENT COMMENTS

遥远的梦

{ Category Archives } Javascript

Categories

TAG CLOUD

RECENT POSTS

RECENT COMMENTS

遥远的梦