jquery实现隐藏显示层动画效果、仿新浪字符动态输入、tab效果

已经有两年多没登陆csdn账号了，中间做了些旁的事，可是现在却还是回归程序，但改做前端了，虽然很多东西都已忘得差不多了，但还是应该摆正心态，慢慢来，在前端漫游，做一只快乐双鱼。

路是一步一步走出来的，知识是一点一滴积累的，记录是笔财富，来吧，一起学着总结做笔记。

这几天在写后台文章的一些页面，为了能得到更好的交互性，需要做一些效果，js无疑使不二之选，但由于浏览器的兼容性一直差强人意，所以选用jquery框架，通过css样式、dom节点以及自身所带函数就可以实现比较好的用户体验，此案例有三个功能点。分别为：

1.利用jquery自身的toggle（）函数实现层的隐藏与显示动画;

2.仿新浪、腾讯微博输入框字符动态递减效果（可作为单独的js，引入即可通用）;

3.实现几个导航按钮切换不同的内容，类似tab;

以下为所有代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>用jquery实现两个table的显示与隐藏</title>

.mainbox {margin:5px 10px;overflow:hidden;zoom:1;_margin:5px;}

.mainnav_title {line-height:40px;height:40px;border-bottom:1px solid #eee;color:#ddd;}

.mainnav_title a {color:#004499;margin:0 5px;padding:4px 7px;background:#EFEFEF;}

.mainnav_title a:hover ,.mainnav_title a.on{background:#498CD0;color:#FFF;}

.table_form td{padding-left:12px}

.table_form th span{color:#FF0000}

.table_form th{font-weight:normal; text-align:right;padding-right:10px; color:#777}

.table_form td label{ vertical-align:middle}

.table_form td , .table_form th{padding:8px 0 5px 8px;line-height:22px;}

.table_form tbody td,.table_form tbody th{border-bottom:1px solid #eee; }

.colorpanel tbody td,.colorpanel tbody th{ padding:0;border-bottom: none;}

/*控制文章字数输入样式*/

.textAfter{font-weight: 700;font-size: 22px;font-style: italic;color:#FF0000;font-family: Constantia, Georgia;}

.textCount{font-weight: 700;font-size: 22px;font-style: italic;font-family: Constantia, Georgia;}

/*文章列表页面样式*/

.article_search{border:1px solid #FFCC33; background-color:#FFFFCC;height:46px;margin:10px 0px 10px 0px;line-height:46px;padding:0px 15px 0px 15px;}

.advsetup{background-color:red; height:57px;line-height:57px;}

.search_table a:hover ,.search_table a.on{background:#498CD0;color:#FFF;}

.search_table a{margin:5px;padding:5px;height:15px;line-height:15px;}

.search a{color:#004499;margin:0 5px;padding:4px 7px;background:#EFEFEF;}

</style>

/*控制文章字数输入函数*/

$(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)//判断是否大于限制字符数量

{ //如果大于限制级字符数量，获得从0到该限制数量的所有字符串

var totalNum=$(dom).val().substr(0,num);

$(dom).val(totalNum); //将这些字符重新载入文本框，并弹框提示

alert("超过字数限制，多出的字将被截断！" );

}

else

{

if(curLength>num-10)

{//如果输入字符为倒数10个字符时改变样式将字体变红

$('.textCount_'+id).addClass("textAfter");

}

else

{//否则移除样式

$('.textCount_'+id).removeClass("textAfter");

}

$(".textCount_"+id).text(num-$(dom).val().length); //如小于限制级字符数量,进行累加计数显示

}

//文章列表菜单栏效果控制函数

function fun_search(dom,id){

//控制搜索层显示或隐藏

if(id!=1){

$(".article_search").toggle("fast",function(){

});

}

//控制切换样式

var className = $(dom).attr("class");

if(className != 'on'){

$('.search_table a').removeClass('on');

$(dom).addClass('on');

}

</script>

</head>

<ul>

</ul>

</div>

添加时间：

<input type="text" class="input-text" name="dateMin" id="dateMin" readonly="readonly"/> -

<c:forEach items="${list}" var="list">

</c:forEach>

</select> 

</select> 

</form>

</div>

<tr>

<td>

<c:forEach items="${list}" var="list">

</c:forEach>

</select>

</td>

</tr>

<tr>

<td>

</td>

</tr>

<tr>

<td>

<table>

<td>

</td>

</table>

</td>

</tr>

<tr>

<th width="140">自定义属性 </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="140">TAG标签</th>

<td>

<input id="txtTag" class="input-text" type="text" size=""/>   (','号分开，单个标签小于12字节)

</td>

</tr>

</table>

<tr>

<td>

<input id="chkDiyAtrr" type="checkbox" />   提取第一个图片为缩略图   

<input id="chkWatermark" type="checkbox" />  图片是否加水印

</td>

</tr>

<tr>

<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:20px;" />K

</td>

</tr>

<tr>

<td>

<input id="rdoAllow" type="radio" class="input-text"/>  允许评论   

<input id="rdoBan" type="radio" class="input-text" />  禁止评论

</td>

</tr>

<tr>

<td>

</td>

</tr>

<tr>

</select>

</td>

</tr>

</table>

</div>

</body>

//切换界面

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!=1){

$(".article_search").toggle("fast",function(){

});

}

//控制切换样式

var className = $(dom).attr("class");

if(className != 'on'){

$('.search_table a').removeClass('on');

$(dom).addClass('on');

}

</script>

</html>

以下是运行的效果图：

ps：代码规范很重要，养成加注释的好习惯。

posted @ 2013-07-01 19:59 爱生活，爱编程阅读(295) 评论(0) 编辑收藏举报

刷新页面返回顶部

小C爱学习

jquery实现隐藏显示层动画效果、仿新浪字符动态输入、tab效果

公告