jquery-mobile 相关问题

单击靠近面板时 jQuery Mobile 面板未关闭

我的 jQuery Mobile 应用程序中的面板出现了一些问题。除了单击外部时关闭面板的功能外，一切正常。 请参阅下面的屏幕截图，其中解释了...

返回页面后无法点击链接按钮触发弹窗

我有一个链接按钮，当第一次（并且在大多数情况下）进入我的“管理作业”页面时，它可以正常工作并按预期触发弹出窗口： 我有一个链接按钮，当第一次（并且在大多数情况下）进入我的管理作业页面时，它可以正常工作并按预期触发弹出窗口： <a href="#dialogCompletion" data-rel="popup" data-position-to="window" data-transition="pop" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-calendar ui-btn-icon-left ui-btn-b" aria-haspopup="true" aria-owns="dialogCompletion" aria-expanded="false">Job Complete</a> 单击时，我的弹出窗口启动，显示日期和按钮，我可以更改日期，单击按钮，调用 JavaScript 函数，调用 location.href，它会在查询字符串上使用特殊值重新加载同一页面，我的数据库已更新。 但是当我按照一组非常常见的步骤操作时，按钮不起作用，弹出窗口也无法打开： 单击“管理作业”页面上的按钮，弹出窗口打开，设置日期，单击弹出窗口中的按钮，页面重新加载，发生数据库写入。 点击我的图标即可导航至主页。 通过单击主页上的导航链接导航回“管理作业”页面（我刚才所在的位置）。 单击应该触发弹出窗口的按钮 - 但事实并非如此。 如果我刷新页面，一切都会恢复正常，我可以单击同一按钮并打开弹出窗口。或者，如果我导航到主页，重新加载浏览器，然后导航到“管理作业”，它也可以工作。但 JQM 页面转换过程中一定发生了某些事情，破坏了按钮的可点击性，因此无法启动弹出窗口。任何时候的强制页面刷新都会清除它并解决问题，并且我可以再次成功启动弹出窗口。 这真的很糟糕，因为我无法告诉我的用户“每次按钮无法点击时重新加载页面”。查看问题的步骤是非常常见的步骤，而不是边缘情况。 我注意到一件事：当我的链接按钮上的 aria-expanded 属性为“false”时，可以单击该按钮（实际上是用手指按下），并且弹出窗口打开。但是，当弹出窗口无法启动时（按照上面的重现步骤），我注意到 aria-expanded 属性设置为“true”。所以起初我认为修复是一个简单的技巧。我只需使用 jQuery 将该属性设置为 false，它就会起作用。但事实并非如此。在 Chrome 开发工具中，我将其设置为 false 并尝试单击它，但没有成功。 这确实看起来像是 JQM 中的一个错误，这很可怕，因为它是如此常见/核心功能。有修复方法可以使其工作吗？ 我能找到的唯一解决方案是禁用锚元素上的ajax： <a href='ManageJob.php?JobID=$jobID' data-ajax='false'> 这会破坏很酷的页面转换，但至少所有按钮现在都可以在目标页面上使用。我期待 JQM 修复这个巨大的错误。

异步加载数据时不应用复选框样式

使用谷歌应用程序脚本在我的学校构建一个简单的工具，以帮助收集学生作业的照片证据并集中保存，以便所有教学人员都可以访问它（可能已经有一个应用程序......

jquery mobile 的带有空白的列表视图

我的代码： ... 我的代码： <div data-role="content" id="merlin"> <div data-role="collapsible-set" data-theme="c" data-content-theme="d" data-inset="false"> <div data-role="collapsible"> <h2>That is a serious problem and I don't know how to solve it</h2> <ul data-role="listview"> <li>some content</li> </ul> </div> </div> </div> 输出： http://s14.directupload.net/images/140117/6foqxhjr.png 我想要的： 空白（或者说自动换行？）来阅读整个标题 我尝试过的： #merlin { white-space: normal; }​ 或 .ui-page .ui-content .ui-listview .ui-li-desc { white-space : normal; }​ 您需要定位类 ui-btn-text 并尝试此选择器： #merlin .ui-btn-text { white-space: normal; } 检查这个演示小提琴

以编程方式更改模型时，选择框不会更新

我在弹出窗口中有一个选择框，我可以毫无问题地分配初始值。但是，我想在打开弹出窗口时更改选择框的值，但问题是虽然它“勾选”了

适用于 Android 和 iOS 的声音管理器 2 或 JPlayer

对于使用 jQuery Mobile 的移动应用程序（针对 Android 和 iOS）来说，哪一个更好？ 我需要运行 mp3 音频以及 rtmp 直播。

如何设置SWIPER从第一张幻灯片开始？

我的滑动器有问题（http://www.idangero.us/sliders/swiper/api.php）...我在第 1 页，当我切换到第 2 页时，我希望滑块从第一张幻灯片开始。我设置了 mySwiper.swip...

使用javascript用手机拍照

我正在寻找一种在我的网站上用手机/平板电脑拍照的方法，行为应该是： 用户单击“相机”按钮。 手机摄像头显示。 用户拍照 图片...

CSS 在同一行显示标题和按钮

我看过一些关于此问题的其他线程，但似乎没有一个能解决我的问题。我有一个标题文本和一个按钮，我想将它们显示在同一行中。 HTML： 我已经看到了有关此问题的其他一些线程，但似乎没有一个能解决我的问题。我有一个标题文本和一个按钮，我想将它们显示在同一行中。 HTML： <div> <h3 class="header">Title</h3> <button type="submit" class="ui-btn ui-corner-all ui-shadow ui-btn-b ui-btn-icon-left ui-icon-check header">Button</button> </div> CSS： .header { display: inline-block; float: left; } 现在我在页面后面使用基本相同的代码，除了 <img>'s 之外，它工作得很好。我认为，由于我使用的是 jQuery Mobile ，样式可能会被它覆盖，但即使我删除 ui 类，结果也是一样的。同样，如果我尝试为标题和按钮设置静态宽度，我会得到相同的结果。任何帮助将不胜感激！ js小提琴： http://jsfiddle.net/p9jf60yc/ 将 ui-btn-inline 类添加到您的按钮。它是 jquery mobile css 类的一部分。无需使用自定义 CSS 进行调整。 <div> <h3 class="header">Title</h3> <button type="submit" class="ui-btn ui-btn-inline ui-corner-all ui-shadow ui-btn-b ui-btn-icon-left ui-icon-check header">Button</button> </div> JSfiddle 演示 PS：可以在此处找到所有可用课程的概述 您需要设置按钮的宽度，因此它没有 100%： button.header { width: 100px; } http://jsfiddle.net/p9jf60yc/2/ 将按钮上的宽度更改为自动。 button.ui-btn { width: auto; }

jQuery 移动按钮样式在本地化时丢失

我正在使用本地化库 i18Next 开发 jquerymobile 项目。 HTML 代码： 我正在使用本地化库i18Next开发jquerymobile项目。 HTML代码： <div id="messageboxPage" data-role="page" data-theme="a"> <div data-role="header" data-theme="a"></div> <div id="messagePage" data-role="content" data-theme="a"> <div class="barContainer" id="barContainer"> <div class="ui-bar ui-bar-b ui-btn-corner-all" style=" margin-top: 40px; padding-left: 0px;padding-right:10px; "> <div style="float: left; width: 30%;"> <a href="#" id="aNo" onclick="SetActive('aNo')" class="LnkButton" data-theme="a" data-role="button" data-inline="true" data-mini="true">Cancel</a> </div> <div style="float: left; width: 30%;padding-left: 6%; padding-right: 2%;"> <a href="#" id="aAccept" onclick="Supprimer();" data-theme="a" class="LnkButton" data-role="button" data-inline="true" data-mini="true">Delete</a> </div> <div style="float: right; width: 30%;"> <a href="#" id="aReply" onclick="Reply();" data-theme="a" class="LnkButton" data-role="button" data-inline="true" data-mini="true">Reply</a> </div> </div> </div> </div> </div> js代码 window.opts = { lng: 'fr', getAsync: true, // fallbackLng: 'en', ns: { namespaces: ['ns.controls'], defaultNs: 'ns.controls' }, useLocalStorage: false, debug: true }; $.i18n.init(opts).done(function () { alert('i18n init function'); $('#aNo').text("No Merci!"); $('#aAccept').text("Supprimer"); $('#aReply').text("Respondre"); $('#messageboxPage').trigger('pagecreate'); }); $(document).ready(function () { alert('messagebox document ready'); }); 现在的问题是文字改变了，但是按钮样式丢失了。第二个问题是设置带标签的文本；我尝试过页面创建触发器，但它不起作用。你有什么建议？ 这是一个工作的JS Fiddle 要更改按钮的文本，您必须修改 .ui-btn-text 元素的文本，这比 span > span 更好： $('#aNo .ui-btn-text').text("No Merci!"); $('#aAccept .ui-btn-text').text("Supprimer"); $('#aReply .ui-btn-text').text("Respondre"); 小提琴 这对我有用 $.i18n.init(opts).done(function () { alert('i18n init function'); var message_type = 0; if (message_type == "0") { alert('from 0'); $('#lblTo').text("from 0"); } else if (message_type == "1") { alert('to 1'); $('#lblTo').text("to 1"); } else if (message_type == "2") { alert('from 2'); $('#lblTo').text("from 2"); } $('lblDate').text($.t('Messagebox.lblDate')); $('lblSubject').text($.t('Messagebox.lblSubject')); //////////////////////////this is where i was wrong $('#aNo > span > span').text("No Merci!"); $('#aAccept > span > span').text("Supprimer"); $('#aReply > span > span').text("Respondre"); /////////////////////////// $('#messageboxPage').trigger('pagecreate'); });

我在移动设备中仅在索引页上遇到导航栏问题

HTML 文件 HTML 文件 <div class="header_section header_bg"> <div class="container-fluid"> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a><img src="images/logo.png"></a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav ml-auto"> <li class="nav-item"> <a class="nav-link active" href="index.html">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="about.html">About</a> </li> <li class="nav-item"> <a class="nav-link" href="machines.html">Machines</a> </li> <li class="nav-item"> <a class="nav-link" href="work.html">Work</a> </li> <li class="nav-item"> <a class="nav-link" href="contact.html">Contact</a> </li> </ul> </div> </nav> </div> </div> 我的网站在桌面上运行良好，但我在移动设备上遇到问题，我的主菜单导航栏不起作用！仅索引页其他页面工作正常。我检查了我的索引 html 代码与其他页面并进行了比较，但似乎没有什么是显而易见的。我该如何解决这个问题？ 我正在检查 css 文件和 js 文件，但看起来一切都很好。 从您提供的代码中我无法确定，但我过去遇到过一些问题以及我如何解决它们...... 首先确保使用 head 中的元标记来使缩放响应于设备： <meta name="viewport" content="width=device-width, initial-scale=1"> 检查由于样式而导致的重叠元素，某些元素可能会与菜单按钮重叠，导致它们不可单击，因此您单击其他元素会导致意外行为。 确保 JavaScript 和 jQuery 库在您的 index.html 中正确链接，假设您正在使用 jQuery，因为您使用的是 data-toggle="collapse" 由于该问题是特定于移动设备的，因此请检查 CSS 是否存在可能影响移动设备上导航栏的显示或功能的任何媒体查询。您可以使用开发人员工具来模拟移动设备，并查看索引上是否应用了不同的样式

让图像在移动平台上适合 100% 宽度

所以我目前正在我的网站上实现移动版本，一切都很好，除了我希望能够做到这一点，以便图像将填充屏幕的 100% 宽度，无论用户将其调整为水平...

我应该如何确保 API 与移动应用程序一起使用？

我正在开发的 API 仅适用于移动应用程序。由于移动应用程序位于不同的设备和 IP 上，我不确定如何使其无法在应用程序外部访问。唯一的

如何修复我的移动应用程序中的 Apache Cordova 漏洞

我正在尝试使用 Dreamweaver 和 Phonegap 制作移动应用程序。一切都很顺利，但是当我尝试将我的 APK 上传到 Google 开发者控制台时，我收到了这封邮件...... ” 您好 Google Play 开发者...

jQuery click() 在移动浏览器中不起作用

继续预订 <button class="proceed"> <div class="text-sm-bold clr-white" onclick="proceedBook()">PROCEED FOR BOOKING</div> </button> <button id="hid-cb" hidden type="submit" class="proceed-btn" name="conform-booking">PROCEED FOR BOOKING</button> const proceedBook= ()=>{$("#hid-cb").click()} $("#hid-cb").click() 不适用于移动设备 我使用 jQuery vclick const proceedBook= ()=>{$("#hid-cb").vclick()} 错误：未捕获类型错误：$(...).vclick 不是函数 const proceedBook = () => { $("#hid-cb").trigger('click'); } 当调用proceedBook()函数时，这将触发隐藏按钮上的“click”事件。 为了移动兼容性，请确保您的移动环境支持您正在使用的事件。有时，某些事件在移动浏览器上的行为可能有所不同，您可能需要使用触摸事件或其他特定于移动设备的事件。 const proceedBook = () => { // Check for mobile and trigger appropriate event if (/Mobi/.test(navigator.userAgent)) { $("#hid-cb").trigger('touchstart'); // Use touchstart for mobile } else { $("#hid-cb").trigger('click'); // Use click for non-mobile } }

将值更改为选中的单选按钮的值

我在页面上有这些单选按钮和一个转到下一页的按钮。 （称为“Doorgaan”）。在下一页中，我有一个 ID 为“CatNaam”的 h2，我希望其值 [CATEGORIENAAM] 为 cha...

在移动网站中创建将打开二维码扫描仪的链接

是否可以在移动网站中创建一个链接，当用户点击该链接时，该链接将在 iPhone 或 Android 手机上打开二维码扫描仪？ 具体来说，我正在使用 jQuery Mobi 构建一个网站...

Phonegap 应用程序的 iOS/Android 设备中按钮 css 的更改速度非常慢

我使用 jquery mobile 和 css 为我的 Phonegap 移动应用程序设计了一个自定义按钮。 单击按钮只会切换开/关状态，并且 css 类也会更改。 然而切换/更改是...

使用 jQuery Mobile 时无法以编程方式选中复选框

我一直在尝试使用 jQuery 将一组复选框标记为已选中。我似乎无法弄清楚为什么。 JavaScript： 函数 getProjects(课程){ console.log("getProjects"); 变量数据 = { &

删除 jQuery Mobile 滑块控件中的文本框

我正在使用这个 JQM 链接 <p>我正在使用这个 JQM 链接</p> <pre><code>&lt;link rel=&#34;stylesheet&#34; href=&#34;http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css&#34; /&gt; &lt;script src=&#34;http://code.jquery.com/jquery-1.7.1.min.js&#34;&gt;&lt;/script&gt; &lt;script src=&#34;http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js&#34;&gt; &lt;/script&gt; </code></pre> <p>我在除法中使用了滑块。在旧版本中，我使用了属性 class="ui-hidden-accessible" 因为没有在滑块旁边显示文本框，但在此版本中它不起作用。我怎样才能删除这个文本框。我的代码</p> <pre><code> &lt;label for=&#34;slider&#34; class=&#34;ui-hidden-accessible&#34;&gt; Input slider:&lt;/label&gt; &lt;input type=&#34;range&#34; name=&#34;slider&#34; id=&#34;slidstep&#34; step=&#34;25&#34; value=&#34;0&#34; min=&#34;1&#34; max=&#34;100&#34;/&gt; </code></pre> <p><img src="https://cdn.txt58.com/i/AWkuc3RhY2suaW1ndXIuY29tL042d2E5LnBuZw==" alt="enter image description here"/></p> <p>我应该使用其他版本吗？或任何方法来克服这个问题。 </p> <p>谢谢</p> </question> <answer tick="false" vote="9"> <pre><code>&lt;style type=text/css&gt; input.ui-slider-input { display : none !important; } &lt;/style&gt; </code></pre> <p><a href="http://the-jquerymobile-tutorial.org/jquery-mobile-tutorial-CH19.php" rel="noreferrer">http://the-jquerymobile-tutorial.org/jquery-mobile-tutorial-CH19.php</a></p> <h3>另请参阅</h3> <blockquote> <p><a href="https://stackoverflow.com/questions/8912660/hiding-the-slider-input-box-in-jquery">在jquery中隐藏滑块输入框</a></p> </blockquote> </answer> <answer tick="false" vote="7"> <p>从 <pre><code>class=&#34;ui-hidden-accessible&#34;</code></pre> 中删除此 <pre><code>label</code></pre>。</p> <p><strong>你的做法是正确的。但您需要将 <pre><code>class=&#34;ui-hidden-accessible&#34;</code></pre> 添加到 <pre><code>input</code></pre>，而不是添加到 <pre><code>label</code></pre>。</strong></p> <p>你的代码应该是这样的：</p> <pre><code>&lt;label for=&#34;slider&#34;&gt;Input slider:&lt;/label&gt; &lt;input type=&#34;range&#34; name=&#34;slider&#34; id=&#34;slidstep&#34; step=&#34;25&#34; value=&#34;0&#34; min=&#34;1&#34; max=&#34;100&#34; class=&#34;ui-hidden-accessible&#34;/&gt; </code></pre> <p>检查这个<a href="http://jsbin.com/ucajok/37/edit"><strong>演示</strong></a></p> </answer> <answer tick="false" vote="1"> <p>我已将滑块放入我自己的具有特定类（“ui-slider-slider”）的 div 容器中。然后在我的 CSS 中，我将 div 的两个子元素作为目标，即：</p> <pre><code>div.ui-slider-slider input.ui-input-text { display: none; } div.ui-slider-slider div.ui-slider-track { margin: 0 15px 0 15px !important; } </code></pre> <p>第一个规则隐藏文本框，第二个规则使滑块全宽。希望有帮助:)</p> </answer> <answer tick="false" vote="0"> <p>此外，还有以下作品：<pre><code>$(&#34;#slider&#34;).hide();</code></pre> 这是因为 <pre><code>#slider</code></pre> 是滑块的文本框组件。 </p> </answer> <answer tick="false" vote="0"> <p>对于范围滑块，这是解决方案（来自 Pascal）：</p> <pre><code> input.ui-slider-input { display: none; } .ui-rangeslider .ui-rangeslider-sliders { margin: 0px; </code></pre> </answer> <answer tick="false" vote="0"> <p>不幸的是，上述方法对我来说都不起作用。以下确实有效。</p> <pre><code>&lt;div class=&#34;noinput&#34;&gt; &lt;input type=&#34;range&#34; name=&#34;slider&#34; id=&#34;slidstep&#34; step=&#34;25&#34; value=&#34;0&#34; min=&#34;1&#34; max=&#34;100&#34;/&gt; &lt;/div&gt; </code></pre> <p>CSS</p> <pre><code>.noinput .ui-slider-track { margin: 0 5px 0 5px !important; } .noinput input.ui-slider-input { display : none !important; } </code></pre> </answer> </body></html>