飞启

自定义样式的radio控件

先看效果

在有些地方默认的radio效果已经不能满足很多交互需求

如果抛弃默认的radio控件又会丢失很多重要的属性,比如后退或者F5之后表单信息的存储.

利用label与input的对应关系,把radio隐藏,显示label标签

然后根据name属性利用js对表单分组处理

原理就是这样的

html代码:



	数码家电

	家有仙妻

	家有仙妻

	家有仙妻

	家有仙妻

	家有仙妻

	家有仙妻

	家有仙妻

	家有仙妻

	家有仙妻

	家有仙妻

	家有仙妻

CSS部分：

.form .tb-radio {
	display: none;
	width: 0;
	height: 0;
	margin: 0;
	padding: 0;
	position: absolute;
}
.form .tb-radio-label {
	line-height: 26px;
	height: 26px;
	border: 1px solid #ddd;
	display: inline-block;
	padding: 1px 17px;
	outline: none;
	cursor: pointer;
	margin-top: 15px;
}
.form .tb-radio-label.crt,
.form .tb-radio-label:hover,
.form .tb-radio-label.hover,
.form .tb-radio-label:focus {
	border: 2px solid #ff6600;
	line-height: 26px;
	*line-height: 27px;
	_line-height: 26px;
	height: 26px;
	padding: 0 16px;
	background-color: #eaeaea;
	outline: none;
}
.form .tb-radio-label.crt {
	background: url(images/sprites.png) no-repeat 100% -702px;
	background-color: #eaeaea;
}

JS部分：

			KISSY.ready(function(S){
				//代码开始
				var DOM = S.DOM,
					Event = S.Event;
				var TBRadioLabels = S.query('.J_Radio');
				//从checked状态中读取选择情况
				S.each(TBRadioLabels,function(i){
					var t_radio = getInputByLabel(i);
					if(t_radio.checked){
						DOM.addClass(i,'crt');
					}
				});

				//点击或者回车触发选择
				Event.on(TBRadioLabels,'click keydown',function(ev){
					if(!S.isUndefined(ev.keyCode) && ev.keyCode != 13 && ev.keyCode != 0) return ;
					var radioGroup = DOM.attr(getInputByLabel(ev.currentTarget),'name');
					S.each(TBRadioLabels,function(i){
						if(DOM.attr(getInputByLabel(i),'name') === radioGroup){
							DOM.removeClass(i,'crt');
						}
					});
					getInputByLabel(ev.currentTarget).checked = true;
					DOM.addClass(ev.currentTarget,'crt');
				});
			//通过label获取对应的input
			function getInputByLabel(label){
				var inputId = '#'+DOM.attr(label,'for');
				return S.get(inputId);
			}

		});

附上demo:http://lansepink.appspot.com/media/aglsYW5zZXBpbmtyDQsSBU1lZGlhGJqJJAw/radio.htm

2011: 08/01
分类：: 前端
抢沙发

一种基于P2P的web服务器模型

云是有一个个的细微颗粒组成的，每个颗粒虽然是微小的，但是它们组合起来却可以遮天蔽日，具有强大的能力。

最近bitcoin的出现让我觉得基于p2p的web服务器应该也是可以实现的吧。以下是我个人的一些想法。

实现的效果

· 用户在安装客户端程序之后会自动与其他网络节点之间取得联系，获取一些必要的信息（这些信息待定）

· 用户在浏览器中输入127.0.0.1或者localhost即可访问这个基于p2p的网络服务器。（当然可以不使用80端口）

· 这个web服务器是一个平台，用户可以在上面创建自己的网站，比如搭建wordpress等等，使用的人越多该用户的网站获取的资源就越多。极端情况是如果这个人的服务只有他一个人使用那么他的数据不会扩散到P2P网络。

首先一个应用需要两个基本的东西

A、存储空间

B、运算资源（CPU资源）

每个用户就是一个网络节点，这点与P2P网络没有区别。（为了鼓励节点用户分享足够的资源，可以采用积分制度，甚至与bitcoin绑定。）

其次解决与传统服务器不同的结构

A、传统服务器控制权在网站站长手里，可以防止数据被恶意篡改，但是现在所有的数据要分布存储在不同的计算机物理存储设备中，怎样防止错误的信息扩散到P2P网络中。
我想到的是基本原则是让信息PK，假设正确的信息序列是ABCDEFG，而有人攻击网络将一部分节点的信息改为ABBDEFG了。

PK之后

只要错误的信息少于正确的冗余数量就可以消灭错误的信息。

B、数据存储的连续性，在传统硬盘上面文件存储的结构改变了，需要定义一种新的文件系统File System。用于解决数据查询。
（在这里可以解决文件缓存问题，比如web上面一些常用的静态文件可以直接存在用户节点，且竟可能少的存放用户不需要的资源。

C、 CPU资源的分散，需要网络自动将一些运算分解开，发布给节点CPU运算。

最后

还有很多一些细节的想法，但是自己对计算机底层不是很了解，比较喜欢生物的存在方式，相信世界的本源都是简单到极致的，不喜欢直接就创造一个庞然大物，喜欢用微小的元素组成一个有机体。

另外对现在的云计算走的道路不是很赞同，觉得不应该把所有的计算、存储集中在服务器，而是储存与计算都分散到每个用户。用户有需求自然产生云。

欢迎大家拍砖~

这个想法很早就有了，但是一直没有敢写出来，最近又看到一些BT的资料，觉得还是很可行的。

附上一些资料：

http://www.udpwork.com/item/5164.html

http://wenku.baidu.com/view/ee91580216fc700abb68fcae.html

2011: 06/04
分类：: 未分类
TAGS: 云
4 条评论

micolog反向代理后IP的获取

总所周知GAE的博客是需要反向代理的，否则只能翻墙访问了。

但是反向代理之后评论等等地方显示的ip都全部是反向代理服务器的ip了。

开工：

需要改两个文件：

blog.py

第一处：

self.remote_ip = ”
try:
    if self.remote_ip == ”:
        self.remote_ip = self.request.headers['x-forwarded-for']
    if self.remote_ip == ”:
        self.remote_ip = self.request.headers['Proxy-Client-IP']
    if self.remote_ip == ”:
        self.remote_ip = self.request.headers['WL-Proxy-Client-IP']
except:
    if self.remote_ip == ”:
        self.remote_ip = self.request.remote_addr

第二处：

第三处：

第四处：

第二个文件是rpc编辑的时候用的，可以不用修改。

api_rpc.py

注意：一定要小心空格或者是tab，micolog是采用的tab，如果采用空格来分隔会报错的。

2011: 03/23
分类：: blog设计
10 条评论

javascript中两种函数的创建方式差异

js中有两种创建函数的方式：

function testA(){……}
var testB = function(){……};

一、看代码：

testA();
testB();
function testA(){alert("I'm A!");}
var testB = function(){alert("I'm B!");};
//运行结果是只有A执行了
//原因是A的定义方式会javascript解析器提到最前面执行
//所以testA可执行，二testB还没定义

二、依然看代码：

//继续测试另一特性
alert(testA);
alert(testB);
//结果是输出了两个函数的源代码，相当于调用了toString方法
//不同的是ie的是直接输出，FF下会帮你排好版
//验证一下
alert(testA.toString());
alert(testB.toString());

这个不能算是差异，利用这个特性可以正则匹配来获取函数名。

三、好吧无耻的请大家继续看代码：

//继续验证另一个
alert(testA.name);
alert(testB.name);
//结果是FF,chrome支持函数的name属性，会返回testA,testB是空
//IE下都是undefined
//testA是一个有名字的函数，而testB则是一个引用，引用的一个匿名函数的内存地址

over。