- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
在我的可折叠 header 中,我试图附加一个额外的 anchor 标记,该标记被推离 header ,因为 JQuery 移动 header 不支持它。有没有办法以一种简洁的方式向可折叠的标题添加额外的链接/操作?
提前致谢
最佳答案
您可以从 $(document).on("collapsiblecreate")
事件中在可折叠内插入一个按钮,但我更喜欢使用 pre-enhanced 标记作为描述 here (这应该会提高页面创建期间的性能)。
举个例子(我相信每个使用JQM的人都至少遇到过一次这样的问题...)
所以,基本上,而不是完全依赖于 data-role
增强,你需要在你的 html
中编写扩展标记和 JQM 稍后添加的类在小部件初始化期间。要告诉 JQM 标记是预增强,请将 data-enhanced="true"
数据属性添加到小部件。
这样,您可以在任何小部件(search-inputs
等)中自由添加您想要的任何元素。只要看看 chrome 开发人员工具:大多数情况下,您只需要使用自己的标准方法复制并粘贴由 JQM 增强的标记,然后在您的 html
页面中使用它。
$(document).on("collapsiblecreate", ".ui-collapsible", function(e) {
/* $(this) is the collapsible */
});
.collapsible-assist {
position: relative;
}
.collapsible-assist .ui-collapsible-heading {
margin-right: 2.5em;
}
.collapsible-assist.square .ui-collapsible-heading {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}
.collapsible-assist .assist-btn {
position: absolute;
right: 0;
}
.collapsible-assist.square .assist-btn {
margin: 0;
border-bottom-right-radius: inherit;
border-top-right-radius: inherit;
}
.collapsible-assist .ui-collapsible-content {
margin-top: -1px !important;
border-top-width: 1px !important;
border-top-right-radius: inherit;
}
/* JQM no frills */
.ui-btn,
.ui-btn:hover,
.ui-btn:focus,
.ui-btn:active,
.ui-btn:visited {
text-shadow: none !important;
}
.ui-btn:focus {
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
/* Speed-up some android & iOS devices */
* {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
</head>
<body>
<div data-role="page">
<div role="main" class="ui-content">
<div data-role="collapsible" data-enhanced="true" class="collapsible-assist square ui-collapsible ui-collapsible-inset ui-collapsible-themed-content ui-corner-all ui-collapsible-collapsed">
<a href="#popup" data-rel="popup" data-transition="pop" class="assist-btn ui-btn ui-btn-icon-right ui-icon-info">Help</a>
<h4 class="ui-collapsible-heading ui-collapsible-heading-collapsed"><a href="#" class="ui-collapsible-heading-toggle ui-btn ui-btn-icon-left ui-icon-plus">Farm animals<div class="ui-collapsible-heading-status">click to expand contents</div></a></h4>
<div class="ui-collapsible-content ui-body-inherit ui-collapsible-content-collapsed" aria-hidden="true">
<ul data-role="listview" data-enhanced="false">
<li><a href="#" class="ui-btn ui-btn-icon-right ui-icon-carat-r">Chicken</a></li>
<li><a href="#" class="ui-btn ui-btn-icon-right ui-icon-carat-r">Cow</a></li>
<li><a href="#" class="ui-btn ui-btn-icon-right ui-icon-carat-r">Duck</a></li>
</ul>
</div>
</div>
<br>
<div data-role="collapsible" data-enhanced="true" class="collapsible-assist round ui-collapsible ui-collapsible-inset ui-collapsible-themed-content ui-corner-all ui-collapsible-collapsed">
<a href="#popup" data-rel="popup" data-transition="pop" class="assist-btn ui-btn ui-btn-icon-notext ui-btn-corner-all ui-icon-info">Help</a>
<h4 class="ui-collapsible-heading ui-collapsible-heading-collapsed"><a href="#" class="ui-collapsible-heading-toggle ui-btn ui-btn-icon-left ui-icon-plus">Legend<div class="ui-collapsible-heading-status">click to expand contents</div></a></h4>
<div class="ui-collapsible-content ui-body-inherit ui-collapsible-content-collapsed" aria-hidden="true">
<form>
<div data-role="controlgroup">
<input name="checkbox-1-a" id="checkbox-1-a" type="checkbox" checked>
<label for="checkbox-1-a">One</label>
<input name="checkbox-2-a" id="checkbox-2-a" type="checkbox">
<label for="checkbox-2-a">Two</label>
<input name="checkbox-3-a" id="checkbox-3-a" type="checkbox">
<label for="checkbox-3-a">Three</label>
</div>
</form>
</div>
</div>
</div>
<div data-role="popup" id="popup" class="ui-content" data-theme="a">
<p>I'm a help popup.</p>
</div>
</div>
</body>
</html>
关于javascript - 如何向 JQuery 移动可折叠 header 添加操作?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55100115/
我正在努力做到这一点 在我的操作中从数据库获取对象列表(确定) 在 JSP 上打印(确定) 此列表作为 JSP 中的可编辑表出现。我想修改然后将其提交回同一操作以将其保存在我的数据库中(失败。当我使用
我有以下形式的 Linq to Entities 查询: var x = from a in SomeData where ... some conditions ... select
我有以下查询。 var query = Repository.Query() .Where(p => !p.IsDeleted && p.Article.ArticleSections.Cou
我正在编写一个应用程序包,其中包含一个主类,其中主方法与GUI类分开,GUI类包含一个带有jtabbedpane的jframe,它有两个选项卡,第一个选项卡包含一个jtable,称为jtable1,第
以下代码产生错误 The nested query is not supported. Operation1='Case' Operation2='Collect' 问题是我做错了什么?我该如何解决?
我已经为 HA redis 集群(2 个副本、1 个主节点、3 个哨兵)设置了本地 docker 环境。只有哨兵暴露端口(10021、10022、10023)。 我使用的是 stackexchange
我正在 Desk.com 中构建一个“集成 URL”,它使用 Shopify Liquid 模板过滤器语法。对于开始日期为 7 天前而结束日期为现在的查询,此 URL 需要包含“开始日期”和“结束日期
你一定想过。然而情况却不理想,python中只能使用类似于 i++/i--等操作。 python中的自增操作 下面代码几乎是所有程序员在python中进行自增(减)操作的常用
我需要在每个使用 github 操作的手动构建中显示分支。例如:https://gyazo.com/2131bf83b0df1e2157480e5be842d4fb 我应该显示分支而不是一个。 最佳答
我有一个关于 Perl qr 运算符的问题: #!/usr/bin/perl -w &mysplit("a:b:c", /:/); sub mysplit { my($str, $patt
我已经使用 ArgoUML 创建了一个 ERD(实体关系图),我希望在一个类中创建两个操作,它们都具有 void 返回类型。但是,我只能创建一个返回 void 类型的操作。 例如: 我能够将 book
Github 操作仍处于测试阶段并且很新,但我希望有人可以提供帮助。我认为可以在主分支和拉取请求上运行 github 操作,如下所示: on: pull_request push: b
我正在尝试创建一个 Twilio 工作流来调用电话并记录用户所说的内容。为此,我正在使用 Record,但我不确定要在 action 参数中放置什么。 尽管我知道 Twilio 会发送有关调用该 UR
我不确定这是否可行,但值得一试。我正在使用模板缓冲区来减少使用此算法的延迟渲染器中光体积的过度绘制(当相机位于体积之外时): 使用廉价的着色器,将深度测试设置为 LEQUAL 绘制背面,将它们标记在模
有没有聪明的方法来复制 和 重命名 文件通过 GitHub 操作? 我想将一些自述文件复制到 /docs文件夹(:= 同一个 repo,不是远程的!),它们将根据它们的 frontmatter 重命名
我有一个 .csv 文件,其中第一列包含用户名。它们采用 FirstName LastName 的形式。我想获取 FirstName 并将 LastName 的第一个字符添加到它上面,然后删除空格。然
Sitecore 根据 Sitecore 树中定义的项目名称生成 URL, http://samplewebsite/Pages/Sample Page 但我们的客户有兴趣降低所有 URL(页面/示例
我正在尝试进行一些计算,但是一旦我输入金额,它就会完成。我只是希望通过单击按钮而不是自动发生这种情况。 到目前为止我做了什么: Angular JS - programming-fr
我的公司创建了一种在环境之间移动文件的复杂方法,现在我们希望将某些构建的 JS 文件(已转换和缩小)从一个 github 存储库移动到另一个。使用 github 操作可以实现这一点吗? 最佳答案 最简
在我的代码中,我创建了一个 JSONArray 对象。并向 JSONArray 对象添加了两个 JSONObject。我使用的是 json-simple-1.1.jar。我的代码是 package j
我是一名优秀的程序员,十分优秀!