个人中心
gpt4 book ai didi

javascript - 温泉 ui json wordpress

转载 作者：行者123 更新时间：2023-12-03 11:27:41 25 4
gpt4 key购买 nike

我尝试在 ONSEN UI 中集成 WordPress，但我不知道我在哪里犯了错误。我按照这个例子

https://www.youtube.com/watch?v=YUpWq9_LeEo我试图创建几乎相同的东西，但我想使用 ONSEN UI

这是我的代码。我个人认为index.js脚本有问题。我使用 INDEX.JS 文件从我的 WordPress 网站生成提要

删除此属性时，我在第 2 行遇到错误 atribute ng-app="app" 我在第 181 行遇到错误

错误

Uncaught SyntaxError: Unexpected token }

INDEX.JS 

function listPost (data) {
  var output='<ons-list>';
  $.each(data.posts,function(key,val){
  	
  	output+='<ons-list-item  onclick="myNavigator.pushPage("page3.html", { animation : "slide" } )">';
  	output+='<img src="'+val.thumbnail_images.full.url+'" alt="" width="100%">';
  	output+='<h1>'+ val.title +'</h1>';
  	output+='</ons-list-item>';
  	
  });
  output+='</ons-list>';
  $('#postlist').html(output);
  
  
}

**INDEX.HTML**
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html lang="en" ng-app="app">
<head>
  <meta charset="utf-8">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="mobile-web-app-capable" content="yes">
  <title>My App</title>  
  
  <link rel="stylesheet" href="lib/onsen/css/onsenui.css">  
  <link rel="stylesheet" href="lib/onsen/css/onsen-css-components.css">  
  <link rel="stylesheet" href="styles/app.css"/>

  <script src="lib/onsen/js/angular/angular.js"></script>    
  <script src="lib/onsen/js/onsenui.js"></script>    

  <script src="cordova.js"></script>
  <script src="jquery.js"></script>
  <script src="index.js"></script>
  

  <script>
    var module = angular.module('app', ['onsen']);
  </script>

  <style>
    .page--menu-page__content {
      background-color: #333;
      color: white;
    }

    .menu-close,
    .menu-close > .toolbar-button {
      color: #999;
    }

    .menu-list,
    .menu-item:first-child,
    .menu-item:last-child,
    .menu-item {
      background-color: transparent;
      background-image: none !important;
      border-color: transparent;
      color: #fff;
    }
	
	ul{
		
		list-style: none;
		margin: auto;
		padding: 0;
		
	}
    .menu-item {
      padding: 0 0 0 20px;
      line-height: 52px;
      height: 52px;
      text-shadow: rgba(0, 0, 0, 0.4) 0px 1px 0px;
    }

    .menu-item:active {
      background-color: rgba(255, 255, 255, 0.1);
    }

    .menu-notification {
      display: inline-block;
      margin-top: 12px;
      font-size: 14px;
      height: 16px;
      line-height: 16px;
      min-width: 16px;
      font-weight: 600;
    }

    .bottom-menu-list,
    .bottom-menu-item:first-child,
    .bottom-menu-item:last-child,
    .bottom-menu-item {
      border-color: #393939;
      background-color: transparent;
      background-image: none !important;
      color: #ccc;
    }

    .bottom-menu-item:active {
      background-color: rgba(255, 255, 255, 0.1);
    }
  </style>
  
</head>

<body>    
  
  <ons-sliding-menu
                  above-page="page1.html"
                  behind-page="menu.html"       
                  side="left"
                  max-slide-distance="250px"
                  var="menu">
</ons-sliding-menu>
<!-- PAGE--><!-- PAGE--><!-- PAGE--><!-- PAGE--><!-- PAGE-->
<ons-template id="page1.html">
  <ons-page>
    <ons-toolbar>
      <div class="left">
        <ons-toolbar-button ng-click="menu.toggleMenu()"><ons-icon icon="ion-navicon" style="font-size: 32px; width: 1em;"></ons-icon></ons-toolbar-button>
      </div>
      <div class="center">Page 1</div>
    </ons-toolbar>

    <p style="text-align: center; color: #999; padding-top: 100px;">Page1 Contents</p>
  </ons-page>
</ons-template>

<!-- PAGE--><!-- PAGE--><!-- PAGE--><!-- PAGE--><!-- PAGE-->
<ons-template id="page2.html">
  <ons-page>
    <ons-toolbar>
      <div class="left">
        <ons-toolbar-button onclick="menu.toggleMenu()"><ons-icon icon="ion-navicon" style="font-size: 32px; width: 1em;"></ons-icon></ons-toolbar-button>
      </div>
      <div class="right"><ons-icon icon="ion-navicon" style="font-size: 32px; width: 1em;"></ons-icon></div>
    </ons-toolbar>
	  <!--Listas 2 puslapyje-->
	  
	  
    	<ons-navigator title="" var="myNavigator">
			<ons-page>
			
			<div id="postlist">
				
			</div>
			
			</ons-page>
	  	</ons-navigator>
  </ons-page>
</ons-template>
	


<ons-template id="menu.html">
  <ons-list>
    <ons-list-item modifier="chevron" onclick="menu.setAbovePage('page1.html', {closeMenu: true})">
      page1.html
    </ons-list-item>
    <ons-list-item modifier="chevron" onclick="menu.setAbovePage('page2.html', {closeMenu: true})">
      page2.html
    </ons-list-item>
  </ons-list>
</ons-template>
	
<script src="http://kksa.lt/?json=get_recent_posts&callback=listPost" type="text/javascript"></script>
</body>
</html>

最佳答案

您遇到的问题是您如何错误地使用单引号 (') 和双引号 ('')。将以下代码复制并粘贴到您的index.js文件中，然后就不会再出现错误。

function listPost (data) {
  var output='<ons-list>';
  $.each(data.posts,function(key,val){

    output+='<ons-list-item  onclick="myNavigator.pushPage(\'page1.html\', { animation : \'slide\' } )">';
    output+='<img src=\"'+val.thumbnail_images.full.url+'\" alt="" width="100%">';
    output+='<h1>'+ val.title +'</h1>';
    output+='</ons-list-item>';

  });
  output+='</ons-list>';
  $('#postlist').html(output);


}

提示:如果要在(')内使用(')，请写成(/')。 ("")也是一样，需要写成(/")。

希望对您有帮助。祝你好运。

关于javascript - 温泉 ui json wordpress，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26851666/

25 4 0
文章推荐： javascript - 使用 jQuery 注册 adwords 转换
文章推荐： rust - 使用对另一个 HashMap 的引用克隆一个 HashMap
文章推荐： rust - 使用 Result::map 和 Box 时无法推断类型
文章推荐： javascript - 循环随机变量和数组来解决多次包含 JavaScript 的问题
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com