html如何复用其它页面,编写可以复用的 HTML 模板
Web 组件简介编写可以复用的 HTML 模板(本文)从 0 开始创建自定义元素使用 Shadow DOM 封装样式和结构Web 组件的高阶工具
Web 组件规范中最不被认可但是最强大的功能之一是 元素。在这个系列的第一篇文章中,我们将这种模板元素定义为『仅在调用时才渲染的用户自定义 HTML 模板』。换句话说,模板就是一种当浏览器被告知时才执行的 HTML 代码,其他情况下是被忽略的。
这种模块可以通过许多有趣的方式去传递和应用。基于本文的目的,我们将看下如何为一种最终应用到自定义元素中的对话框创建模板。
就像它听起来这样简单,一个 是一种 HTML 元素,所以一个含内容的模板所具备的最基本形式如下:
在浏览器中运行这段代码会显示空白页面,因为浏览器并没有渲染模板元素内容。这种方式的强大之处在于它允许我们保存自定义内容(或内容结构),以供后续使用,而不需要使用 JavaScript 来动态编写 HTML 代码。
为了使用模板,我们 将 需要用到 JavaScript。
真正神奇的地方在于 方法。这个函数将会为模板的 创建一份副本,并且做好将拷贝插入其他文档(或文档片段)的准备。函数的第一个参数获取到模板的内容,第二个参数告诉浏览器要对元素的 DOM 子树做一份深度拷贝(也就是拷贝它的所有子节点)。
我们可以直接使用 ,但是这样做的话,我们随后需要把内容从元素中移除并将它拼接到其他文档的 body 部分。任何 DOM 节点仅可以被接入到一个位置,所以随后对模板内容的使用将会导致空文档片段(基本上是一个空值),因为之前已移动了内容对象。使用 允许我们在不同的位置来复用同一个模板内容的实例。
以上代码执行后,节点内容会被拼接到 对象,并被渲染显示给用户。这样最终使我们能够做许多有趣的事情,比如为我们的用户(或者我们程序的消费者)提供创建内容的模板,类似下面的 demo,在第一篇文章我们讨论过:
请参阅笔记模板样例,来自 CodePen 的 Caleb Williams (@calebdwilliams)。
这个例子中,我们提供了两个模板来渲染同样的内容 —— 作者和他写的书。当表格变化时,我们选择渲染与该变化值相关联的模板。使用相同的技术允许我们最终创建一个自定义元素,该元素将使用稍后定义的模板。
模板中一个有趣的点是我们可以包含 任意 HTML,包括脚本和样式元素。一个非常简单的模板例子是添加一个可以提示被点击的按钮。
让我们加点样式:
…然后通过一个非常简单的脚本来调用按钮:
当然,我们可以直接使用 和 标签来将他们放在同一个文件中,而非放在分离的文件中:
一旦这个元素被加入到 DOM 结构中,我们会看到一个 ID 为 的新按钮,一个全局的 CSS selector 被绑定到这个按钮的 ID,一个简单的事件监听回调函数会提示元素的点击事件。
至于我们的脚本,我们仅需使用 来拼接内容,并且我们有一个包含大致内容的 HTML 模板,在页与页之间可以复用。
请参阅笔记包含脚本和样式的模板例子,来自 CodePen 的 Caleb Williams (@calebdwilliams)。
回到我们编写一个对话框元素这个任务,我们希望定义自己的模板内容和样式。
这段代码将成为我们对话框的基础部分。简单介绍一下,我们有一个全局的关闭按钮,一个标题和一些内容。我们也添加了一些行为来实现可视化触发对话框(尽管它还无法被访问)。不幸的是,样式和脚本内容并非仅限作用于我们的模板,而是应用于整个文件,当我们将多个模板实例添加到 DOM 时,并没有产生理想的中的效果。在下篇文章中,我们将应用自定义元素f生成方法并创建我们自己的元素,实时使用该模板并封装元素的行为。
html如何复用其它页面,编写可以复用的 HTML 模板相关推荐
- 前端模板复用html,[译] 编写可以复用的 HTML 模板
在我们的上一篇文章中, 我们讨论了 web 组件规范(自定义元素.shadow DOM 和 HTML 模板)的高级特性.在本文以及接下来的三篇文章中,我们将这些技术应用到测试并更详细地去验证它们,看下 ...
- 有关推挽输出、开漏输出、复用开漏输出、复用推挽输出以及上拉输入、下拉输入、浮空输入、模拟输入区别
转自:http://www.cnblogs.com/Jezze/archive/2011/12/23/2299857.html 以及上拉输入.下拉输入.浮空输入.模拟输入的区别 最近在看数据手册的时候 ...
- poll函数_I/O复用 - 三组I/O复用函数的比较
在之前的文章中 I/O复用 - epoll 和 I/O复用 - select&poll 中我们讨论了三组I/O复用的系统调用,这3组系统调用都能同时监听多个文件描述符.它们将等待由timeou ...
- 有关上拉输入、下了输入、推挽输出、开漏输出、复用开漏输出、复用推挽输出以及、浮空输入、模拟输入区别
有关上拉输入.下了输入.推挽输出.开漏输出.复用开漏输出.复用推挽输出以及.浮空输入.模拟输入区别 最近在网上看见一些人对STM32的八种方式的解释,说了一大堆,最后看完了 也不知道 ...
- 有关推挽输出、开漏输出、复用开漏输出、复用推挽输出
有关推挽输出.开漏输出.复用开漏输出.复用推挽输出 以及上拉输入.下拉输入.浮空输入.模拟输入的区别 转载自:http://bbs.ednchina.com/BLOG_ARTICLE_2082651. ...
- (转载)有关推挽输出、开漏输出、复用开漏输出、复用推挽输出以及上拉输入、下拉输入、浮空输入、模拟输入区别...
以及上拉输入.下拉输入.浮空输入.模拟输入的区别 最近在看数据手册的时候,发现在Cortex-M3里,对于GPIO的配置种类有8种之多: (1)GPIO_Mode_AIN 模拟输入 (2)GPIO_M ...
- [JSP] 页面编写操作
页面编写技巧集合 点击删除,在删除前确认弹窗 点一下文本框里面的内容清空 使用ajax在标签中增加子标签 打开一个新窗口 刷新当前窗口 刷新父窗口 关闭当前窗口 点击删除,在删除前确认弹窗: < ...
- 小区物业管理系统-业主页面编写
小区物业管理系统-业主页面编写 主页面 Public Class Main_ProprietorPrivate user As UserPublic Sub New(u As User)Initial ...
- STM32初学篇-推挽输出、开漏输出、复用开漏输出、复用推挽输出以及上拉输入、下拉输入、浮空输入、模拟输入区别
有关推挽输出.开漏输出.复用开漏输出.复用推挽输出以及上拉输入.下拉输入.浮空输入.模拟输入的区别 最近在看数据手册的时候,发现在Cortex-M3里,对于GPIO的配置种类有8种之多: (1)GPI ...
最新文章
- Linux C编程--进程介绍4--errno
- Centos sudo添加用户
- 软件工程概论 课堂练习【图书馆系统的用例图】
- Java中的IO流(六)
- Git撤销修改、回退版本相关命令
- 列表查询数据交互简写形式
- 计算机网络之网络层服务和网络层服务模型
- 《BREW进阶与精通——3G移动增值业务的运营、定制与开发》连载之64---BREW 应用的交叉编译...
- arduino 有源 蜂鸣器_Arduino入门教程--第八课--用蜂鸣器模拟警报器
- Linux批量更改文件后缀名
- 华展云-让展览更高效 2017第6届中国国防信息化装备与技术博览会会刊(参展商名录)
- 2018最新的Java黑马视频教程,包含十次方和乐优商城项目
- 微信支付宝个人收款方法
- [4G5G专题-91]:流程 - 4G LTE 终端移动性管理总体概述
- 如果流浪地球,信息科学能做什么
- UVA 1084 deer-proof fence
- 卡尔曼滤波基本公式推导(高斯乘积法)
- 花了一周,我总结了120个数据指标与术语。
- 检查服务器是否支持ipv6
- 高三学生凭神经网络论文获赞,研究网络暴力
热门文章
- 三调地类代码_FME实现三调地类变化流量表制作
- 我的10年富士康故事
- vivado不识别HLS生成的IP解决方法
- 国学精典书籍阅读记录
- top统计mysql性能_mytop安装,使用mytop监控MySQL性能
- android 清除应用程序数据,Android – 通过“清除数据”设置选项阻止正在删除的应用程序数据或文件...
- php接收键盘事件,js获取键盘事件的方法实例
- nginx 指向一个文件夹_弄懂nginx的语法就是这么简单
- java语言语法--- Java标识符(标识符命名规则)、Java关键字、Java变量(变量的声明、赋值、使用)和常量(字符常量、字面常量)(包括Java字节码文件反汇编命令javap)
- php伪静态url运用,再谈 THINKPHP 伪静态url(URL访问模式)的设置