下拉框代码三,输入框字符动态递减
分类:多线程

!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN xmlns= content=text/html; charset=gb2312 /style *{font: 12px '宋体'} .tab_suggest{border:1px solid #333; background:#fff; position:absolute; z-index:101; visibility: hidden;} .tab_suggest th, .tab_suggest td{font:12px '宋体'; font-weight:normal; height:17px; text-align:left; line-height:17px; padding:2px 3px; white-space:nowrap; cursor: default;} .tab_suggest td{color:#008000; text-align:right;} .tab_suggest tr.cur{background:#36c; color:#fff} .tab_suggest tr.cur td{color:#fff}/styletitle无标题文档/titlescript type=text/javascript src=js/suggest.js/scriptscript type=text/javascriptwindow.onload=function(){ var mySuggest = new hansir.TextSuggest(); mySuggest.add_suggest('textSuggest', 'suggest.php', 'post'); mySuggest.add_suggest('textSuggest2', 'suggest.php', 'post', 100); $('textSuggest').focus();}/script/headbodybr /br /form action=suggest.php method=postinput type=hidden name=add value=add /没有迟延:input type=text id=textSuggest name=keyword style=width:300px; autocomplete=off / input type=submit value=提 交 //formbr /br /br /form action=suggest.php method=postinput type=hidden name=add value=add /迟延100ms:input type=text id=textSuggest2 name=keyword style=width:300px; autocomplete=off / input type=submit value=提 交 //form/body/html最后的html文件.

已经有两年多没登陆csdn账号了,中间做了些旁的事,可是现在却还是回归程序,但改做前端了,虽然很多东西都已忘得差不多了,但还是应该摆正心态,慢慢来,在前端漫游,做一只快乐双鱼。
路是一步一步走出来的,知识是一点一滴积累的,记录是笔财富,来吧,一起学着总结做笔记。

###############index.php###################### ?session_start(); require./inc/func.php; mscon(); require ./inc/header.inc; ? script language=javascript function opwin(filename) {window.open(read_article.php?id=+filename,,height=500,width=585,resizable=no,scrollbars=yes,status=no,toolbar=no,menubar=no,location=no); } /script /head body bgcolor=#FFFFFF text=#000000 leftmargin=0 topmargin=0 table width=100% border=0 cellspacing=0 cellpadding=0 bgcolor=#003399 height=23 tr td width=80 div id=Layer2 style=position:absolute; left:7px; top:17px; width:43px; height:44px; z-index:2object classid=clsid:D27CDB6E-AE6D-11cf-96B8-444553540000 codebase=#version=5,0,0,0 width=80 height=60 param name=movie value=images/logo.swf param name=quality value=high param name=wmode value=transparent embed src=images/logo.swf quality=high pluginspage=_Prod_Version=ShockwaveFlash type=application/x-shockwave-flash width=80 height=60 wmode=transparent /embed /object/div div id=Layer1 style=position:absolute; left:-5px; top:61px; width:49px; height:37px; z-index:1img src=images/11.gif width=58 height=55/div /td td width=539 object classid=clsid:D27CDB6E-AE6D-11cf-96B8-444553540000 codebase=#version=5,0,0,0 width=468 height=60 param name=movie value=images/ti1.swf param name=quality value=high param name=wmode value=transparent embed src=images/ti1.swf quality=high pluginspage=_Prod_Version=ShockwaveFlash type=application/x-shockwave-flash width=468 height=60 wmode=transparent /embed /object /td /tr /table table width=100% border=0 cellspacing=0 cellpadding=0 tr td background=images/211.gif height=2/td /tr /table tableFORM name=form1 action=search.phpmethod=post target=_blank table width=80% border=0 cellspacing=0 cellpadding=0 bgcolor=#009933 align=center tr td align=center input type=text name=key select name=type option value=全部类别/option ? $typ=file(list.txt); $num=count($typ); for($i=2;$i=$num;$i++) { echooption value=$typ[$i]$typ[$i]/option;} ? /select select name=whe option value=全部内容/option option value=1文章内容/option option value=2文章标题/option option value=3加入时间/option /select input type=hidden name=submit value=1 input type=submit name=submit value=提交查询 /td /tr /table /FORM/table ? $type=trim($type); if($comm) { $sec=and comm=1; $fir=where comm=1; } if(!empty($type)) $query=select count(*) from $table where type='$type' $sec; else $query=select count(*) from $table $fir; $res=mysql_db_query($database,$query); if(@mysql_num_rows($res)0) $tot=mysql_fetch_array($res); $total=$tot[0]; $total_page=ceil($total/$pagenum); echo table width=80% border=0 cellspacing=0 cellpadding=0 ; echo trtd共:.$total.篇.$total_page.页/td/tr; if(empty($page)) $page=0; if(empty($offset)) $offset=0; $offset=$pagenum*$page; if(!empty($type)) $query=select * from $table where type='$type' $sec order by id desc limit $offset,$pagenum; else $query=select * from $table $fir order by id desc limit $offset,$pagenum; $res=mysql_db_query($database,$query); if(@mysql_num_rows($res)0) while($topic=mysql_fetch_array($res)) { if(strlen($topic[title])40) { $topic[title]=substr($topic[title],0,40) ; $topic[title]=$topic[title]......; } if(trim($topic[time])==date(Y年m月d日)) $topic[time]=font color=#FF9900$topic[time]/font; echo trtd[$topic[type]]a href=# onClick=opwin($topic[id]);$topic[title]/afont size=1($topic[time])/font; if($topic[comm]==1) echo img src=./images/comm.gif alt=精品文章; if($topic[locked]==1) echo img src=./images/locked.gif alt=文章已锁定; echo /td td阅读:$topic[hits] 次;评论:$topic[p_num]次/td /tr; } else echo 对不起,本栏 目暂没有任何文章!!!; echo /table; ? br table width=80% border=0 cellspacing=0 cellpadding=0 align=center tr td ? $pre=$page-1; $next=$page+1; if($page0) echo a href=$php_self?page=$pre&type=$type/abrbr; else echo brbr;?/td td?if($page$total_page-1) echo a href=$php_self?page=$next&type=$type/abrbr; else echo brbr;?/td td form 跳转到: select name=page onchange=top.location='? echo $php_self;??page='+document.forms[1].elements[0].value+'&type=?echo $type;?'; class=border ? for($i=0;$i$total_page;$i++) { $p=$i+1; echo option value=$i; if($page==$i) echo selected ; echo 第.$p.页/optionn; } ? /select /form /td td form 选择栏目: select name=typeonchange=top.location='? echo $php_self;??type='+document.forms[2].elements[0].value?if($comm) echo+'&comm=1';?; ? $typ=file(list.txt); $num=count($typ); for($i=0;$i$num;$i++) { echooption value=$typ[$i] ; if(trim($typ[$i])==$type) {echo selected; } echo $typ[$i]/option;} ? /select /form /tdtdform method=post action=? echo $PHP_SELF;??type=?echo $type;? target=_balnkinput type=submit name=comm value=精品文章 class=border/form/td /tr /table ?require ./inc/footer.inc;? #####################read_article.php######################### ? require./inc/func.php; if(!$id) { echoscriptwindow.close();/script; exit(); } mscon(); $query=select * from $table where id='$id'; $res=mysql_db_query($database,$query); if(!$res) { echo this article has been deleted or no this article!!; exit(); } $data=mysql_fetch_array($res); add_hits($data[id]); $pre=$data[id]-1; $next=$data[id]+1; ? HTML HEAD TITLE ?echo $data[title]--[$data[type]];? /TITLE META content=text/html; charset=gb2312 style type=text/css !-- body,table,td,input,textarea {font-family: 宋体; font-size: 9pt} select {font-family: 宋体; font-size: 9pt} code {font-family: Courier ; font-size: 10pt} a {color: #005500} a:hover {color: #CC0000} .border {border: 1px #000000 solid; background-color:transparent; list-style-position: inside; list-style-type: square} -- /style script language=javascript function name() { var theResult = true; var elem4 = null; if (document.forms[0].elements[0].value == || document.forms[0].elements[0].value == undefined || document.forms[0].elements[0].value == null) { elem4 = prompt(请输入您的姓名:,); theResult = false; document.forms[0].elements[0].value = elem4; } return theResult; } function mail() { var theResult = true; var elem1 = null if ((document.forms[0].elements[1].value.indexOf('@') == -1 || document.forms[0].elements[1].value == || document.forms[0].elements[1].value.indexOf('.') == -1)) { elem1 = prompt(请输入您的正确的电子邮件地址。谢谢!!,); theResult = false; document.forms[0].elements[1].value = elem1; } return theResult; } function go() { var theResult=true; theResult = name()&&mail(); return theResult; } /script /HEAD BODY text=#000000 bgColor=#ffffff TABLE borderColor=#339933 cellSpacing=0 borderColorDark=#ffffff cellPadding=0 borderColorLight=#000000 border=1 width=545 TBODY TR vAlign=center bgColor=#009900 TD background=images/third-back3.gif TABLE cellSpacing=0 cellPadding=0 width=100% border=0 TBODY TR TD width=17/TD TD width=590 TABLE width=36% border=0 TBODY TR TD bgcolor=#009900 DIV FONT face=Verdana, Arial, Helvetica, sans-serif color=#ffffffb ? echo $data[title];? /b/FONT/DIV /TD/TR/TBODY/TABLE/TD TD width=19 DIV A href=javascript:window.close()IMG height=17 src=images/third-close.gif width=17 align=absMiddle border=0 name=content_r03_c28/A/DIV /TD/TR/TBODY/TABLE/TD/TR TR vAlign=center align=left bgColor=#cccccc TD TABLE cellSpacing=0 cellPadding=0 border=0 align=center width=100% TBODY TR TD DIV align=leftA class=whitetxt href=read_article.php?id=? echo$pre;?img src=images/prethread.gif width=48 height=12 border=0/A/DIV /TD TD DIV align=lefta class=whitetxt href=read_article.php?id=? echo $next;?img src=images/nextthread.gif width=48 height=12 border=0/a/DIV /TD TDIMG height=16 src=images/mail.gif width=16/TD TD class=myfontA class=redtxt href=commend.php?id=? echo $data[id]&title=$data[title];?推荐给朋友/A/TD TD 发表时间: ? echo $data[time];? 阅读次数: ? echo $data[hits];? /TD TD /TD /TR /TBODY /TABLE /TD/TR TR vAlign=top TD class=tenpt ? if($data[locked]0) { echo img src=images/lock.gif对不起!本文已经被管理员锁定!; } else if($data[html]==1) highlight_string($data[cont]); else echo nl2br($data[cont]); ? /TD /TR /TBODY/TABLE table bordercolor=#339933 cellspacing=0 bordercolordark=#ffffff cellpadding=0 bordercolorlight=#000000 border=1 width=545 tbody TR bgColor=#cccccc th DIV 发表评论/DIV /th /TR tr td form name=form1 method=post action=ping.php onsubmit=return go() 您的姓名: input type=text name=name class=border 您的电子邮件: input type=text name=mail size=20 class=border 仅站长可见:input type=checkbox name=pub value=? echo $data[title];? input type=hidden name=p_id value=? echo $id;? br 发表评论: textarea name=cont rows=8 cols=85/textarea br br center input type=submit name=Submit value=提交 class=border input type=reset name=Submit2 value=重写 class=border /center/form /td /tr TR bgColor=#cccccc th DIV 相关评论/DIV /th /TR tr td ?$query=select * from $ping_tab where p_id='$id' order by time desc; $res=mysql_db_query($database,$query); if(mysql_num_rows($res)0) {$i=1; while($ping=mysql_fetch_array($res)) echo 评论人:$ping[name]电子邮件:$ping[mail]br.nl2br($ping[p_cont]).br时间:$ping[time]来自:$ping[ip]hr size=1n ; } else echo 暂时没有本文章的相关评论!; ? /td /tr tr bgcolor=#cccccc td div a href=javascript:window.close()关闭窗口/a/div /td /tr /tbody /table ?require ./inc/footer.inc;?

调用:后台数据以 [['关键字符','估计数量'], ['关键字符','估计数量'], ...] 格式输出。页面onload后调用var mySuggest = new hansir.TextSuggest();mySuggest.add_suggest(inp, url, method, defer, defer2);除了前两项必填,后三项都是可选的 inp :输入框ID名。 url :ajax请求的后台服务器页面地址。method :发送方试 get或post,默认post。defer :按键计时,即用户输入字符多久后请求服务器,默认不计时,用户输入字符后立即发送。defer2 :服务器返回结果计时,即服务器发送请求后多长时间没有返回数据,列表自动隐藏,默认200ms。测试说明:1、数据库存放的是临时数据。2、可以输入中华人民共和国,中,蓝色 测试。3、可以输入一些其他的自定义数据,提交存到表里,然后就可以用刚刚提交的数据测试。4、我的服务器网速慢,可能有个别卡的现象。5、迟延:用户输入字符多久后请求服务器,照顾输入快的用户 :) 如果服务器速度够快可以考虑迟延,如果慢就无所谓了,反正是一个请求完成才会进行下一个 :)已知缺陷:1、下拉提示框位置问题:因为是以BODY为参考,所以位置会随body大小改变(下拉列表显示时拖动窗口大小可看效果)。 解决方法:真正用时可以根据input的父元素定位。2、用五笔输入法在FF下输入完成后上下方向键不好使要切换一下输入法才可以,拼音则正常。 解决方法:google也有同样问题,所以。。。 :)。

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

1.利用jquery自身的toggle()函数实现层的隐藏与显示动画;
2.仿新浪、腾讯微博输入框字符动态递减效果(可作为单独的js,引入即可通用);
3.实现几个导航按钮切换不同的内容,类似tab;

以下为所有代码:

复制代码 代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
<html xmlns=";
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>用jquery实现两个table的显示与隐藏</title>
<script type="text/javascript" src="jquery-1.2.6.min.js" language="javascript"> </script>
<style>
/*整体table样式*/
.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>
<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)//判断是否大于限制字符数量
{ //如果大于限制级字符数量,获得从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>
<body>
<!--包含层start-->
<div class="mainbox">
<!--导航栏strat-->
<div id="nav" class="mainnav_title">
<ul>
<a href="javascript:;" onclick="toOpen(this,'1');" class="on">添加文章</a>
<a href="javascript:;" onclick="toOpen(this,'2');">高级设置</a>
<a href="javascript:;" onclick="fun_search(this,2);">搜索</a>
</ul>
</div>
<!--导航栏end-->
<!--搜索层start-->
<div class="article_search" style="display:none;">
<form id="searchForm" action="admin/user/0" 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_id2" id="channel_id2">
<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="30"></input>
<input type="submit" class="button" value="搜索"></input>
</form>
</div>
<!--搜索层end-->
<!--第一个div层start-->
<table id="table_1" cellpadding=0 cellspacing=0 width="100%" class="table_form" >
<tr>
<th width="140"><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="140"><span>*</span> 标题</th>
<td>
<input name="title" id="title" class="input-text"" type="text" size="90" onkeyup="words_deal(this,40,1);"></input>剩余<span class="textCount_1">40</span>个字<br />
</td>
</tr>
<tr>
<th width="140">缩略图:</th>
<td>
<table>
<td>
<input name="txtSmallPic" type="text" id="text" class="input-text" size="45"/>  
<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:128px; height:128px;" /></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>
<!--第一个div层end-->
<!--第二个div层start-->
<table id="table_2" style="display:none;" cellpadding=0 cellspacing=0 width="100%" class="table_form">
<tr>
<th width="140">附加选项</th>
<td>
<input id="chkDiyAtrr" type="checkbox" />   提取第一个图片为缩略图   
<input id="chkWatermark" type="checkbox" />  图片是否加水印
</td>
</tr>
<tr><th width="140">分页选项</th>
<td>
<input id="rdoManual" type="radio" class="input-text" /> 手动 (分页符为:

...

共2页:上一页12下一页

相关文章

  • css实现tab效果仿163邮箱样式
  • Jquery实现的tab效果可以指定默认显示第几
  • Jquery 实现Tab效果 思路是js思路

相关搜索: 隐藏显示层 动态输入 tab效果

今天看啥

搜索技术库

返回首页

  • Mac实用技巧 Command键5大隐藏功能
  • 手机百度贴吧怎么隐藏个人动态
  • ASP.NET:注销功能实现,asp.net注销功能
  • CSS3 transform实现图片投影效果,
  • 全新jquery多点滑动幻灯片——全屏动画anima
  • 基于jQuery鼠标点击弹出登陆框效果,jquery鼠标

相关频道: HTML/CSS  HTML5  Javascript  jQuery  AJax教程  前端代码  正则表达式  Flex教程  WEB前端教程  

本文由10bet手机官网发布于多线程,转载请注明出处:下拉框代码三,输入框字符动态递减

上一篇:经典SQL短小代码收集汇总,导出导入大全 下一篇:把过程与函数说透,怎么创建存储过程
猜你喜欢
热门排行
精彩图文