标签: jquery-mobile

我正在尝试用jQuery Mobile/PhoneGap编写移动应用程序.我正在使用此示例模板开始,它使用HTML/JS来创建页面.他没有将所有<page>标签放在一个单独的html文件中,而是将其拆分,以便更容易编辑.

由于每个页面都有一个单独的文件,包含标题页眉/页脚的最佳方法是什么？我只看到你需要将整个页脚 - >导航栏代码复制并粘贴到每个HTML页面的位置.这似乎不应该是.例如,如果要更改一个菜单项,则需要进入每个页面并进行更改.

我缺少什么解决方案？

也许我只是不理解jQuery Mobile.例如,他们用于文档的侧边栏 - 侧边栏代码是否复制并粘贴到每个页面上？这没有意义.这与我在这里询问有关页脚的问题是一样的.

http://jquerymobile.com/test/docs/pages/page-cache.html

这就是我所拥有的那些似乎不对(并且$.live('pageinit')不起作用).这个HTML是每个HTML页面上的内容:

<div id="mainFooter" data-position="fixed" data-id="mainFooter" data-role="footer" class="ui-footer ui-bar-a ui-footer-fixed fade ui-fixed-inline" role="contentinfo" style="top: 58px;">

和JS

$.live('pageinit', function (event) {
    displayFooter();
});

function displayFooter() {
    $('#mainFooter').html('<div data-role="navbar" class="nav-glyphish-example" data-grid="d">' +
        '<ul>' +
        '<li><a href="#" id="menuitem1" data-icon="custom">Menu Item 1</a></li>' +
        '<li><a href="#" id="menuitem2" data-icon="custom">Menu Item 2</a></li>' +
        '<li><a href="#" id="menuitem3" data-icon="custom">Menu Item 3</a></li>' +
        '</ul>' +
        '</div>');
}

我正在开发一个具有自己外观和感觉的网络应用程序.我想使用jQuery Mobile仅支持触摸事件.

当我链接jquery.mobile.min.js(没有链接css),然后我的页面布局被打破.

如何配置(初始化)jQuery Mobile以仅使用触摸事件支持？我是否会在jQuery文档就绪钩子中绑定事件,因为我没有任何与JQM页面相关的事件？

编辑

在jsfiddle中查看此示例:http://jsfiddle.net/redhotsly/JGgrw/.html包含一个<button>但jQuery Mobile在<span>其左侧创建了一个.如果检查生成的标记(F12),您将看到jQuery Mobile还在我的按钮中添加了一个CSS类.

编辑:

我需要一个解决方案,我不会修改JQM脚本.我需要使用CDN上的官方脚本.

目标: 通过加载HTML内容$.ajax,将其插入DOM,让jQuery Mobile应用主题样式.

问题: 内容被插入但缺少jQuery Mobile主题.

码:

$.ajax({
    ...
    success: function(html) {
        $('#container').append(html);
        $('#page').page('refresh', true);
    }
});

返回的HTML包含data-rolejQM应该样式的标签......

<a data-role="button">Do Something</a>

我没有应用它应该的样式,而是出现以下错误:

未捕获的异常:没有这样的方法'刷新'页面小部件实例

以上代码测试使用 http://code.jquery.com/mobile/latest/jquery.mobile.js

类似的问题让我收到上述错误信息:

使用适当的jQuery Mobile样式一致地更新页面

JQM(jQueryMobile)动态添加了未正确显示的元素,并且未应用CSS

jQuery Mobile - 动态创建表单元素

我在jQuery Mobile网页上禁用了这样的按钮:

$(document).ready(function() {
    $("#deliveryNext").button();
    $("#deliveryNext").button('disable');
});

我可以启用它

$("#deliveryNext").button('enable');

但是,如何检查按钮是否已禁用或启用？

此命令提供"undefined":

$("#deliveryNext").attr('disabled')

一些想法？

编辑:我发现$("#deliveryNext").按钮('禁用')只接缝改变按钮上的样式,点击工作正常后我需要禁用按钮一些如何也..我试过. attr('禁用','禁用')但是当我测试.attr('禁用')时我得到了未定义的...

Edit2:更多关于如何在jQuery Mobile中禁用链接按钮的 "真实"问题？

我有一个页面,其中有一个部分用于绘制图纸.但是,当在移动浏览器上使用时,touchmove事件(至少是垂直事件)也会滚动页面(这会降低草图体验的性能).有没有办法要么a)禁用并重新启用页面的滚动(所以我可以在每行启动时将其关闭,但在每次完成后将其重新打开),或者b)禁用默认处理touchmove事件(可能是滚动)转到绘制草图的画布(我不能完全禁用它们,因为草图使用它们)？

我已经使用jquery-mobile vmouse处理程序作为草图,如果这有所不同.

更新:在iPhone上,如果我选择要绘制的画布,或者只是在绘制之前握住我的手指,页面不会滚动,而不是因为我在页面中编码的任何内容.

jQuery Mobile框架是否有一种集中元素的方式,特别是按钮？看起来它默认为左对齐所有内容,我无法找到一种方法(在框架内)来做到这一点.

我正在使用Jquery Mobile/Phonegap开发Android应用程序.我有以下代码来控制手机的后退按钮:

document.addEventListener("backbutton", backKeyDown, true); 


function backKeyDown() { 
    // Call my back key code here.
    $.mobile.changePage("#homepage", "slideup");
}

这一切都很好,但我希望应用程序只在主页上按下后退按钮时关闭,这可能吗？

我在Ruby On Rails上使用jquery-mobile.

我想创建一个按钮链接,暗示data-role="button"出现在生成的HTML中.

我试过了:

<%= link_to "Play", game_play_path, :data-role => "button" %>

但是,我得到一个错误

undefined local variable or method `role' for #<#<Class:0x007fdc25668ee8>:0x007fdc25658610>

有没有办法用:xxx符号来逃避破折号,还是我应该使用"xxx"符号？

(我同意这是一个美化问题,但我希望我的代码保持一致,不喜欢异常)

我最近使用html,css,javascript构建了一个Android应用程序,并通过phonegap运行它们来创建实际的应用程序.我在一部手机中遇到的一个问题是文字看起来太小了.还有一些图像也有点小.我添加了一个视口元标记,但它似乎也没有工作.以下是元标记:

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi" />`

这是它的外观

这是它应该看起来的样子:

我读过许多"bootstrap vs. jQuery mobile"文章.很明显,他们都有不同的目标.那么结合它们呢？

除了其他,我喜欢bootstrap的响应式布局功能.另一方面,我也喜欢"页面"方法和jQuery mobile(包括滑动事件等)和转换的可能性.

是否有专业项目结合两者？或者有人试图这样做并失败了？

我知道在jQuery Mobile中使用Bootstrap看起来像一个类似的问题,但它已经过时了(参考bootstrap 2).