jquery-mobile 相关问题

jQuery Mobile是一款针对智能手机和平板电脑的触控优化网页框架。它在所有流行的移动设备平台上提供统一的用户界面系统,构建在jQuery之上。

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

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

回答 1 投票 0

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; } 检查这个演示小提琴

回答 1 投票 0

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

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

回答 2 投票 0

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

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

回答 1 投票 0

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

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

回答 5 投票 0

使用javascript用手机拍照

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

回答 2 投票 0

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; }

回答 3 投票 0

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'); });

回答 2 投票 0

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

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 是否存在可能影响移动设备上导航栏的显示或功能的任何媒体查询。您可以使用开发人员工具来模拟移动设备,并查看索引上是否应用了不同的样式

回答 1 投票 0

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

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

回答 3 投票 0

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

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

回答 1 投票 0

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

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

回答 2 投票 0

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 } }

回答 1 投票 0

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

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

回答 2 投票 0

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

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

回答 3 投票 0

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

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

回答 1 投票 0

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

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

回答 1 投票 0

删除 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>

回答 0 投票 0

带控制器按钮的贪吃蛇游戏,适合移动使用**更新**

** 注意:我已经编辑了下面的 javascript 并链接到新的 JSFiddle,但仍然没有像键盘上的箭头键那样获得控制蛇运动的按钮 ** 我正在尝试创造...

回答 2 投票 0

输入字段从选项获取数据列表的自定义属性

如何从选项中获取datalist的属性。我得到了期权价值 $( 文档 ).ready(function() { var 选项 = ' 如何从选项中获取datalist的属性。我正在获取期权价值 $( document ).ready(function() { var options = '<option value="Internet Explorer" key="18"></option>'+ '<option value="Firefox" key="12"></option>'+ '<option value="Chrome" key="123"></option>'+ '<option value="Opera" key="14"></option>'+ '<option value="Safari" key="15"></option>' ; $("#browsers").html(options); }); $(document).on('click', '#submit', function() { var inputval= $("#key").val(); alert(inputval) var key= $('datalist option[value='+inputval+']').attr('key'); if (oldval) alert(key); }); <input list="browsers" id="key"> <datalist id="browsers"> </datalist> <button id="submit">submit </button> Screen Shots 实际结果 选择选择字段列表时,将在下一个空白页中打开,并且选择选项也无法正常工作 预期结果 这是示例静态选项丢失了,它工作正常,我们想要这样 阅读 API 文档中有关 selectmenus 的信息: http://api.jquerymobile.com/selectmenu/ 改变: $('#filter-menu').html(selCntryPrvdrSrch).change(); 到 $('#filter-menu').html(selCntryPrvdrSrch).selectmenu( "refresh" ); 参考:http://api.jquerymobile.com/selectmenu/#method-refresh 示例: 可以在此处找到有关 selectmenu 自定义过滤的工作示例:https://www.elitesystemer.no/demo/test/36549140/ 这是基于 jQuery Mobile 演示页面中的示例代码: http://demos.jquerymobile.com/1.4.2/selectmenu-custom-filter/ http://demos.jquerymobile.com/1.4.4/selectmenu-custom-filter/ http://demos.jquerymobile.com/1.4.5/selectmenu-custom-filter/

回答 1 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.