1

目前我正在为 JQuery Mobile 构建我的第一个插件。我已经设法使基本代码工作，但是我很难理解主题是如何应用的。在花了 2 个小时的谷歌搜索无济于事之后，我有点不知所措。

本质上：如何构建我的插件以从 JQM 的主题中提取样式？是否有关于主题在哪里/如何在我可以使用的机械层面上应用的参考？我正在构建的插件是一个有点定制的进度条显示，我希望进度条的颜色和边框使用主题。

4

1 回答 1

0

jQuery Mobile 主题基于一组与视觉特征相关的标准类。例如，.ui-btn应将类添加到按钮，并将.ui-icon类添加到图标以遵循 jQuery Mobile 主题约定。另一个例子是如何将.ui-icon-shadow类添加到具有类的元素中，.ui-icon它将被赋予阴影。

这是一个示例 jQuery Mobile 按钮：

<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-left ui-btn ui-shadow ui-btn-corner-all ui-btn-icon-notext ui-btn-up-f" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="f" title="Home">
    <span class="ui-btn-inner ui-btn-corner-all">
        <span class="ui-btn-text">Home</span>
        <span class="ui-icon ui-icon-home ui-icon-shadow">&nbsp;</span>
    </span>
</a>

因此，您可以手动将这些类添加到 HTML 标记中，也可以使用 jQuery Mobile 公开的函数创建小部件：

$('<ul data-role="listview"><li>FOOBAR</li></ul>').listview();

来源：http: //jquerymobile.com/demos/1.1.0/docs/lists/lists-methods.html

所有小部件都有类似listview()的功能，其中大多数都可以接受选项，因此您可以设置小部件是否获取框阴影或其他任何内容。

更新

要让您的小部件继承最接近的主题，您可以执行以下操作：

//assuming `this` is the widget element
var theme = $(this).closest('[data-theme]').attr('data-theme') || 'a';
于 2012-06-19T22:31:46.977 回答