目前,我正在开发一个生成动态卡片页面的项目。此页面基于特定json feed
(例如用户角色)的输入。
profile.json
{
"Messages": "card1",
"Activities": "card2",
"Agenda": "card3",
"Users": "card4",
"Charts": "card5"
}
接下来,我使用jQuery
和Kendo UI
来创建卡片。首先,我需要从json feed
中提取信息。您可能会注意到,每张卡都将被放置在div中。并且每个div都将附加到卡片div:
以下是index.html的代码
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="../../style/font-awesome.css">
<link rel="stylesheet" href="/style/cards.css" />
<script src="../lib/jquery.min.js"></script>
<script src="../lib/custom/effects.min.js"></script>
</head>
<body>
<div id="cards"></div>
<script>
$.getJSON("profile.json", function (data) {
$.each(data, function (key, val) {
var card = "<div id='" + val + "' height='180' width='175'></div>";
$("#cards").append(card);
$('#' + val).load(val + '/index.html');
});
});
</script>
</body>
</html>
每张卡都有一些简单的造型:
One of the card (card7/index.html)
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
html {
overflow: hidden;
}
a {
color: #428bca;
text-decoration: none;
}
#card7 {
width: 150px;
height: 150px;
position: relative;
}
.front {
padding: 10px;
text-align: center;
position: absolute;
width: 140px;
height: 140px;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2);
transition: 0.3s;
border-radius: 1px;
background-color: #f5f4f5;
}
.back {
font-size: smaller;
padding: 10px;
text-align: left;
position: absolute;
width: 140px;
height: 140px;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2);
transition: 0.3s;
border-radius: 1px;
background-color: #f5f4f5;
}
.front:hover, .back:hover {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
border-radius: 5px;
}
img {
border-radius: 5px 5px 0 0;
}
.badge:after {
content: "1";
position: absolute;
background: rgba(255, 0, 0, 0.85);
height: 2rem;
top: 1rem;
right: 2rem;
width: 2rem;
text-align: center;
line-height: 2rem;
font-size: 1rem;
border-radius: 50%;
color: white;
}
.seeBack {
margin-top: -30px;
margin-right: -10px;
float: right;
border-style: solid;
border-width: 0 0 40px 40px;
border-color: transparent;
}
.seeBack:hover {
border-color: transparent transparent #428bca transparent;
transition: 0.5s;
}
.seeFront {
margin-top: 10px;
margin-left: -10px;
float: left;
border-style: solid;
border-width: 40px 0 0 40px;
border-color: transparent;
}
.seeFront:hover {
border-color: transparent transparent transparent #428bca;
}
</style>
</head>
<body>
<div id="card7">
<div class="front">
<i class="fa fa-undo fa-5x"></i>
<h4><b>Tijdlijn</b></h4>
<div class="seeBack"></div>
</div>
<div class="back">
<p><a href="#">Situatie vorige week</a></p>
<p><a href="#">Situatie vorige maand</a></p>
<p><a href="#">Situatie vorig jaar</a></p>
<div class="seeFront"></div>
</div>
</div>
<script>
$(document).ready(function () {
kendo.fx($("#card7")).flip("horizontal", $(".back"), $(".front")).play();
var card = kendo.fx($("#card7")),
flip = card.flip("horizontal", $(".front"), $(".back"));
flip.duration(100);
$(".seeBack").click(function () {
flip.stop().play();
});
$(".seeFront").click(function () {
flip.stop().reverse();
});
});
</script>
</body>
</html>
正如您所料,程序本身无法正常工作。所有卡片都将在index.html中相互显示,尽管它们放在各种div中。我不知道问题是什么,我无法解决这个问题。希望有人可以帮助我。
所有卡片都放在一起。
答案 0 :(得分:1)
对static
和relative
div使用.front
或.back
位置
阅读有关定位的文章http://www.w3schools.com/cssref/pr_class_position.asp