当前位置：文江博客话题详情

jquery mobile，仅使用控件？

发布于 2024-10-14 03:18:12 字数 173 浏览 1 评论 0原文

我对使用 jquery 移动控件感兴趣，但我可以使用它的唯一方法是使用“page”标签。

使用页面会自动注入 html 以及链接等，并通过 ajax 作为后退按钮。我对各种汽车用户界面不感兴趣。

我怎样才能只使用 jquery 移动控件（按钮、链接、列表等）而不制作整个页面 jquery 移动页面？

原文

分享到QQ

分享到微博

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

发布评论

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

滥情空心 2024-10-21 03:18:12

来自 jQuery Mobile Alpha 2 发行说明：

全局配置
jQuery Mobile 现在有多种方法覆盖初始配置< /a> 框架的许多方面（例如禁用 Ajax 样式的链接或表单）。这可以让您塑造 jQuery Mobile 以在更专业且不适合框架的完整设计方法的情况下工作（例如，使您能够仅使用几个小部件而不是整个框架） .

因此，您可以通过禁用不需要的位来使用 jQuery Mobile 点菜。例如，要禁用 ajaxical 导航和表单：

$(document).live("mobileinit", function() {
    $.mobile.ajaxLinksEnabled = false;
    $.mobile.ajaxFormsEnabled = false;
});

NB，正如链接的文档页面所述，您需要在之前执行自定义 JavaScript（如上面的代码片段） jQuery Mobile 已加载，因此导入您的脚本如下：

<script src="jquery.js"></script>
<script src="custom-scripting.js"></script>
<script src="jquery-mobile.js"></script>

From the jQuery Mobile Alpha 2 release notes:

Global Configuration
jQuery Mobile now has a number of ways to override the initial configuration of a number of aspects of the framework (such as disabled Ajax-style links or forms). This can allow you to sculpt jQuery Mobile to work in situations that are more-specialized and don’t fit the complete design methodology of the framework (giving you the ability to only use a couple widgets rather than the framework as whole, for example).

So, you can work with jQuery Mobile à la carte by disabling the bits you don't want. For example, to disabled the ajaxical navigation and forms:

$(document).live("mobileinit", function() {
    $.mobile.ajaxLinksEnabled = false;
    $.mobile.ajaxFormsEnabled = false;
});

N.B., as the linked docs page says, you'll need to execute your customizing JavaScript (like the snippet above) before the jQuery Mobile is loaded, so import your scripts something like this:

<script src="jquery.js"></script>
<script src="custom-scripting.js"></script>
<script src="jquery-mobile.js"></script>

回复收藏 0 原文

漫漫岁月 2024-10-21 03:18:12

我也想做这个。然而，我想向已经使用 jQuery UI 的页面添加控件，因此需要一些额外的步骤。

还必须禁用 ajax 处理才能让我的常规（非 jqm）按钮提交/正常工作

$(document).live("mobileinit", function() {
    $.extend($.mobile, {
        自动初始化页面：假，
        linkBindingEnabled：假，
        ajax启用：假
    });
});

JQM 和 jQuery UI 都有一个名为“button”的小部件，所以一个会覆盖另一个，所以我改变了JQM 小部件名称为 mbutton 以停止碰撞
```
$.widget("mobile.mbutton", $.mobile.widget, {
```

在 JQM 的初始化代码中，停止在渲染期间隐藏内容，因为我们设置了 autoInitializePage = false，因此我们希望避免显示页面的 5 秒超时

if ($.mobile.autoInitializePage) {
    // 将移动、初始加载“渲染”类添加到 docEl
    $html.addClass("ui-mobile ui-mobile-rendering");
    // 这是一个后备。如果出现任何问题（JS 错误等），或者事件没有触发，
    // 这可确保渲染类在 5 秒后被删除，因此内容可见且可访问
    setTimeout(hideRenderingClass, 5000);
}

JQM 和 JQUI 都有ui-icon css 发生冲突，因此我在 JQM css 的 2 个位置添加了一个额外的“.ui-mobile”选择器：

/* 图标
-------------------------------------------------- --*/
.ui-移动.ui-图标，
.ui-mobile .ui-icon-searchfield:after {

...

/* Alt 图标颜色
-------------------------------------------------- --*/
.ui-mobile .ui-icon-alt {

按照您的方式简单地初始化控件任何 jQuery UI 控件，即：
```
$(".my-slider").slider();
```

免责声明：到目前为止，我只使用滑块作为切换开关，因此可能会有更多的 css 和 js 需要修补，我需要进行一些自定义 CSS 调整以将滑块重新定位在其轨道中。

其他人也想做同样的事。

I too wanted to do this. However I was wanting to add controls to a page that was already using jQuery UI so there were some extra steps.

Also had to disable ajax handling to get my regular (non jqm) buttons submitting/working properly

$(document).live("mobileinit", function() {
    $.extend($.mobile, {
        autoInitializePage: false,
        linkBindingEnabled: false,
        ajaxEnabled: false
    });
});

JQM and jQuery UI both have a widget named 'button' so one overwrites the other so I changed the JQM widget name to mbutton to stop the collision
```
$.widget("mobile.mbutton", $.mobile.widget, {
```

In the init code for JQM, stop the hiding of content during render as we have set autoInitializePage = false so we want to avoid the 5 sec timeout to show the page

if ($.mobile.autoInitializePage) {
    // Add mobile, initial load "rendering" classes to docEl
    $html.addClass("ui-mobile ui-mobile-rendering");
    // This is a fallback. If anything goes wrong (JS errors, etc), or events don't fire,
    // this ensures the rendering class is removed after 5 seconds, so content is visible and accessible
    setTimeout(hideRenderingClass, 5000);
}

JQM and JQUI both have ui-icon css that collides, so I added an extra '.ui-mobile' selector into the JQM css in 2 locations:

/* Icons
----------------------------------------------------*/
.ui-mobile .ui-icon,
.ui-mobile .ui-icon-searchfield:after {

...

/* Alt icon color
----------------------------------------------------*/
.ui-mobile .ui-icon-alt {

Simply initialize the controls as you would any jQuery UI controls ie:
```
$(".my-slider").slider();
```

Disclaimer: I have only used the slider as a toggle switch so far so there will probably be more css and js to patch, and I needed to do a few custom css tweaks to re-position the slider in its track.

HTH anyone else looking to do the same.

回复收藏 0 原文