jQuery Mobile - 动态创建表单元素

发布于 2024-09-29 15:40:11 字数 258 浏览 3 评论 0原文

我正在创建一个针对 iOS 设备的网络数据库驱动的离线网络应用程序。我正在尝试使用 jQuery Mobile，但在创建各种表单时遇到问题。

表单选项取自数据库查询，因此它们会在页面加载后插入到页面中，因此不会发生“jQuery-Mobilification”。快速浏览一下源代码，现阶段似乎没有任何明显的方法可以调用它（当然这是一个 alpha 版本，我认为这将是一个相当常见的请求，所以我希望它会来）。我可以采取某种解决方法来做到这一点吗？我对单选按钮、复选框和选择列表特别感兴趣。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

冰之心 2024-10-06 15:40:11

更新

Beta2 有一个 create 事件。当 beta2 发布时我会更新我的常见问题解答。请参阅http://jquerymobile.com/blog/ 2011/07/22/jquery-mobile-team-update-week-of-july-18th/

更新常见问题解答：http:// /jquerymobiledictionary.pl/faq.html

的任何部分一起工作的方法

正如 CaffeineFueled 提议的那样 - .page() 是使 JQM 与 HTML .page() 一个元素只能调用一次。在添加到页面的包装元素上调用它。它应该处理一切。

回复收藏 0 原文

公布 2024-10-06 15:40:11

当前选择的答案有点过时了。使用“刷新”而不是“页面”来设置动态添加的内容（列表或表单）的样式。

如果您将项目添加到列表视图，您将
需要调用refresh()方法
它可以更新样式并创建任何
添加的嵌套列表。为了
例如，$('ul').listview('refresh');

例如，通过 jQuery Mobile 文档，1.0.4a

回复收藏 0 原文

段念尘 2024-10-06 15:40:11

这在未记录的内部结构中很混乱，但以下内容对我有用：

$("#some-div").load("/html/fragment/", 
                    function() { 
                      $(this).find("input").customTextInput();  
                    });

按钮、复选框等有等效的方法

。看看 http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1 .js。

1.0Alpha2 更新：正如在研究库的内部结构时所预料的那样，这在最新版本中不再起作用。将 customTextInput() 更改为 textinput() 可以稍微修复它，但由于某种原因主题并未完全应用。我们被警告...

This is messing around in undocumented internals, but the following is working for me:

$("#some-div").load("/html/fragment/", 
                    function() { 
                      $(this).find("input").customTextInput();  
                    });

There are equivalent methods for buttons, checkboxes etc.

Have a look at the _enchanceControls [sic] method in http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.js.

Update for 1.0Alpha2: As can be expected when playing around with the internals of a library, this no longer works in the latest version. Changing customTextInput() to textinput() fixes it a bit, but the theme isn't fully applied for some reason. We were warned...

回复收藏 0 原文

落叶缤纷 2024-10-06 15:40:11

AJAX 调用完成并插入表单元素后，请尝试调用：

$("#the-page-id").page();

我相信 jquery-mobile 团队将来会在各种 UI 元素上添加 .refresh() 方法来解决此问题。

After your AJAX call finishes and you insert the form elements try calling:

$("#the-page-id").page();

I believe the jquery-mobile team will be adding a .refresh() method on the various UI elements to solve this issue in the future.

回复收藏 0 原文

奈何桥上唱咆哮 2024-10-06 15:40:11

是的，问题正如你所描述的那样。文件准备好后，就会启动“动员”。但由于离线数据库查询是异步的，它会在 document.ready 被触发后结束。因此 DOM 会在此过程中稍后更新，并且不会将额外的 CSS 添加到所有 div 和列表项中。

我认为您必须更改移动 js 的源，使其不在文档就绪时运行，而是在您告诉它运行时运行。然后您必须在数据库回调中调用该函数。

看来这是目前唯一的选择。

以前我使用 jqtouch，现在使用 sencha。我没怎么玩过 jQuery mobile。

或者 - 您可以在从数据库中查询 HTML 并使用必要的 CSS 样式后写出 HTML。如果您使用 Firefox 的 Firebug 插件，您可以看到移动运行时应用了哪些样式/类。您可以使用这些约定编写 HTML。不理想，但可以。

回复收藏 0 原文

残疾 2024-10-06 15:40:11

naugtur 是对的，你必须在添加到 dom 的任何元素上调用 .page() ，然后它就可以很好地工作：

var el = $('<input type="text"/>')
el.page();
$('#something').append(el);

naugtur is right, you have to call .page() on any element that you add to the dom, then it works out nicely:

var el = $('<input type="text"/>')
el.page();
$('#something').append(el);

回复收藏 0 原文

素染倾城色 2024-10-06 15:40:11

这对我有用（jquerymobile1.7.0）：

$('#formular').append('<div data-role="fieldcontain" class="ui-hide-label">' +
'<label for="name" class="ui-hidden-accessible">Name:</label>' +
'<input type="text" name="name" size="25" id="name" placeholder="Name"/>' +
'</div>');  
$('#name').textinput();

目前有所谓的插件函数用于所有类型的表单元素（例如滑块、文本输入等）来创建它们。

This worked for me (jquerymobile1.7.0):

$('#formular').append('<div data-role="fieldcontain" class="ui-hide-label">' +
'<label for="name" class="ui-hidden-accessible">Name:</label>' +
'<input type="text" name="name" size="25" id="name" placeholder="Name"/>' +
'</div>');  
$('#name').textinput();

There are currently so called plugin functions for all kind of form elements (e.g. slider, textinput etc.) to create them.

回复收藏 0 原文