SDCMS_ASP版在线手册
首页
目录 搜索

本文档由橙子博客维护

文字

SDCMS标签-留言板

必备js

<script>var webroot="{webroot}";</script>
<script src="{webroot}lib/js/jquery.js"></script>
<script src="{webroot}lib/js/jquery-migrate-1.1.0.min.js"></script>
<script src="{webroot}lib/tips/jquery.tips.js"></script>
<script src="{webroot}lib/js/base.js"></script>
<script src="{webroot}lib/validator/jquery.validator.js"></script>
<script src="{webroot}lib/validator/zh_CN.js"></script>
<script src="{webroot}theme/default/js/sdcms.js"></script>
<script>
$(function()
{
	if($("#bookstaus").length>0)
	{
		$.ajax(
		{
			type:"post",
			cache:false,
			url:"?act=islogin",
			success:function(_){$("#bookstaus").html(_);}
		});
	}
	$(".form_book").validator(
	{
		stopOnError:true,
		theme:'yellow_top',
		ignore:':hidden',
		valid:function(form)
		{
			$.fn.tips({type:'loading',content:'数据提交中'});
			$.ajax(
			{
				url:"?act=add",
				type:"post",
				data:$(form).serialize(),
				success:function(data){
					data=jQuery.parseJSON(data);
					if(data.status!="y"){$.fn.tips({content:data.info});}
					if(data.status=="y")
					{
						var info=data.info.substring(1);
						$.fn.tips({type:"ok",content:info});
						$(".form_book")[0].reset();
						if(data.info.substring(0,1)==2){setTimeout(function() 
{location.href='?';},1500)}
					}
				}
			});
		}
	});
	//
})
</script>

留言输出

{sdcms:rs field="avatar,username,createdate,content,reply" table="sd_expand_book" where="islock=1" order="id desc" pagesize="20" isadminurl="0"}
{rs:eof}暂无留言{/rs:eof}
    <table class="hovertable">
        <tr>
            <td rowspan="2"><img src="{webroot}upfile/avatar/{$rs[avatar]}/normal.jpg" /></td>
            <td>{$rs[username]}<span>留言时间：{$rs[createdate]}</span></td>
        </tr>
        <tr>
            <td>{$rs[content]}</td>
        </tr>{if sdcms.strlen($rs[reply])>0}
        <tr>
            <td><strong>管理员回复：</strong></td>
            <td>{$rs[reply]}</td>
        </tr>{/if}
    </table>
{/sdcms:rs}
<div class="npage">{showpage}</div>

留言表单

<form class="form_book" method="post">
<table class="hovertable">
<tr>
<td>昵称：</td>
<td><input type="text" name="t0" id="nicekname" maxlength="20" data-rule="昵称:required;" class="ip" /></td>
</tr>
<tr>
<td>留言内容：</td>
<td><textarea name="t1" rows="4" data-rule="留言内容:required;" class="ip" onKeyUp="strlen_verify(this,'booklen',255)" ></textarea></textarea><label>还可以输入<span id="booklen">255</span>个字符</label></td>
</tr>
<tr>
<td>联系电话：</td>
<td><input type="text" name="t2" maxlength="20" data-rule="联系电话:required;mobile|tel" class="ip" />　可以填写电话或手机，电话请加区号</td>
</tr>
<tr>
<td>性别：</td>
<td><select name="t3" id="sex"><option value="0">保密</option><option value="1">男</option><option value="2">女</option></select></td>
</tr>
<tr>
<td>验证码：</td>
<td><input type="text" name="t4" size="4" maxlength="4" data-rule="验证码:required;" class="ip" /> <img src="{webroot}lib/imgcode.asp?t0=80&t1=20" title="看不清楚？点击刷新！" align="absmiddle" id="imgcode" onClick="this.src+='&'+Math.random();" /></td>
</tr>
<tr>
<td><input type="submit" value="提交" class="bnt" /></td>
<td><input type="reset" value="重设" class="bnt" /></td>
</tr>
</table>
</form>

表格样式

table.hovertable {font-family: verdana,arial,sans-serif;font-size:11px;color:#333333;border-width: 1px;border-color: #ddd;border-collapse: collapse;text-align:left;margin:3px auto 3px;}
table.hovertable th {background-color:#ddd;color:#333;border-width: 1px;padding: 8px;border-style: solid;border-color: #ddd;}
table.hovertable tr {background-color:#fff;}
/*table.hovertable tr:nth-child(2), table.hovertable tr:nth-child(4),table.hovertable tr:nth-child(6),table.hovertable tr:nth-child(8),table.hovertable tr:nth-child(10){background-color:#eee;}
table.hovertable tr:hover {background-color:#ddd;}*/
table.hovertable td {border-width: 1px;padding: 8px;border-style: solid;border-color: #ddd;}
table.hovertable input:focus ,table.hovertable textarea:focus{outline: thin dotted;outline: 5px auto -webkit-focus-ring-color;outline-offset: -2px;border-color: #66afe9;outline: 0;-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);}table.hovertable input[type="text"],table.hovertable select,table.hovertable textarea,table.hovertable input.bnt{padding:2px;border:1px solid #c9c9c9;color:#666;outline:none;font-size:14px;border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;}table.hovertable input[type="text"],table.hovertable select{height:30px;}
table.hovertable input.bnt{height:30px;width:60px;background:#fff;}
table.hovertable input.bnt:hover{height:30px;width:60px;background:rgba(0,0,0,.075);}
/*!表格专用css*/
table{max-width:100%;border-collapse:collapse;border-spacing:0}table,.table{width:100%;margin-bottom:18px}table th,.table th,table td,.table td{padding:8px;line-height:18px;text-align:left;vertical-align:top;border-top:1px solid #ddd}table th,.table th{font-weight:bold}table thead th,.table thead th{vertical-align:bottom}table thead:first-child tr th,.table thead:first-child tr th,table thead:first-child tr td,.table thead:first-child tr td{border-top:0}table tbody+tbody,.table tbody+tbody{border-top:2px solid #ddd}.table-condensed th,.table-condensed td{padding:4px 5px}table{border:1px solid #ddd;*border-collapse:collapsed;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px}table th+th,table td+td,table th+td,table td+th{border-left:1px solid #ddd}table thead:last-child tr:last-child th:last-child,table tbody:last-child tr:last-child td:last-child{}.table tbody tr:hover td,.table tbody tr:hover th{background-color:#f5f5f5}table th{background:#fffbe9}.table th,.table td{vertical-align:middle}

分页样式

/*分页专用css2 -- npage*/
.npage{clear:both; padding:15px 0; color:#666; font:normal 12px/28px Arial; text-align:center;}
.npage li{list-style:none; display:inline-block; margin-left:3px;}
.npage span{ padding:0 5px;}
.npage a{display:inline-block; height:28px; margin:0 2px; padding:0 8px; border:solid 1px #ccc;  background:#fff; color:#333; font:normal 12px/28px Arial, Helvetica, sans-serif; cursor:pointer;}
.npage a:hover,.npage a.on,.npage li.active a{ border:none; background:#00549a; color:#fff!important;  text-decoration:none;}
.npage a.select{cursor:default;}
/*分页专用css*/
.npage{ text-align:center; padding:15px 0px 0px 0px; border:0; line-height:normal}
.npage input{width:20px;padding-left:10px;margin-left:10px;}
.npage a,.npage a:visited{color: #666; line-height:24px; padding:2px 5px 2px 5px; margin:2px 5px 2px 5px; border:1px solid #D9D9D9; height:24px; overflow:hidden; background:#fff}
.npage a:hover,.npage a:active,.npage a.on{color: #333; background:#DCDDDF; border:1px solid #D9D9D9}
.npage span,.npage span:hover,.npage span:active {color: #fff; line-height:24px; padding:2px 5px 2px 5px;  margin:2px 5px 2px 5px; background:#f06522; border:1px solid #f06522; height:24px; overflow:hidden}