浏览 4426 次
锁定老帖子 主题:简易基于Ext留言板源码
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
---|---|
作者 | 正文 |
发表时间:2008-09-19
以前接私活的时候给医院做个网站,搞了个基于Ext的小论坛,但后来感觉这东西比较笨重,灵活性也一般,后来的项目中基本上都选用的JQuery,一用就喜欢上他了,倒没有做广告的意思(其实JQuery框架不用我做广告,Google都用它,呵呵),不过JQuery真是太好用了,而且Plugin也很多,这里给出Ext的代码先,初学的,代码写得很乱,大家凑合着参考吧! JSP页面代码: <%@ page contentType="text/html;charset=UTF-8"%> <%@ page import="blogcn.common.StrCharUtil"%> <%@ page import="blogcn.epdsm.common.User"%> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-Type" content="text/html; charset=utf-8" /> <meta name="keywords" content="" /> <meta name="description" content="" /> <% String cateid=StrCharUtil.formatNullStr(request.getParameter("tid")); User userInfo = (User) request.getSession().getAttribute("user"); %> <script> var GCATEID="<%=cateid%>"; var loginDialog; </script> <title></title> <link rel="stylesheet" type="text/css" href="/hms/resources/css/ext-all.css" /> <link rel="stylesheet" type="text/css" href="/hms/css/post.css" /> <link rel="stylesheet" type="text/css" id="themeCSS" href="/hms/resources/css/xtheme-aero.css" /> <!-- GC --> <!-- LIBS --> <script type="text/javascript" src="/hms/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="fckeditor/fckeditor.js"></script> <script type="text/javascript" src="/hms/adapter/ext/example.js"></script> <!-- ENDLIBS --> <script type="text/javascript" src="/hms/js/ext/ext-all.js"></script> <script type="text/javascript" src="/hms/js/ext/paging.js"></script> <script type="text/javascript" src="/hms/js/ext/bbs.js"></script> <style type="text/css"> html, body { font:normal 12px verdana; margin:0; padding:0; border:0 none; overflow:hidden; height:100%; } #header{ background: url(extimages/header-bar.gif) repeat-x bottom; border-bottom: 1px solid #083772; padding:5px 4px; } #footer{ background: url(extimages/header-bar.gif) repeat-x bottom; border-top: 1px solid #083772; padding:2px 4px; color:white; font:normal 8pt arial,helvetica; } #nav { } #nav, #inner1, #inner2 { padding:10px; } #content p { margin:5px; } #nav li { padding:2px; padding-left:10px; background-image:url(extimages/bullet.gif); background-position: -3px 6px; background-repeat: no-repeat; font-size:8pt; display: block; } .x-layout-panel-north, .x-layout-panel-south, #content .x-layout-panel-center{ border:0px none; } #content .x-layout-panel-south{ border-top:1px solid #aca899; } #content .x-layout-panel-center{ border-bottom:1px solid #aca899; } #loading_container{width:350px;height:135px;margin:0px auto;} #loading_header{width:350px;height:28px;background:url(/hms/extimages/top_title.gif);color:#fff;font-weight:bold;line-height:30px;} #loading_main{border:1px solid #608599;border-top:none;width:348px;height:106px;background:url(/hms/extimages/bg_line.gif);} #loading_gif{float:left;width:39px;height:39px;margin-top:30px!important;margin-top:20px;margin-left:60px!important;margin-left:30px;} .loading_content{float:right;width:150px;height:40px;margin-right:70px!important;margin-right:35px;margin-top:30px!important;margin-top:20px;color:#245B96;line-height:22px;} .loading_content a:link,.loading_content a:visited,.loading_content a:active{ color: #95ADC3;text-decoration: none; } .loading_content a:hover{ color: #95ADC3; text-decoration:underline } </style> <script type="text/javascript"> document.onreadystatechange=function(){ if(document.readyState=="complete"){ document.getElementById("loading").style.display="none"; } } //容器管理 BbsLayout = function(){ return { init : function(){ var layout = new Ext.BorderLayout(document.body, { west: { split:true, initialSize: 200, titlebar: true, collapsible: true, minSize: 100, maxSize: 400 }, center: { autoScroll: false } }); layout.beginUpdate(); layout.add('west', new Ext.ContentPanel('nav', {title: '检验之家栏目', fitToFrame:true, closable:false})); var innerLayout = new Ext.BorderLayout('content', { south: { split:true, initialSize: 200, minSize: 100, maxSize: 400, autoScroll:true, collapsible:true, titlebar: true }, center: { autoScroll:true } }); innerLayout.add('south', new Ext.ContentPanel('inner1', "内容预览")); innerLayout.add('center', new Ext.ContentPanel('inner2')); layout.add('center', new Ext.NestedLayoutPanel(innerLayout)); layout.endUpdate(); } }; }(); Ext.EventManager.onDocumentReady(BbsLayout.init, BbsLayout, true); function initStyle(){ if(/stylesheet=([^;]+)/.test(document.cookie)) { getObject("themeCSS").href=unescape(RegExp.$1); alert(RegExp.$1); } } </script> <script> //菜单管理 Ext.onReady(function(){ var menu = new Ext.menu.Menu({ id: 'mainMenu', items: [ new Ext.menu.CheckItem({ text: '天际蓝', checked: true, group: 'theme', checkHandler: onChangeTheme }), new Ext.menu.CheckItem({ text: 'Vista风格', group: 'theme', checkHandler: onChangeTheme }), new Ext.menu.CheckItem({ text: '银灰主题', group: 'theme', checkHandler: onChangeTheme }) ] }); var tb = new Ext.Toolbar('toolbar',[{text:'发表新帖',type:'button',tooltip: '可以在选定的栏目下发表内容',handler:openBBSDialog}],{menuAlign:'tr-br'}); tb.add({ text:"删除帖子", type:"button", tooltip:"删除选中的帖子", handler:delBBSTopic }); tb.addSeparator(); tb.add({ text:"风格切换", menu: menu }); tb.addSeparator(); var curuserno='<%=userInfo==null?"":("欢迎您:"+userInfo.getUserno())%>'; var btntip=curuserno==""?"重新登录":("重新登录[目前登录用户:"+curuserno+"]"); tb.add({ text:btntip, type:"button", handler:loginBtnHandle }); tb.addSeparator(); tb.add({ text:"<img src='/hms/extimages/warning.gif'><b>点击帖子标题可预览内容,双击帖子可回复该帖子<b>", disabled:true }); function loginBtnHandle() { if(typeof(loginDialog)=="undefined") { loginDialog = new Ext.BasicDialog("login-dlg", { width:290, height:200, autoTabs:false, resizable:false, shadow:false }); var loginIt=function(){ var uname=Ext.get("txtUsername").getValue(false); var upass=Ext.get("txtUserpass").getValue(false); //远程登录 var success = function(o){ try{ var xml = o.responseXML; var msg = xml.getElementsByTagName('msg')[0]; msg=unescape(msg.firstChild.data); if(msg.indexOf("[错误提示]")>=0){ Ext.MessageBox.alert('系统提示', msg); }else{ Ext.MessageBox.alert('系统提示', msg); location.reload(); } }catch(e){ Ext.MessageBox.alert('系统出错提示', "操作不成功,请检查您的网络环境"); } }.createDelegate(this); var failure = function(o){ Ext.MessageBox.alert('系统出错提示', "操作不成功,请检查您的网络环境"); }; Ext.lib.Ajax.request('POST', '/hms/servlet/BbsServlet?act=login', {success:success, failure:failure}, 'u='+uname+'&p='+upass); } loginDialog.addKeyListener(27, loginDialog.hide, loginDialog); postBtn = loginDialog.addButton('登录', loginIt, this); loginDialog.addButton('取消', loginDialog.hide, loginDialog); } loginDialog.show("toolbar"); } function openBBSDialog() { if(BBS.dialog==null) { BBS.init(); } BBS.openDialog(); } function delBBSTopic() { if(G_TOPICGRID.getSelectionModel().getSelected()==null) { Ext.MessageBox.alert('系统出错提示', '请先选中其中一个帖子!'); }else{ var tid=G_TOPICGRID.getSelectionModel().getSelected().get('tid'); var success = function(o){ try{ var xml = o.responseXML; var msg = xml.getElementsByTagName('msg')[0]; msg=unescape(msg.firstChild.data); if(msg.indexOf("[错误提示]")>=0){ Ext.MessageBox.alert('系统出错提示', msg); }else{ G_TOPICGRID.getDataSource().reload(); } }catch(e){ Ext.MessageBox.alert('系统出错提示', "操作不成功,请检查您的网络环境"); } }.createDelegate(this); var failure = function(o){ Ext.MessageBox.alert('系统出错提示', "操作不成功,请检查您的网络环境"); }; Ext.lib.Ajax.request('POST', '/hms/servlet/BbsServlet?act=delbbs', {success:success, failure:failure}, 'tid='+tid); } } function getObject(elementId) { //获取指定id的object if (document.getElementById) { return document.getElementById(elementId); } else if (document.all) { return document.all[elementId]; } else if (document.layers) { return document.layers[elementId]; } } function onChangeTheme(item, checked) { if(checked){ var stylesheet; if(item.text=="Vista风格") stylesheet=getObject("themeCSS").href="/hms/resources/css/xtheme-vista.css"; else if(item.text=="银灰主题") stylesheet=getObject("themeCSS").href="/hms/resources/css/xtheme-gray.css"; else stylesheet=getObject("themeCSS").href="/hms/resources/css/xtheme-aero.css"; document.cookie="stylesheet="+escape(stylesheet); } } }); function clickme(tid) { var success = function(o){ try{ var val = o.responseText; Ext.get("inner1").update(unescape(val)); }catch(e){ Ext.MessageBox.alert('系统出错提示', '数据库查询中遇到问题,请联系管理员!'); } }.createDelegate(this); var failure = function(o){ Ext.MessageBox.alert('系统出错提示', '连接异常或超时,请重试,多次重试不成功,请管理管理员!'); }; Ext.lib.Ajax.request('POST', '/hms/servlet/BbsServlet?act=getbbsdtl&tid='+tid, {success:success, failure:failure}, ''); } </script> </head> <body> <div id="loading" style="width:800px;height:524px; margin-top:180px;"> <div id="loading_container"> <div id="loading_header"> 欢迎进入检验之家 </div> <div id="loading_main"> <div id="loading_gif"> <img src="/hms/extimages/no_2.gif" /> </div> <div class="loading_content"> 正在加载数据,请稍候... </div> </div> </div> </div> <div id ="container"> <div id="nav" class="x-layout-inactive-content" style="line-height:25px;background-image: url(images/bg.gif);background-repeat:repeat-x;"> </div> <div id="content" class="x-layout-inactive-content"> </div> <div id="inner1" class="x-layout-inactive-content"> </div> <div id="inner2" class="x-layout-inactive-content"> <div id="container"> <div id="toolbar"></div> </div> <div style="width:100%" class="x-box"> <div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc"></div></div></div> <div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc" style="background-image: url(images/bg.gif);background-repeat:repeat-x;"> <h3 style="margin-bottom:5px;">检验之家</h3> <div id="topic-grid" style="border:1px solid #99bbe8;overflow: hidden; width: 690px; height: 320px;position:relative;left:0;top:0;"> </div> </div></div></div> <div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div> </div> </div> </div> <!-- bbs dialog --> <div id="bbs-dlg" style="visibility:hidden;"> <div class="x-dlg-hd">发布</div> <div class="x-dlg-bd"> <div class="x-dlg-tab" title="新增帖子"> <div class="inner-tab"> <form action="" method="post" id="bbs-form" onsubmit="return false;"> <input id="act" type="hidden" name="act" value="add" /> <p><label for="url"><small>标题</small></label> <input class="textinput" type="text" name="title" id="title" value="" size="22" tabindex="3" /> </p> <p> <label><small>内容</small></label> <script type="text/javascript"> <!-- var sBasePath = 'fckeditor/'; var oFCKeditor = new FCKeditor('company_notes' ) ; oFCKeditor.BasePath = sBasePath ; oFCKeditor.Value = ''; oFCKeditor.Height = 340 ; oFCKeditor.Width = 760 ; oFCKeditor.ToolbarSet='jianyan'; var init=""; oFCKeditor.Value=init; oFCKeditor.Create() ; //--> </script> </p> </form> </div> </div> </div> <div class="x-dlg-ft"> <div id="dlg-msg"> <span id="post-error" class="posting-msg"><img src="images/warning.gif" width="16" height="16" align="absmiddle" /> <span id="post-error-msg"></span></span> <span id="post-wait" class="posting-msg"><img src="../../images/grid/loading.gif" width="16" height="16" align="absmiddle" /> 发布中...</span> </div> </div> </div> <div id="login-dlg" style="visibility:hidden;"> <div class="x-dlg-hd">用户登录</div> <div class="x-dlg-bd"> <div class="x-dlg-tab" title="Hello World 1"> <div class="inner-tab"> <br/><br/> 用户名: <input type="text" name="txtUsername" id="txtUsername" class="x-form-text"/> <br/><br/><br/> 密 码: <input type="password" name="txtUserpass" id="txtUserpass" class="x-form-text"/> </div> </div> </div> </div> </body> </html> <% if(userInfo==null){ %> <script> Ext.MessageBox.alert('系统出错提示', '很抱歉,您还没有登录不能使用本论坛,页面将自动转到首页!',MyshowResult); function MyshowResult(btn){ location.href="/hms/login.do"; } </script> <%}%> Ext代码: /* * Ext JS Library 1.1 * Copyright(c) 2006-2007, Ext JS, LLC. * licensing@extjs.com * * http://www.extjs.com/license */ var BBS = function(){ var dialog; var postBtn; var wait, error, errorMsg; var btitle,bcontent; return { init : function(){ wait = Ext.get('post-wait'); error = Ext.get('post-error'); btitle = Ext.get('title'); bcontent = Ext.get('content'); errorMsg = Ext.get('post-error-msg'); this.createDialog(); }, submitBBS : function(){ postBtn.disable(); var bbsSuccess = function(o){ postBtn.enable(); var data = o.responseText; if(data.indexOf("error")>=0) Ext.MessageBox.alert('系统出错提示', '登录超时,请重新登录!', showResult); else { G_TOPICGRID.getDataSource().reload(); dialog.hide(); } //location.reload(); }; var bbsFailure = function(o){ postBtn.enable(); Ext.MessageBox.alert('系统出错提示', '连接异常或超时,请重试,多次重试不成功,请管理管理员!', showResult); }; function showResult(btn){ }; var ttl=btitle.getValue(false); //取得FCKEDITOR内容 var FCK = FCKeditorAPI.GetInstance("company_notes"); var tcont=FCK.GetXHTML(); //var tcont=bcontent.getValue(false); var tact=Ext.get('act').getValue(false); var turi='title='+encodeURIComponent(ttl)+'&content='+encodeURIComponent(tcont)+'&act='+tact+'&cateid='+GCATEID; Ext.lib.Ajax.request('POST', '/hms/servlet/BbsServlet', {success:bbsSuccess, failure:bbsFailure}, turi); }, createDialog: function(){ dialog = new Ext.BasicDialog("bbs-dlg", { autoTabs:true, width:800, height:520, resizable:false, shadow:false }); dialog.addKeyListener(27, dialog.hide, dialog); postBtn = dialog.addButton('确认发表', this.submitBBS, this); dialog.addButton('取消发布', dialog.hide, dialog); dialog.on('hide', function(){ wait.removeClass('active-msg'); error.removeClass('active-msg'); }); }, openDialog:function(){ dialog.show("toolbar"); } }; }(); Ext.EventManager.onDocumentReady(BBS.init,BBS, true); 声明:ITeye文章版权属于作者,受法律保护。没有作者书面许可不得转载。
推荐链接
|
|
返回顶楼 | |