Rekey's WebSpace

Just So So ...

Home Develop Life Music News 关于

类jQuery的东东

作者：Rekey 发布时间：August 28, 2009 分类：Develop

研究jQuery代码之后出现的东西。从jQuery里抠出来的。

javascript代码:

var $ = window.$ = function (elem){ return new $.fn.init(elem); };
$.fn = $.prototype = {
	init:function(elem){ this[0] = elem; return this; },
	setbg : function(color){
		var color = color?color:'#f00';
		this[0].style.background = color;
		return this;
	},
	setcolor : function(color){
		var color = color?color:'#fff';
		this[0].style.color = color;
		return this;
	}
};
$.fn.init.prototype = $.fn;

IE6模拟position:fixed效果

作者：Rekey 发布时间：August 28, 2009 分类：Develop

不会抖动，但是使用了expression，很糟糕。
纯保存。
源代码：

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
		<meta name="keywords" content="关键字" />
		<meta name="description" content="页面简介" />
		<meta name="generator" content="程序" />
		<meta name="author" content="作者[ReKey]" />
		<meta name="copyright" content="版权所有[ReKey]" />
		<meta name="MSSmartTagsPreventParsing" content="True" />
		<meta http-equiv="MSThemeCompatible" content="Yes" />
		<title>Untitled Document</title>
		<style type="text/css">
			body{margin:0;padding:5px 0 30px}
			.test{border:1px solid #ccc;line-height:100px;margin:0 5px 5px;}
			.fixed{position:fixed;bottom:0;left:15px;right:15px;height:30px;line-height:30px;background:#ccc;}
			#iefixed{zoom:1;margin:-1px 15px 0;height:1px;overflow:hidden;}
		</style>
		<!--[if lt IE 7]>
        <script type="text/javascript">
            function _fixBackground(){
				var body = document.body;
				var BLANK_GIF;
                if (body.currentStyle.backgroundAttachment != "fixed") {
                    if (body.currentStyle.backgroundImage == "none") {
                        body.runtimeStyle.backgroundImage = "url("+BLANK_GIF+")"; // dummy
						body.runtimeStyle.backgroundAttachment = "fixed";
                    }
                }
            }
			window.onload = function(){
				_fixBackground();
				}
        </script>
        <style type="text/css">
        	.fixed{position: absolute;
    		bottom:0;
    		clear: both;
			width:expression(document.getElementById('iefixed').clientWidth);
			left:expression(document.getElementById('iefixed').offsetLeft);
    		top:expression(eval(document.compatMode &&
        document.compatMode=='CSS1Compat') ?
        documentElement.scrollTop
        +(documentElement.clientHeight-this.clientHeight)
        : document.body.scrollTop
        +(document.body.clientHeight-this.clientHeight));}
        </style>
	< ![endif]-->
	</head>
	<body>
		<!--[if lt IE 7]><div id="iefixed"></div>< ![endif]-->
		<div class="test">增加高度的</div>
		<div class="test">增加高度的</div>
		<div class="test">增加高度的</div>
		<div class="test">增加高度的</div>
		<div class="test">增加高度的</div>
		<div class="test">增加高度的</div>
		<div class="test">增加高度的</div>
		<div class="test">增加高度的</div>
		<div class="test">增加高度的</div>
		<div class="test">增加高度的</div>
		<div class="test">增加高度的</div>
		<div class="test">增加高度的</div>
		<div class="test">增加高度的</div>
		<div class="fixed">这里是position:fixed部分.</div>
	</body>
</html>

纯CSS实现2个div等高

作者：Rekey 发布时间：August 28, 2009 分类：Develop

很简单的实现.利用div的边框来模拟另外一个div的背景.这样就能通过一个视觉差别让人感觉2个div等高

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title>纯CSS2列变态等高</title>
</head>
<div style="border-right:solid 180px #f00;zoom:1;background:#000;color:#fff">
    <div style="width:180px;float:right;position:relative;right:-180px;">
        右边的
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
    </div>
    左边的
    <div style="clear:both;height:0;overflow:hidden;">
    </div>
</div>

</html>

用class来控制的选项卡.支持N个同时在一个页面

作者：Rekey 发布时间：August 27, 2009 分类：Develop

不过好像要用的话要传递很多参数.不是很好.不过个人使用到是不错的选择.

<!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=utf-8" />
<title>无标题文档</title>
<link href="css/css.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
	function SetTab(id,tid,tag,ttag,cs,tcs){
		var a = document.getElementById(tid).getElementsByTagName(ttag);
		var b = document.getElementById(id).getElementsByTagName(tag);
		function tab(i){
			a[i].onclick = function(){none();b[i].style.display = "";a[i].className = cs};
		}
		for(i=0;i<a .length;i++){
			tab(i);
		}
		function none(){
			for(i=0;i<a.length;i++){
				b[i].style.display = "none";
				a[i].className = tcs;
			}
		}
		none();
		b[0].style.display = "";
		a[0].className = cs;
	}
	window.onload = function(){SetTab("tab","tab2","ul","li","abc","bcs")};
</script>
</a></script></head>
<body>
<ul id="tab2">
	<li>广告传播</li>
	<li>广告传播2</li>
	<li>广告传播3</li>
</ul>
<div id="tab">
    	<ul>
        	<li>
            	<img src="test_img.gif" />
                <h3><a href="">广告传播</a></h3>
                <span>几十年，媒体帮助传达了广告信息。广告牌带来了巨大醒目的广告形式，广播以平静对话的方式告诉你广告内容。而对于电视媒体，广告主可以利用的广告形式多种多样，但他们似乎总爱用30秒的广告...广告主可以利用的广告形可以利用.</span>
            </li>
        </ul>
		<ul>
        	<li>
            	<img src="test_img.gif" />
                <h3><a href="">广告传播2</a></h3>
                <span>几十年，媒体帮助传达了广告信息。广告牌带来了巨大醒目的广告形式，广播以平静对话的方式告诉你广告内容。而对于电视媒体，广告主可以利用的广告形式多种多样，但他们似乎总爱用30秒的广告...广告主可以利用的广告形可以利用.</span>
            </li>
        </ul>
		<ul>
        	<li>
            	<img src="test_img.gif" />
                <h3><a href="">广告传播3</a></h3>
                <span>几十年，媒体帮助传达了广告信息。广告牌带来了巨大醒目的广告形式，广播以平静对话的方式告诉你广告内容。而对于电视媒体，广告主可以利用的广告形式多种多样，但他们似乎总爱用30秒的广告...广告主可以利用的广告形可以利用.</span>
            </li>
        </ul>
</div>
</body>
</html>
    2. 1
    3. 2
    4. 3
    5. 4