Question

我在学习Jquery Mobile框架的2天内尝试做一个非常简单的任务!!!

如何在JQuery页面的标题栏中添加自定义图标和居中标题..？有很多帖子，都是指“按钮”图标，这不是我的目标。

我只想在标题的左侧设置一个自定义图像...我认为99％的任何Web应用程序。

为什么要把这些基本的东西放到这么难？

我尝试了以下官方文档和帖子：

HTML

<html><head>
<title>JQM</title>    
<meta name="viewport" content="width=device-width, user-scalable=no , initial-scale=1"/>    
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8"/>    
<link rel="icon" type="image/icon" href="/images/favicon.ico"/>    
<link href="/css/steel/jquery.mobile-1.4.2.min.css" rel="stylesheet" type="text/css"/>                
<link href="/css/site-mob.css" rel="stylesheet" type="text/css"/>
<script src="/js/jquery-1.10.2.min.js" type="text/javascript"> </script>
<script src="/js/jquery.mobile-1.4.2.min.js" type="text/javascript"> </script></head>

<body><section data-role="page" id="main-page">
<header data-role="header" id="top" data-icon="myimage"><h1>Page Title</h1></header>
<div id="content" data-role="content"/>
<div id="footer" data-role="footer" data-theme="a"/></section></body></html>

CSS （/css/site-mob.css）

.ui-icon-myimage {
  background: url(/images/myimage.png) 50% 50% no-repeat;
  background-size: 38px 38px;
}

但它不起作用。没有显示图像。 ....我当然错过了一些东西..

感谢您的帮助

Answer 1

要在标题中放置图像/徽标，您不需要使用自定义图标，只需将img标记放在绝对定位的容器中：

<header data-role="header" id="top" data-icon="myimage">
     <span style="position: absolute; left: 0; top: 0;"><img src="http://lorempixel.com/38/38/business/2/" alt=""  /></span>
    <h1>Page Title</h1>
</header>

在此示例中，我使用SPAN绝对定位到屏幕的左上角。您可以调整LEFT和TOP或边距以根据需要进行放置。

要在jQM 1.4中创建自定义图标，请使用：after伪标记：

.ui-icon-myimage:after {
  background: url(http://lorempixel.com/38/38/business/1/) 50% 50% no-repeat;
  background-size: 38px 38px;
  background-color: transparent;
  border-radius: 0;
}

将背景设置为透明，将border-radius设置为0将删除舍入和灰色背景光盘。

要显示内联图标（而非按钮），您可以执行以下操作：

<span class="ui-icon-myimage ui-btn-icon-notext inlineIcon"></span>

然后为inLineIcon添加CSS：

.inlineIcon {
    display: inline-block;
    position: relative;
    vertical-align: middle;
    margin-right: 6px;
}

标题和内联自定义图标
中的图像的
DEMO

自定义图像作为标题栏中的图标

1 个答案: