Sencha淡入淡出效果的工作示例 [英] Working Example of Sencha Fade Effect
问题描述
有人可以给我写完整的代码，向我展示如何使用sencha touch 1淡入和淡出html元素吗?具体来说，我需要知道要包含的必要的html，javascript和css文件.
Can someone write me the full code to show me how I can fade in and fade out an html element with sencha touch 1? Specifically, I need to know what is the necessary html, javascript and css files to include.
我一直试图获得一种简单的淡入淡出效果以在div元素上工作，但没有成功.我得到的方法未找到错误，或者什么也没有发生.在sencha论坛上没有人回答我的问题.我很确定我只是缺少明显的东西.
I've tried forever to get a simple fade effect to work on a div element, but no success. Either I get method not found errors or nothing happens. No one is answering my questions on the sencha forums. I'm pretty sure i'm just missing something obvious.
附加说明
以下是我尝试过的事情以及失败的原因:
Here are things I tried and why they failed:
<!DOCTYPE html>
<html>
<head>
<title>Nested List - Source Code Browser</title>
<link rel="stylesheet" href="sencha-touch.css" type="text/css" id="stylesheet_file" />
<script type="text/javascript" src="sencha-touch.js"></script>
<script type="text/javascript">
Ext.setup({
onReady: function() {
// Ext.get('mydiv').hide();
// Ext.get('mydiv').fadeOut(); // fadeOut() does not exist error
// Ext.Anim.run(Ext.get('mydiv'), 'fade', {out:true}); // does nothing
// Ext.Anim.run(Ext.getDom('mydiv'), 'fade', {out:true}); // does nothing
}
});
</script>
</head>
<body><div id="mydiv">hello world</div></body>
</html>
推荐答案
在这里:
Ext.setup({
onReady: function() {
var bool = true;
var button1 = new Ext.Button({
text:'Fade',
id:'button1',
handler: function(){
Ext.Anim.run(button2, 'fade', {
out: bool,
autoClear:false
});
bool = !bool;
console.log("fade end");
}
});
var button2 = new Ext.Button({
text:'Fade'
});
var toolbar = new Ext.Toolbar({
dock:'top',
title:'Fade',
items:[button1,{xtype:'spacer'},button2]
});
new Ext.Panel({
fullscreen: true,
dockedItems: toolbar
});
}
});
自动清除属性将使按钮在褪色后保持隐藏状态
这篇关于Sencha淡入淡出效果的工作示例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
