WeiBing

    这几天一直再搞界面设计，主要是css和一些逻辑功能，还有就是改善blog的界面。由于css学了没多少天，看css的代码一点感觉都没有。找了个TopStyle，希望能即写即修改，很可惜，只能看一下大概的盒子模型，没意思。特别是改blog的css时，重新发布、刷新、修改...烦死了，网速又慢，绝对浪费时间！

    Firefox原来就有个功能很实用的功能：查看选中部分源代码，但它不是今天的主角。但两者相距很近，就在查看选中部分源代码下面的Web Developer。人人都说，网站开发人员必备的冬冬，果然不虚。从cookie到css，包含了大量web开发的调试选项。

    回归主题，现在要看的就是css里的Edit CSS(Ctrl+Shift+E),点击后左边就是当前网页所链接的css文件。如图：

现在想怎么改就怎么改，改好后覆盖原来的css文件就完成任务了。如果你还没下载使用Firefox，现在就试试吧。

左边有链接，点击下载，安装完后直接在地址栏输入web developer就OK啦...

   在网上苦苦寻觅YUI(Yahoo! UI Library)的例子，终不得果，只有些许蛛丝马迹。一是linux公社的一篇 [分享]已经投入使用的Toolkit ，列了一段yahoo新首页图片框所使用的代码。为什么不去看看yahoo怎么用呢？可能因为它太大了，暂时不想或不愿去看，功夫未到加呀...

二是geeklog2的一个更新log，包含两个js文件，在docs文档和build目录里都没有这两个文件。第一个文件比较有用，定义几个PhotoBox(图片框)的方法，拥有折叠，展开等效果。再查查yahoo的网站，也不见有这些介绍。奇了，难道是收藏品？

    再找，功夫不服有心人啊，原理宝藏就在脚下，在YUI的example的一些js目录下。一直都在看那几个例子的源代码，却没有发现那些js,汗！autocomplete,calendar,container,dragdrop,slider和treeview目录下都有例子的js文件，实在太感谢yahoo了，马上去研究......

一时大意，被几个HTML代码折腾了一个下午...

下面是我一个弹出框的小代码：

<div id="report">
 <div class="hd" id="report_header">请输入举报内容</div>
 <div class="bd">
  <form name="reportForm" method="POST" action="?controller=Report&action=create">
   <p>举报内容：</p>
   <textarea name="body" id="report_body" cols="40" rows="8" ></textarea>
   <input type="hidden" name="item_id" id="item_id" value="">
  </form>
 </div>
</div>

    原本我想当输入为空时，将header改为 '你输入的举报内容为空，请输入举报内容'。于是有了以下代码：

var handleSubmit = function() {
 if(document.getElementById("report_body").value == '') {
 document.getElementById("report_header").value ='你输入的举报内容为空，请输入举报内容';
 return false;
 }
 this.submit();
}

但怎么试也没成功，用YUI的setHeader却可以，暂时敷衍了事...

    很久很久以后(故事发生在昨天),下午由于要加一段清空提示的代码，才发现这个问题：头部内容还是无法更改，查Module.js的代码，查文档都没有发现有价值的地方。最终还是仔细检查上面两段代码，才发现一个十分可笑的地方。见红色的value,那可不是输入框啊，晕！改为innerHTML后一切如我所愿...

再次耗费一个小时，发现YAHOO.util.Dom.setStyle无论如何都无法在我的代码中生效

YAHOO.util.Dom.setStyle= ("div", "width", "100px")；
YAHOO.util.Dom.setStyle= ("div", "display", "none")； 
YAHOO.util.Dom.setStyle= ("item", "display", "none")；
YAHOO.util.Dom.setStyle= ("div", "background-color", "red")；
................................ 

在网上看到别人这样写

YAHOO.util.Dom.setStyle(["div1","div2","div3"], "color","red"); 
YAHOO.util.Dom.setStyle(objDiv, 'height',t); 

YUI里的代码这样写

DOM.setStyle(del, "visibility", ""); 
DOM.setStyle(lel, "visibility", "hidden");

 我就是无法成功...

可怜我现在的 toggle() 要写成这样了

function toggle(obj) {
 var el = document.getElementById(obj);
 if ( YAHOO.util.Dom.getStyle(obj,'visibility') != 'hidden' ) {
  el.style.visibility='hidden';
 }
 else {
  el.style.visibility = 'visible';
 }
}

    小小的一个代码框，竟耗时2.x小时,只怪自己技术不好...

同时，blogbus也要负相应的责任，因为他的编辑框太差...

下面为代码框测试：

    小小的一个代码框，竟耗时2.x小时,只怪自己技术不好...
同时，blogbus也要负相应的责任，因为他的编辑框太差...

    早上用了dustindiaz的toggle() ，发现el.style.display 的取值不正常....

原来除了内联的css外，不能直接这样取值，IE下可以用currentStyle顶替，firefox下就要通过document.defaultView.getComputedStyle(xxxl).getPropertyValue(xxx) 来取值，十分不方便，上网傻找了一通，无果....

    很幸运的是，YUI的DOM里面就内置了一个getStyle函数，可以直接取当前css的值。部分代码如下：

if (property == 'opacity' && el.filters) {// IE opacity
    value = 1;
    try {
       value = el.filters.item('DXImageTransform.Microsoft.Alpha').opacity / 100;
    } catch(e) {
       try {
          value = el.filters.item('alpha').opacity / 100;
       } catch(e) {}
    }
 } else if (el.style[camel]) { // camelCase for valid styles
    value = el.style[camel];
 }
 else if (isIE && el.currentStyle && el.currentStyle[camel]) { // camelCase for currentStyle; isIE to workaround broken Opera 9 currentStyle
    value = el.currentStyle[camel];
 }
 else if ( dv && dv.getComputedStyle ) { // hyphen-case for computedStyle
    var computed = dv.getComputedStyle(el, '');
    
    if (computed && computed.getPropertyValue(hyphen)) {
       value = computed.getPropertyValue(hyphen);
    }
}

现在修改一下toggle() ，

function toggle(obj) {
 var el = YAHOO.util.Dom.getStyle(obj, "visibility");
 if ( el != 'hidden' ) {
  YAHOO.util.Dom.setStyle(obj, "visibility", "hidden");
 }
 else {
  YAHOO.util.Dom.setStyle= (obj, "visibility", "visible"); }
}

搞定！现在效率虽然是相对差了些，不过方便易用多了^-^

如果不喜欢YUI，还有另外一个通用函数：

function GetCurrentStyle (obj, prop) {
	if (obj.currentStyle) {
		return obj.currentStyle[prop];
	}
	else if (window.getComputedStyle) {
		prop = prop.replace (/([A-Z])/g, "-$1");
		prop = prop.toLowerCase ();
		return window.getComputedStyle (obj, "").getPropertyValue(prop);
	}
	return null;
}

接上篇，还附一个美元$ 函数 ...来自Prototype...

<确实厉害，不仅能取某一元素，还能去一堆的元素>

Last but not least, a bonus function: The Prototype Dollar Function

function $() {
	var elements = new Array();
	for (var i = 0; i < arguments.length; i++) {
		var element = arguments[i];
		if (typeof element == 'string')
			element = document.getElementById(element);
		if (arguments.length == 1)
			return element;
		elements.push(element);
	}
	return elements;
}

// Sample Usage:
var obj1 = document.getElementById('element1');
var obj2 = document.getElementById('element2');
function alertElements() {
  var i;
  var elements = $('a','b','c',obj1,obj2,'d','e');
  for ( i=0;i

附一句,blogbus的编辑器太差，太难用了！！！

    dustindiaz好像是米国的牛人，搜索YUI时看到他的网站，尤其是看到他用YUI的DOM和EVENT编写的俄罗斯方块(YUI Tetris)时(据说只用了两天半时间)，那个牛，无法用现在的我来衡量^-^

    翻了他的一篇Top 10 custom JavaScript functions of all time，(十大常用js函数)觉得不错，以下是简略介绍：

10) addEvent() 给对象添加行为

function addEvent(elm, evType, fn, useCapture) {
	if (elm.addEventListener) {
		elm.addEventListener(evType, fn, useCapture);
		return true;
	}
	else if (elm.attachEvent) {
		var r = elm.attachEvent('on' + evType, fn);
		return r;
	}
	else {
		elm['on' + evType] = fn;
	}
}

9) addLoadEvent() 添加自动加载行为

function addLoadEvent(func) {
	var oldonload = window.onload;
	if (typeof window.onload != 'function') {
		window.onload = func;
	}
	else {
		window.onload = function() {
			oldonload();
			func();
		}
	}
}

8) getElementsByClass() 根据className获取对象

function getElementsByClass(searchClass,node,tag) {
	var classElements = new Array();
	if ( node == null )
		node = document;
	if ( tag == null )
		tag = '*';
	var els = node.getElementsByTagName(tag);
	var elsLen = els.length;
	var pattern = new RegExp('(^|\\s)'+searchClass+'(\\s|$)');
	for (i = 0, j = 0; i < elsLen; i++) {
		if ( pattern.test(els[i].className) ) {
			classElements[j] = els[i];
			j++;
		}
	}
	return classElements;
}

7) cssQuery() 查询对象的css属性

6) toggle() 显示或隐藏对象元素

function toggle(obj) {
	var el = document.getElementById(obj);
	if ( el.style.display != 'none' ) {
		el.style.display = 'none';
	}
	else {
		el.style.display = '';
	}
}

5) insertAfter() 将节点插入到某节点前

function insertAfter(parent, node, referenceNode) {
	parent.insertBefore(node, referenceNode.nextSibling);
}

4) inArray() 判断数组里是否具有某值

Array.prototype.inArray = function (value) {
	var i;
	for (i=0; i < this.length; i++) {
		if (this[i] === value) {
			return true;
		}
	}
	return false;
};

3, 2, & 1) getCookie(), setCookie(), deleteCookie() Cookie的读写设操作

function getCookie( name ) {
	var start = document.cookie.indexOf( name + "=" );
	var len = start + name.length + 1;
	if ( ( !start ) && ( name != document.cookie.substring( 0, name.length ) ) ) {
		return null;
	}
	if ( start == -1 ) return null;
	var end = document.cookie.indexOf( ';', len );
	if ( end == -1 ) end = document.cookie.length;
	return unescape( document.cookie.substring( len, end ) );
}

function setCookie( name, value, expires, path, domain, secure ) {
	var today = new Date();
	today.setTime( today.getTime() );
	if ( expires ) {
		expires = expires * 1000 * 60 * 60 * 24;
	}
	var expires_date = new Date( today.getTime() + (expires) );
	document.cookie = name+'='+escape( value ) +
		( ( expires ) ? ';expires='+expires_date.toGMTString() : '' ) + //expires.toGMTString()
		( ( path ) ? ';path=' + path : '' ) +
		( ( domain ) ? ';domain=' + domain : '' ) +
		( ( secure ) ? ';secure' : '' );
}

function deleteCookie( name, path, domain ) {
	if ( getCookie( name ) ) document.cookie = name + '=' +
			( ( path ) ? ';path=' + path : '') +
			( ( domain ) ? ';domain=' + domain : '' ) +
			';expires=Thu, 01-Jan-1970 00:00:01 GMT';
}

附代码链接 common.js

    一直程序都乖乖的显示中文，先前AJAX get 取得的数据乱码在php输出一个

header('Content-Type:text/html;charset=GB2312'); 搞定。

    今天因为要输入中文数据，post后的数据死活乱码。搜索一下，原来是xmlhttp提交的数据为utf-8编码。原本打算将程序都换成utf-8算了，但是找了很久，找到的软件都不是很好。如果真的转换，还要将数据库编码都要改，改动相当大。

    没办法，唯有放弃这种方法，只将输入的utf-8转换成gb2312算了，反正需要输入中文的地方不多（项目小……^-^)。将就一下，在需要的地方来一个

iconv("UTF-8", "GB2312", $_POST['submit']); 就行了...

    刚刚朋友打电话来求救，说他朋友的台式品牌机的光驱神了！能读DVD却不能读CD。第一次听到有这样的故障，一时还不能反应过来。据他说，已试了几个光盘，光驱为comble。一般品牌机不会用双光头的光驱，实在没办法，就叫他换一下数据线试试。

    也许，这光驱也快退休了...