点击时元素消失
我正在使用App.js(Javascript UI库)和Zepto.js(类似JQuery的库)来制作移动应用程序。下面的代码不是来自我的应用程序,而是展示了我的确切问题。我尽量保持尽可能短。被点击的图像应该在页面1上保持可见状态,然后再次在页面2上显示,但现在被点击的图像在页面1上消失,这使得到页面2的过渡看起来很乱。点击时元素消失
单击图像。如果什么都没有发生,请转到第2页,然后再转到 回到第1页,然后再次单击以查看问题。
任何和每一个帮助,非常感谢。看来这个问题超出了我的技能:D我的猜测是这与我正在使用的库有关。
App.load('page1');
App.controller('page1', function(page) {
$(page).find('img').on('click', function() {
App.load('page2');
$('#clicked-img-container').html($(this));
});
});
App.controller('page2', function(page) {
});
img {
width: 150px;
height: 100px;
}
<!DOCTYPE html>
<html>
<head>
<!-- Default stylesheet provided with App.js.
Contains iOS/Android styles for all included widgets. -->
<link rel="stylesheet" href="//cdn.kik.com/app/2.0.1/app.min.css">
</head>
<body>
<!-- Page1 -->
<div class="app-page" data-page="page1">
<div class="app-topbar">
<h1>Page 1</h1>
</div>
<div class="app-content">
<img src="https://upload.wikimedia.org/wikipedia/commons/1/13/Red_squirrel_%28Sciurus_vulgaris%29.jpg">
<img src="https://upload.wikimedia.org/wikipedia/commons/d/d5/Lightmatter_lioness.jpg">
<div class="app-button" data-target="page2">Go to page 2</div>
<p>Click the images. If nothing happens, go to page2 and then
back to page1 and try clicking again to see the problem I'm experiencing:
<strong>The clicked image disappears when clicked which makes the page transition look messy.</strong></p>
</div>
</div>
<!-- Page1 -->
<div class="app-page" data-page="page2">
<div class="app-topbar">
<h1>Page 2</h1>
</div>
<div class="app-content">
<div id="clicked-img-container"></div>
<div class="app-button" data-target="page1">Go to page 1</div>
</div>
</div>
<!-- jQuery-like library focusing on being lightweight and mobile-friendly -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.2.0/zepto.min.js"></script>
<!-- core module containing all library functionality -->
<script src="//cdn.kik.com/app/2.0.1/app.min.js"></script>
</body>
</html>
单击图像。如果什么都没有发生,转到第2页,然后回到第1页,然后再次点击...
我不熟悉这个框架,但我认为这里的问题是您的代码尝试查找元素以便在它们实际添加到DOM之前将控制器添加到它们。我从入门页面下载的例子:http://code.kik.com/app/3/docs.html,发现有不同的方法,所以我加入控制器后添加以下代码:当点击这使得网页过渡
try {
App.restore();
} catch (err) {
App.load('page1');
}
点击的图像消失看起来凌乱。
如果添加的图片克隆到DOM这是解决:
$('#clicked-img-container').html($(this).clone());
此外,默认过渡是fade
关于你的情况,这可能是凌乱。你可以玩here提供的选项。我已添加slide-left
向您展示如何。
工作示例如下:
//App.load('page1');
App.setDefaultTransition('slide-left'); // global
App.controller('page1', function(page) {
$(page).find('img').on('click', function() {
App.load('page2');
$('#clicked-img-container').html($(this).clone());
});
});
App.controller('page2', function(page) {
});
try {
App.restore();
} catch (err) {
App.load('page1');
}
img {
width: 150px;
height: 100px;
}
<!DOCTYPE html>
<html>
<head>
<!-- Default stylesheet provided with App.js.
Contains iOS/Android styles for all included widgets. -->
<link rel="stylesheet" href="//cdn.kik.com/app/2.0.1/app.min.css">
</head>
<body>
<!-- Page1 -->
<div class="app-page" data-page="page1">
<div class="app-topbar">
<h1>Page 1</h1>
</div>
<div class="app-content">
<img src="https://upload.wikimedia.org/wikipedia/commons/1/13/Red_squirrel_%28Sciurus_vulgaris%29.jpg">
<img src="https://upload.wikimedia.org/wikipedia/commons/d/d5/Lightmatter_lioness.jpg">
<div class="app-button" data-target="page2">Go to page 2</div>
<p>Click the images. If nothing happens, go to page2 and then back to page1 and try clicking again to see the problem I'm experiencing:
<strong>The clicked image disappears when clicked which makes the page transition look messy.</strong></p>
</div>
</div>
<!-- Page2 -->
<div class="app-page" data-page="page2">
<div class="app-topbar">
<h1>Page 2</h1>
</div>
<div class="app-content">
<div id="clicked-img-container"></div>
<div class="app-button" data-target="page1">Go to page 1</div>
</div>
</div>
<!-- jQuery-like library focusing on being lightweight and mobile-friendly -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.2.0/zepto.min.js"></script>
<!-- core module containing all library functionality -->
<script src="//cdn.kik.com/app/2.0.1/app.min.js"></script>
</body>
</html>
令人惊叹!多谢朋友! :)解决了我的问题。现在我可以为我的客户做一个我的应用程序的演示视频。 –
欢迎SO。 +1创建一个最小的,可验证的例子! – tgogos
我更新了我的答案 – tgogos