草庐IT

关于 css:Jquery Mobile: Custom Header with/ background image navbar

codeneng 2023-03-28 原文

Jquery Mobile: Custom Header w/ background image + navbar

一整天都在苦苦挣扎，我觉得如果有人对这个问题有更多的了解，可以为我省去很多悲伤……

我使用 Jquery Mobile 创建了一个网站，我想在我的所有页面上使用自定义图像/徽标而不是标准标题。让它稍微复杂一点的是，我还在自定义标题/图像下方使用导航栏进行导航。请参阅下图了解我在说什么：

http://postimage.org/image/ywh1wajjr/

所以这是我遇到问题的地方......自定义图像/标题的缩放让我做噩梦。在某个分辨率下(例如 Dreamweaver 中的 480x800 预设)，一切看起来都很好。但是，当分辨率增加时，我开始遇到问题：

首先，图像高度不断变大，使得整体标题(图像和导航栏)比我想要的大很多。其次，如果您使用的分辨率非常高，超过了图像的总宽度，则图像会停在其最大宽度处，而导航栏(和页面的其余部分)会继续扩展至 100% 的宽度页面 - 这显然看起来很奇怪。

我正在使用以下文件/设置：

jquery-1.8.2.min.js、jquery.mobile.structure-1.2.0.css、jquery.mobile.theme-1.2.0.css、jquery-1.8.2.min.js、jquery.mobile -1.2.0.js 和 Dreamweaver cs6.

我已经尝试了对上述文件中的 CSS 以及页面中的 html 的一百万种不同的变体，但没有成功。我感觉它会涉及媒体查询，有 3 或 4 个不同版本的图像，但尽管我尽了最大努力，但我还没有找到最好的方法。

我的理想方案 - 链接的背景图像导航栏组合(或类似的东西)在所有流行的移动设备上都可以在纵向和横向模式下运行良好。

任何建议将不胜感激...

  • 您能否链接徽标的实际图像？
  • 当然。应该在原帖中做到这一点：
  • imageshack.us/g/521/manutdheaderlogotablet.jpg 该链接中徽标的 3 种不同尺寸/变体。需要帮助请叫我。谢谢。
  • 你有没有机会把标志分开？例如只使用徽章：albionroad.com/images/stories/logos/，然后添加背景颜色和文本

这不是 100%，但希望它能让您了解 CSS 可以做什么，只使用徽标图像而不是背景：

然后用CSS制作顶层和底层

示例：

  • http://jsfiddle.net/PMhXe/

CSS:

1
2
3
4
5
6
7
8
9
10
.bgimg {
    background-image: url(http://dummyimage.com/5x5/a80c10/ffffff.png), url(http://dummyimage.com/5x5/a80c10/ffffff.png);
    background-repeat:repeat-x;
    background-position:100% 120px, 100% -120px;
    background-size:100% 180px;
}
.logo-font {
    font-size:x-large;
    font-weight:bold;
}

HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
        <img src="http://www.albionroad.com/images/stories/logos/manchester-united-logo-1.png" alt="logo" /><br />MANCHESTER UNITED<br /><>
       
           
<ul>

               
<li>
One
</li>

               
<li>
Two
</li>

               
<li>
Three
</li>

               
<li>
Four
</li>

               
<li>
Five
</li>

           
</ul>

        <!-- /navbar -->
    <!-- /header -->
?

您的 jquery 移动应用程序标题有这样的内容，您的徽标图像将显示在哪里：

1
2
3
  <h1 class="manU-logo ui-title" role="heading" aria-level="1">
   
      <img src="css/themes/default/images/logo_header.png">

只需应用这个 css:

1
2
3
.ui-mobile .header-manU a img {
  width: 100%;
 }

希望对你有帮助

backgroundJqueryspanclassnbspcssheaderjqueryjquery-mobilenavbar

有关关于 css:Jquery Mobile: Custom Header with/ background image navbar的更多相关文章

  1. ruby - capybara field.has_css?匹配器 - 2

    我在MiniTest::Spec和Capybara中使用以下规范:find_field('Email').must_have_css('[autofocus]')检查名为“电子邮件”的字段是否具有autofocus属性。doc说如下:has_css?(path,options={})ChecksifagivenCSSselectorisonthepageorcurrentnode.据我了解，字段“Email”是一个节点，因此调用must_have_css绝对有效!我做错了什么？ 最佳答案 通过JonasNicklas得到了答案:No

  2. css - 用 watir 检查标签类？ - 2

    我有一个div，它根据表单是否正确提交而改变。我想知道是否可以检查类的特定元素？开始元素看起来像这样。如果输入不正确，添加错误类。 最佳答案 试试这个:browser.div(:id=>"myerrortest").class_name更多信息:http://watir.github.com/watir-webdriver/doc/Watir/HTMLElement.html#class_name-instance_method另一种选择是只查看具有您期望的类的div是否存在browser.div((:id=>"myerrortes

  3. ruby-on-rails - 关于 Ruby 的一般问题 - 2

    我在我的rails应用程序中安装了来自github.com的acts_as_versioned插件，但有一段代码我不完全理解，我希望有人能帮我解决这个问题class_eval我知道block内的方法(或任何它是什么)被定义为类内的实例方法，但我在插件的任何地方都找不到定义为常量的CLASS_METHODS，而且我也不确定是什么here，并且有问题的代码从lib/acts_as_versioned.rb的第199行开始。如果有人愿意告诉我这里的内幕，我将不胜感激。谢谢-C 最佳答案 这是一个异端。http://en.wikipedia

  4. ruby-on-rails - Assets 管道损坏 : Not compiling on the fly css and js files - 2

    我开始了一个新的Rails3.2.5项目，Assets管道不再工作了。CSS和Javascript文件不再编译。这是尝试生成Assets时日志的输出:StartedGET"/assets/application.css?body=1"for127.0.0.1at2012-06-1623:59:11-0700Servedasset/application.css-200OK(0ms)[2012-06-1623:59:11]ERRORNoMethodError:undefinedmethod`each'fornil:NilClass/Users/greg/.rbenv/versions/1

  5. ruby-on-rails - Rails - 理解 application.js 和 application.css - 2

    rails新手。只是想了解\assests目录中的这两个文件。例如，application.js文件有如下行://=requirejquery//=requirejquery_ujs//=require_tree.我理解require_tree。只是将所有JS文件添加到当前目录中。根据上下文，我可以看出requirejquery添加了jQuery库。但是它从哪里得到这些jQuery库呢？我没有在我的Assets文件夹中看到任何jquery.js文件——或者直接在我的整个应用程序中没有看到任何jquery.js文件？同样，我正在按照一些说明安装TwitterBootstrap(http:

  6. css - Rails 4.1 和 Bootstrap 3 字形图标不工作 - 2

    我正在尝试消除使用Bootstrap3的Rails4元素中的glyphicon错误。我没有使用任何Bootstrapgem将其添加到Assets管道中。我手动将bootstrap.css和bootstrap.js添加到各自的app/assets目录下，分别添加到application.css和application.js什么的我现在在网络浏览器的控制台中看到以下内容:GEThttp://localhost:3000/fonts/glyphicons-halflings-regular.woff404(NotFound)localhost/:1GEThttp://localhost:30

  7. ruby - 我怎样才能更好地了解/了解更多关于 Ruby 的知识？ - 2

    按照目前的情况，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visitthehelpcenter指导。关闭9年前。我最近开始学习Ruby，这是我的第一门编程语言。我对语法感到满意，并且我已经完成了许多只教授相同基础知识的教程。我已经写了一些小程序(包括我自己的数组排序方法，在有人告诉我谷歌“冒泡排序”之前我认为它非常聪明)，但我觉得我需要尝试更大更难的东西来理解更多关于Ruby.关于如何执行此操作的任何想法？

  8. ruby - 关于 Ruby 中 Dir[] 和 File.join() 的混淆 - 2

    我在Ruby中遇到了一个关于Dir[]和File.join()的简单程序，blobs_dir='/path/to/dir'Dir[File.join(blobs_dir,"**","*")].eachdo|file|FileUtils.rm_rf(file)ifFile.symlink?(file)我有两个困惑:首先，File.join(@blobs_dir,"**","*")中的第二个和第三个参数是什么意思？其次，Dir[]在Ruby中有什么用？我只知道它等价于Dir.glob()，但是，我对Dir.glob()确实不是很清楚。 最佳答案

  9. css - rails 萨斯 : variables are not passed with @import - 2

    我有一个使用twitterbootstrap和sass的Rails元素。scss文件结构化到文件夹中，所以我有更好的概述。现在我想为包含我的颜色等的全局变量定义一个文件，并将这些值传递给其他文件，这样我就有更少的冗余代码。虽然所有代码都已正确导入和应用，变量不起作用。这是当前的设置:样式表/application.css.scss/**=require_self*=require_tree*//*stylesheets/||–base/||–_reset.scss#Reset/normalize||–_typography.scss#Typographyrules||–componen

  10. css - Jekyll 和自定义 CSS - 2

    有没有一种方法可以在jekyll站点中包含自定义css标签，同时将markdown用于入口文件？例如，当我想突出显示某个段落时？ 最佳答案 Markdown和YAMLFrontMatter都内置了这个。但你可以自己制作。比如说，您有foo.css想要包含在某些帖子中。在_posts/2013-02-03-higligting-foo.markdown中:---css:footitle:"DrupalImagecachesecurityvulnarabilitywithDDOSattackexplained"tags:[drupal,

随机推荐