文档章节

前端 简单实现应用商店list

尧Yannick
 尧Yannick
发布于 2016/04/22 14:39
字数 881
阅读 2
收藏 0

前端动态创建类似应用商店功能

效果展示(4个应用一页)

第一页

 

 

第二页

 

Css样式

#div_list{
    width: 500px;
    height:auto;
    margin: auto;
}
#div_list .div_item {
    width: 500px;
    height: 100px;
    overflow: hidden;
    border: solid 1px #f2f2f2;
    background-color: #e3e3e3;
    border-radius: 6px;
}
#div_list .div_item .div_icon {
    margin: 5px;
    float: left;
    width: 90px;
    height: 90px;
    background-image: url("../images/icon_weixin.jpg");
    background-repeat: no-repeat;
    border: none;
    border-radius: 5px;
}
#div_list .div_item .div_content {
    float: left;
    width: 300px;
    height: 100px;
    padding-left: 5px;
}
#div_list .div_content .p_app_name{
    width: auto;
    height: 10px;
    margin-top: 10px;
}
#div_list .div_item .div_content .div_mid{
    margin-top: 5px;
    width: auto;
    height: auto;
}
#div_list .div_content span{
    font-size: 12px;
    font-family: cursive;
    color: #323232;
}
#div_list .span_intruduce{
    width: auto;
    height: auto;
    margin-top: 5px;
    display: inline-block;
}
#div_list .div_button {
    width: 90px;
    height: 90px;
    float: left;
}
 
#div_list .div_button .btn_download {
    margin-top: 30px;
    width: 90px;
    height: 32px;
    border-radius: 5px;
    border: solid 1px aliceblue;
    font-size: 12px;
    color: #00bcd4;
}
 
#div_list .div_button .btn_download:hover {
    cursor: pointer;
}
.div_sneck{
    margin-top:50px;
    width: 260px;
    height: 30px;
    margin-left: auto;
    margin-right: auto;
}
.li_prew{
    width: 50px;
    height: 30px;
    border: solid 1px #e3e3e3;
    text-align: center;
    list-style: none;
    cursor: pointer;
    float: left;
    font-size: 25px;
 
}
.li_btn{
    width: 50px;
    height: 30px;
    border: solid 1px #e3e3e3;
    text-align: center;
    list-style: none;
    cursor: pointer;
    float: left;
    font-size: 25px;
}
.li_next{
    width: 50px;
    height: 30px;
    border: solid 1px #e3e3e3;
    text-align: center;
    list-style: none;
    cursor: pointer;
    float: left;
    font-size: 25px;
}
.div_li_btn_mid{
    width: auto;
    height: 30px;
    float: left;
}

模拟从后台获取数据


{"msg":0,"data":[

  {"id":0,"icon":"../images/icon_weixin.jpg","name":"微信","download":"3亿","size":"32M","description":"微信,让社交变得简单"},

  {"id":1,"icon":"../images/icon_quna.jpg","name":"去哪儿旅游","download":"3000","size":"25M","description":"去哪儿旅游,总有你要的低价"},

  {"id":2,"icon":"../images/icon_weixin.jpg","name":"微信","download":"3亿","size":"32M","description":"微信,让社交变得简单"},

  {"id":3,"icon":"../images/icon_quna.jpg","name":"去哪儿旅游","download":"3000","size":"25M","description":"去哪儿旅游,总有你要的低价"},

  {"id":4,"icon":"../images/icon_weixin.jpg","name":"微信","download":"3亿","size":"32M","description":"微信,让社交变得简单"},

  {"id":5,"icon":"../images/icon_quna.jpg","name":"去哪儿旅游","download":"3000","size":"25M","description":"去哪儿旅游,总有你要的低价"}

]

}

Js代码

var listSize = 0;
var pageSize = 0;
var html = [];
$(document).ready(function () {
    initData();
    initViewListener();
});
 
function initData() {
    var url = "../web/package.json";
    var params = {
        "user": "123"
    };
    $.ajax({
        url: url,
        data: params,
        type: "GET",
        dataType: "JSON",
        timeout: 5000,
        cache: false,
        contentType: "charset=utf-8",
        success: function (data, textStatus) {
            if (data.msg == 0) {
                var jsonArray = data.data;
                listSize = jsonArray.length;
                pageSize = Math.floor(((listSize - 1) / 4) + 1);
                console.log("listSize " + listSize);
                console.log("pageSize " + pageSize);
                for (item in jsonArray) {
                    html[item]=addItem(jsonArray[item]["id"],jsonArray[item]["icon"], jsonArray[item]["name"],jsonArray[item]["download"],jsonArray[item][                      "size"], jsonArray[item]["description"]);
                }
                if(listSize>4)
                {
                    for(i=0;i<4;i++){
                        $("#div_list").append(html[i]);
                    }
                }else
                {
                    for(i=0;i<listSize;i++)
                    {
                        $("#div_list").append(html[i]);
                    }
                }
                for (i = 0; i < pageSize; i++) {
                    $(".div_li_btn_mid").append(addBtn(i + 1));
                }
                console.log("s --- " + html[item]);
                $(".btn_download").each(function () {
                    $(this).click(function () {
                        alert(jsonArray[$(this).val()]["id"]);
                    });
                });
                $(".li_btn").each(function () {
                    $(this).click(function () {
                        var page = $(this).val();
                        var htmlInsert = "";
                        if (page < pageSize) {
                            for (i = (page - 1) * 4; i < (page - 1) * 4 + 4; i++) {
                                htmlInsert += html[i];
                            }
                            $("#div_list").html(htmlInsert);
                        } else {
                            for (i = (page - 1) * 4; i < listSize; i++) {
                                htmlInsert += html[i];
                            }
                            $("#div_list").html(htmlInsert);
                        }
                        $(".btn_download").each(function () {
                            $(this).click(function () {
                                alert(jsonArray[$(this).val()]["id"]);
                            });
                        });
                    });
                });
 
                console.log(html.toString());
            } else {
                console.log(-1);
            }
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            console.log(textStatus);
        },
    });
}
 
function initViewListener() {
    $(".li_prew").click(function () {
        $(".li_btn").each(function () {
            var index = $(this).html();
            $(this).html(--index);
        });
    });
 
    $(".li_next").click(function () {
        $(".li_btn").each(function () {
            var index = $(this).html();
            $(this).html(++index);
        });
    });
}
//JS中创建一个类
function StringBuffer() {
    this.string = [];
    StringBuffer.prototype.append = function (str) {
        this.string.push(str);
    }
    StringBuffer.prototype.toString = function () {
        return this.string.join('');
    }
}
 
function initDownloadListener() {
 
}
function addItem(id, icon, name, download, size, des) {
    var sb = new StringBuffer();
    sb.append('<div class="div_item">');
    sb.append('<div class="div_icon" style="background-image:url(' + icon + ')"></div>');
    sb.append('<div class="div_content">');
    sb.append('<p class="p_app_name">' + name + '</p>');
    sb.append('<div class="div_mid"><span>' + download + '</span><span> ' + size + '</span></div>');
    sb.append('<span class="span_intruduce">' + des + '</span>');
    sb.append('</div>');
    sb.append(' <div class="div_button"> <button class="btn_download" value="' + id + '">下载</button> </div>');
    sb.append('</div>');
 
    //var sb = "";
    //sb+='<div class="div_item">';
    //sb+='<div class="div_icon" style="background-image:url(' + icon + ')"></div>';
    //sb+='<div class="div_content">';
    //sb+='<p class="p_app_name">' + name + '</p>';
    //sb+='<div class="div_mid"><span>' + download + '</span><span> ' + size + '</span></div>';
    //sb+='<span class="span_intruduce">' + des + '</span>';
    //sb+='</div>';
    //sb+=' <div class="div_button"> <button class="btn_download" value="'+id+'">下载</button> </div>';
    //sb+='</div>';
    return sb.toString();
}
 
function addBtn(num) {
    var sb = "";
    sb += '<li class="li_btn" value="' + num + '">' + num + '</li>';
    return sb;
}


Index.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>index</title>
    <link rel="stylesheet" href="../css/index.css"/>
    <script type="text/javascript" src="../js/jquery-2.2.2.js"></script>
    <script type="text/javascript" src="../js/index.js"></script>
</head>
<body>
<div id="div_list">
</div>
<div class="div_sneck">
    <li class="li_prew"><<</li>
    <div class="div_li_btn_mid"></div>
    <li class="li_next">>></li>
</div>
</body>
</html>


© 著作权归作者所有

尧Yannick
粉丝 0
博文 16
码字总数 6692
作品 0
武汉
私信 提问
Electron系列文章-什么是Electron?

Electron 是什么 定义 Electron是一个能让你使用传统前端技术(Nodejs, Javascript, HTML, CSS)开发一个跨平台桌面应用的框架。这里所说的桌面应用指的是在Windows、OSX及Linux系统上运行的...

苏格团队
02/16
0
0
App开发+App定制平台--APICloud

APICloud官方网站:http://www.apicloud.com/ 一、 APICloud:从开发技术到定制服务 APICloud拥有App开发平台和App定制平台。从开放App开发技术,到提供App定制服务,APICloud为个人开发者和...

API_Cloud
2014/12/04
45.8K
14
Droptiles —— 炫酷的 Metro 风格的层叠式 Web 面板

简介: Droptiles 是一款Windows 8 Start类Metro风格的Web 2.0 Dashboard。它利用Tiles创建经验。Tiles就是可以从外源获取数据的迷你计算机应用程序(app)。点击一个tile开始整个app。Apps可...

oschina
2014/03/06
11K
4
android应用中去android市场去评分的功能实现(吐槽一波个人应用上线...)

一般的app可能会有这中功能,在应用中去android商店评分来提高排名,前段时间也把我的博客园上传到商店,这里不得不吐槽一些android商店的开放平台。 酷派,vivo,oppo,联想不支持个人开发者...

操张林
2018/02/25
0
0
Bower安装与入门

一、Bower介绍 Bower是一个客户端技术的软件包管理器,它可用于搜索、安装和卸载如JavaScript、HTML、CSS之类的网络资源,github上很多例程都使用bower来管理前端的通用依赖库,比如jquery,...

阿振
2016/02/13
207
0

没有更多内容

加载失败,请刷新页面

加载更多

哪些情况下适合使用云服务器?

我们一直在说云服务器价格适中,具备弹性扩展机制,适合部署中小规模的网站或应用。那么云服务器到底适用于哪些情况呢?如果您需要经常原始计算能力,那么使用独立服务器就能满足需求,因为他...

云漫网络Ruan
今天
10
0
Java 中的 String 有没有长度限制

转载: https://juejin.im/post/5d53653f5188257315539f9a String是Java中很重要的一个数据类型,除了基本数据类型以外,String是被使用的最广泛的了,但是,关于String,其实还是有很多东西...

低至一折起
今天
23
0
OpenStack 简介和几种安装方式总结

OpenStack :是一个由NASA和Rackspace合作研发并发起的,以Apache许可证授权的自由软件和开放源代码项目。项目目标是提供实施简单、可大规模扩展、丰富、标准统一的云计算管理平台。OpenSta...

小海bug
昨天
11
0
DDD(五)

1、引言 之前学习了解了DDD中实体这一概念,那么接下来需要了解的就是值对象、唯一标识。值对象,值就是数字1、2、3,字符串“1”,“2”,“3”,值时对象的特征,对象是一个事物的具体描述...

MrYuZixian
昨天
9
0
解决Mac下VSCode打开zsh乱码

1.乱码问题 iTerm2终端使用Zsh,并且配置Zsh主题,该主题主题需要安装字体来支持箭头效果,在iTerm2中设置这个字体,但是VSCode里这个箭头还是显示乱码。 iTerm2展示如下: VSCode展示如下: 2...

HelloDeveloper
昨天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部