草庐IT

jQuery Mobile 主题

runoob 2023-04-07 原文

jQuery Mobile 主题

jQuery Mobile 提供了 2 种不同的主题样式, 从 "a" 到 "b" - 每一种主题的按钮,工具条,内容块等等颜色都不一致,每个主题的视觉效果也不一样。

通过设置元素的data-theme属性可以自定义应用的外观:

<a href="#" class="ui-btn ui-btn-a|b">按钮</a>

描述 实例
a 页面为灰色背景黑色文字
头部与底部均为灰色背景黑色文字
按钮为灰色背景黑色文字
激活的按钮和链接为白色文本蓝色背景
input 输入框中 placeholder 属性值为浅灰色,value 值为黑色
尝试一下
b 页面为黑色背景白色文字
头部与底部均为黑色背景白色文字
按钮为白色文字木炭背景
激活的按钮和链接为白色文本蓝色背景
input 输入框中 placeholder 属性值为浅灰色,value 值为白色
尝试一下

按钮样式使用 class="ui-btn",使用 "ui-btn-a|b" 类设置按钮为灰色(默认)或黑色:

<a href="#" class="ui-btn ui-btn-a|b">按钮</a>

"a" 主题的样式用于大多数元素,子元素通常继承父元素的样式。

主题头部和底部

实例

<div data-role="header" data-theme="b"></div>
<div data-role="footer" data-theme="b"></div>

尝试一下 »

主题对话框的头部底部

实例

<div data-role="page" data-dialog="true" id="pagetwo">
  <div data-role="header" data-theme="b"></div>
  <div data-role="footer" data-theme="b"></div>
</div>

尝试一下 »

主题按钮

实例

<a href="#" class="ui-btn ui-btn-b">黑色按钮</a>

尝试一下 »

主题图标

实例

<a href="#" class="ui-btn ui-btn-b ui-icon-search ui-btn-icon-notext">Search</a>

尝试一下 »

主题弹窗

实例

<div data-role="popup" id="myPopup" data-theme="b">

尝试一下 »

头部和底部的主题按钮

实例

<div data-role="header">
  <a href="#" class="ui-btn ui-btn-b">主页</a>
  <h1>欢迎访问我的主页</h1>
  <a href="#" class="ui-btn">搜索</a>
</div>

<div data-role="footer">
  <a href="#" class="ui-btn ui-btn-b">在Facebook上关注我</a>
  <a href="#" class="ui-btn">在Twitter上关注我</a>
  <a href="#" class="ui-btn ui-btn-b">在Instagram上关注我</a>
</div>

尝试一下 »

主题导航栏

实例

<div data-role="footer" data-theme="b">
  <h1>文本头部</h1>
  <div data-role="navbar">
    <ul>
      <li><a href="#" data-icon="home" data-theme="a">Button 1</a></li>
      <li><a href="#" data-icon="arrow-r">Button 2</a></li>
      <li><a href="#" data-icon="arrow-r">Button 3</a></li>
      <li><a href="#" data-icon="search" data-theme="a">Button 4</a></li>
    </ul>
  </div>
</div>

尝试一下 »

主题面板

实例

<div data-role="panel" id="myPanel" data-theme="b">

尝试一下 »

主题可折叠按钮和内容

实例

<div data-role="collapsible" data-theme="b" data-content-theme="b">
  <h1>Click me - I'm collapsible!</h1>
  <p>I'm the expanded content.</p>
</div>

尝试一下 »

主题列表

实例

<ul data-role="listview" data-theme="b">
  <li><a href="#">List Item</a></li>
  <li><a href="#">List Item</a></li>
  <li data-theme="a"><a href="#">List Item</a></li>
  <li><a href="#">List Item</a></li>
</ul>

尝试一下 »

主题分割按钮

实例

<ul data-role="listview" data-split-theme="b">

尝试一下 »

主题可折叠列表

实例

<div data-role="collapsible" data-theme="b" data-content-theme="b">
  <ul data-role="listview">
    <li><a href="#">Agnes</a></li>
  </ul>
</div>

尝试一下 »

主题表单

实例

<label for="name">Full Name:</label>
<input type="text" name="text" id="name" data-theme="b">

<label for="colors">Choose Favorite Color:</label>
<select id="colors" name="colors" data-theme="b">
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
</select>

尝试一下 »

主题可折叠表单

实例

<fieldset data-role="collapsible" data-theme="b" data-content-theme="b">
<legend>Click me - I'm collapsible!</legend>

尝试一下 »

添加新主题

jQuery Mobile 可以在移动页面添加新主题。

通过修改 CSS 文件来添加或编辑新主题(如果你已经下载了 jQuery Mobile)。你只需要拷贝样式模块,然后重命令字母类名(c-z),并在样式中添加你喜欢的颜色和字体。

你也可以在 HTML 文档中添加主题的新样式, 工具条添加类: ui-bar-(a-z) ,文本内容添加类: ui-body-(a-z) ,页面添加类:ui-page-theme-(a-z) 。

实例

<style>
.ui-bar-f {
    color: red;
    background-color: yellow;
}

.ui-body-f {
    font-weight: bold;
    color: white;
    background-color: purple;
}

.ui-page-theme-f {
    font-weight: bold;
    background-color: green;
}
</style>

尝试一下 »

在之前的 jQuery Mobile 版本中, 使用 JavaScript 来为元素继承父主题样式。到了 1.4 版本后,框架更注重性能上的提升,已不再使用 JavaScript 来继承,而是使用纯 CSS。

jQuery Mobile 团队为此已经创建了一个工具,地址为 ThemeRoller。你可以使用该工具来升级旧的主题,使其兼容新的版本。

有关jQuery Mobile 主题的更多相关文章

  1. ruby-on-rails - 在暂存环境中覆盖 ActionMailer 主题 - 2

    我希望从我们的登台服务器发送的所有电子邮件的主题中都带有“[STAGING]”字样。在Rails3.2中使用ActionMailer是否有一种优雅的方式来做到这一点? 最佳答案 这是我使用ActionMailerInterceptor找到的一个优雅的解决方案基于anexistinganswer.#config/initializers/change_staging_email_subject.rbifRails.env.staging?classChangeStagingEmailSubjectdefself.delivering_

  2. ruby - 如何检查我的主题是否引发异常? - 2

    我目前正在subject中创建一个对象,需要测试这是否会引发异常。以下代码说明了我要实现的目标:describeMyClassdodescribe'#initialize'dosubject{MyClass.new}it{is_expected.not_toraise_error(Some::Error)}endend我有一种感觉,我正在以错误的方式处理这件事。将subject设置为新对象而不创建对象两次的首选方法是什么?更新我的问题有两个。首先,这种语法不起作用:it{is_expected.not_toraise_error}但是,在itblock中使用expect确实如此(正如J

  3. kafka如何动态消费新增topic主题 - 2

    一、解决痛点使用spring-kafka客户端,每次新增topic主题,都需要硬编码客户端并重新发布服务,操作麻烦耗时长。kafkaListener虽可以支持通配符消费topic,缺点是并发数需要手动改并且重启服务。对于业务逻辑相似场景,创建新主题动态监听可以用kafka-batch-starter组件二、组件能力1、新增topic名称为:auto.topic1(由于配置spring.kafka.consumer.prefix为auto,因此只有auto前缀的topic,才会被组件动态监听。)2、应用输出日志,监听到新增auto.topic1,并初始化客户端(主题刷新间隔为10s)3、发新的消

  4. ruby - 使用适用于 Ruby 的 AWS 开发工具包发布到 SNS 主题时指定区域 - 2

    我正在使用适用于Ruby的AWS开发工具包向Rails3应用程序发布消息和AWSSNS主题,如下所示:sns=AWS::SNS.newtopic=sns.topics['arn:aws:sns:eu-west-1:55555555555:my_topic']topic.publish("MESSAGE",:subject=>"SUBJECT")当我发布到“us-east-1”中的主题时,它按预期工作,但发布到“eu-west-1”区域中的主题时不起作用:AWS::SNS::Errors::InvalidParameter-Invalidparameter:TopicArn:使用AWSS

  5. ruby-on-rails - 如何处理 UTF-8 电子邮件 header (如主题 :) using Ruby? - 2

    我是一个电子邮件n00b,但我正在开发一个发送带有Unicode字符的HTML电子邮件的应用程序(正如我friend所说的“享受编码hell”)。Subject:header来自用户输入,因此可能包含Unicode字符。一些邮件客户端(如GMail和Outlook2007)对此没有问题,但从我的阅读来看,执行此操作的正确方法似乎是使用MIMEEncoded-Wordencoding对于标题。我找不到Ruby库来执行此操作。有吗?此外,是否有要添加的header告诉邮件客户端在显示消息时使用UTF-8?我们要发送多部分电子邮件,所以我们的Content-Type是multipart/mi

  6. ruby-on-rails - 如何更改 "Devise: password reset instruction email' 的主题” - 2

    我只是无法更改“密码重置说明”电子邮件的主题。我更改了Mailer中的notifer.rb以覆盖Devise默认电子邮件主题。但它不起作用。在我的应用程序中,Devise.yml文件中有默认的电子邮件主题。但我想通过从数据库中提取数据来动态更改它。 最佳答案 可以在intilizer目录下的devise.en.yml文件中修改并为任何邮件设置您自己的主题mailer:confirmation_instructions:subject:'Confirmationinstructions'reset_password_instructi

  7. ruby - 在现有的 Jekyll 安装中切换主题 - 2

    Jekyll有很多主题,例如https://github.com/jekyll/jekyll/wiki/Themes.在现有的Jekyll安装中切换到新主题的最简单方法是什么? 最佳答案 这是我为更改现有Jekyll安装的主题所做的。调整这些说明以满足您的需要。拉新主题我们创建一个新的孤立分支newtheme并确保它是空的。gitcheckout--orphannewthemegitrm-rf.gitclean-dfx然后我们通过将主题添加为上游远程来将主题文件拉入其中。在此示例中,我拉取了JohnOtander的Pixyll主题的

  8. javascript - 行为主题 : next is not a function - 2

    我正在尝试在同级组件之间共享数据并通过共享服务执行此操作。当第一个组件加载时,它从我的API中检索服务器列表,并用所有检索到的服务器填充一个选择框。现在我想在用户选择新服务器时通知我的其他组件,以便我可以显示它的详细信息。这是我的服务:@Injectable()exportclassDashboardService{servers:Server[]=[];selectedServer=newBehaviorSubject(null);setServers(servers:Server[]){this.servers=servers;}}带有选择框的组件:@Component({sele

  9. javascript - 有什么简单的方法可以使用 JQuery Mobile 动态切换主题吗? - 2

    如问题所述,有什么方法可以让我在JQueryMobile中动态切换主题。我今天刚刚升级到beta1并且认为如果用户可以根据需要选择自己的主题会很酷。我没有在文档中看到任何具体执行此操作的内容,但肯定有一些方法可以解决这个问题,如果有人能为我指出正确的方向的话。 最佳答案 不太确定,但在我看来它像jQueryMobile'sdemo里面有一个小主题切换器。看起来这是调用它的代码:$("#someElement").bind("vclick",function(){$.themeswitcher();});您可以找到主题切换器的代码ri

  10. javascript - 从 Twitter REST API 的实体(主题标签、链接、提及...)创建指向推文文本的链接 - 2

    我在一个网站中插入推文,但我在获取实体(主题标签、提及、链接...)时遇到了一点问题RESTApi为我们提供有关实体的信息,就像我们在这里看到的一样https://dev.twitter.com/docs/tweet-entities但是,api在字符串文本(tweet)中给我这个实体的索引,但是,如果我在这个tweet中插入一个链接,另一个链接将会改变,并且从所有案例中进行验证将花费很多时间。有人知道一些方法来做到这一点,一个简单的方法,或者jQuery或API中的某个插件可以为我们做到这一点?(附言:抱歉有些错误,我是一名巴西开发人员,我的英语不是很好:D)

随机推荐