建立视图

§   后台视图

后台视图有两个页面完成

1、列表页视图

文件:./apps/book/view/index.php

<?php $this->display('header', 'system');?>
<link rel="stylesheet" type="text/css" href="<?php echo IMG_URL?>js/lib/tablesorter/style.css"/>
<link rel="stylesheet" type="text/css" href="<?php echo IMG_URL?>js/lib/pagination/style.css"/>
<link rel="stylesheet" type="text/css" href="<?php echo IMG_URL?>js/lib/contextMenu/style.css"/>
<script type="text/javascript" src="<?=IMG_URL?>js/lib/cmstop.table.js"></script>
<script type="text/javascript" src="<?=IMG_URL?>js/lib/jquery.tablesorter.js"></script>
<script type="text/javascript" src="<?=IMG_URL?>js/lib/cmstop.contextMenu.js"></script>
<script type="text/javascript" src="<?=IMG_URL?>js/lib/jquery.pagination.js"></script>
<script type="text/javascript" src="apps/book/js/book.js"></script>
<div class="bk_10"></div>
<div class="tag_1 mar_l_8">
            <ul class="tag_list" id="bystate_list">
                        <li><a href="javascript:book.reload('state=all');" class="s_3" >
全部</a></li>
                        <li><a href="javascript:book.reload('state=0');" >
未审核</a></li>
                        <li><a href="javascript:book.reload('state=1');" >
未回复</a></li>
                        <li><a href="javascript:book.reload('state=2');" >
已回复</a></li>
            </ul>
</div>
<div class="bk_8"></div>
<table width="98%" cellpadding="0" cellspacing="0" id="item_list" class="tablesorter table_list mar_l_8">
            <thead><tr>
                        <th width="35" class="t_l bdr_3"><input type="checkbox" id="check_all" /></th>
                        <th >
留言内容</th>
                        <th width="12%">
留言人</th>
                        <th width="15%" class="ajaxer"><div name="addtime">
发布时间</div></th>
                        <th width="9%">
状态</th>
                        <th width="80">
操作管理</th>
            </tr></thead>
            <tbody id="list_body"></tbody>
</table>
<div class="clear"></div>
<ul id="right_menu" class="contextMenu">
            <li class="edit"><a href="#book.view">
详情(回复)</a></li>
            <li class="check"><a href="#book.check">
审核</a></li>
            <li class="delete"><a href="#book.del">
删除</a></li>
</ul>
<div class="table_foot">
            <div id="pagination" class="pagination f_r"></div>
            <p class="f_l">
                        <button type="button" onclick="book.check()" class="button_style_1">
审核</button>&nbsp;
                        <button type="button" onclick="book.del()" class="button_style_1">
删除</button>
            </p>
</div>
<script type="text/javascript">
book.init();
</script>
<?php $this->display('footer', 'system');?>

2、详细信息(回复)页视图

文件:./apps/book/view/view.php

<form id="<?=$app?>_<?=$controller?>_view" id="<?=$app?>_<?=$controller?>_view" method="POST" class="validator" action="?app=<?=$app?>&controller=<?=$controller?>&action=reply">
<input type="hidden" name="id" id="id" value="<?=$id?>" />
<table width="98%" border="0" cellspacing="0" cellpadding="0" class="table_form">
    <tr>
        <td colspan="2"><span id="pic"></span></td>
    </tr>
            <tr>
                        <th width="60">
留言者:</th>
        <td><?php echo $username; ?></td>
    </tr>
            <tr>
                        <th>Email
</th>
        <td><?php echo $email; ?>&nbsp;</td>
    </tr>
    <tr>
        <th>
留言时间:</th>
        <td><?php echo $addtime; ?>&nbsp;</td>
    </tr>
   <tr>
        <th>
留言IP</th>
        <td><?php echo $ip; ?>&nbsp;</td>
    </tr>
    <tr>
        <th>
留言内容:</th>
        <td><textarea><?php echo $content; ?></textarea></td>
    </tr>
    <tr>
        <th>
回复内容:</th>
        <td><textarea id="reply" name="reply"><?php echo $reply; ?></textarea></td>
    </tr>
    <?php if(!empty($replytime)){ ?>
    <tr>
        <th>
回复时间:</th>
        <td><?php echo $replytime; ?></td>
    </tr>
    <?php } ?>
</table>
</form>

后台使用了独立的JS文件和表单验证配置文件,存储在 ./public/admin/apps/book/后台公共目录下。

文件:./public/admin/apps/book/js/book.js

(function($){
var tableApp = null;
var book = {
            init: function(){
                        var manage_td = '<img src="images/delete.gif" title="
删除" alt="删除" width="16" height="16" class="manage" onclick="book.del(\'{id}\');"/>';
                        var row_template = '<tr id="row_{id}">';
                        row_template +='        <td><input type="checkbox" class="checkbox_style" name="chk_row" id="chk_row_{id}" value="{id}" /></td>';
                        row_template +='        <td><a href="#book.view({id})"">{content}</a></td>';
                        row_template +='        <td>{username}</td>';
                        row_template +='        <td class="t_c">{addtime}</td>';
                        row_template += '    <td class="t_c">{state}</td>';
                        row_template +='        <td class="t_c" id="manage_{id}" name="manage" value="manage">'+manage_td+'</td>';
                        row_template +='</tr>';
 
                        tableApp = new ct.table('#item_list', {
                                   rowIdPrefix : 'row_',
                                   pageSize : 15,
                                   rowCallback: 'init_row_event',
                                   dblclickHandler : 'book.view',
                                   jsonLoaded : 'json_loaded',
                                   template : row_template,
                                   baseUrl  : '?app=book&controller=index&action=page'
                        });
                        tableApp.load();
            },
            reload: function(where){
                        tableApp.load(where);
            },
            view:function(id){
                        ct.formDialog({title:'
查看留言信息',height:330,width:400},'?app=book&controller=index&action=view&id='+id,function(json){
                                               if(json.state){
                                                           ct.ok(json.info);
                                                           return true;
                                               }else{
                                                           return false;
                                               }
                                   }
                        );
            },
            del: function(id){
                        var msg = '';
                        if(id === undefined){
                                   id = tableApp.checkedIds();
                                   if (!id.length) {
                                               ct.warn('
请选中要删除项');
                                               return;
                                   }
                                   msg = '
确定删除选中的<b style="color:red">'+id.length+'</b>条记录吗?';
                        }else{
                                   msg = '
确定删除编号为<b style="color:red">'+id+'</b>的记录吗?';
                        }
                        ct.confirm(msg,function(){
                                   var data = 'id='+id;
                                   $.getJSON('?app=book&controller=index&action=delete', data, function(json){
                                               json.state
                                               ? (ct.warn(json.info), tableApp.deleteRow(id))
                                               : ct.warn(json.error);
                                   });
                        });
            },
            check: function(id){
                        var msg = '';
                        if(id === undefined){
                                   id = tableApp.checkedIds();
                                   if (!id.length) {
                                               ct.warn('
请选中要审核的项');
                                               return;
                                   }
                        }
                        var data = 'id='+id;
                        $.getJSON('?app=book&controller=index&action=check', data, function(json){
                                   json.state
                                   ? ct.ok(json.info)
                                   : ct.warn(json.error);
                        });
}
}
window.book = book;
function init_row_event(id, tr) { }
function json_loaded(json) { }
})(jQuery);

§   前台模版

由于该应用要求使用ajx在同一页面完成所有操作,所以模版只有一个页面。

文件:./templates/default/book/index.html

内容如下:

<!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={$CONFIG[charset]}" />
<title>{$SETTING['bookname']}</title>
<script type="text/javascript" src="{IMG_URL}js/config.js"></script>
<script type="text/javascript" src="{IMG_URL}js/lib/jquery.js"></script>
<script type="text/javascript" src="{IMG_URL}apps/book/js/book.js"></script>
<link href="{IMG_URL}apps/book/css/book.css" type="text/css" rel="stylesheet" rev="stylesheet" media="screen"  />
</head>
<body>
 
<div id="header">
            <h1>{$SETTING['bookname']}</h1>
            <p>
关于cmstop,你想说些什么?</p>
</div>
<div id="main">
            <div id="m_right">
                        <h2>
留言须知</h2>
                        <p>
一、不得发表违反中华人民共和国宪法和法律、违反改革开放和四项基本原则的言论。<br/>
                                  
二、不得发表造谣、诽谤他人的言论。<br/>
                                  
三、不得发表未经证实的消息,亲身经历请注明。<br/>
                                  
四、请勿发表任何形式的广告。<br/>
                                  
五、请勿发表与国家工商行政管理总局工作无关的言论。<br/>
                                  
六、请留真实联系方式以便核对,联系方式不实者,留言将予以删除。<br/>
                                  
七、本栏目非论坛性质,只用于国家工商行政管理总局机关和公众之间的交流,不用于公众之间的交流。<br/>
                        </p>
            </div>
            <div id="m_left">
                        <div id="add">
                                   <form name="book_add" id="book_add">
                                               <label for="username">
留言者:</label><br/>
                                               <input type="text" name="username" id="username" size="20" class="inputnew" /><br/>
                                               <label for="email">Email
</label><br/>
                                               <input type="text" name="email" id="email" size="50" class="inputnew" /><br/>
                                               <label for="content">
留言内容:</label><br/>
                                               <textarea name="content" id="content" rows="5" cols="73" class="textarea" /></textarea><br/>
                                               <span style="float:right;"><input type="submit" id="submit" class="button" value="
提 交" /></span>
                                               <span><!--{if $SETTING['iscode'] }-->
                                               <label for="seccode">
验证码:</label>
                                               <input name="seccode" id="seccode" size="4" type="text" value="" maxlength="4" class="inputnew"  />
                                               <img src="{url('system/seccode/image')}" id="seccodeimg" onclick="this.src='{url('system/seccode/image')}&id='+Math.random()*5;" style="cursor:pointer;" width="48" height="20"  align="absmiddle" class="img_mar"/>
                                               <a  href="javascript:;" onclick="$('#seccodeimg').click()" class="ch-yzm">
换一张</a>
                                               <span class="warn" style="display:none;"></span>
                                               </li>
                                               <!--{else}-->
                                              
如果你有任何问题,请联系CmsTop
                                               <!--{/if}--></span>
                                   </form>
                        </div>
                        <div id="list"></div>
                        <div id="more" class="more">
正在加载更多内容...</div>
            </div>
</div>
<div id="footer">&copy; CmsTop 2011</div>
 
<script language="JavaScript">
$(init);
</script>
 
</body>
</html>

该模版使用了单独的JSCSS文件(JSCSS和图片文件均属于资源型文件,前台应用资源文件存储在 ./public/img/apps/

文件:./public/img/apps/book/js/book.js

内容如下:

(function($){
var types = ['DOMMouseScroll', 'mousewheel'];
$.fn.mousewheel = function(fn) {
            return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");
};
$.event.special.mousewheel = {
            setup: function() {
                        if ( this.addEventListener )
                                   for ( var i=types.length; i; )
                                               this.addEventListener( types[--i], handler, false );
                        else
                                   this.onmousewheel = handler;
            },
 
            teardown: function() {
                        if ( this.removeEventListener )
                                   for ( var i=types.length; i; )
                                               this.removeEventListener( types[--i], handler, false );
                        else
                                   this.onmousewheel = null;
            }
};
function handler(event) {
            var args = [].slice.call( arguments, 1 ), delta = 0, returnValue = true;
 
            event = $.event.fix(event || window.event);
            event.type = "mousewheel";
 
            if ( event.wheelDelta ) delta = event.wheelDelta/120;
            if ( event.detail ) delta = -event.detail/3;
 
            // Add events and delta to the front of the arguments
            args.unshift(event, delta);
 
            return $.event.handle.apply(this, args);
}
})(jQuery);
 
(function($){
 
var frm = null,
            btn = null,
            ul = null,
            more = null,
            lock = false,
            page = 0,
            win = $(window),
            isunbind = false;
 
function add(e){
            var f = this;
            e.preventDefault();
            e.stopPropagation();
 
            var data = frm.serialize();
            btn.attr('disabled', true);
            $.ajax({
                        url:'?app=book&controller=index&action=add',
                        dataType:'json',
                        data:data,
                        type:'POST',
                        success:function(json){
                                   if (json.state) {
                                               var li = createRow(json.data);
                                               ul.prepend(li.hide());
                                               li.slideDown();
                                   } else {
                                               if(json.error){
                                                           alert(json.error);
                                               }else{
                                                           alert('
添加失败');
                                               }
                                   }
                        },
                        error:function(){
                                   alert('
请求异常');
                        },
                        complete:function(){
                                   btn.attr('disabled', false).removeAttr('disabled');
                        }
            });
}
 
function createRow(row) {
            var li = '<li>'+
                        '<strong>'+(row.username||'
网友')+'</strong>'+
                        '<em>
'+row.email+'</em>'+
                        '<span>'+row.addtime+'</span>'+
                        '<p>'+row.content+'</p>';
            if(row.reply){
                        li = li + '<p class="reply"><b>
回复:</b>' + row.reply + '</p>';
            }
            li = li + '</li>';
            return $(li);
}
 
function spage(e, data){
            if (data < 0 && document.documentElement.scrollTop + win.height() > document.documentElement.scrollHeight - 50)
            {
                        query(page+1);
            }
}
function query(p){
            if (lock) {
                        return;
            }
            lock = true;
            more.addClass('loading');
            $.ajax({
                        url:'?app=book&controller=index&action=page&page='+p,
                        dataType:'json',
                        type:'GET',
                        success: function(json){
                                   for (var i=0, t; t = json[i++];) {
                                               ul.append(createRow(t));
                                   }
                                   if (p <= 1) {
                                               win.mousewheel(spage);
                                   }
                                   if (!isunbind && p > 4) {
                                               win.unbind('mousewheel', spage);
                                               isunbind = true;
                                   }
                                   if (json.length) {
                                               page = p;
                                   } else if (!isunbind) {
                                               win.unbind('mousewheel', spage);
                                               isunbind = true;
                                   }
                        },
                        complete:function(){
                                   lock = false;
                                   more.removeClass('loading');
                        }
            });
}
 
window.init = function(){
            frm = $('#book_add').bind('submit', add);
            btn = $('#submit');
            ul = $('#list');
            more = $('#more');
            query(1);
};
})(jQuery);

文件:./public/img/apps/book/css/book.css

内容如下:

 
div,form,ul,ol,li,span,input,h1,h2,h3,p,b,strong{margin:0;padding:0;margin:0;}
ul,ol,li{
            list-style:none;
}
.inputnew{
            padding:2px;
            border:1px solid #ACD6F6;
            height:23px;
            line-height:23px;
            border-radius: 5px;
}
.textarea{
            padding:2px;
            border:1px solid #ACD6F6;
            line-height:23px;
            border-radius: 5px;
}
body{
            text-align:center;
            font-size:14px;
}
#header{
            width:960px;
            margin:0 auto;
            text-align:left;
            margin-top:20px;
            margin-bottom:10px;
}
#header h1{font-size:30px;}
#header p{color:#666;}
 
#main{
            width:960px;
            margin:0 auto;
            text-align:left;
            overflow:auto;
            zoom:1;
}
#m_left{
            width:660px;
}
#m_right{
            float:right;
            width:280px;
            background:#FFF7D2;
            border:1px solid #FFCC01;
}
#m_right h2{
            font-size:16px;
            padding:10px;
}
#m_right p{
            line-height:150%;
            padding:10px 20px;
}
#add{
            padding:20px;
            background:#EEF7FF;
            color:#666;
            border:1px solid #D0E7FA;
}
#add label{
            color:#666;
            font-size:14px;
            font-weight:bold;
            line-height:30px;
}
#add span{
            display:block;
            padding-top:5px;
}
#footer{
            width:960px;
            margin:0 auto;
            text-align:center;
            margin-top:20px;
}
.button{
            border:1px solid #389407;
            background:#47AD0D;
            color:#fff;
            height:25px;
            line-height:20px;
            padding:2px 5px;
            cursor:pointer;
}
#list{
            padding:10px 0;
}
#list li{
            padding:5px;
            border-bottom: 1px solid #ACD6F6;
}
#list strong{
            font-size:14px;
            font-weight:bold;
            color:#0066CC;
}
#list em{
            font-size:12px;
            color:#FF9933;
}
#list span{
            float:right;
}
#list p{
            padding:10px;
}
#list .reply{
            background:#EEF7FF;
}
.more {
            display:none;
}
.loading{
            border:1px solid #ACD6F6;
            background:#EEF7FF;
            text-align:center;
            height:50px;
            line-height:50px;
            display:block;
}

注:本示例模版全部使用HTML+JS+CSS完成,没有使用图片文件,如果有图片也应放在和CSS文件夹同级目录,以方便使用IMG_URL调用资源。

§   总注

在视图中通常会使用到三个公共位置

前台apps动态调用数据文件目录           ./public/app/apps/应用名称
前台静态调用资源文件目录        ./public/img/apps/应用名称
后台控制器调用的资源文件目录  ./public/admin/apps/应用名称



Copyright ©2009 - 2014 CmsTop.Com.All rights reserved.
思拓合众