当前位置:编程学习 > php >>

php实战第八天

今天是学习做后台页面布局,用得是bootcss。那么效果展示一下。

 

 

\\

 

 


布局的代码


[html]  <!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  <title>无标题文档</title> 
  <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"></head> 
 
<body> 
 
  <div class="container-fluid"> 
    <div class="row-fluid"> 
      <div class="span4"> 
        <h3>瀑布流留言板管理系统</h3> 
      </div> 
    </div> 
 
    <div class="row-fluid"> 
      <div id="menu" class="span2"> 
        <ul class="nav nav-list"> 
          <li class="nav-header">留言管理</li> 
          <li class="active"> 
            <a id="start" href="javascript:void(0);">所有留言</a> 
          </li> 
          <li class="nav-header">网站管理</li> 
          <li class=""> 
            <a href="javascript:void(0);">基本设置</a> 
          </li> 
 
        </ul> 
      </div> 
 
      <div id="main" class="span10"> 
        <div id="mainData"></div> 
      </div> 
    </div> 
 
  </div> 
 
</body> 
  <script src="js/jquery-2.0.1.min.js"></script> 
 
  <script type="text/javascript" src="js/bootstrap.min.js"></script> 
  <script type="text/javascript" src="js/admin.js"></script> 
 
</html> 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>无标题文档</title>
  <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"></head>

<body>

  <div class="container-fluid">
    <div class="row-fluid">
      <div class="span4">
        <h3>瀑布流留言板管理系统</h3>
      </div>
    </div>

    <div class="row-fluid">
      <div id="menu" class="span2">
        <ul class="nav nav-list">
          <li class="nav-header">留言管理</li>
          <li class="active">
            <a id="start" href="javascript:void(0);">所有留言</a>
          </li>
          <li class="nav-header">网站管理</li>
          <li class="">
            <a href="javascript:void(0);">基本设置</a>
          </li>

        </ul>
      </div>

      <div id="main" class="span10">
        <div id="mainData"></div>
      </div>
    </div>

  </div>

</body>
  <script src="js/jquery-2.0.1.min.js"></script>

  <script type="text/javascript" src="js/bootstrap.min.js"></script>
  <script type="text/javascript" src="js/admin.js"></script>

</html>

 

 


从中学到javascript函数

str.substr(0,20)意思是从0个字符开始取20个字符

Math.random()取随机数

switch语句

 

 

这后台是ajax的噢。写了好久的分页呢。好吧,直接上代码。

[javascript]  // JavaScript Document  
$('body').off('.data-api'); 
 
$(document).ready(function(e) { 
 
    $("#menu a").click(function() { 
 
        switch ($(this).text()) { 
            case '所有留言': 
                admin_content(1); 
                break; 
 
            case '基本设置': 
                $("#main #mainData").load('admin_config.html?r='+Math.random()); 
                break; 
 
            default: 
                break; 
        } 
 
 
 
    }); 
 
    $("#start").click(); 
}); 
 
 
/**
*留言管理
*/ 
function admin_content(page) { 
    $.ajax({ 
        url: 'http://localhost/l/admin.php?m=admin&a=content&page=&#

补充:Web开发 , php ,
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,