로드 HTML 페이지를 동적으로 Web2Py

에 내가 프로그래밍에 비교적 새로운 그리고 난 (이 예처럼 : http://css-tricks.com/examples/DynamicPage/#about.php) 동적 문제가 로딩 페이지 내용의 비트를 보내고있어로드 HTML 페이지를 동적으로 Web2Py

내가 pjax 및 turbolinks을 검토 한 결과, 하지만 내 코드에서 구현하는 방법을 모르겠습니다.

내 목표는 모든 아이콘이 아래의 본문 섹션에 해당 페이지를로드하는 것입니다. 여기

내가 지금까지 가지고있는 코드입니다 :

{{extend 'layout.html'}} 

<head> 

<script type="text/javascript" src="jquery.min.js"></script> 
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"> 


<style> 

ul.icons { 
text-align:center; 
} 
ul.icons{ 
margin:0; 
padding:0; 
list-style:none; 
-webkit-perspective: 10000px; 
-moz-perspective: 10000px; 
perspective: 10000px; 
} 

ul.icons li{ 
margin:0; 
display: inline-block; 
width: 120px; 
height: 120px; 
margin-right: 20px; 
background: white; 
text-transform: uppercase; 
text-align: center; 
} 

ul.icons li a{ 
display:table; 
font: bold 36px Arial; 
width: 100%; 
height: 100%; 
margin-bottom: 0px; 
color: white; 
background: #3B9DD5; 
text-decoration: none; 
outline: none; 
-webkit-transition:all 300ms ease-out; 
-moz-transition:all 300ms ease-out; 
transition:all 300ms ease-out; 
} 

ul.icons li:nth-of-type(1) a{ 
color: white; 
background: #3B9DD5; 
} 

ul.icons li:nth-of-type(2) a{ 
background: #3B9DD5; 
} 

ul.icons li:nth-of-type(3) a{ 
background: #3B9DD5; 
} 

ul.icons li:nth-of-type(4) a{ 
color: white; 
background: #3B9DD5; 
} 

ul.icons li:nth-of-type(5) a{ 
background: #3B9DD5; 
} 

ul.icons li a span{ 
-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
box-sizing: border-box; 
display: table-cell; 
vertical-align: middle; 
width: 100%; 
height: 100%; 
-webkit-transition: all 300ms ease-out; 
-moz-transition: all 300ms ease-out; 
transition: all 300ms ease-out; 
} 

ul.icons li b{ 
display: block; 
position: relative; 
width: 100%; 
opacity: 0; 
-webkit-transition: all 300ms ease-out 0.2s; 
-moz-transition: all 300ms ease-out 0.2s; 
transition: all 300ms ease-out 0.2s; 
} 


ul.icons li a img{ 
border-width: 0; 
vertical-align: middle; 
} 


ul.icons li:hover a{ 
-webkit-transform: rotateY(180deg); 
-moz-transform: rotateY(180deg); 
transform: rotateY(180deg); 
background: #c1e4ec; 
-webkit-transition-delay: 0.2s; 
-moz-transition-delay: 0.2s; 
transition-delay: 0.2s; 
} 

ul.icons li:hover a span{ 
color: white; 
-webkit-transform: rotateY(180deg); 
-moz-transform: rotateY(180deg); 
transform: rotateY(180deg); 
-webkit-transition-delay: 0.2s; 
-moz-transition-delay: 0.2s; 
transition-delay: 0.2s; 
} 


ul.icons li:hover b{ 
opacity: 1; 
} 

</style> 
</head> 
<hr> 
     <ul class="icons"> 
     <li><a href="media"><span class="fa fa-camera"></span></a> <b style="padding-top:2px">Media</b></li> 
     <li><a href="notes"><span class="fa fa-pencil"></span></a> <b style="padding-top:2px">Notes</b></li> 
     <li><a href="develop"><span class="fa fa-code"></span></a> <b style="padding-top:2px">Develop</b></li> 
     <li><a href="record"><span class="fa fa-music"></span></a> <b style="padding-top:2px">Record</b></li> 
     <li><a href="stream"><span class="fa fa-video-camera"></span></a> <b style="padding-top:2px">Stream</b></li> 
     <li><a href="events"><span class="fa fa-calendar"></span></a> <b style="padding-top:2px">Events</b></li> 
     <li><a href="contact"><span class="fa fa-comment-o"></span></a> <b style="padding-top:2px">Chat</b></li> 
     <li><a href="share"><span class="fa fa-group"></span></a> <b style="padding-top:2px">Share</b></li> 
</ul> 
<hr> 

<body> 

</body>

출처

2014-06-15 user3743140

실제 로딩을 수행하려면 javascript가 필요합니다. – jacob

web2py가 자신의 ajax 기능을 가지고있다; 그것을 사용하는 방법에 대한 설명서를 확인하십시오. (@jacob은 말하기를 자바 스크립트가 필요합니다.)

출처

2014-06-23 20:44:17

로드 HTML 페이지를 동적으로 Web2Py

답변

관련 문제