草庐IT

javascript - 修复了 jquery 移动面板的页脚

coder 2023-08-12 原文

我正在尝试在 jquery Mobile 的面板上放置一个固定的页脚。我尝试了几件事，但似乎没有任何效果。 尝试了一个带有数据 Angular 色页脚的 div，但它移到了主页。 然后我创建了另一个页脚 div 并给它一些 css 样式，但这会将页脚推到面板的底部而不是窗口的底部。 我能想到的一种解决方案是滚动事件，它重新计算滚动时页脚的高度，但这会给页脚带来非常不稳定的外观。

Here是一个带有两个页脚的示例 jsfiddle。

HTML:

<div data-role="page" id="myPage1">
<div data-role="header">
     <h1>Page 1 header</h1>
       <a href="#mypanel" class="ui-btn-right" data-icon="gear">Open Panel</a>
</div>
<div data-role="content">
     <h1>Page 1</h1>
     Hi This is the content
</div>
<div data-role="footer">
     <h1>Page 1 Footer</h1>

</div>
<div id="mypanel" data-role="panel" data-position="right" data-display="push" 
data-theme="d" data-swipe-close="true">
    <div id="panelfooter" data-theme="d" data-role="footer"
 data-position="fixed">Footer</div>
    <div id="panelFooter">Footers</div>
    <div data-role="content">hello I am a panel
        <ul>
            <li>Hi</li>
            <li>Hi</li>
            <li>Hi</li>
            <li>Hi</li>
            <li>Hi</li>
            <li>Hi</li>
            <li>Hi</li>
            <li>Hi</li>
            <li>Hi</li>
            <li>Hi</li>
            <li>Hi</li>
            <li>Hi</li>
        </ul>
    </div>
  </div>
</div>

CSS:

#panelFooter {
  position:fixed;
  left:0px;
  bottom:0px;
  height:30px;
  width:100%;
  background:#999;
}

最佳答案

再试一次:

#mypanelfooter {
    position:absolute;
    left:0px;
    bottom:3px;
    height:auto;
    width:90%;
  padding:5%;
  border:none;
  background-color:blue;
}
<div data-role="page" id="myPage1">
    <div data-role="header">
        <h1>Page 1 header</h1>
        <a href="#mypanel" class="ui-btn-right" data-icon="gear">Open Panel</a>
    </div>
   
    <div data-role="content">
    <h1>Page 1</h1>
        Hi This is the content 
    </div>
    <div data-role="footer">

        <h1>Page 1 Footer</h1>
    </div>
    <div id="mypanel" data-role="panel"  data-position="right" data-display="push" data-theme="d" data-swipe-close="true">
        <div id="mypanelfooter">
            Footer
        </div>
        <div data-role="content"> 
        hello I am a panel
        <ul> 
            <li>Hi</li><li>Hi</li>  
            <li>Hi</li>  <li>Hi</li>  <li>Hi</li>  <li>Hi</li>  <li>Hi</li>
            <li>Hi</li><li>Hi</li><li>Hi</li><li>Hi</li><li>Hi</li><li>Hi</li><li>Hi</li><li>Hi</li><li>Hi</li><li>Hi</li>  
            <li>Hi</li>
        </ul> 
        </div>
    </div>
    
</div>

如果您在面板中的内容不是很大，它可以工作...

关于javascript - 修复了 jquery 移动面板的页脚，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18813685/

javascriptjquerygtlt34htmlcssjquery-mobile

有关javascript - 修复了 jquery 移动面板的页脚的更多相关文章

  1. ruby - 多次弹出/移动 ruby​​ 数组 - 2

    我的代码目前看起来像这样numbers=[1,2,3,4,5]defpop_threepop=[]3.times{pop有没有办法在一行中完成pop_three方法中的内容？我基本上想做类似numbers.slice(0,3)的事情，但要删除切片中的数组项。嗯...嗯，我想我刚刚意识到我可以试试slice! 最佳答案 是numbers.pop(3)或者numbers.shift(3)如果你想要另一边。 关于ruby-多次弹出/移动ruby​​数组，我们在StackOverflow上找到一

  2. ruby-on-rails - 如何重命名或移动 Rails 的 README_FOR_APP - 2

    当我在我的Rails应用程序根目录中运行rakedoc:app时，API文档是使用/doc/README_FOR_APP作为主页生成的。我想向该文件添加.rdoc扩展名，以便它在GitHub上正确呈现。更好的是，我想将它移动到应用程序根目录(/README.rdoc)。有没有办法通过修改包含的rake/rdoctask任务在我的Rakefile中执行此操作？是否有某个地方可以查找可以修改的主页文件的名称？还是我必须编写一个新的Rake任务？额外的问题:Rails应用程序的两个单独文件/README和/doc/README_FOR_APP背后的逻辑是什么？为什么不只有一个？

  3. jquery - 我的 jquery AJAX POST 请求无需发送 Authenticity Token (Rails) - 2

    rails中是否有任何规定允许站点的所有AJAXPOST请求在没有authenticity_token的情况下通过？我有一个调用Controller方法的JqueryPOSTajax调用，但我没有在其中放置任何真实性代码，但调用成功。我的ApplicationController确实有'request_forgery_protection'并且我已经改变了config.action_controller.consider_all_requests_local在我的environments/development.rb中为false我还搜索了我的代码以确保我没有重载ajaxSend来发送

  4. ruby-on-rails - rbenv:从 RVM 移动到 rbenv 后，在 Jenkins 执行 shell 中找不到命令 - 2

    我从Ubuntu服务器上的RVM转移到rbenv。当我使用RVM时，使用bundle没有问题。转移到rbenv后，我在Jenkins的执行shell中收到“找不到命令”错误。我内爆并删除了RVM，并从~/.bashrc'中删除了所有与RVM相关的行。使用后我仍然收到此错误:rvmimploderm~/.rvm-rfrm~/.rvmrcgeminstallbundlerecho'exportPATH="$HOME/.rbenv/bin:$PATH"'>>~/.bashrcecho'eval"$(rbenvinit-)"'>>~/.bashrc.~/.bashrcrbenvversions

  5. jquery - 如何将 AJAX 变量从 jQuery 传递到他们的 Controller ？ - 2

    我有一个电子邮件表格。但是我正在制作一个测试电子邮件表单，用户可以在其中添加一个唯一的电子邮件，并让电子邮件测试将其发送到该特定电子邮件。为了简单起见，我决定让测试电子邮件通过ajax执行，并将整个内容粘贴到另一个电子邮件表单中。我不知道如何将变量从我的HAML发送到我的Controllernew.html.haml-form_tagadmin_email_blast_pathdoSubject%br=text_field_tag'subject',:class=>"mass_email_subject"%brBody%br=text_area_tag'message','',:nam

  6. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  7. ruby - 如何修复 RVM gem "[ missing bin/ruby ]" - 2

    执行rvmlist后，我得到以下输出:rvmrubiesgems[missingbin/ruby]=*ruby-2.0.0-p645[x86_64]ruby-2.1.6[x86_64]ruby-2.2.1[x86_64]gems[missingbin/ruby]是什么意思？gems是某种系统gemset吗？它不是我创建的，我不知道我是否可以或应该删除它。 最佳答案 在我跑完之后:rvmfix-permissions然后我能够卸载具有[缺少bin/ruby]的版本。 关于ruby-如何修复

  8. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

  9. Unity Shader 学习笔记（5）Shader变体、Shader属性定义技巧、自定义材质面板 - 2

    写在之前Shader变体、Shader属性定义技巧、自定义材质面板，这三个知识点任何一个单拿出来都是一套知识体系，不能一概而论，本文章目的在于将学习和实际工作中遇见的问题进行总结，类似于网络笔记之用，方便后续回顾查看，如有以偏概全、不祥不尽之处，还望海涵。1、Shader变体先看一段代码......Properties{ [KeywordEnum(on,off)]USL_USE_COL("IsUseColorMixTex?",int)=0 [Toggle(IS_RED_ON)]_IsRed("IsRed?",int)=0}......//中间省略，后续会有完整代码 #pragmamulti_c

  10. jquery - 如何在 rails 3.1 上安装 jQuery - 2

    我以为它已经安装了，但在我的gemfile中有gem"jquery-rails"但是在我的asset/javascripts文件夹中accounts.js.coffeeapplication.js都被注释掉了这是我的虚拟railsapplication但是在源代码中没有jQuery并且删除链接不起作用......任何想法都丢失了 最佳答案 看看thisRailscast.您可能需要检查application.js文件并确保它包含以下语句。//=requirejquery//=requirejquery_ujs

随机推荐