jquery实现隐藏显示层动画效果
仿新浪字符动态输入
tab效果等等
以下为所有代码
感兴趣的朋友可以练练手哈
希望对大家学习有所帮助
已经有两年多没登陆csdn账号了中间做了些旁的事可是现在却还是回归程序但改做前端了虽然很多东西都已忘得差不多了但还是应该摆正心态慢慢来在前端漫游做一只快乐双鱼
路是一步一步走出来的知识是一点一滴积累的记录是笔财富来吧一起学着总结做笔记
这几天在写后台文章的一些页面为了能得到更好的交互性需要做一些效果js无疑使不二之选但由于浏览器的兼容性一直差强人意所以选用jquery框架通过css样式dom节点以及自身所带函数就可以实现比较好的用户体验此案例有三个功能点分别为
利用jquery自身的toggle（）函数实现层的隐藏与显示动画;
仿新浪腾讯微博输入框字符动态递减效果（可作为单独的js引入即可通用）;
实现几个导航按钮切换不同的内容类似tab;
以下为所有代码
复制代码 代码如下:
<!DOCTYPE html PUBLIC "
//W
C//DTD XHTML
Transitional//EN" "
<html xmlns="
<head>
<meta http
equiv="Content
Type" content="text/html; charset=utf
" />
<title>用jquery实现两个table的显示与隐藏</title>
<script type="text/javascript" src="jquery
min
js" language="javascript"> </script>
<style>
/*整体table样式*/
mainbox {margin:
px
px;overflow:hidden;zoom:
;_margin:
px;}
mainnav_title {line
height:
px;height:
px;border
bottom:
px solid #eee;color:#ddd;}
mainnav_title a {color:#
;margin:
px;padding:
px
px;background:#EFEFEF;}
mainnav_title a:hover
mainnav_title a
on{background:#
CD
;color:#FFF;}
table_form td{padding
left:
px}
table_form th span{color:#FF
}
table_form th{font
weight:normal; text
align:right;padding
right:
px; color:#
}
table_form td label{ vertical
align:middle}
table_form td
table_form th{padding:
px
px
px;line
height:
px;}
table_form tbody td
table_form tbody th{border
bottom:
px solid #eee; }
colorpanel tbody td
colorpanel tbody th{ padding:
;border
bottom: none;}
/*控制文章字数输入样式*/
textAfter{font
weight:
;font
size:
px;font
style: italic;color:#FF
;font
family: Constantia
Georgia;}
textCount{font
weight:
;font
size:
px;font
style: italic;font
family: Constantia
Georgia;}
/*文章列表页面样式*/
article_search{border:
px solid #FFCC
; background
color:#FFFFCC;height:
px;margin:
px
px
px
px;line
height:
px;padding:
px
px
px
px;}
advsetup{background
color:red; height:
px;line
height:
px;}
search_table a:hover
search_table a
on{background:#
CD
;color:#FFF;}
search_table a{margin:
px;padding:
px;height:
px;line
height:
px;}
search a{color:#
;margin:
px;padding:
px
px;background:#EFEFEF;}
</style>
<script>
/*控制文章字数输入函数*/
$(function(){
$("td span")
addClass(
textCount
);//页面加载时为所有span标签添加新浪字体样式
})
/*
words_deal函数是一个可以通用的关于仿新浪字符输入的函数
用在网站的文章编辑上可以提高用户的交互性
dom
当前要操作的对象
num
限制字符数量
id:通过传入id值动态添加需要操作的span
*/
function words_deal(dom
num
id)
{
var curLength=$(dom)
val()
length; //获取文本框中输入的文字总数量
if(curLength>num)//判断是否大于限制字符数量
{ //如果大于限制级字符数量
获得从
到该限制数量的所有字符串
var totalNum=$(dom)
val()
substr(
num);
$(dom)
val(totalNum); //将这些字符重新载入文本框
并弹框提示
alert("超过字数限制
多出的字将被截断！" );
}
else
{
if(curLength>num
)
{//如果输入字符为倒数
个字符时改变样式将字体变红
$(
textCount_
+id)
addClass("textAfter");
}
else
{//否则移除样式
$(
textCount_
+id)
removeClass("textAfter");
}
$("
textCount_"+id)
text(num
$(dom)
val()
length); //如小于限制级字符数量
进行累加计数显示
}
}
//文章列表菜单栏效果控制函数
function fun_search(dom
id){
//控制搜索层显示或隐藏
if(id!=
){
$("
article_search")
toggle("fast"
function(){
});
}
//控制切换样式
var className = $(dom)
attr("class");
if(className !=
on
){
$(
search_table a
)
removeClass(
on
);
$(dom)
addClass(
on
);
}
}
</script>
</head>
<body>
<!
包含层start
>
<div class="mainbox">
<!
导航栏strat
>
<div id="nav" class="mainnav_title">
<ul>
<a href="javascript:;" onclick="toOpen(this
);" class="on">添加文章</a>
<a href="javascript:;" onclick="toOpen(this
);">高级设置</a>
<a href="javascript:;" onclick="fun_search(this
);">搜索</a>
</ul>
</div>
<!
导航栏end
>
<!
搜索层start
>
<div class="article_search" style="display:none;">
<form id="searchForm" action="admin/user/
" method="post">
添加时间
<input type="text" class="input
text" name="dateMin" id="dateMin" readonly="readonly"/>
<input type="text" class="input
text" name="dateMax" id="dateMax" readonly="readonly"/>
<select name="channel_id
" id="channel_id
">
<option value="" >
全部栏目
</option>
<c:forEach items="${list}" var="list">
<option value="${list
id}">
${list
name}
</option>
</c:forEach>
</select>
<select name="choose">
<option value="" >
查询条件
</option>
<option value="" >
ID
</option>
<option value="" >
标题
</option>
<option value="" >
简介
</option>
<option value="" >
发布人
</option>
</select>
<input type="text" class="input
text" name="txtSearch" size="
"></input>
<input type="submit" class="button" value="搜索"></input>
</form>
</div>
<!
搜索层end
>
<!
第一个div层start
>
<table id="table_
" cellpadding=
cellspacing=
width="
%" class="table_form" >
<tr>
<th width="
"><span>*</span> 栏目</th>
<td>
<select name="channel" id="channel">
<option value="" >
全部栏目
</option>
<c:forEach items="${list}" var="list">
<option value=""></option>
</c:forEach>
</select>
</td>
</tr>
<tr>
<th width="
"><span>*</span> 标题</th>
<td>
<input name="title" id="title" class="input
text"" type="text" size="
" onkeyup="words_deal(this
);"></input>剩余<span class="textCount_
">
</span>个字<br />
</td>
</tr>
<tr>
<th width="
">缩略图:</th>
<td>
<table>
<td>
<input name="txtSmallPic" type="text" id="text" class="input
text" size="
"/>
<input name="btnUpdown" type="submit" value="本地上传" class="button"/>
<input name="btnChoose" type="submit" value="站内选择" class="button"/>
<input name="btnCut" type="submit" value="裁切" class="button"/>
</td>
<td><img src="thumbnail
ico" style="width:
px; height:
px;" /></td>
</table>
</td>
</tr>
<tr>
<th width="
">自定义属性 </th>
<td>
<input id="chkDiyAtrr" type="checkbox" /> 首页头条推荐
<input id="chkDiyAtrr" type="checkbox" /> 首页焦点图推荐
<input id="chkDiyAtrr" type="checkbox" /> 视频首页每日热点
<input id="chkDiyAtrr" type="checkbox" /> 视频首页头条推荐
<input id="chkDiyAtrr" type="checkbox" /> 视频首页焦点图
<input id="chkDiyAtrr" type="checkbox" /> 首页图片推荐<br></br>
<input id="chkDiyAtrr" type="checkbox" /> 栏目首页推荐
<input id="chkDiyAtrr" type="checkbox" /> 视频栏目精彩推荐
<input id="chkDiyAtrr" type="checkbox" /> 网站顶部推荐
</td>
</tr>
<tr>
<th width="
">TAG标签</th>
<td>
<input id="txtTag" class="input
text" type="text" size=""/> (
号分开
单个标签小于
字节)
</td>
</tr>
</table>
<!
第一个div层end
>
<!
第二个div层start
>
<table id="table_
" style="display:none;" cellpadding=
cellspacing=
width="
%" class="table_form">
<tr>
<th width="
">附加选项</th>
<td>
<input id="chkDiyAtrr" type="checkbox" /> 提取第一个图片为缩略图
<input id="chkWatermark" type="checkbox" /> 图片是否加水印
</td>
</tr>
<tr><th width="
">分页选项</th>
<td>
<input id="rdoManual" type="radio" class="input
text" /> 手动 (分页符为
#p#分页标题#e# )
<input id="rdoAutomatic" type="radio" class="input
text" /> 自动 大小:
<input id="txtPage" type="text" style=" width:
px;" />K
</td>
</tr>
<tr>
<th width="
"> 评论选项</th>
<td>
<input id="rdoAllow" type="radio" class="input
text"/> 允许评论
<input id="rdoBan" type="radio" class="input
text" /> 禁止评论
</td>
</tr>
<tr>
<th width="
"><span>*</span> 标题</th>
<td>
<input name="title" class="input
text"" type="text" size="
" id="TextArea" onkeyup="words_deal(this
);"/>
剩余<span class="textCount_
">
</span>个字<br />
</td>
</tr>
<tr>
<th width="
"> 文章排序 </th>
<td colspan="
">
<select id="u
" class="u
">
<option selected="" value="默认排序">默认排序</option>
<option value="置顶一周">置顶一周</option>
<option value="置顶一月">置顶一月</option>
<option value="置顶一年">置顶一年</option>
</select>
</td>
</tr>
</table>
<!
第二个div层end
>
</div>
<!
包含层start
>
</body>
<script>
//切换界面
function toOpen(dom
id){
var className = $(dom)
attr("class");
if(className !=
on
){
$(
table[id^=table_]
)
hide();
$(
mainnav_title ul a
)
removeClass(
on
);
$(
#table_
+id)
show();
$(dom)
addClass(
on
);
}
}
//文章列表菜单栏效果控制函数
function fun_search(dom
id){
//控制搜索层显示或隐藏
if(id!=
){
$("
article_search")
toggle("fast"
function(){
});
}
//控制切换样式
var className = $(dom)
attr("class");
if(className !=
on
){
$(
search_table a
)
removeClass(
on
);
$(dom)
addClass(
on
);
}
}
</script>
</html>
以下是运行的效果图
ps代码规范很重要养成加注释的好习惯
