Jquery库不能用sencha触摸？ [英] Jquery library not working with sencha touch?
问题描述
我正在建立一个基于Sencha Touch 2的移动应用程序。
目前，我只是尝试一些实验来看看Sencha的能力。
$ b $今天我被困在一个很奇怪的东西上，我只是想尝试一下，如果我可以使用jQuery库来应用程序，并使用它的补充。
最奇怪的是，当我进行jquery功能时，我无法得到任何回应。
我已经在索引中包含了jquery库和我的脚本。我的sencha目录中的html文件，我刚刚做了一个简单的愚蠢的测试脚本也看看它是否可行 - 但是我没有任何反应，当我在浏览器中尝试。我可以看到图书馆和脚本是通过firebug包含的（可以看到我的jquery测试只是一个简单的点击事件，应该显示一个div，但不是）。
我是愚蠢的 - 或者我在这里错过了什么？
这是我的index.html文件
<！DOCTYPE HTML>
< html manifest =lang =en-US>
< head>
< meta charset =UTF-8>
< title> scroller< / title>
< script src =http://code.jquery.com/jquery-latest.min.jstype =text / javascript>< / script>
< script type =text / javascript>
$（document）.ready（function（）{
$（＃show_me）。click（function（）{
$（'＃magic '）.slideDown（'slow'）;
}）;
}）;
< / script>
< link rel =stylesheethref =resources / css / sencha-touch.csstype =text / css>
< style type =text / css>
/ **
*初始加载指示符的示例。
*建议尽可能保持最小化，以提供即时反馈
*，而其他资源仍然首次加载
* /
html，body {
height：100％;
background-color：＃1985D0
}
#appLoadingIndicator {
position：absolute;
顶部：50％;
margin-top：-15px;
text-align：center;
width：100％;
height：30px;
-webkit-animation-name：appLoadingIndicator;
-webkit-animation-duration：0.5s;
-webkit-animation-iteration-count：infinite;
-webkit-animation-direction：linear;
}
#appLoadingIndicator> * {
background-color：#FFFFFF;
显示：inline-block;
height：30px;
-webkit-border-radius：15px;
margin：0 5px;
width：30px;
opacity：0.8;
}
@ -webkit-keyframes appLoadingIndicator {
0％{
opacity：0.8
}
50％{
不透明度：0
}
100％{
opacity：0.8
}
}
< / style>
<！ - 以下行必须保持完整，以供Sencha Command构建应用程序 - >
< script type =text / javascriptsrc =http://maps.googleapis.com/maps/api/js?libraries=places&sensor=true>< / script>
<！ - script type =text / javascriptsrc =http://maps.google.com/maps/api/js?sensor=true>< / script ---> ;
< script id =microloadertype =text / javascriptsrc =sdk / microloader / development.js>< / script>
<！ - < script type =text / javascriptsrc =app.js>< / script> - >
< script type =text / javascriptsrc =js / cordova-1.7.0.js>< / script>
< script type =text / javascriptsrc =js / phonegap_shortcuts.js>< / script>
< script type =text / javascriptsrc =js / maps.js>< / script>
< script type =text / javascriptsrc =js / zepto.min.js>< / script>
< script type =text / javascriptsrc =js / filters.js>< / script>
< script type =text / javascriptsrc =js / proxy.js>< / script>
<！ - < script type =text / javascriptsrc =js / index.js>< / script> - >
<！ -
< script type =text / javascript>
document.addEventListener（deviceready，app.mainLaunch，false）;
< / script>
- >
< script type =text / javascript>
function onDeviceReady（）{
pictureSource = navigator.camera.PictureSourceType;
destinationType = navigator.camera.DestinationType;
}
函数PictureSourceType（）{};
PictureSourceType.PHOTO_LIBRARY = 0;
PictureSourceType.CAMERA = 1;
// var ja = phonegap.shortcuts.getLocation（）;
//console.log('ja:'+ja）;
document.addEventListener（deviceready，onDeviceReady，false）;
< / script>
< / head>
< body>
< div id =appLoadingIndicator>
< div>< / div>
< div>< / div>
< div>< / div>
< / div>
< / body>
< / html>
也许你点击的元素有id'showme'。这可能会发生，因为您创建的按钮在Sencha中具有id'showme'，但是呈现的实际HTML包含另一个ID。
如果这是真的（您可以检查当然这个使用FireBug），你可能想要听按钮上的'tap'事件，而不是使用jQuery绑定到'click'事件。请参阅 http://docs.sencha.com /touch/2-0/#!/api/Ext.Button-event-tap 的文档。
可以用Sencha使用jQuery，但是请记住，Sencha中的组件不是DOM中元素的直接表示，Sencha中的某些组件在呈现时由多个DOM元素组成。
希望这有助于
I am currently building an mobile application that is based on Sencha Touch 2. At the moment im just trying out some experiments to see what Sencha is capable too.
And today I got stuck on a thing that really seems strange - I just wanted to try if I could use the jQuery library for my application and use it's additions.
Strangest thing is I can't get any response from when I am making a jquery function.
I've included the jquery library and my script in the index.html file in my sencha directory and I just made a simple stupid test script too see if it works - but I don't get any reaction at all when im trying it out in the browser. I can see that the library and the script is included via firebug.(As you can see my jquery test is just a simple click event that should display a div, but it ain't).
Am I being plain stupid - or what am I missing out here?
Here's my index.html file
<!DOCTYPE HTML>
<html manifest="" lang="en-US">
<head>
<meta charset="UTF-8">
<title>scroller</title>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#show_me").click(function () {
$('#magic').slideDown('slow');
});
});
</script>
<link rel="stylesheet" href="resources/css/sencha-touch.css" type="text/css">
<style type="text/css">
/**
* Example of an initial loading indicator.
* It is recommended to keep this as minimal as possible to provide instant feedback
* while other resources are still being loaded for the first time
*/
html, body {
height: 100%;
background-color: #1985D0
}
#appLoadingIndicator {
position: absolute;
top: 50%;
margin-top: -15px;
text-align: center;
width: 100%;
height: 30px;
-webkit-animation-name: appLoadingIndicator;
-webkit-animation-duration: 0.5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: linear;
}
#appLoadingIndicator > * {
background-color: #FFFFFF;
display: inline-block;
height: 30px;
-webkit-border-radius: 15px;
margin: 0 5px;
width: 30px;
opacity: 0.8;
}
@-webkit-keyframes appLoadingIndicator{
0% {
opacity: 0.8
}
50% {
opacity: 0
}
100% {
opacity: 0.8
}
}
</style>
<!-- The line below must be kept intact for Sencha Command to build your application -->
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=true"></script>
<!-- script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script--->
<script id="microloader" type="text/javascript" src="sdk/microloader/development.js"></script>
<!--<script type="text/javascript" src="app.js"></script>-->
<script type="text/javascript" src="js/cordova-1.7.0.js"></script>
<script type="text/javascript" src="js/phonegap_shortcuts.js"></script>
<script type="text/javascript" src="js/maps.js"></script>
<script type="text/javascript" src="js/zepto.min.js"></script>
<script type="text/javascript" src="js/filters.js"></script>
<script type="text/javascript" src="js/proxy.js"></script>
<!--<script type="text/javascript" src="js/index.js"></script>-->
<!--
<script type="text/javascript">
document.addEventListener("deviceready", app.mainLaunch, false);
</script>
-->
<script type="text/javascript">
function onDeviceReady() {
pictureSource=navigator.camera.PictureSourceType;
destinationType=navigator.camera.DestinationType;
}
function PictureSourceType() {};
PictureSourceType.PHOTO_LIBRARY = 0;
PictureSourceType.CAMERA = 1;
//var ja = phonegap.shortcuts.getLocation();
//console.log('ja:'+ja);
document.addEventListener("deviceready", onDeviceReady, false);
</script>
</head>
<body>
<div id="appLoadingIndicator">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
Maybe the element you are clicking on, doesn't have the id 'showme'. This can happen because the button you created has id 'showme' in Sencha, but the actual HTML that gets rendered contains another id.
If this is true (you can check this using FireBug of course), you might want to listen to the 'tap' event on the button instead of using jQuery to bind to the 'click' event. See http://docs.sencha.com/touch/2-0/#!/api/Ext.Button-event-tap for documentation.
It is possible to use jQuery with Sencha, but it's important to keep in mind that components in Sencha aren't a direct representation of elements in the DOM, some components in Sencha consist of several DOM elements when rendered.
Hope this helps
这篇关于Jquery库不能用sencha触摸？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
