怎么用json数据来制作商城的产品分类菜单

这篇文章主要讲解了“怎么用json数据来制作商城的产品分类菜单”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“怎么用json数据来制作商城的产品分类菜单”吧!

创新互联2013年开创至今,是专业互联网技术服务公司,拥有项目做网站、网站设计网站策划,项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命,1280元秀山土家族苗族做网站,已为上家服务,为秀山土家族苗族各地企业和个人服务,联系电话:18980820575

数据库

我们先看一下简单的数据库表的设计。主要涉及到一个分类表,包含了4个字段cat_id,name,parent,media。

CREATE TABLE `categories`  (  `cat_id` int(11) NOT NULL AUTO_INCREMENT,  `name` varchar(150) ,  `parent` int(11) ,  `media` varchar(100),  PRIMARY KEY (`cat_id`)  );

数据表categories中的分类和子分类的数据存储类似下面的格式。

怎么用json数据来制作商城的产品分类菜单

商品分类表数据格式

categories.php

这个文件主要负责从categories表生成json数据,供前台来显示分类菜单。

 array());   while ($row = mysql_fetch_array($sql))  {  $cat_id = $row['cat_id'];  $ssql = mysql_query("select cat_id,name,media from categories where parent='$cat_id'");   // single category node  $category = array(); // temp array  $category["cat_id"] = $row["cat_id"];  $category["name"] = $row["name"];  $category["media"] = $row["media"];  $category["sub_categories"] = array(); // subcategories again an array   while ($srow = mysql_fetch_array($ssql))  {  $subcat = array(); // temp array  $subcat["cat_id"] = $srow['cat_id'];  $subcat["name"] = $srow['name'];  // pushing sub category into subcategories node  array_push($category["sub_categories"], $subcat);  }   // pushing sinlge category into parent  array_push($categories["Categories"], $category);  }  echo ((isset($_GET['callback'])) ? $_GET['callback'] : "") . '(' . json_encode($categories) . ')';  ?>

JSON 输出的格式

怎么用json数据来制作商城的产品分类菜单

json数据格式

JavaScript & HTML

实际上最重要的部分在这里,我们需要使用$.getJSON来附加分类数据到UL #menu_ul元素上,子目录数据存储在隐藏的UL 类名hideul。

    $(document).ready(function()  {   $.getJSON("categories.php?callback=?", function(data)  {  $.each(data.Categories, function(i, category)  {  var subjsondata='';  $.each(category.sub_categories, function(i, sub_categories)  {  subjsondata += "
  • "+sub_categories.name+"
  • ";  });  var jsondata =""+category.name+""+subjsondata+"  ";  $(jsondata).appendTo("#menu_ul");  });  }  );   //MouseOver on Categories  $(".category").live('mouseover',function(event)  {  $("#menu_slider").show();  var D=$(this).html();  var id=$(this).attr('id');  var V=$("#hide"+id).html();  var M=$("#hide"+id).attr("media");  $("#submenu_ul").html(V);  $("#menu_slider h4").html(D);  //Background Image Check  if(M!='null')  {  $("#menu_slider").css({"width": "450px"});  }  else {  $("#menu_slider").css({"width": "250px"});  }  $("#menu_slider").css('background', 'url(backgrounds/' + M + ') #ffffff no-repeat right bottom');  });   //Document Click  $(document).mouseup(function()  {  $("#menu_slider").hide();  });   //Mouse click on sub menu  $("#menu_slider").mouseup(function(){ return false });   //Mouse click on my account link  $("#menu_box").mouseup(function(){ return false });  });  

    $(".category").live('mouseover',function(event){}- category 分类标签li的类名。使用attr("id") 调用分类标签li的值,根据ID的类名移动.hideul 子目录的值到$("#submenu_ul").html(V)。

    HTML 代码

    //HTML Code    
      

      

    db.php

    数据库配置文件

    CSS

    #menu_box  {  border-top:solid 3px #333;  border-left:solid 1px #dedede;  border-right:solid 1px #dedede;  border-bottom:solid 1px #dedede;  min-height:400px;width:200px;  background-color:#fff;  margin-left:20px;  float:left;  position:relative;  z-index:300 }  #menu_slider  {  border-top:solid 3px #333;  border-left:solid 1px #dedede;  border-right:solid 1px #dedede;  border-bottom:solid 1px #dedede;  min-height:370px;background-color:#fff;margin-left:220px;  position:absolute;  width:250px;  position:relative;  z-index:200;  display:none;  padding:15px }  .hideul{display:none}

    感谢各位的阅读,以上就是“怎么用json数据来制作商城的产品分类菜单”的内容了,经过本文的学习后,相信大家对怎么用json数据来制作商城的产品分类菜单这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是创新互联,小编将为大家推送更多相关知识点的文章,欢迎关注!


    分享名称:怎么用json数据来制作商城的产品分类菜单
    转载源于:http://pwwzsj.com/article/igopsc.html

    其他资讯