Mirrors/overte
3
0
Fork 0
mirror of https://github.com/overte-org/overte.git synced 2025-08-09 21:12:53 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

tab content switching

Browse source
This commit is contained in:
Faye Li 2017-01-25 16:59:16 -08:00
parent 5ad522668a
commit b5b781f4a5
1 changed files with 27 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
scripts/system/html/users.html
View file

@ -62,9 +62,23 @@
background: rgba(255,255,255,0.15); background: rgba(255,255,255,0.15);
} }
#users-list div { .tab-content {
padding-top: 4px; display: none;
padding-bottom: 4px; }
.tab-content.current {
display: inherit;
background: rgba(255,255,255,0.15);
}
#users-list {
list-style: none;
padding: 15px 0px 15px 15px;
margin: 0;
}
#users-list li {
padding: 2px 0px;
} }
</style> </style>
@ -78,13 +92,13 @@
</div> </div>
<div class="main"> <div class="main">
<ul class="tabs"> <ul class="tabs">
<li class="current">Everyone (10)</li> <li tab-id="tab-1" class="current">Everyone (10)</li>
<li>Friends (2)</li> <li tab-id="tab-2">Friends (2)</li>
</ul> </ul>
<div id="tab-1"> <div id="tab-1" class="tab-content current">
<div id="users-list"></div> <ul id="users-list"></ul>
</div> </div>
<div id="tab-2"></div> <div id="tab-2" class="tab-content"></div>
</div> </div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script> <script>
@ -99,11 +113,11 @@
console.log(data.users[i].username + "is online but not in a domain"); console.log(data.users[i].username + "is online but not in a domain");
$("#dev-div").append("<p>" + data.users[i].username + "is online but not in a domain</p>"); $("#dev-div").append("<p>" + data.users[i].username + "is online but not in a domain</p>");
} else { } else {
$("#dev-div").append("<div>" + data.users[i].username + " @ " + data.users[i].location.root.name + "</div>"); $("#dev-div").append("<li>" + data.users[i].username + " @ " + data.users[i].location.root.name + "</li>");
// Don't display yourself // Don't display yourself
if (data.users[i].username !== myUsername) { if (data.users[i].username !== myUsername) {
console.log(data.users[i].username + " @ " + data.users[i].location.root.name); console.log(data.users[i].username + " @ " + data.users[i].location.root.name);
$("#users-list").append("<div>" + data.users[i].username + " @ " + data.users[i].location.root.name + "</div>"); $("#users-list").append("<li>" + data.users[i].username + " @ " + data.users[i].location.root.name + "</li>");
} }
} }
} }
@ -142,6 +156,9 @@
// Click listener for tabs // Click listener for tabs
$(".tabs li").click(function() { $(".tabs li").click(function() {
var tabID = $(this).attr("tab-id");
$(".tab-content").removeClass("current");
$("#" + tabID).addClass("current");
$(".tabs li").removeClass("current"); $(".tabs li").removeClass("current");
$(this).addClass("current"); $(this).addClass("current");
}); });