Javascript jquery移动转义页面的一部分<;部门>;(动态创建)
我一直在尝试从jquery mobile中转义页面的一部分,因为我已经有了一个不同的插件来处理页面turn.js的这一部分,但我似乎无法转义。。。这是在另一个jquery插件处理的动态div上。这是一把小提琴: 这就是动画书的工作原理 我已经在用了Javascript jquery移动转义页面的一部分<;部门>;(动态创建),javascript,jquery-mobile,jquery,markup,Javascript,Jquery Mobile,Jquery,Markup,我一直在尝试从jquery mobile中转义页面的一部分,因为我已经有了一个不同的插件来处理页面turn.js的这一部分,但我似乎无法转义。。。这是在另一个jquery插件处理的动态div上。这是一把小提琴: 这就是动画书的工作原理 我已经在用了 <div data-enhance="false" data-role="none" id="flipbook"> </div> 但这些图像仍然没有出现。有没有其他方法可以从jquery mobile中逃离div以及di
<div data-enhance="false" data-role="none" id="flipbook">
</div>
但这些图像仍然没有出现。有没有其他方法可以从jquery mobile中逃离div以及div中的内容
页面的配置:
<title></title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="zip/zip.js"></script>
<script type="text/javascript" src="zip/deflate.js"></script>
<script type="text/javascript" src="zip/zip-ext.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<script>
$(document).on('mobileinit', function () {
$.mobile.ignoreContentEnabled = true;
});
</script>
<script type="text/javascript" src="turn.js"></script>
$(文档).on('mobileinit',函数(){
$.mobile.ignoreContentEnabled=true;
});
这是turn.js的正常输出:
<div data-enhance="false" id="flipbook"
style="position: relative; width: 1024px; height: 360px; -webkit-transform: translate3d(0px, 0px, 0px);">
<div class="turn-page-wrapper" page="1"
style="position: absolute; overflow: hidden; width: 512px; height: 360px; top: 0px; right: 0px; left: auto; bottom: auto; z-index: 56;">
<div style="position: absolute; top: 0px; left: 0px; overflow: hidden; z-index: auto; width: 626px; height: 626px; -webkit-transform-origin: 0% 100%;">
<div data-enhance="false" class="turn-page p1"
style="width: 512px; height: 360px; position: absolute; top: 0px; left: 0px; bottom: auto; right: auto; -webkit-transform-origin: 0% 100%;">
<img width="512px" src="filesystem:http://localhost:8080/persistent/LEGO/CATALOGO%202013_001.jpg"></div>
</div>
<div style="top: 0px; left: 0px; overflow: hidden; z-index: 1; width: 512px; height: 360px; background-image: -webkit-gradient(linear, 100% 100%, 100% 100%, color-stop(0.8, rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.298039)), to(rgba(0, 0, 0, 0))); display: none;"></div>
</div>
<div style="pointer-events: none; position: absolute; top: -50px; left: -8px; overflow: visible; z-index: auto; display: none;">
<div style="position: absolute; top: 50px; left: 520px; overflow: hidden; z-index: 56; width: 626px; height: 626px; -webkit-transform-origin: 0% 100%; -webkit-transform: translate3d(512px, -266px, 0px) rotate(-90deg); display: none;">
<div style="position: absolute; top: auto; left: 0px; overflow: visible; z-index: auto; width: 512px; height: 360px; right: auto; bottom: 0px; -webkit-transform-origin: 0% 100%; -webkit-transform: rotate(90deg) translate3d(0px, 360px, 0px);">
<div style="cursor: default; width: 360px; height: 512px; -webkit-transform-origin: 0% 0%; -webkit-transform: rotate(-90deg);">
<div data-enhance="false" class="turn-page p2"
style="width: 512px; height: 360px; -webkit-transform-origin: 0% 0%;">
<div class="turn-page p4" style="width: 200px; height: 300px;"> Page 2</div>
</div>
<div style="position: absolute; top: 0px; left: 0px; overflow: hidden; z-index: 1; width: 360px; height: 512px; background-image: -webkit-gradient(linear, 0% 0%, 0% 0%, from(rgba(0, 0, 0, 0)), color-stop(0.8, rgba(0, 0, 0, 0.2)), to(rgba(255, 255, 255, 0.2)));"></div>
</div>
</div>
</div>
</div>
<div class="turn-page-wrapper" page="2"
style="position: absolute; overflow: hidden; width: 512px; height: 360px; top: 0px; left: 0px; right: auto; bottom: auto; z-index: 0; display: none;"></div>
<div class="turn-page-wrapper" page="3"
style="position: absolute; overflow: hidden; width: 512px; height: 360px; top: 0px; right: 0px; left: auto; bottom: auto; z-index: 55;">
<div data-enhance="false" class="turn-page p3" style="width: 512px; height: 360px;">
<div class="turn-page p4" style="width: 200px; height: 300px;"> Page 3</div>
</div>
</div>
第2页
第3页
这是jquerymobile with data enhanced=“false”的输出,jquerymobile仍然与data enhanced=“false”DIV中的代码混在一起:
Turn.js
第1页
第2页
第3页
可以看到jqueryMobile仍然在处理div中的代码:
例如:
<div class="turn-page-wrapper" page="1"
Fix:
更改此项:
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<script>
$(document).on('mobileinit', function () {
$.mobile.ignoreContentEnabled = true;
});
</script>
<script type="text/javascript" src="turn.js"></script>
$(文档).on('mobileinit',函数(){
$.mobile.ignoreContentEnabled=true;
});
为此:
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script>
$(document).on('mobileinit', function () {
$.mobile.ignoreContentEnabled = true;
});
</script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<script type="text/javascript" src="turn.js"></script>
$(文档).on('mobileinit',函数(){
$.mobile.ignoreContentEnabled=true;
});
必须在初始化jquery Mobile之前进行初始化
例子:
工作示例:
HTML:
jQM复杂演示
$(文档).on('mobileinit',函数(){
$.mobile.ignoreContentEnabled=true;
});
首页
页脚
编辑:
对于动态添加的内容,唯一可能的解决方案是data role=“none”属性,因为data enhance=“false”仅适用于从文件加载的内容
示例:简短回答的可能重复:data role=“none”
在容器上设置时不起作用,data enhance=“false”
仅当.mobile.ignoreContentEnabled
在mobileinit
处理程序中设置为true
时才起作用。我有$.mobile.ignoreContentEnabled=true;它仍然不能正常工作。由于某种原因仍然不能工作。。。我已经添加了输出和预期的输出。它必须有效,我为您提供了一个有效的示例:查看并询问您是否有更多问题。它在静态页面上有效,但在按钮按下事件中创建的div上似乎无效。这是一个修复方法:#动画书div{display:block!important;}这就是全部内容还是您还想要其他内容?就是这样,这就是问题所在。非常感谢。事实上,它仍然得到了风格化,即使现在它可以工作了
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<script>
$(document).on('mobileinit', function () {
$.mobile.ignoreContentEnabled = true;
});
</script>
<script type="text/javascript" src="turn.js"></script>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script>
$(document).on('mobileinit', function () {
$.mobile.ignoreContentEnabled = true;
});
</script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<script type="text/javascript" src="turn.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta name="viewport" content="width=device-width"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script>
<script>
$(document).on('mobileinit', function () {
$.mobile.ignoreContentEnabled = true;
});
</script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page" id="index">
<div data-theme="a" data-role="header" data-enhance="false">
<h3>
First Page
</h3>
<a href="#second" class="ui-btn-right">Next</a>
</div>
<div data-role="content">
<a href="#" data-role="button" id="test-button">Test button</a>
<!-- Every content inside this div will not be enhanced -->
<div data-enhance="false">
<a href="#" data-role="button" id="test-button">Test button</a>
<div>
<a href="#" data-role="button" id="test-button">Test button</a>
</div>
</div>
<a href="#" data-role="button" id="test-button">Test button</a>
</div>
<div data-theme="a" data-role="footer" data-position="fixed" data-enhance="false">
<h3>
Footer
</h3>
</div>
</div>
</body>
</html>