散人笔记 » kos

js实现表格行间隔效果（鼠标停留位置及当前行和选择行效果）

kos — Sun, 22 Aug 2010 07:13:58 +0000

　　表格对于大家来说，并不陌生。为在更好的表达表格里面的数据，或许我们要对表格进行处理，很多情况下，我们只对表格进行了头部和列表做个样式的处理，似乎看起来并不直观，但由于程序和灵活性，要在每一行上加上样式，似乎做模版文件的时候并做不到，只有在程序里面做判断，这样对程序增加麻烦，在套程序的时候会增加很多工作，所以这里简单介绍一下用js来对表格体的每行进行处理，看看下面的例子：



CODE
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<style>
<!--
#tableCov{ background:#666}
#tableCov th,#tableCov td{line-height:22px; height:22px; font-size:12px;}
#tableCov th{ background:#CF6}
.dTr{ background:#9FC}
.cTr{ background:#FFF}
.lastTd{ background:#C96;}
.trOver{ background:#09F}
-->
</style>
<script>
<!--
function setTableCovStyle(){
    var obj = document.getElementById("tableCov");
    for(i=0;i<obj.rows.length;i++){
        if(i%2==0){
            obj.rows[i].className = 'dTr';
            }
        else{
            obj.rows[i].className = 'cTr';
            }
        }
    obj.rows[0].className = 'tHead';
    }
window.onload = setTableCovStyle;
function setLastTdStyle(obj){
    var setRow = obj.parentNode.parentNode;
    if(obj.checked){
        setRow.cells[setRow.cells.length-1].className = "lastTd";
        }
    else{
        setRow.cells[setRow.cells.length-1].className = '';
        }
    }
var bakStyle;
function trOver(obj){
    bakStyle = obj.className;
    obj.className = 'trOver';
    }

function trOut(obj){
    obj.className = bakStyle;
    }
-->
</script>
</head>
<body>
<table width="100%" border="0" cellpadding="0" cellspacing="1" id="tableCov">
    <tr>
        <th>choose</th>
        <th>Title</th>
        <th>Content</th>
        <th>Datetime</th>
        <th>Operation</th>
    </tr>
    <tr onMouseOver="trOver(this)" onMouseOut="trOut(this)">
        <td align="center"><input type="checkbox" name="checkbox2" id="checkbox2" onClick="setLastTdStyle(this)"></td>
        <td>1111</td>
        <td>1111111111111111111111111111...</td>
        <td>2010-01-01</td>
        <td align="center">del</td>
    </tr>
    <tr onMouseOver="trOver(this)" onMouseOut="trOut(this)">
        <td align="center"><input type="checkbox" name="checkbox3" id="checkbox3" onClick="setLastTdStyle(this)"></td>
        <td>2222</td>
        <td>22222222222222222222222222222222222222...</td>
        <td>2010-01-01</td>
        <td align="center">del</td>
    </tr>
    <tr onMouseOver="trOver(this)" onMouseOut="trOut(this)">
        <td align="center"><input type="checkbox" name="checkbox4" id="checkbox4" onClick="setLastTdStyle(this)"></td>
        <td>3333</td>
        <td>33333333333333333333333333...</td>
        <td>2010-01-01</td>
        <td align="center">del</td>
    </tr>
    <tr onMouseOver="trOver(this)" onMouseOut="trOut(this)">
        <td align="center"><input type="checkbox" name="checkbox5" id="checkbox5" onClick="setLastTdStyle(this)"></td>
        <td>4444</td>
        <td>4444444444444444444444444444444444...</td>
        <td>2010-01-01</td>
        <td align="center">del</td>
    </tr>
</table>
</body>
</html>




 [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

常用的通讯录或好友分组应用

kos — Thu, 19 Aug 2010 03:33:35 +0000

　　分组应用应该说是个比较常用的功能，由于工作需要，写了一个分组设置的应用，就是把一个组的成员放到另一个组里面去，应用options.add方法把新的成员加到下拉菜单的列表中去，取option的值和内容时要注意，分别表示为：“对象[位].text”和“对象[位].value”，看下面的例子：



CODE
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<style>
<!--
td{ padding:5px; font-size:12px;}
select{ width:100%; height:200px; margin:0px;}
input{ width:40px; margin:1px;}
-->
</style>
<script>
<!--
function toGoalSin(){
    var primGroup = document.getElementById("primGroup");
    var goalGroup = document.getElementById("goalGroup");
    for(i=primGroup.options.length-1;i>=0;i--){
        if (primGroup.options[i].selected){
            adddata(goalGroup,primGroup[i].text,primGroup[i].value);
            primGroup[i]=null;
            }
        }
    }

function toGoalAll(){
    var primGroup = document.getElementById("primGroup");
    var goalGroup = document.getElementById("goalGroup");
    for(i=primGroup.options.length-1;i>=0;i--){
        adddata(goalGroup,primGroup[i].text,primGroup[i].value);
        primGroup[i]=null;
        }
    }

function toPrimAll(){
    var primGroup = document.getElementById("primGroup");
    var goalGroup = document.getElementById("goalGroup");
    for(i=goalGroup.options.length-1;i>=0;i--){
        adddata(primGroup,goalGroup[i].text,goalGroup[i].value);
        goalGroup[i]=null;
        }
    }

function toPrimSin(){
    var primGroup = document.getElementById("primGroup");
    var goalGroup = document.getElementById("goalGroup");
        for(i=goalGroup.options.length-1;i>=0;i--){
            if(goalGroup.options[i].selected){
            adddata(primGroup,goalGroup[i].text,goalGroup[i].value);
            goalGroup[i]=null;
            }
        }
    }

function adddata(obj,a,b){
    var list = new Option(a,b);
    obj.options.add(list);
    }
-->
</script>
</head><body>
<table border="0" cellspacing="1" cellpadding="0" bgcolor="#009999">
    <tr>
        <td width="150" align="center" bgcolor="#99CC66">原始组</td>
        <td width="50" align="center" bgcolor="#99CC66"> </td>
        <td width="150" align="center" bgcolor="#99CC66">目标组</td>
    </tr>
    <tr>
        <td align="center" bgcolor="#FFFFFF"><select name="select" multiple id="primGroup">
        <option value="1">张三</option>
        <option value="2">李四</option>
        <option value="3">王五</option>
        <option value="4">赵六</option>
        <option value="5">孙七</option>
        <option value="6">刘八</option>
        </select></td>
        <td align="center" bgcolor="#FFFFFF"><input type="submit" name="button" id="button" value=">" onClick="toGoalSin()">
        <br>
        <input type="submit" name="button2" id="button2" value=">>" onClick="toGoalAll()">
        <br>
        <input type="submit" name="button3" id="button3" value="<<" onClick="toPrimAll()">
        <br>
        <input type="submit" name="button4" id="button4" value="<" onClick="toPrimSin()"></td>
        <td align="center" bgcolor="#FFFFFF"><select name="select" multiple id="goalGroup">
        </select></td>
    </tr>
</table>
</body>
</html>




 [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

一款常用的导航样式（选项卡）

kos — Wed, 14 Jul 2010 02:43:28 +0000

　　在浏览网站的时候，阅读网站上的很多分类文章，类似IE8的单窗口模式，很受网路人员的喜爱，其实实现原理很简单，由于好久没发文章了，本人先发一篇灌水性文章，虽然实用性很强，但技术实现那是相当简单，简单介绍一下：里面抓住两个知识点：
　　一、关于层的相对定位；
　　二、对于传递this关键字存在于数组中的位置；
　　看看下面的代码吧：



CODE

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<style>
<!--
body{padding:0px; margin:10px;}
*{ font-size:12px;}
.cHead{ height:26px; line-height:26px; padding-left:4px;}
.cHead li{ float:left; display:inline; margin-left:-1px; position:relative; padding-left:4px; padding-right:4px; cursor:pointer;}
.cMenuon{ background:#FFF; border:1px #3C9 solid; height:27px; border-bottom:0px; line-height:27px; margin-bottom:-1px;}
.cMenuout{ background:#EBEBEB; border:1px #3C9 solid; height:24px; border-bottom:0px; line-height:24px; margin-top:2px;}
.cBody{ border:1px #3C9 solid;}
-->
</style>
<script>
<!--
function setMenuStyle(obj){
    var j;
    var cBody = document.getElementById("cBody");
    var cMenus = obj.parentNode.getElementsByTagName('li');
    for(i=0;i<cMenus.length;i++){
        cMenus[i].className = 'cMenuout';
        cBody.rows[i].cells[0].style.display = 'none';
        if(obj == cMenus[i]){
            j = i;
            }
   		}
    obj.className = 'cMenuon';
    cBody.rows[j].cells[0].style.display = 'block';
    }
-->
</script>
</head>
<body>
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td height="26" class="cHead">
            <li class="cMenuon" onClick="setMenuStyle(this)">功能导航一</li>
            <li class="cMenuout" onClick="setMenuStyle(this)">功能导航二</li>
            <li class="cMenuout" onClick="setMenuStyle(this)">功能导航三</li>
        </td>
    </tr>
    <tr>
        <td align="left" valign="top" class="cBody">
        <table width="100%" border="0" cellspacing="0" cellpadding="0" id="cBody">
            <tr>
                <td style="display:block">
                <div style="margin:0 auto; text-align:center">
                    <p style="font-size:24px; font-weight:bold;">无法连接到服务器，请检查网络</p>
                    <p>点击<span style="color:#F00; text-decoration:underline; cursor:pointer">[刷新]</span>尝试重新链接</p>
                </div>
                </td>
            </tr>
            <tr>
                <td style="display:none">
                <div style="margin:0 auto; text-align:center">
                    <p style="font-size:24px; font-weight:bold;">对不起，你访问的页面不存在</p>
                    <p>请确认你输入的地址是否正确</p>
                </div>
<br />
                </td>
            </tr>
            <tr>
                <td style="display:none">
                <div style="margin:0 auto; text-align:center">
                    <p style="font-size:24px; font-weight:bold;">对不起，此网页已过期</p>
                </div>
                </td>
<br />
            </tr>
        </table>
        </td>
    </tr>
</table>
</body>
</html>




[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

一款图片轮换效果

kos — Sun, 23 May 2010 17:24:48 +0000

　　给大家分享一款图片的轮换效果，其实通过这个例子，你可以自己稍加点改动，就可以做出另外很多的效果的，先简单介绍一下构思：在图片轮换的时候，让前一张左移，同时让接下来展示的那一张右移，各移动一半的时候，两张图片就反方向移动，只是前一张变到后面，后一张变到前面了。实现原理看一下代码就明白了，如果你想做成其它效果，只需要改变js里面的移动方法就行了，比如把移动效果换成透明效果等。
　　看下面的例子吧：



CODE
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>picmove</title>
<link type="text/css" rel="stylesheet" href="http://www.uideas.cn/download/20100524.css">
<script language="javascript" type="text/javascript" src="http://www.uideas.cn/download/20100524.js"></script>
</head>
<body>
<div id="picScroll">
	<div class="picCov">
		<div id="picB">
			<a href=""></a>
		</div>
		<div id="picF">
			<a href=""></a>
		</div>
		<div id="picNumBg"></div>
		<div id="picNameBg"></div>
		<div id="picName"><a href=""></a></div>
		<div id="picNum">
			<div id="picCount"></div>
		</div>
		<div id="picStr" style="display:none;">
			<a href="#" title="累么"></a>
			<a href="#" title="酷么"></a>
			<a href="#" title="背影"></a>
			<a href="#" title="帅么"></a>
			<a href="#" title="秀么"></a>
			<a href="#" title="疯了"></a>
		</div>
	</div>
</div>
</body>
</html>




[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

相关下载：
　　完整演示实例下载：20100524.rar

一款网站公告滚动效果

kos — Thu, 20 May 2010 12:07:29 +0000

　　通常很多网页由于内容太多，使页面的高度拉伸非常严重，会给游客浏览网页的时候带来很多麻烦和时间上的浪费，对于有些内容，看似很重要，但又不能占页面太大空间而影响页面的美观性，而只需要一小块也能将其展现出来，下面介绍一款滚动的例子。

　　通常网站公告可以划分为上面提到的这一类，使用滚动效果又能使其内容独特化，很容易引入游客眼目，同时战胜空间比较小，相对与普通的marquee移动来讲，此移动效果不会出现一片空白区域，是连续滚动的，看完下面的例子效果后，将其稍加变化，你就可以做成图片滚动，类似flash的效果了。



CODE
<html>
<head>
<style type="text/css" media="screen">
#mBox{height:24px;overflow:hidden; border:1px #99CC99 solid; background:#FFFFCC}
#mBox #marquee{ padding-left:6px;}
#mBox #marquee ul{ list-style-type:none; margin:0px; padding:0px;}
#mBox #marquee ul li{ line-height:24px; height:24px; list-style-type:none; margin:0px; padding:0px; font-size:12px;}
</style>
<script language="javascript" type="text/javascript">
var play = false;
var lineheight = 24;
var speed = 20;
var relay = 3000;
var obj;
var action;
function startmarquee(){
	obj = document.getElementById("marquee");
	obj.innerHTML += obj.innerHTML;
	obj.style.marginTop = 0;
	obj.onmouseover = function(){play = true;};
	obj.onmouseout = function(){play = false;};
	setTimeout(start,relay);
	}
function scrolling(){
	if(parseInt(obj.style.marginTop)%lineheight != 0){
		obj.style.marginTop = parseInt(obj.style.marginTop)-1+"px";
		if(Math.abs(parseInt(obj.style.marginTop)) >= obj.offsetHeight/2){
			obj.style.marginTop = 0;
			}
		}
	else{
		clearInterval(action);
		setTimeout(start,relay);
		}
	}
function start(){
	obj.style.height = obj.offsetHeight;
	action = setInterval(scrolling,speed);
	if(!play){
		obj.style.marginTop = parseInt(obj.style.marginTop)-1+"px";
		}
	}
window.onload = startmarquee;
</script>
</head>
<body>
<div div id="mBox">
<div id="marquee">
<ul>
<li><a href="#" target=_blank>文章标题一</a></li>
<li><a href="#" target=_blank>文章标题二</a></li>
<li><a href="#" target=_blank>文章标题三</a></li>
<li><a href="#" target=_blank>文章标题四</a></li>
<li><a href="#" target=_blank>文章标题五</a></li>
<li><a href="#" target=_blank>文章标题六</a></li>
</ul>
</div>
</div>
</body>
</html>
 




[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

一款灵活性很强的日历代码

kos — Mon, 19 Apr 2010 08:56:59 +0000

　　工作之余，因个人对js的爱好，写了一款日历，综合了以往工作中遇到的与日历选择相关的很多功能。由于个人技能欠缺，可能会有一些地方处理得不够好，有意一起研究者可以与本人联系，把这个日历做得更好，声明一下：此日历着重点在功能上，而不在特殊效果上，为了让此代码更为简洁，代码量更小，无须加任务特效。
　　下面做点简单的介绍：

注意：1、调用js时在区域引用Calendar/Calendar.js和Calendarcov.css即可。
　　　2、记住要把images同时放到相应的文件夹下面

二、日历皮肤更换
　　支持自定义皮肤，本日历已给出两套模版，自己制作皮肤时可以对照demo.html模版中的class进行制作
　　制作好的皮肤存放目录要注意，自定义一个皮肤文件夹（如已有的[demo]）放到[style]文件夹里面，然后把你要用到的图片放到你的皮肤文件夹里面的[images]文件夹里面，css样式文件命名为Calendarstyle.css与[images]文件夹同级。

　　css样式说明：
　　#calendarCov .calenCovbody：弹出层的总体框架样式，主要设置主题背景颜色
　　#calendarCov .calenCov：弹出层的总体框架样式，设置头部边框
　　#calendarCov .calenTitle：顶部年月样式和总体背景图片样式
　　#calendarCov a;#calendarCov td：通用样式
　　#calendarCov th：周的单元格样式
　　#calendarCov .calenHead：周所在行的样式：主要设置背景
　　#calendarCov .calenYlast：上一年的按钮样式
　　#calendarCov .calenMlast：上一月的按钮样式
　　#calendarCov .calenYnext：下一年的按钮样式
　　#calendarCov .calenMnext：下一月的按钮样式
　　#calendarCov .calenBody：日历体的样式，主要设置层次感
　　#calendarCov .calenBodyCov：日历体的样式，主要设置层次感和边框
　　#calendarCov .calenday td：日期单元格样式
　　#calendarCov .calenday td a：当月存在日期单元格样式
　　#calendarCov .calenday td a:hover:当月存在日期单元格鼠标指向样式
　　#calendarCov .calenday .weekend：日期单元格周末样式
　　#calendarCov .calenday .weekday：日期单元格非周末样式
　　#calendarCov .calenday .weeknull：空白日期单元格样式
　　#calendarCov .calenday .current默认日期样式，主要设置边框和背景
　　#calendarCov .calenday .current a默认日期样式，主要设置字体颜色
　　#calendarCov .calenButton：日历下面部分三个按钮样式，主要设置与日历体间距
　　#calendarCov .calenButton div：日历下面部分三个按钮样式，主要设置按钮背景#calendarCov .calenButton div a：日历下部分三个按钮样式，主要设置按钮字体
　　calenSetnull：清空按钮样式
　　calenSetoday：今天按钮样式
　　calenClosefl：确定按钮样式

三、调用格式
　　先举几个例子：

1、普通调用
　　
　　用onFocus方法调用是为了方便使用键盘获取焦点，showCalendarControl()是执行的方法，传递的this是当前对象，要把选择的日期返回给当前对象所以需要传递当前获取焦点的对象，readonly表明此控件为只读，用户不能手动输入，此日历为了方便使用，所以限制做得很少，同时为了不让用户手动输入不合法的日期格式，所以最好把控件设置成不能手动输入状态；

2、有样式的调用
　　
　　demo就是你要调用的样式文件夹，注意格式’class:demo’,必须在demo前加是class:，然后用单引号引起来，并且与this用逗号隔开，并且要注意顺序：this参数放到前面，以后的每个方法传递参数时都是this放到最前面，其余的可以颠倒；

3、限定日期调用
　　
　　minDate:2010-01-01的意思是设定当前对象选择的最小时间值是2010年01月01日，注意年月日要用‘-’号连接，若要设定最大值，则用maxDate:datevalue，这里的datevalue就是你想设定的日期值了。如果设定最大值或最小值为今天，则表达为showCalendarControl(this,’minDate:#today’)或showCalendarControl(this,’maxDate:#today’)；

4、限定日期同时并有天数限定
　　
　　这里的minDate:#today(d:20)的意思是最小值比今天大20天，若要设定最小值比今天小20天则表达示为minDate:#today(d:-20),d表示设定的限定为天数，同理，年:y,月:m；

5、限定日期与其它控件日期做对比
　　
　　
　　用法是第4个例子差不多，不同的是today前面加了个#，（即#today和date1的区别而已），同时两个日期还可以做想到限制，使得关系更为紧密；

6、同时限定最大值的最小值
　　
　　 ‘^’这个符号是用来连接最大值和最小值的，这里的minDate和maxDate限定可以互换位置，但不要忘了打‘^’这个符号，这句话的意思是选定的日期范围为从过去20天到未来20天内；

7、同时有日期限定也有样式控制
　　
　　这时传递的参数有三个，第一个是当前对象，第二个是日期的限定，大于等于今天，第三上是引用样式，注意this必须放到第一个参数，后面两个参数可以互换位置，即上面这个调用与对等，注意引用样式也要用引号引起来；

8、更多灵活的调用方法尽在你的不自不觉发现中，同时期待你的宝贵意见

四：声明
　　1、此日历可能会出现一些异常情况，若要实际用此日历请多加调试，只是小弟反复测试暂时还没出现异常情况
　　2、为尊重小弟劳动成果，转载请注明来源，同时方便因我更新后能得到最新文件
　　3、此日历不含任务广告和恶意代码，若调试没有bug可以大胆使用
　　4、为了让大家得到更详细的介绍，请通过博客留言和E-mail方式与本人联系，小弟会尽快给予回复。

相关下载：
　　完整版附带调用实例下载：Koscalendar.rar
　　演示地址：查看演示样例

我爱我的散人笔记

kos — Wed, 14 Apr 2010 07:39:28 +0000

　　绸缪已久的《散人笔记》总算是走上路了，可以说这个计划是悠久的，行动是缓慢的，结果是自我感觉的。
换了一种风格，仿佛换来了一次新生，换的也是一种对生活的态度，对过去不知道说什么，但是对未来却抱有希望，没有真正的世界末日，只是自己心里有鬼，没有真正的现实残酷，只是自己总在埋怨，同时也没有真正的希望神灯，而需要自己去创造……

走大了，写成励志类了，第一次把心情写到博客上感觉还真有点不一样，走着呗！那就多点废话了：

在此感谢一直以来关注《友意》的人，同时期待你继续关注《散人笔记》
　　感谢互联网，让我学到不少东西，同时也让网路朋友分享我的成果
　　感谢wordpress……

小弟一定竭尽所能把更广，更好，更适用的东西与大家分享！

口号喊起来：“生活来源于创意，所以我懂生活！”