bootstrap学习笔记（2）--json数据处理（图书列表）
来源：互联网 发布：楚辞相关的著作 知乎 编辑：程序博客网 时间：2024/06/09 16:45
json数据，采用折叠面板展示书单。
1.html代码：
<!DOCTYPE html><html lang="zh-cn"><head><!-- 父路径 --><!-- <base href="/demo/"> --><!-- 页面编码 --><meta charset="UTF-8"><!-- 响应式布局 --><meta name="viewport" content="width=device-width,initial-scale=1"><!-- Bootstrap样式文件 --><link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"><!-- 自定义样式文件 --><link rel="stylesheet" href="styles/site.css"><!-- Jquery脚本文件 --><script src="scripts/jquery.min.js"></script><!-- Bootstrap脚本插件文件 --><script src="bootstrap/js/bootstrap.min.js"></script><!-- 标签名称 --><title>component</title></head><body class="container"><header class="page-header"><h1 class="text-capitalize">skiff</h1></header><div><div class="row"><div class="col-sm-3"><!-- 折叠面板 --><div class="panel-group" id="accordion"><div class="panel panel-default"><div class="panel-heading"><h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#comp"> 计算机类 </a></h4></div><div id="comp" class="panel-collapse collapse in"><div></div></div></div><div class="panel panel-info"><div class="panel-heading"><h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#cult"> 文学类 </a></h4></div><div id="cult" class="panel-collapse collapse"><div></div></div></div><div class="panel panel-success"><div class="panel-heading"><h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#chrd"> 儿童类 </a></h4></div><div id="chrd" class="panel-collapse collapse"><div></div></div></div></div></div><div class="col-sm-9"><div class="panel panel-info"><div class="panel-heading"></div><div class="panel-body"><blockquote><h2><span id="title"></span></h2><footer>作者：<span id="author"></span></footer></blockquote><div class="row"><div class="col-sm-6"><img id="img" alt="" class="img-responsive img-rounded"></div><div class="col-sm-6"><p class="lead">价格：<span class="glyphicon glyphicon-usd"></span><span id="price"></span></p><p class="lead">出版日期：<code><span id="pubdate"></span></code></p><p class="lead">类别：<span id="category"></span></p><p class="text-right"><button type="button" class="btn btn-primary btn-block btn-lg"><span class="glyphicon glyphicon-shopping-cart"></span>Add to cart</button></p></div></div></div></div></div></div><script>var comps = new Array();var cults = new Array();var chrds = new Array();//儿童类var a = 0;var b = 0;var c = 0;function showBookInfo(book) {$("#title").html(book.Title);$("#author").html(book.Author);$("#price").html(book.Price);$("#pubdate").html(book.PubDate);$("#category").html(book.Category.Name);$("#img").attr("src", "images/Koala.jpg");}$(function() {$.getJSON("json/books.json", null, function(data) {$(data).each(function(index, book) {if (book.Category.Id == 1) {comps[a++] = book;}if (book.Category.Id == 2) {cults[b++] = book;}if (book.Category.Id == 3) {chrds[c++] = book;}});$(comps).each(function(index, book) {$("#comp").append($("<div>").addClass("list-group").append($("<a>").addClass("list-group-item").html(book.Title).attr("href", "javascript:void(0)").data("b", book).on("click", function() {var b = $(this).data("b");showBookInfo(b);})));});$(cults).each(function(index, book) {$("#cult").append($("<div>").addClass("list-group").append($("<a>").addClass("list-group-item").html(book.Title).attr("href", "javascript:void(0)").data("b", book).on("click", function() {var b = $(this).data("b");showBookInfo(b);})));});$(chrds).each(function(index, book) {$("#chrd").append($("<div>").addClass("list-group").append($("<a>").addClass("list-group-item").html(book.Title).attr("href", "javascript:void(0)").data("b", book).on("click", function() {var b = $(this).data("b");showBookInfo(b);})));});$("a[href='#comp']").append($("<span>").addClass("badge pull-right").html(comps.length));$("a[href='#cult']").append($("<span>").addClass("badge pull-right").html(cults.length));$("a[href='#chrd']").append($("<span>").addClass("badge pull-right").html(chrds.length));});});</script></div><footer class="navbar-fixed-bottom text-center">© 2015 <span class="glyphicon glyphicon-copyright-mark"></span></footer></body></html>2.json数据：
[ { "Id": 1, "Title": "JAVA LOGIC", "Author": "Oracle", "Price": 10.99, "PubDate": "2010-01-01", "Category": { "Id": 1, "Name": "计算机类" } }, { "Id": 2, "Title": "HTML", "Author": "W3C", "Price": 20.99, "PubDate": "2010-02-01", "Category": { "Id": 1, "Name": "计算机类" } }, { "Id": 3, "Title": "SQL BASIC", "Author": "Microsoft", "Price": 30.99, "PubDate": "2010-03-01", "Category": { "Id": 1, "Name": "计算机类" } }, { "Id": 4, "Title": "C# LOGIC", "Author": "Microsoft", "Price": 40.99, "PubDate": "2010-04-01", "Category": { "Id": 1, "Name": "计算机类" } }, { "Id": 5, "Title": "JAVA OOP", "Author": "Oracle", "Price": 50.99, "PubDate": "2010-05-01", "Category": { "Id": 1, "Name": "计算机类" } }, { "Id": 6, "Title": "JAVASCRIPT", "Author": "W3C", "Price": 10.99, "PubDate": "2010-01-01", "Category": { "Id": 1, "Name": "计算机类" } }, { "Id": 7, "Title": "JSP", "Author": "Oracle", "Price": 20.99, "PubDate": "2010-02-01", "Category": { "Id": 1, "Name": "计算机类" } }, { "Id": 8, "Title": "SQL ADVANCE", "Author": "Microsoft", "Price": 30.99, "PubDate": "2010-03-01", "Category": { "Id": 1, "Name": "计算机类" } }, { "Id": 9, "Title": "C# OOP", "Author": "Microsoft", "Price": 40.99, "PubDate": "2010-04-01", "Category": { "Id": 1, "Name": "计算机类" } }, { "Id": 10, "Title": "NTIER", "Author": "Microsoft", "Price": 50.99, "PubDate": "2010-05-01", "Category": { "Id": 1, "Name": "计算机类" } }, { "Id": 11, "Title": "ASP.NET", "Author": "Microsoft", "Price": 10.99, "PubDate": "2010-01-01", "Category": { "Id": 1, "Name": "计算机类" } }, { "Id": 12, "Title": "AJAX", "Author": "Microsoft", "Price": 20.99, "PubDate": "2010-02-01", "Category": { "Id": 1, "Name": "计算机类" } }, { "Id": 13, "Title": "HIBERNATE", "Author": "Oracle", "Price": 30.99, "PubDate": "2010-03-01", "Category": { "Id": 1, "Name": "计算机类" } }, { "Id": 14, "Title": "STRUTS", "Author": "Oracle", "Price": 40.99, "PubDate": "2010-04-01", "Category": { "Id": 1, "Name": "计算机类" } }, { "Id": 15, "Title": "SPRING", "Author": "Oracle", "Price": 50.99, "PubDate": "2010-05-01", "Category": { "Id": 1, "Name": "计算机类" } }, { "Id": 16, "Title": "西游记", "Author": "吴承恩", "Price": 10.99, "PubDate": "2010-01-01", "Category": { "Id": 2, "Name": "文学类" } }, { "Id": 17, "Title": "三国演义", "Author": "罗贯中", "Price": 20.99, "PubDate": "2010-02-01", "Category": { "Id": 2, "Name": "文学类" } }, { "Id": 18, "Title": "水浒传", "Author": "施耐庵", "Price": 30.99, "PubDate": "2010-03-01", "Category": { "Id": 2, "Name": "文学类" } }, { "Id": 19, "Title": "红楼梦", "Author": "曹雪芹", "Price": 40.99, "PubDate": "2010-04-01", "Category": { "Id": 2, "Name": "文学类" } }, { "Id": 20, "Title": "傲慢与偏见", "Author": "简奥斯汀", "Price": 10.99, "PubDate": "2010-01-01", "Category": { "Id": 2, "Name": "文学类" } }, { "Id": 21, "Title": "呼啸山庄", "Author": "艾米莉勃朗特", "Price": 20.99, "PubDate": "2010-02-01", "Category": { "Id": 2, "Name": "文学类" } }, { "Id": 22, "Title": "战争与和平", "Author": "列夫托尔斯泰", "Price": 30.99, "PubDate": "2010-03-01", "Category": { "Id": 2, "Name": "文学类" } }, { "Id": 23, "Title": "红与黑", "Author": "司汤达", "Price": 40.99, "PubDate": "2010-04-01", "Category": { "Id": 2, "Name": "文学类" } }, { "Id": 24, "Title": "灰姑娘", "Author": "格林", "Price": 10.99, "PubDate": "2010-01-01", "Category": { "Id": 3, "Name": "儿童类" } }, { "Id": 25, "Title": "卖火柴的小女孩", "Author": "格林", "Price": 20.99, "PubDate": "2010-02-01", "Category": { "Id": 3, "Name": "儿童类" } }, { "Id": 26, "Title": "白雪公主", "Author": "格林", "Price": 30.99, "PubDate": "2010-03-01", "Category": { "Id": 3, "Name": "儿童类" } }, { "Id": 27, "Title": "睡美人", "Author": "格林", "Price": 40.99, "PubDate": "2010-04-01", "Category": { "Id": 3, "Name": "儿童类" } }, { "Id": 28, "Title": "小红帽", "Author": "安徒生", "Price": 10.99, "PubDate": "2010-05-01", "Category": { "Id": 3, "Name": "儿童类" } }, { "Id": 29, "Title": "拇指姑娘", "Author": "安徒生", "Price": 20.99, "PubDate": "2010-06-01", "Category": { "Id": 3, "Name": "儿童类" } }, { "Id": 30, "Title": "青蛙王子", "Author": "安徒生", "Price": 30.99, "PubDate": "2010-07-01", "Category": { "Id": 3, "Name": "儿童类" } }, { "Id": 31, "Title": "海的女儿", "Author": "安徒生", "Price": 40.99, "PubDate": "2010-08-01", "Category": { "Id": 3, "Name": "儿童类" } }]3.效果图：
0 0
- bootstrap学习笔记（2）--json数据处理（图书列表）
- bootstrap 基础知识学习（列表+表格）
- Bootstrap 学习之（十六）------ 列表组
- 杨小麦iOS学习笔记--JSON数据处理
- Bootstrap学习笔记（2）Form
- Netty4学习笔记（2）-- Bootstrap
- Netty4学习笔记（2）-- Bootstrap
- Netty4学习笔记（2）-- Bootstrap
- Bootstrap学习笔记（一）
- bootstrap 学习笔记（一）
- bootstrap 学习笔记（二）
- BootStrap学习笔记（一）
- BOOTSTRAP学习笔记（1）
- Bootstrap学习笔记（一）
- Bootstrap学习笔记（一）
- Bootstrap学习笔记（二）
- Bootstrap学习笔记（三）
- Bootstrap学习笔记（四）
- NetCore 1.0 Release 下载
- 江湖风云录-洛阳金刀门
- 1. Spring--容器
- 使用通配符配置action
- LeetCode 315. Count of Smaller Numbers After Self
- bootstrap学习笔记（2）--json数据处理（图书列表）
- centos7安装mysql
- 如何更新 OpenStack 组件？- 每天5分钟玩转 OpenStack（161）
- 大数据的解决方案-------缓存和页面静态化
- windows server 2012上搭建FTP服务器
- UnityEngine.Types.GetType(string，string)在5.5.2中过时
- POJ-----2104---K-th Number---暴力
- android开发参考资源收藏
- 【java学习之容器总结】
