之前写过一篇关于使用js实现全选的BLOG ，可以实现效果 但是是比较笨拙的方法
原文地址：http://www.dyphp.com/?p=316
下面这个方法是是作用jquery实现的效果，当然要选加载jquery.js才行
<script>
// 全选
$(document).ready(
$(“#cheAll”).toggle(
function(){
$(‘input[type="checkbox"]‘).each(function(){
$(this).attr(“checked”,true);
});
},
function(){
$(‘input[type="checkbox"]‘).each(function(){
$(this).attr(“checked”,false);
});
}
)
);
</script>
<input id=”delList_1″ name=”delList[]” type=”checkbox” value=”1″ />
<input id=”delList_2″ name=”delList[]” type=”checkbox” value=”2″ />
<input id=”delList_3″ name=”delList[]” type=”checkbox” value=”3″ />
<input id=”delList_4″ name=”delList[]” type=”checkbox” value=”4″ />
<input id=”delList_5″ name=”delList[]” type=”checkbox” value=”5″ />
History历史对象并有以下方法
back() 后退，跟按下“后退”键是等效的。
forward() 前进，跟按下“前进”键是等效的。
go() 用法：history.go(x)；在历史的范围内去到指定的一个地址。如果 x < 0，则后退 x 个地址，如果 x > 0，则前进 x 个地址，如果 x == 0，则刷新现在打开的网页。history.go(0) 跟 location.reload() 是等效的。
reload() 相当于按浏览器上的“刷新”(IE)或“Reload”(Netscape)键。
replace() 打开一个 URL，并取代历史对象中当前位置的地址。用这个方法打开一个 URL 后，按下浏览器的“后退”键将不能返回到刚才的页面。
<script language=”JavaScript”>
var whatsNew = open(”,’_blank’,'top=50,left=50,width=200,height=300,’ +
‘menubar=no,toolbar=no,directories=no,location=no,’ +
’status=no,resizable=no,scrollbars=yes’);
whatsNew.document.write(‘<center><b>新窗口</b></center>’);
whatsNew.document.write(‘<p>新窗口测试</p>’);
whatsNew.document.write(‘<p>测试信息</p>’);
whatsNew.document.write(‘<p align=”right”>’ +’<a href=”javascript:self.close()”>关闭窗口</a></p>’);
whatsNew.document.close();
</script>
不过现在多数浏览器不让弹出窗口，所以现在使用这种方法并不适合，兼容好一点还是自己用DIV写一个靠谱
<!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>DIV+CSS+JS制作滑动折叠的文字效果</title>
</head>
<style type=”text/css”>
<!–
body,div,ul,li,p,h1,h2{ margin:0; padding:0; border:0; background:#FAFAFA; font-family:Arial, Helvetica, sans-serif,”宋体”}
body{ text-align:center; font-size:12px}
li{ list-style:none}
.rolinList{ width:402px; height:auto; margin:20px auto 0 auto; text-align:left}
.rolinList li{margin-bottom:1px;border:1px solid #DADADA}
.rolinList li h2{ width:380px; height:40px; background:#fff; font-size:14px; line-height:40px; padding-left:20px; color:#333; cursor:pointer}
.content{ height:150px;width:400px; background:#fff; background:#FAFAFA}
.content p{ margin:12px}
–>
</style>
<script type=”text/javascript”>
//<![CDATA[
window.onload = function() {
rolinTab("rolin")
}
function rolinTab(obj) {
var list = $(obj).getElementsByTagName("LI");
var state = {show:false,hidden:false,showObj:false};
for (var i=0; i<list.length; i++) {
var tmp = new rolinItem(list[i],state);
if (i == 0) tmp.pShow();
}
}
function rolinItem(obj,state) {
var speed = 0.0666;
var range = 1;
var interval;
var tarH;
var tar = this;
var head = getFirstChild(obj);
var content = getNextChild(head);
var isOpen = false;
this.pHidden = function() {
if (isOpen) hidden();
}
this.pShow = show;
var baseH = content.offsetHeight;
content.style.display = “none”;
var isOpen = false;
head.onmouseover = function() {
this.style.background = “#EFEFEF”;
}
head.onmouseout = mouseout;
head.onclick = function() {
this.style.background = “#EFEFEF”;
if (!state.show && !state.hidden) {
if (!isOpen) {
head.onmouseout = null;
show();
} else {
hidden();
}
}
}
function mouseout() {
this.style.background = “#FFF”
}
function show() {
head.style.borderBottom = “1px solid #DADADA”;
state.show = true;
if (state.openObj && state.openObj != tar ) {
state.openObj.pHidden();
}
1.1 Form对象
现有问题：
现有代码这获得form对象通过document.forms(“formName”)，这样使用在IE 能接受，FF 不能。
解决方法：
改用 作为下标运算。改为document.forms["formName"]
备注
上述的改用 作为下标运算中的formName是id
1.2 HTML对象
现有问题：
在 IE 中，HTML 对象的 ID 可以作为 document 的下属对象变量名直接使用。在 FF 中不能。
document.all(“itemName”)或者document.all(“itemId”)
解决方法：
使用对象ID作为对象变量名
document.getElementById(“itemId”)
备注
document.all是IE自定义的方法，所以请大家尽量不使用。
还有一种方式，在IE和FF都可以使用
var f = document.forms["formName "];
var o = f. itemId;
1.3 DIV对象
现有问题：
在 IE 中，DIV对象可以使用ID作为对象变量名直接使用。在 FF 中不能。
DivId.style.display = “none”
解决方法：
document.getElementById(“DivId”).style.display = “none”
备注
获得对象的方法不管是不是DIV对象，都使用getElementById方法。参见1.2
1.4 关于frame
现有问题
在 IE中 可以用window.testFrame取得该frame，FF中不行
解决方法
在frame的使用方面FF和IE的最主要的区别是：
如果在frame标签中书写了以下属性：
在textarea 中输入时以回车来换行排版，但是入库后再读出来，显示时往往会出显没有换行的问题
原因在于textarea中换行用的是 "\n" 正常的HTML中换行是
解决方法：整体过程处理如下
一.表单处理
提交时使用JS把 textarea 中的 \n 替换成<br> ，偷了下懒JS使用了jquery ^^
<textarea name="tb" rows="2" cols="20" id="tb"></textarea>
<script>
$("#form").submit(function(){
var descrip = $("#tb").val();
descrip=descrip.replace(/\n/g,'<br />');
$("#tb").val(descrip);
}
</script>
二. 服务端处理
使用的是PHP4的原生函数，简单的做了一下入库前的处理
htmlentities(trim($postValue),ENT_QUOTES,"utf-8");
空格处理一下
$str = ereg_replace(" ", " ",$str);
三.读取显示
使用PHP的正则函数把读取的<br>还原，然后输出
<?php echo eregi_replace('<br>|<br />','<br>',$dataStr); ?>
OK，完成！ 收工
js里没有像PHP里的json_encode，json_decode这样的原生函数，所以有需求的时候就得自己处理了，这两个函数很好用
在JS的官网有一个json.js的包 <SCRIPT LANGUAGE=”JavaScript” src=”http://www.json.org/json.js”></SCRIPT> 这样引入
引入后可以直接使用方法 yourObj.toJSONString() 直接着对象转为字符串格式的JSON
我觉得还是自己处理比较好，出现了问题好解决
<script>
function obj2str(o){
var r = [];
if(typeof o == "string" || o == null) {
return o;
}
if(typeof o == "object"){
if(!o.sort){
r[0]="{"
for(var i in o){
r[r.length]=i;
r[r.length]=":";
r[r.length]=obj2str(o[i]);
r[r.length]=",";
}
r[r.length-1]="}"
}else{
r[0]="["
for(var i =0;i<o.length;i++){
r[r.length]=obj2str(o[i]);
r[r.length]=",";
}
r[r.length-1]="]"
}
return r.join("");
}
return o.toString();
}
//string 转 object
function testRun(){
var str=’{“aaa”:”123″,”bbb”:”456″,”ccc”:{“ddd”:”789″}}’;
alert(obj2str(strToObj(str)));
}
function strToObj(json){
return eval(“(“+json+”)”);
}
testRun();
</script>
JS实现一些菜单效果还是很有趣的，下面是一个JS实现的折叠菜单，可添加多项，简单实现了展开关闭效果，调用时可用JS或PHP等做一个循环就行了，按自己的使用需求使用就OK了
<script>
function openText(clickId,textId){
document.getElementById(textId).style.display=’block’;
document.getElementById(clickId).innerHTML = “<a href=\”#\” class=\”click2\” onclick=\”closeText(‘”+clickId+”‘,’”+textId+”‘)\”>[-]</a>”;
}
function closeText(clickId,textId){
document.getElementById(textId).style.display=’none’;
document.getElementById(clickId).innerHTML = “<a href=\”#\” class=\”click1\” onclick=\”openText(‘”+clickId+”‘,’”+textId+”‘)\”>[+]</a>”;
}
</script>
<style>
.click1{
background:#FF0000;
}
.click2{
background:#00FF00;
}
</style>
<div style=”float:left;” id=”click1″><a href=”#” onclick=”openText(‘click1′,’text1′)” class=”click1″>[+]</a></div><div style=”float:left;”>111111111</div><div style=”clear:both;”></div>
<div id=”text1″ style=”display:none”>11111111<br>22222222<br>33333333</div>
<div style=”float:left;” id=”click2″><a href=”#” onclick=”openText(‘click2′,’text2′)” class=”click1″>[+]</a></div><div style=”float:left;”>222222222</div><div style=”clear:both;”></div>
<div id=”text2″ style=”display:none”>11111111<br>22222222<br>33333333</div>
<div style=”float:left;” id=”click3″><a href=”#” onclick=”openText(‘click3′,’text3′)” class=”click1″>[+]</a></div><div style=”float:left;”>333333333</div><div style=”clear:both;”></div>
<div id=”text3″ style=”display:none”>11111111<br>22222222<br>33333333</div>
这个效果很酷，用在菜单和列表上是最好不过了，我只是简单的实现了功能 ， 美化没怎么做 ，喜欢的话可以自己再改改，IE7 FF测试通过
<script>
var moveNum = 110; //移动总像素
var leftNum = 25; //距左端像素
function openMenu(){
var y = moveNum;
function closelist(){
document.getElementById(‘list’).style.left=y+”px”;
y–
if(y==leftNum){clearInterval(intv);}
}
intv=setInterval(closelist,1);
}
function closeMenu(){
var y = leftNum;
function showlist(){
document.getElementById(‘list’).style.left=y+”px”;
y++;
if(y==moveNum){clearInterval(intv);}
}
intv=setInterval(showlist,1);
}
</script>
<div style=”margin-left:200px;width:110px;height:100px;background:#eeeeee;overflow:hidden”>
<div style=”width:20px;height:100px;background:#00FF00;float:right;” onclick=”openMenu()”>打开</div>
<div id=”list” name=”list” style=”float:right;height:100px;width:90px;background:#FF0000;left:110px;position:relative ;z-index:10;” >
<div style=”float:left;width:20px;height:100px;background:#0000FF;” onclick=”closeMenu()”>关闭</div>
<div style=”float:left;”>fdsfdf<br />fdsfsf</div>
</div>
</div>
此函数是DZ中的 类似PHP中的in_array函数的JS “in_array”,同样是检查一个值是否为数组元素，来是很好用的，具体如下：
<script>
function in_array(needle, haystack) {
if(typeof needle == ’string’ || typeof needle == ‘number’) {
for(var i in haystack) {
if(haystack[i] == needle) {
return true;
}
}
}
return false;
}
var arr = new Array(‘123′,’456′);
alert(in_array(‘789′,arr));
</script>
此函数的返回值为BOOL型
Previous Entries
Categories
Tag Cloud
Blog RSS
Comments RSS
Last 50 Posts
Back
Void 
Life 
Earth 
Wind 
Water 
Fire