Jquery

ajaxインターフェース-ランダム、価格、販売注文-デモ



Ajax Interface Random



画像
画像
画像

html.css (including js)

<link href='http://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' /> <link rel='stylesheet' href='./css/main.css' /> head> <body> <div class='container'> <div class='btns'> <button class='btn' onclick='sortHandle('r')'>randombutton> <button class='btn' onclick='sortHandle('p')'>pricebutton> <button class='btn' onclick='sortHandle('s')'>Salesbutton> div> <div class='content'>div> <ul class='nav'> <li> <i class='fa fa-home fa-fw'>i> <span>Homespan> li> <li class='active'> <i class='fa fa-fire fa-fw'>i> <span>Listspan> li> <li> <i class='fa fa-cart-plus fa-fw'>i> <span>shopping cartspan> li> <li> <i class='fa fa-user fa-fw'>i> <span>minespan> li> ul> div> <!-- js --> <script src='https://cdn.bootcdn.net/ajax/libs/jquery/2.2.1/jquery.min.js'></script> <script> var books = []## `main.css` function initHtml() { var strHtml = '' books.forEach(function (book) { strHtml += ` ${book.img}' alt='' />

${book.title}

￥${book.price}



Sales:${book.sales}

` }) $('.content').html(strHtml) } /* Sort Array.sort() is sorted by the first string size by default Array.sort(function(a,b)(return a-b)) According to the value, sort from small to large Array.sort(function(a,b)(return b-a)) According to the value, sort from largest to smallest */ function sortHandle(type) { switch (type) { case 'r': books.sort(function (a, b) { return Math.random() - 0.5 }) break case 'p': books.sort((a, b) => a.price - b.price) break case 's': books.sort((a, b) => a.sales - b.sales) break default: break } initHtml() } $(function () { // bottom navigation options $('.nav>li').click(function () { $(this).addClass('active').siblings().removeClass('active') }) // $.getJSON('http://api.cat-shop.penkuoer.com/books.json', function (data) { books = data initHtml(data) }) }) </script>

main.css

html, body, .container { width: 100% height: 100% margin: 0 padding: 0 } .container { display: flex flex-direction: column } .container .content { flex: 1 } ul, li { margin: 0 padding: 0 } li { list-style: none } .container .btns { position: fixed top: 0 background: white padding-bottom: 10px } .container .nav { display: flex height: 50px align-items: center justify-content: space-around border-top: 1px solid #ccc position: fixed bottom: 0 width: 100% background: white } .container .nav li { display: flex flex-direction: column align-items: center } .container .nav li span { font-size: 0.6rem } .container .nav li.active { color: deeppink } .card { width: 180px height: 270px padding: 0.5rem float: left } /* .content .card { float: left } */ .content h3 { padding: 0 font-size: 0.9rem margin: 0.2rem text-overflow: ellipsis overflow: hidden white-space: nowrap } .content p { padding: 0 margin: 0.1rem 0 font-size: 0.7rem } .btn { border: 0 background-color: deeppink color: white width: 3rem height: 1.5rem cursor: pointer }