|
主题:问答系统风格修改经验总结 [收藏主题] | 转到: |
看到很多朋友不知道怎么修改问答系统的样式风格,当然科讯新推出的问答系统也运用了很多不好控制的标签和样式,如果想修改成自己喜欢的样式,没有相当的网页制作技巧的无法完成的,呵呵,反正我现在还不行,下面谈谈我自己修改过程中的一些经验,希望能给大家有所启示,可能也存在很多的错误,请在应用中自己多验证。 一、必须调用的五个js <script src='{$GetInstallDir}ks_inc/kesion.box.js' language="JavaScript"></script> <script src='{$GetInstallDir}ks_inc/common.js' language="JavaScript"></script> <script src='{$GetInstallDir}ks_inc/jquery.js' language="JavaScript"></script> <script src='{$GetInstallDir}ks_inc/kesion.box.js' language="JavaScript"></script> 会员登录、验证码显示、表单验证js <script language="JavaScript"> <!-- function checkform(obj){ {IF:KS.C("UserName")=""} alert('对不起,请登录后再提问!'); ShowLogin(); return false; {/IF} if(obj.topic.value==""){ alert("友情提示\n\n请输入问题标题!"); obj.topic.focus(); return false; } if (FCKeditorAPI.GetInstance("askcontent").GetXHTML()=='') { alert("友情提示\n\n请输入问题详细描述!"); FCKeditorAPI.GetInstance('askcontent').Focus(); return false; }
try{ if(obj.classid.value=="" && obj.smallclassid.value==""){ alert("友情提示\n\n请选择问题分类!"); return false; } } catch(e){} {IF:KS.ASetting(6)="1"} if(obj.Verifycode.value==""){ alert("友情提示\n\n请输入验证码!"); obj.Verifycode.focus(); return false; } {/IF} return true; } function resets(){ $('#topic').val(""); $('#askcontent').val(""); } function getCode(){ $("#showVerify").html('<IMG id="VerifyImg" style="cursor:pointer;" src="../KS_Inc/verifycode.asp?n=<% =Timer%>" onClick="this.src=\'../ks_inc/verifycode.asp?n=\'+ Math.random();" align="absmiddle">'); }
$(document).ready(function(){ if(document.askedform.topic.value != "") searchRelated(document.askedform.topic);
{IF:KS.C("UserName")=""} try{ $("#topic").keydown(function(){ alert('对不起,请登录后再提问!'); ShowLogin(); return false; }); $("#askcontent").keydown(function(){ alert('对不起,请登录后再提问!'); ShowLogin(); return false; })
}catch(e){} {/IF} })
function ShowLogin(){ popupIframe("会员登录","../user/userlogin.asp?Action=Poplogin",387,184,'no') }
var SearchRelatedUrl = 'ajax_search.asp?word='; function searchRelated(searchField) { var content = escape(searchField.value); if (content.length<2) return; $.get(SearchRelatedUrl,{word:content},function(result){ $("#RelatedQuestionZone").html(unescape(result)); })
} //--> </script> 二、问答系统的样式问题 问题系统的一部分标签输出的样式都在源码中控制的,我们尽可能的不要去动源码,那么解决的办法就是新建一个样式,样式的名称可以和源码中的样式名称相一致 通用样式如下: /* ===========================问答系统样式============================ */ .asksearch { width:960px; margin:5px auto 0px; height:35px; border:1px solid #DFE5E8; background:#F4F7FC; padding-top:8px; } .asksearch_l { width:500px; float:left; } .asksearch_r { width:450px; float:right; line-height:35px; color:#CC6600; font-size:14px; font-weight:bold; } .askmain { width:950px; margin:0px auto; } #askad { width:202px; height:480px; background: #FFFFFF; padding: 5px; } .ask_t { font-size:12px; } .ask_t span { font-size:18px; font-weight: bold; color: #009900; font-style: italic; } #ask_list dl { font-size:12px; } #ask_list dt { font-size:14px; color: #009900; } #ask_list dt a { font-size:14px; color: #009900; font-weight: bold; } #ask_list dd { margin: 0px auto; width: 210px; } a.ask_classname { font-size:14px; color: #009900; } #ask_news img { display: inline; } .xuanscss { color: #009900; } #ask_class_list a { font-size:12px;} #ask_class_list li { width:68px; float: left; } #ask_class_ft { margin-top: 5px; margin-bottom: 5px; border-bottom: 1px solid #000000; height: 30px; } #ask_class_ft a { font-size:14px; font-weight: bold; } #ask_class_ft li { margin-right: 10px; float: left; } #ask_cont { width:688px; margin-left:10px; float: left; } #ask_tab_hover222 tr:hover { background: #F5F5F5; } /*文章分页样式*/这个分页样式是科讯新加的,如果你在文章等系统中应用了新的分页样式的话建议改成其他的样式,否则你在问答系统中修改的这个样式会影响到文章系统,因为他们用的是一个样式,而且我遇到在文章列表中出现两个相同分页,不知道是我的问题还是系统的问题,反正我是更换了文章系统的分页样式后才正常的 #fenye { clear:both; } #fenye a { text-decoration:non; } #fenye .prev, #fenye .next { width:52px; text-align:center; } #fenye a.curr { width:22px; background:#1f3a87; border:1px solid #dcdddd; color:#fff; font-weight:bold; text-align:center; } #fenye a.curr:visited { color:#fff; } #fenye a { margin:5px 4px 0 0; color:#1E50A2; background:#fff; display:inline-table; border:1px solid #dcdddd; float:left; text-align:center; height:22px; line-height:22px } #fenye a.num { width:22px; } #fenye a:visited { color:#1f3a87; } #fenye span { display:block; margin:10px } 三、搜索核心代码: <script> check=function(){ if (document.getElementById('KeyWord').value=='') { alert("对不起,您没有输入关键字!"); return false } } goask=function(){ if (document.getElementById('KeyWord').value=='') { alert("对不起,您没有输入关键字!"); return false }else{ window.open('a.asp?q='+document.getElementById('KeyWord').value); return false; }
} </script> <form action="search.asp" method="post" name="myform" id="myform"> <table border="0" align="left"> <tr> <td><img src="../ask/images/icon_vote.gif" /></td> <td>问题搜索 <input type="text" name="KeyWord" id="KeyWord" size="20" /> <input type="image" src="../ask/images/ask003.gif" onClick="return(check())" align="absmiddle" /> <input type="image" src="../ask/images/ask004.gif" onClick="return(goask())" align="absmiddle" /></td> </tr> </form> </table> 四、相关标签 已经解决问题个数{@ask.resolvednum} 未解决问题个数{@ask.unresolvednum} 列表分页{@foot.showpage} 一级分类控制文件function.asp 找到strTempMenu = strTempMenu & GetChildList(classid,7)'这里的7是控制输出的列数,如果你的二级分类名称字数少的话可以增加输出的列数 样式: #ask_list dl { font-size:12px; } #ask_list dt { font-size:14px; color: #009900; } #ask_list dt a { font-size:14px; color: #009900; font-weight: bold; } #ask_list dd { margin: 0px auto; width: 210px; } 用户排行{=GetTopUser(12,)}括号中的12是调用多少个会员,可以修改 这个标签所调用的样式, #askuserlist {/*控制列表的样式*/ height:325px; padding-left: 15px; border:1px solid #DADADA; background: #FFFFFF; } #askuserlist li {/*控制会员头像,名字等*/ color:#003366; text-align:center; float:left; padding-right:16px; padding-left: 2px; } #askuserlist img {/*控制会员头像的大小*/ width:50px; height:50px; border:#ccc 1px solid; padding:2px; margin-top:5px; display: inline; } a.u { /*控制会员名字,如果超过宽度就隐藏,而不会跑到第二行*/width:44px; overflow: hidden; display: block; height: 20px; line-height: 20px; } 分类列表用二级分类列表标签{@class.childclasslist} 样式 #ask_class_list a { font-size:12px;} #ask_class_list li { width:68px; float: left; } #ask_class_ft { margin-top: 5px; margin-bottom: 5px; border-bottom: 1px solid #000000; height: 30px; } #ask_class_ft a { font-size:14px; font-weight: bold; } #ask_class_ft li { margin-right: 10px; float: left; } 选项卡导航标签{@head.shownav} 样式(控制选中和非选中的样式) .curr{ cursor:pointer; width:84px; background:#FFFFFF; border-bottom:0px solid #000000; line-height:30px; text-align: center; height: 30px; border-top: 1px solid #000000; border-right: 1px solid #000000; border-left: 1px solid #000000; } .normal{ cursor:pointer; width:84px; height:30px; background:#EBEBEB; text-align: center; line-height: 30px; }
问题列表循环开始标记{@topiclist.begin} 问题列表循环结束标记{@topiclist.end} 上面两个和科讯的循环标签loop类似,需要有开始和结束,放在你需要循环的地方 问题列表字段 问题的链接地址{@topic.topicurl} 问题的标题{@topic.title} 悬赏分{@topic.reward}注意,这个标签会输出金币的图片,div布局中需要加样式让他左浮动,表格布局没有影响 回答数量标签{@topic.postnum} 问题状态,用图片显示,调用代码src="images/ask{@topic.status}.gif 提问人{@topic.username} 提问时间{@topic.time} 详细问题中的标签建议全部复制,其中用了一些判断语句,如果你不是很懂这些的话就不要改了,样式可以用css控制 问题列表标签同上 搜索的关键字{@search.keyword} 搜索结果的数量{@search.totalnum} 我要提问核心代码,建议不要改动 <iframe name="_hideframe" style="display:none;"></iframe> <table width="100%" border="0" cellpadding="0" cellspacing="6"> <form name="askedform" id="askedform" method="post" action="?" target="_hideframe" onSubmit="return checkform(this);"> <input type="hidden" name="action" value="save" /> <tr> <td width="15%" align="right"><b>问题标题:</b></td> <td width="85%"><input type="text" size="77" name="topic" id="topic" value="{@get.question}" maxlength="150" onKeyUp="searchRelated(this)" /> <font color="red">*</font></td> </tr> <tr> <td align="right"><b>详细描述:</b></td> <td><textarea style="display:none" name="askcontent" id="askcontent" cols="80" rows="8" wrap="PHYSICAL"></textarea><br/>
<iframe id="content___Frame" src="../KS_Editor/FCKeditor/editor/fckeditor.html? InstanceName=askcontent&Toolbar=Basic" width="98%" height="150" frameborder="0" scrolling="no"></iframe>
<br /> <span>详细描述您的问题,描述越细致,越容易得到准确回答。</span></td> </tr> <tr> <td align="right"><b>问题分类:</b></td> <td> <script src="category.asp" language="javascript"></script> <div style="clear:both"><font color="red">*</font> <span>请您选择正确的分类,以使您的问题得到 更专业的解答。</span></div></td> </tr> <tr> <td align="right"><b>有效天数:</b></td> <td><input type=text name="ExpiredDays" maxLength=6 size="8" value="15" tabindex="3" class="textbox" /> 天 过提问时间指定的天数之后,问题将被关闭。 </td> </tr> <tr> <td align="right"><b>悬 赏 分:</b></td> <td><select name="scores"> <option value="0">无悬赏</option> <option value="5">5分</option> <option value="10">10分</option> <option value="15">15分</option> <option value="20">20分</option> <option value="30">30分</option> <option value="50">50分</option> <option value="80">80分</option> <option value="100">100分</option> </select> 您当前的积分是 <font color="red">{@Get.UserScore}分</font> <span>设置悬赏可以吸引到更多更精彩的回答。</span></td> </tr> <tr> <td align="right"><b>匿名设定:</b></td> <td><input type="checkbox" name="anonym" id="anonym" value="1"/> <span>您可以对问题设定匿名,但您需要付出积分 <font color="red">{@Get.AnonymScore}分</font>。 </span></td> </tr> {IF:KS.ASetting(6)="1"} <tr> <td align="right"><b>验 证 码:</b></td> <td><input type=text name="Verifycode" onClick="getCode()" maxLength=6 size="8" tabindex="3" class="textbox" /> <span id="showVerify">点击输入框获取</span></td> </tr> {/IF}
<tr> <td align="right"></td> <td><input width="76" height="22" type="image" src="images/ask_submit.jpg" name="asksubmit" id="asksubmit"/> <img style="cursor:pointer" src="images/ask_cancel.jpg" onClick="resets();"/> </td> </tr> </form> </table> 其他如最新问题,悬赏问题等标签可以直接从后台的问答标签中新建,注意选择属性 |
|
支持(0) | 反对(0) 顶端 底部 |
huangrongyou 发表于:2009/9/25 22:15:00 | 只看该作者 查看该作者主题
沙发
|
|
支持(0) | 反对(0) 顶端 底部 |
支持(0) | 反对(0) 顶端 底部 |
支持(0) | 反对(0) 顶端 底部 |
支持(0) | 反对(0) 顶端 底部 |
时尚网络技术,网站制作www.kysns.com
mtv网站mtv.kysns.com | |
支持(0) | 反对(0) 顶端 底部 |
qq16829721 发表于:2010/10/18 22:49:01 | 只看该作者 查看该作者主题
7楼
|
|
支持(0) | 反对(0) 顶端 底部 |
<上一主题 | 下一主题 > |