recherche

Maison  >  Article  >  php教程  >  Implémentation de l'effet de page 'menu gauche, contenu droit' basé sur Ajax div

Implémentation de l'effet de page 'menu gauche, contenu droit' basé sur Ajax div

高洛峰
高洛峰original
2016-12-24 15:09:422276parcourir

Démonstration de l'effet :

①Page par défaut (index.jsp) :

基于Ajax div的“左边菜单、右边内容”页面效果实现

② : Après avoir cliqué sur l'option de liste d'utilisateurs sous l'onglet de gestion des utilisateurs sur le à gauche , le contenu de la page par défaut de droite est mis à jour avec le contenu de la page de liste d'utilisateurs (userList.jsp) :

基于Ajax div的“左边菜单、右边内容”页面效果实现

③ : De la même manière, cliquez sur sur la liste des produits sous les étiquettes de gestion des produits et de gestion des commandes, lors de la commande de la liste, le contenu du côté droit sera actualisé en fonction du contenu de la page de la liste des produits (productList.jsp) et de la page de la liste des commandes (recordList.jsp)

De cette façon, Ajax div est utilisé pour réaliser la sélection de menu à gauche et le contenu à droite Effet d'affichage, jetons un coup d'œil au processus d'implémentation spécifique

1 :

L'exemple de programme pour l'ensemble de la démonstration comprend la page par défaut (index.jsp), la page de liste d'utilisateurs (userList.jsp), la page de liste de produits (productList.jsp), la page de gestion des commandes (recordList.jsp)

utilise le framework Bootstrap et les icônes FontAwesome (pas question, il y a trop peu d'icônes fournies avec bootstrap o(╯□╰ )o), veuillez vous référer au site officiel pour savoir comment utiliser ces deux produits. Ils sont relativement. simple

Jetons d'abord un coup d'œil au code d'index.jsp. Je l'ai essentiellement commenté en détail : 

<%@ page language="java" contentType="text/html; charset=UTF-8"
  pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">  <%-- 在IE运行最新的渲染模式 --%>
    <meta name="viewport" content="width=device-width, initial-scale=1">  <%-- 初始化移动浏览显示 --%>
    <meta name="Author" content="Dreamer-1.">
    <!-- 引入各种CSS样式表 -->
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/font-awesome.css">
    <link rel="stylesheet" href="css/index.css">  <!-- 修改自Bootstrap官方Demon，你可以按自己的喜好制定CSS样式 -->
    <link rel="stylesheet" href="css/font-change.css">  <!-- 将默认字体从宋体换成微软雅黑（个人比较喜欢微软雅黑，移动端和桌面端显示效果比较接近） -->    
    <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <title>- 后台管理系统 -</title>
  </head>
  <body>
  <!-- 顶部菜单（来自bootstrap官方Demon）==================================== -->
    <nav class="navbar navbar-inverse navbar-fixed-top">
       <div>
        <div>
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" >
            <span>Toggle navigation</span>
            <span></span>
            <span></span>
            <span></span>
          </button>
           <a href="index.jsp">XXXX.com</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav navbar-right">            
            <li><a href="###" onclick="showAtRight(&#39;userList.jsp&#39;)"><i class="fa fa-users"></i> 用户列表</a></li>  
            <li><a href="###" onclick="showAtRight(&#39;productList.jsp&#39;)"><i class="fa fa-list-alt"></i> 产品列表</a></li>
            <li><a href="###" onclick="showAtRight(&#39;recordList.jsp&#39;)" ><i class="fa fa-list"></i> 订单列表</a></li>  
          </ul>
        </div>
       </div>
    </nav>
  <!-- 左侧菜单选项========================================= -->
    <div>
      <div>
        <div class="col-sm-3 col-md-2 sidebar">    
          <ul class="nav nav-sidebar">
            <!-- 一级菜单 -->
            <li><a href="#userMeun" class="nav-header menu-first collapsed" data-toggle="collapse">
              <i class="fa fa-user"></i>  用户管理 <span>(current)</span></a>
            </li> 
            <!-- 二级菜单 -->
            <!-- 注意一级菜单中<a>标签内的href="#……"里面的内容要与二级菜单中<ul>标签内的id="……"里面的内容一致 -->
            <ul id="userMeun" class="nav nav-list collapse menu-second">
              <li><a href="###" onclick="showAtRight(&#39;userList.jsp&#39;)"><i class="fa fa-users"></i> 用户列表</a></li>
            </ul>
            <li><a href="#productMeun" class="nav-header menu-first collapsed" data-toggle="collapse">
              <i class="fa fa-globe"></i>  产品管理 <span>(current)</span></a>
            </li> 
            <ul id="productMeun" class="nav nav-list collapse menu-second">
              <li><a href="###" onclick="showAtRight(&#39;productList.jsp&#39;)"><i class="fa fa-list-alt"></i> 产品列表</a></li>
            </ul>
            <li><a href="#recordMeun" class="nav-header menu-first collapsed" data-toggle="collapse">
              <i class="fa fa-file-text"></i>  订单管理 <span>(current)</span></a>
            </li> 
            <ul id="recordMeun" class="nav nav-list collapse menu-second">
              <li><a href="###" onclick="showAtRight(&#39;recordList.jsp&#39;)" ><i class="fa fa-list"></i> 订单列表</a></li>
            </ul>
          </ul>
        </div>
      </div>
    </div>
<!-- 右侧内容展示==================================================  -->      
         <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
          <h1><i class="fa fa-cog fa-spin"></i> 控制台<small>   欢迎使用XXX后台管理系统</small></h1>
            <!-- 载入左侧菜单指向的jsp（或html等）页面内容 -->
             <div id="content">
                <h4>          
                  <strong>使用指南：</strong><br>
                  <br><br>默认页面内容……
                </h4>                 
             </div> 
        </div> 
    <script type="text/javascript">
    /*
     * 对选中的标签激活active状态，对先前处于active状态但之后未被选中的标签取消active
     * （实现左侧菜单中的标签点击后变色的效果）
     */
    $(document).ready(function () {
      $(&#39;ul.nav > li&#39;).click(function (e) {
        //e.preventDefault();  加上这句则导航的<a>标签会失效
        $(&#39;ul.nav > li&#39;).removeClass(&#39;active&#39;);
        $(this).addClass(&#39;active&#39;);
      });
    });
    /*
     * 解决ajax返回的页面中含有javascript的办法：
     * 把xmlHttp.responseText中的脚本都抽取出来，不管AJAX加载的HTML包含多少个脚本块，我们对找出来的脚本块都调用eval方法执行它即可
     */
    function executeScript(html)
    {
      var reg = /<script[^>]*>([^\x00]+)$/i;
      //对整段HTML片段按<\/script>拆分
      var htmlBlock = html.split("<\/script>");
      for (var i in htmlBlock) 
      {
        var blocks;//匹配正则表达式的内容数组，blocks[1]就是真正的一段脚本内容，因为前面reg定义我们用了括号进行了捕获分组
        if (blocks = htmlBlock[i].match(reg)) 
        {
          //清除可能存在的注释标记，对于注释结尾-->可以忽略处理，eval一样能正常工作
          var code = blocks[1].replace(/<!--/, &#39;&#39;);
          try
          {
            eval(code) //执行脚本
          } 
          catch (e) 
          {
          }
        }
      }
    }
    /*
     * 利用div实现左边点击右边显示的效果（以id="content"的div进行内容展示）
     * 注意：
     *  ①：js获取网页的地址，是根据当前网页来相对获取的，不会识别根目录；
     *  ②：如果右边加载的内容显示页里面有css，必须放在主页（即例中的index.jsp）才起作用
     *  （如果单纯的两个页面之间include，子页面的css和js在子页面是可以执行的。 主页面也可以调用子页面的js。但这时要考虑页面中js和渲染的先后顺序 ）
    */
    function showAtRight(url) {
      var xmlHttp;
      if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlHttp=new XMLHttpRequest();  //创建 XMLHttpRequest对象
      }
      else {
        // code for IE6, IE5
        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
      xmlHttp.onreadystatechange=function() {    
        //onreadystatechange — 当readystate变化时调用后面的方法
        if (xmlHttp.readyState == 4) {
          //xmlHttp.readyState == 4  ——  finished downloading response
          if (xmlHttp.status == 200) {
            //xmlHttp.status == 200    ——  服务器反馈正常      
            document.getElementById("content").innerHTML=xmlHttp.responseText;  //重设页面中id="content"的div里的内容
            executeScript(xmlHttp.responseText);  //执行从服务器返回的页面内容里包含的JavaScript函数
          }
          //错误状态处理
          else if (xmlHttp.status == 404){
            alert("出错了☹  （错误代码：404 Not Found），……！"); 
            /* 对404的处理 */
            return;
          }
          else if (xmlHttp.status == 403) { 
            alert("出错了☹  （错误代码：403 Forbidden），……"); 
            /* 对403的处理 */
            return;
          }
          else {
            alert("出错了☹  （错误代码：" + request.status + "），……"); 
            /* 对出现了其他错误代码所示错误的处理  */
            return;
          }  
        } 
       }
      //把请求发送到服务器上的指定文件（url指向的文件）进行处理
      xmlHttp.open("GET", url, true);    //true表示异步处理
      xmlHttp.send();
    }    
    </script>
  </body>
</html>

Remarque :

Si l'icône FontAwesomt est. ne s'affiche pas correctement, il est probable que l'adresse du fichier de police dans font-awesome.css soit erronée

基于Ajax div的“左边菜单、右边内容”页面效果实现

Veuillez vérifier le côté droit. L'url dans la case rouge correspond-elle à la chemin du fichier fonts-awesome dans la case rouge à gauche ?

2 :

code de la page userList.jsp : 

<%@ page language="java" contentType="text/html; charset=UTF-8"
  pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
  <div>
    我是用户列表 (っ´Ι`)っ
  </div>
</body>
</html>

productList.jsp : 

<%@ page language="java" contentType="text/html; charset=UTF-8"
  pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
  <div>
    我是产品列表 ╰(￣▽￣)╭
  </div>
</body>
</html>

recordList.jsp : 

<%@ page language="java" contentType="text/html; charset=UTF-8"
  pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
  <div>
    我是订单列表 <(￣ˇ￣)/
  </div>
</body>
</html>

Ces trois pages ne sont que de simples pages de démonstration, donc plus besoin d'encre

Ce qui précède est donné par l'éditeur L'effet de page implémentation du "menu gauche, contenu droit" basé sur le div Ajax que vous avez présenté, j'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Je voudrais également vous remercier tous pour votre soutien au site Web PHP chinois !


Pour plus d'articles connexes sur la mise en œuvre de l'effet de page "menu gauche, contenu droit" basé sur Ajax div, veuillez faire attention au site Web PHP chinois !


Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment implémenter jQuery pour faire défiler la barre de défilement dans un div jusqu'à une position spécifiéeArticle suivant：Comment implémenter jQuery pour faire défiler la barre de défilement dans un div jusqu'à une position spécifiée

Articles Liés

Voir plus