OpenSource
/
dc-sdk
mirror of https://github.com/dvt3d/dc-sdk
Watch 4
Star 0
Fork 0
Code Issues 0 Releases 92 Wiki Activity
Browse Source

update example

tags/4.0.0
cavencj 1 year ago
parent
fd345dcbef
commit
4331450c76
1 changed files with 232 additions and 206 deletions
Split View Show Diff Stats
  1. 232
    206
      examples/index.html

+ 232
- 206
examples/index.html View File

@@ -1,209 +1,235 @@
<!doctype html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>DC SDK examples</title>
<script src="./jquery.min.js"></script>
<script src="./jquery.accordion.js"></script>
<style>

* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
overflow: hidden;
}
.container{
display: flex;
height: 100%;

}


.example-list::-webkit-scrollbar{
width:10px;
height:10px;
/**/
}
.example-list::-webkit-scrollbar-track{
background: #424242;
}
.example-list::-webkit-scrollbar-thumb{
background: #686868;
max-height: 20px;
}


.nav{
width: 250px;
height: 100%;
overflow: hidden;
background: #222;
color: #fff;
display: flex;
flex-direction: column;
}
.example{
flex: 1;
height: 100%;
overflow: hidden;
}

iframe{
width: 100%;
height: 100%;
overflow: hidden;
}

.nav .banner{
padding: 20px 20px 0 20px;
color:#1e80ff;
font-weight: bold;
font-style: italic;
}
.example-list-wrapper{
flex: 1;
overflow: hidden;
user-select: none;
margin-top: 15px;
display: flex;
flex-direction: column;
}

.example-list{
flex: 1;
overflow: hidden;
overflow-y: auto;
}

.example-list-wrapper .desc{
height: 150px;
}

.example-list .example-item{
border-top: 1px solid #444 ;
}

.example-list h4{
padding-left: 20px;
font-size: 14px ;
margin: 7px 0;
color: #bcbcbc;
}

.example-list h4:hover,.example-list ul li:hover{
cursor: pointer;
}

.example-list ul{
padding-left: 35px;
list-style: none;
margin-top: 5px;
background: #181717;
}

.example-list ul li{
margin: 5px 0;
font-size: 13px;
}

.example-list ul li:hover a,.example-list ul li.active a{
color: #1e80ff;
}

.example-list ul li:hover,.example-list ul li a{
color: #fff;
text-decoration: none;
}


#code-link{
position: fixed;
bottom: 16px;
left: 270px;
padding: 8px;
border-radius: 50%;
margin-bottom: 0;
background-color: #FFF;
opacity: .9;
z-index: 999;
box-shadow: 0 0 4px rgba(0,0,0,.15);
display: flex;
}

#code-link img{
width: 30px;
}


</style>
</head>
<body>

<div class="container">
<div class="nav">
<div class="banner"> DC-SDK v3.5.0 </div>
<div class="example-list-wrapper">
<div id="example-list" class="example-list" data-accordion-group> </div>
<div class="desc"></div>
</div>
</div>
<div class="example">
<iframe sandbox="allow-same-origin allow-scripts allow-popups allow-forms" id="inner-page" name="inner-page" style="border: 0" allow="fullscreen; xr-spatial-tracking;" > </iframe>
<a id="code-link" href="" target="_blank"><img src="./assets/icon/code.svg" title="源码" alt=“”></a>
</div>

<script src="./list.js"></script>
<script type="text/javascript">
$(document).ready(function() {
let href =undefined
let $currentPage = undefined
if(window.location.href.indexOf("#")> -1){
let hrefArr = window.location.href.split('#')
if(hrefArr[1]){
href = hrefArr[1].replace('_','/')
}
$('#code-link').attr('href','https://github.com/dvgis/dc-sdk/blob/master/examples/'+href)
}
$('#inner-page').attr('src',href || 'info/start.html')

EXAMPLE_LIST.forEach(item => {
let $section = $('<div data-accordion ></div>')
$section.addClass('example-item')
let $title = $('<h4 data-control ></h4>').text(item.name)
$title.appendTo($section)
let $pageWrapper= $('<ul data-content></ul>')
$pageWrapper.appendTo($section)
if(item.children){
item.children.forEach(child => {
let $page = $('<li></li>')
let $link = $('<a></a>').text(child.name)
$link.attr('href',item.folder+'/'+child.page).attr('target','inner-page')
$link.bind('click',e=>{
if($currentPage){
$currentPage.removeClass('active')
}
window.location.href = window.location.href.replace(/#\w*\.?\w*/g,'') +'#'+ item.folder+ '_'+child.page
$page.addClass('active')
$('#code-link').attr('href','https://github.com/dvgis/dc-sdk/blob/master/examples/'+item.folder +'/'+child.page)
$currentPage =$page
})
$page.append($link)
$pageWrapper.append($page)
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
/>
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>DC SDK examples</title>
<script src="./jquery.min.js"></script>
<script src="./jquery.accordion.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
overflow: hidden;
}
.container {
display: flex;
height: 100%;
}

.example-list::-webkit-scrollbar {
width: 10px;
height: 10px;
/**/
}
.example-list::-webkit-scrollbar-track {
background: #424242;
}
.example-list::-webkit-scrollbar-thumb {
background: #686868;
max-height: 20px;
}

.nav {
width: 250px;
height: 100%;
overflow: hidden;
background: #222;
color: #fff;
display: flex;
flex-direction: column;
}
.example {
flex: 1;
height: 100%;
overflow: hidden;
}

iframe {
width: 100%;
height: 100%;
overflow: hidden;
}

.nav .banner {
padding: 20px 20px 0 20px;
color: #1e80ff;
font-weight: bold;
font-style: italic;
}
.example-list-wrapper {
flex: 1;
overflow: hidden;
user-select: none;
margin-top: 15px;
display: flex;
flex-direction: column;
}

.example-list {
flex: 1;
overflow: hidden;
overflow-y: auto;
}

.example-list-wrapper .desc {
height: 150px;
}

.example-list .example-item {
border-top: 1px solid #444;
}

.example-list h4 {
padding-left: 20px;
font-size: 14px;
margin: 7px 0;
color: #bcbcbc;
}

.example-list h4:hover,
.example-list ul li:hover {
cursor: pointer;
}

.example-list ul {
padding-left: 35px;
list-style: none;
margin-top: 5px;
background: #181717;
}

.example-list ul li {
margin: 5px 0;
font-size: 13px;
}

.example-list ul li:hover a,
.example-list ul li.active a {
color: #1e80ff;
}

.example-list ul li:hover,
.example-list ul li a {
color: #fff;
text-decoration: none;
}

#code-link {
position: fixed;
bottom: 16px;
left: 270px;
padding: 8px;
border-radius: 50%;
margin-bottom: 0;
background-color: #fff;
opacity: 0.9;
z-index: 999;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.15);
display: flex;
}

#code-link img {
width: 30px;
}
</style>
</head>
<body>
<div class="container">
<div class="nav">
<div class="banner">DC-SDK v4.0.0</div>
<div class="example-list-wrapper">
<div
id="example-list"
class="example-list"
data-accordion-group
></div>
<div class="desc"></div>
</div>
</div>
<div class="example">
<iframe
sandbox="allow-same-origin allow-scripts allow-popups allow-forms"
id="inner-page"
name="inner-page"
style="border: 0"
allow="fullscreen; xr-spatial-tracking;"
>
</iframe>
<a id="code-link" href="" target="_blank"
><img src="./assets/icon/code.svg" title="源码" alt="“”"
/></a>
</div>

<script src="./list.js"></script>
<script type="text/javascript">
$(document).ready(function () {
let href = undefined
let $currentPage = undefined
if (window.location.href.indexOf('#') > -1) {
let hrefArr = window.location.href.split('#')
if (hrefArr[1]) {
href = hrefArr[1].replace('_', '/')
}
$('#code-link').attr(
'href',
'https://github.com/dvgis/dc-sdk/blob/master/examples/' + href
)
}
$('#inner-page').attr('src', href || 'info/start.html')

EXAMPLE_LIST.forEach((item) => {
let $section = $('<div data-accordion ></div>')
$section.addClass('example-item')
let $title = $('<h4 data-control ></h4>').text(item.name)
$title.appendTo($section)
let $pageWrapper = $('<ul data-content></ul>')
$pageWrapper.appendTo($section)
if (item.children) {
item.children.forEach((child) => {
let $page = $('<li></li>')
let $link = $('<a></a>').text(child.name)
$link
.attr('href', item.folder + '/' + child.page)
.attr('target', 'inner-page')
$link.bind('click', (e) => {
if ($currentPage) {
$currentPage.removeClass('active')
}
window.location.href =
window.location.href.replace(/#\w*\.?\w*/g, '') +
'#' +
item.folder +
'_' +
child.page
$page.addClass('active')
$('#code-link').attr(
'href',
'https://github.com/dvgis/dc-sdk/blob/master/examples/' +
item.folder +
'/' +
child.page
)
$currentPage = $page
})
$page.append($link)
$pageWrapper.append($page)
})
}
$section.appendTo($('#example-list'))
})
}
$section.appendTo($('#example-list'))
})
$('#example-list [data-accordion]').accordion();
});
</script>
</div>
</body>
$('#example-list [data-accordion]').accordion()
})
</script>
</div>
</body>
</html>

Write Preview
Loading…
Cancel
Save