Javascript 单击项目后加载帖子详细信息页面
我正在使用Framework7、Template7和JSON开发一个应用程序。到目前为止,我已经能够使用WordPress JSON API插件列出WordPress的内容。我想加载一个详细的网页,内容点击后,一个项目是点击下面是我的代码到目前为止。这里还有一个指向codepen上代码的链接 index.htmlJavascript 单击项目后加载帖子详细信息页面,javascript,json,wordpress,html-framework-7,Javascript,Json,Wordpress,Html Framework 7,我正在使用Framework7、Template7和JSON开发一个应用程序。到目前为止,我已经能够使用WordPress JSON API插件列出WordPress的内容。我想加载一个详细的网页,内容点击后,一个项目是点击下面是我的代码到目前为止。这里还有一个指向codepen上代码的链接 index.html <!-- Views --> <div class="views"> <!-- View --> <div class="view v
<!-- Views -->
<div class="views">
<!-- View -->
<div class="view view-main">
<!-- Pages -->
<div class="pages">
<!-- Home page -->
<div class="page" data-page="index">
<div class="page-content">
<div class="content-block-title title">News Page</div>
<!-- Div for Result -->
<div id="content-wrap" class="list-block">Loading Please Wait</div>
<!-- Template7 Template -->
<script id="shows-template" type="text/template7">
<div class="list-block media-list">
<ul>
{{#each this.posts}}
<li class="item-content">
<a href="#detail?id={{id}}" style="background: url({{thumbnail_images.full.url}}); center center; background-size:cover">
<div class="item-inner">
<p class="date">{{date}}</p>
<div class="item-details">
<h2 class="item-title">{{title}}</h2>
<div class="item-discription">{{excerpt}}</div>
</div>
</div>
</a>
</li>
{{/each}}
</ul>
</div>
</script>
</div>
</div>
<!-- Detail page -->
<div class="page cached" data-page="detail">
<div class="page-content">
<p>Detail page</p>
<a href="#index" class="back"> Go back to home page </a>
<div id="content-wrap" class="">Loading Please Wait</div>
<script id="detail-template" type="text/template7">
<img src="{{thumbnail_images.full.url}}" alt="{{title}}"/>
<p class="date">{{date}}</p>
<div class="item-details">
<h2 class="item-title">{{title}}</h2>
<div class="item-discription">{{content}}</div>
</div>
</script>
</div>
</div>
<!-- Services page -->
<div class="page cached" data-page="services">
<div class="page-content">
<p>Services page</p>
</div>
</div>
</div>
</div>
</div>
此代码的步骤:
onclick
/onselect
使用AJAX提交表单:用于选择项echo jaso_encoder($data)
)谢谢你的回复。我不明白!你能更新代码并发布吗?谢谢
var myApp = new Framework7({
externalLinks: '.external'
});
// Export selectors engine
var $$ = Dom7;
// Cordova Initialize
var app = {
initialize: function() {
this.bindEvents();
},
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
},
onDeviceReady: function() {
// JScript for the main app, once PGap has loaded.
//checkDeviceSize(); (WILL RE-CODE IN A CSS FRIENDLY FORMAT)
document.addEventListener("offline", onOffline, false);
document.addEventListener("online", onOnline, false);
setTimeout(function() {
navigator.splashscreen.hide();
}, 1000);
}
};
var mainView = myApp.addView('.view-main', {
domCache: true //enable inline pages
});
// Select Template
var template = $$('#shows-template').html();
// Compile and render
var compiledTemplate = Template7.compile(template);
function getshows() {
$$.getJSON('http://www.maan-lagh.com/?json=get_recent_posts&callback=shows', function(json) {
// Insert rendered template
$$('#content-wrap').html(compiledTemplate(json));
});
};
getshows();
// Select Pull to refresh content
var ptrContent = $$('.pull-to-refresh-content');
// On refresh
ptrContent.on('refresh', function(e) {
// Emulate 1s loading
setTimeout(function() {
// Execute getshows to get new shows
getshows();
myApp.pullToRefreshDone();
}, 1000);
});