当启用面板向左滚动时,如何显示我的页面在左侧部分可见?

2024-02-20

IN this link http://view.jquerymobile.com/1.3.2/dist/demos/widgets/panels/,我可以发现有一个覆盖选项,我可以在其中隐藏或显示右侧或左侧的面板。但我想在面板中显示面板 90% 或 +。与 Facebook 移动版相同的示例,我们可以选择在右侧同时看到朋友列表的一小部分新闻源。

我在上面提供的链接中尝试了一些代码,其中的代码为

<div data-role="page">

<div data-role="panel" id="mypanel">
<!-- panel content goes here -->
</div><!-- /panel -->

 <!-- header -->
  <!-- content -->
  <!-- footer -->

  </div><!-- page -->

为此还必须实现什么才能使其达到当面板可见时只有 90% 的页面必须隐藏到页面一侧的状态。

Thanks


您需要重写许多类才能实现90%页面面板。

  1. 面板总宽度:

    .ui-panel {
      width: 90%;
    }
    
  2. 面板位置(左):

    等于面板的宽度。

    .ui-panel-position-left {
      left: -90% !important;
    }
    
  3. 打开面板(3D 变换):

    .ui-panel-open {
      -webkit-transform: translate3d(97%, 0, 0) !important;
      transform: translate3d(97%, 0, 0) !important;
    }
    
  4. 动画片:

    增加或减少速度(毫秒)。

    .ui-panel-animate {
      -webkit-transition: -webkit-transform 500ms ease;
      -moz-transition: -moz-transform 500ms ease;
      transition: transform 500ms ease;
    }
    
  5. 面板的覆盖层/包装:

    这包括面板的可点击区域data-dismissible设置为 true 或 false

    .ui-panel-content-wrap-position-left.ui-panel-content-wrap-open, .ui-panel-dismiss-position-left.ui-panel-dismiss-open {
      left: 90% !important;
      right: -90% !important;
    }
    

Demo http://jsfiddle.net/Palestinian/jLhvy/

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

当启用面板向左滚动时,如何显示我的页面在左侧部分可见? 的相关文章

  • 嵌套计算操作

    希望这很简单 我想使用CSS calc操作来执行两个计算 我想将宽度设置为等于 100 7 2 但是 如果我尝试在 CSS 计算操作中执行多个操作 则会失败 width calc 100 7 2 如何在一个 CSS 语句中执行多个计算操作
  • React JS 服务器端问题 - 找不到窗口

    你好 我正在尝试在我的reactJS项目中使用react rte 我有服务器端渲染 每次我想使用这个包时 我都会得到 return msie 6 9 b test window navigator userAgent toLowerCase
  • 如何禁用 body 元素的滚动?

    如何禁用正文滚动 body css overflow hidden 仅隐藏滚动条 但不会禁用滚动 我想禁用正文的滚动 但我想保持其他分区的滚动完好无损 试试这个 CSS 不需要 jQuery 评论后更新 尝试指定高度body too
  • .live() 或 .livequery()

    我有一个Ajaxed的网站 Ajax的内容来自其他页面 例如about html contact html ajax 从名为 main content 的 div 获取内容 但是在 ajax 调用之后 我的其余脚本就中断了 比如tinysc
  • karma/jasmine 控制台更详细的测试结果

    我使用 Karma 和 Jasmine 进行 javascript 单元测试 假设我有一个失败的测试 如下所示 expect objectA toEqual expectedObjectA 当失败时 我看到控制台上转储了两个对象 并显示一条
  • 在 JQuery 中发布表单并填充 DIV - 在 IE 中损坏

    我正在尝试创建一个通过 jQuery 发布数据并将返回值填充到同一 DIV 中的表单 这样页面就不会在发布操作时刷新 div div
  • 如何在 Web 服务器上设置 gzip 压缩?

    我有一个嵌入式网络服务器 总共有 2 兆空间 通常 您使用 gzip 文件对客户端有利 但这会节省我们在服务器上的空间 我读到你可以只 gzip js 文件并将其保存在服务器上 我在 IIS 上测试过 但没有任何运气 为了使这项工作成功 我
  • 销毁 JQuery 可拖动对象

    我有一组可拖动的元素 如何删除可拖动功能 draggable draggable disable 对我来说不是一个选择 draggable draggable destroy 回报Uncaught TypeError Cannot read
  • 如何通过 jQuery 中的类获取特定 html 元素的innerHTML?

    我有这样的 HTML 代码 div class a html value 1 div div class a html value 2 div 我怎样才能访问html value 1 and html value 2使用jquery 分别地
  • 如何使用新的analytics.js跟踪多个帐户?

    我需要使用 Google 的新的analytics js 跟踪一个页面上两个帐户的综合浏览量 有大量教程和示例如何使用较旧的 ga js 进行操作 但我发现的只是这个分析文档页面 https developers google com an
  • 如何使整个跨度落入新行?

    这个片段显示了我想要的 http jsfiddle net 945Df 3 http jsfiddle net 945Df 3 div class sup strong a href Rosario Santa Fe Argentina a
  • 适用于移动设备的响应式订单确认电子邮件?

    我从未见过令人惊叹的订单确认 发票电子邮件 即使是最好的 html5 网站也会发送糟糕的订单确认电子邮件 有时是纯文本 我相信这是因为发票通常需要使用表格来显示购买的物品 这在移动设备上实现起来非常困难 我发现了一些让手机上的表格更易于管理
  • 使用 animate() 的简单 jQuery 幻灯片

    使用 jQuery 的animate 如何将每个图像滑动一次 使用Slick js https github com kenwheeler slick 像CSS动画 然后停在最后一个 div class slideshow style he
  • 如何动态调整jqgrid到当前窗口大小?

    如何动态调整jqgrid到当前窗口大小 基于javascript jQuery 最好的例子在这里 TinyMCE 去 http www tinymce com tryit full php http www tinymce com tryi
  • 如何在画布上所有其他内容后面绘制图像? [复制]

    这个问题在这里已经有答案了 我有一块画布 我想用drawImage在画布上当前内容后面绘制图像 由于画布上已经有内容 我正在使用字面上的画布来创建包含图像的画布 因此我无法真正先绘制图像 所以我无法使用drawImage在我呈现其余内容之前
  • CSS 精灵按钮

    这些精灵按钮让我抓狂 我几乎可以让他们工作 但不完全是 我正在玩这个非常简单的精灵图像 我有一个 jsfiddle 项目 gt gt 这里 如果你想看的话 但如果你只想看一下 代码就在下面 http jsfiddle net jp2code
  • Jwt 签名和前端登录身份验证

    我有这个特殊的 jwt sign 函数 Backend const token jwt sign id user id process env TOKEN SECRET expiresIn 1m res header auth token
  • 以角度访问窗口 TemplateUrl 内的范围

    我的模式有一个 windowTemplateUrl 如下 div class modal fade div class modal dialog div class modal content square btn div div div
  • 确定 Javascript 中的日期相等性

    我需要找出用户在 Javascript 中选择的两个日期是否相同 日期以字符串 xx xx xxxx 形式传递给该函数 这就是我需要的全部粒度 这是我的代码 var valid true var d1 new Date datein val
  • 如何在运行脚本之前提交活动单元格中所做的更改? (Google 表格/Google Apps 脚本)

    我正在使用 Google Apps 脚本在 Google 表格中创建提交表单 该表单位于一页上 提交内容被移至第二个隐藏页面 当用户填写表单后 他们按下提交页面上的按钮以激活脚本 我遇到的问题是 当用户填写最后一个单元格然后单击按钮时 输入

随机推荐

  • data-sly-use、data-sly-resource、data-sly-include 和 data-sly-template 之间有什么区别?

    有什么区别 data sly use data sly resource data sly include and data sly template 我正在阅读文档Sightly AEM我非常困惑 据我所知 data sly use用于添
  • 为 STL 随机数生成器编写工厂方法

    我正在尝试通过配置文件提供一个界面 以便我的用户为他们正在使用的某些参数选择一个发行版 我想使用 STL 随机数生成器算法来实现此目的 假设我的程序从命令行读取 JSON 对于下面提供的 JSON 程序需要意识到它应该根据给定均值和标准差的
  • C# 是否有一个好的 leveldb 端口? [关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 我希望在我的纯 C 项目中使用 leveldb 我在 google 上搜索了 leveldb 的 C 版本 但没有找到 谁能告诉我在哪里可
  • JAXB 按原样使用 String

    我使用 REST 我想知道是否可以告诉 jaxb 将字符串字段 按原样 插入到传出的 xml 中 当然 我想在返回之前将其拆开 但我想节省这一步 XmlRootElement name unnestedResponse public cla
  • 在 Three.js 继承模式中对原型使用扩展有什么好处?

    使用优秀的 Three js 框架 目前正在寻找良好的 javascript 继承模式 我了解了 Three js 中所做的事情 我现在对正在发生的事情有了很好的了解 除了一些 类 例如 Vector3 特别是 我不清楚为什么有些方法是直接
  • 如何在 svelte 中访问 websocket?

    我正在尝试将 svelte 连接到 fastapi 后端 但使用 svelte 套件时出现此错误 我明白了 WebSocket is not defined ReferenceError WebSocket is not defined e
  • cherrypy.HTTPRedirect 使用绝对路径重定向到 IP 而不是主机名

    我在 nginx 后面运行 CherryPy 并需要处理重定向 在我的在 127 0 0 1 8080 上运行的开发机器上 这会正确重定向到 127 0 0 1 8080 login 然而 当通过 nginx 在cherrypy mydom
  • 将数据块读入matlab数组

    我有一个如下所示的数据文件 3 1 0 1 4 1 7 2 1 2 1 5 1 1 1 2 1 1 1 2 对于每一行 第一个整数表示该行中浮点数的数量 现在我想将所有数据加载到一个matlab数组中 并忽略第一列 也就是说 我想得到一个像
  • 原则:多个(whereIn OR whereIn)查询?

    我在用 Doctrine 编写一个相当简单的查询时遇到了麻烦 我有两个数组 countries cities 我需要检查数据库记录值是否与其中的任何一个匹配 我正在寻找类似的东西 gt whereIn country city countr
  • 当文件在其他进程中使用时删除该文件

    In DocumentViewerControl在 WPF 中 我想在关闭事件处理程序中关闭控件后删除该文件 我试图删除它 但 VS 告诉我它被另一个进程使用 我怎样才能删除它 TextBlock tb TextBlock e TabIte
  • Akka设计原则

    在开发一个相当大的 Akka 应用程序时 我在使用普通方法和非 Akka 类时遇到了一个非常简单的结构 但在使用 Akka 时实际上很难确定 这就是为什么我来这里问你什么建议是解决此问题的最佳方法 所以问题是这样的 我有一个父角色 我们称他
  • 在没有 Adob​​e Reader 的情况下将 pdf 文件显示到浏览器中

    我需要在没有 Adob e Reader 的情况下在浏览器中打开 pdf 文件 是否有 PHP 的 API 可以在浏览器中打开 PDF 文件 Regards No PHP 在服务器上运行 它可以访问的唯一 浏览器 API 是 HTTP 如果
  • 如何在非 root 运行的容器中安装新包?

    我需要在正在运行的容器中安装简单的包 例如curl 但我遇到了这个错误 apk add curl ERROR Unable to lock database Permission denied ERROR Failed to open ap
  • 将 System.out 和 System.err 重定向到 slf4j

    我需要重定向System out err println输出到 slf4j 我知道这不是正确进行日志记录的方法但有一个外部库 它记录到System out 您可以使用slf4j 上的系统输出 http projects lidalia or
  • 否定打字稿类型?

    我想在打字稿中创建一个简单的 NOT 运算符 您可以将所有基元组合到某种类型 A 的联合中 这些基元不是第二种类型 B 的联合的基元成员 这可以使用条件类型来完成 例如 如果您有类型 type A a b c type B c d e 然后
  • 如何从 ByteBuffer 获取短[]

    我在 Android 项目中使用 JNI 代码 其中 JNI 本机函数需要一个短 参数 但是 原始数据存储为 ByteBuffer 我正在尝试按如下方式转换数据格式 ByteBuffer rgbBuf ByteBuffer allocate
  • 同一库的多个版本

    我有项目 A 它曾经有模块 A1 使用 dagger v 1 2 2 现在我想添加到项目 A 模块 A2 它依赖于 dagger v 2 0 但我不能 因为这两个匕首库是冲突的 我可以在不同的 android 模块中以某种方式处理多个版本的
  • 使用 Ruby 正则表达式使用常规双引号转义 '“'

    我的文本包含这些奇特的双引号 我想使用 Ruby gsub 和正则表达式将它们替换为常规双引号 这是一个例子以及我到目前为止所拥有的 sentence This is a quote Hey guys I couldn t figure o
  • (Android Xamarin) 获取资源字符串值而不是 int

    我刚刚开始使用 VS2012 使用 Xamarin 创建一个简单的 Android 应用程序 我知道有一种类型的资源仅用于字符串 在我的资源文件夹中 我有一个如下所示的 xml 文件
  • 当启用面板向左滚动时,如何显示我的页面在左侧部分可见?

    IN this link http view jquerymobile com 1 3 2 dist demos widgets panels 我可以发现有一个覆盖选项 我可以在其中隐藏或显示右侧或左侧的面板 但我想在面板中显示面板 90