在html中创建自定义标签
创建并使用自定义标签
Web Components 标准非常重要的一个特性是，它使开发者能够将HTML页面的功能封装为 custom elements（自定义标签）,本篇介绍使用 CustomElementRegistry 来管理我们的自定义标签
1. 创建自定义标签
<script>
class PopUpInfo extends HTMLElement {
constructor () {
super();
// 在此定义自定义标签 我顶一个icon和text并列的
// Create a shadow root
let shadow = this.attachShadow({mode: 'open'}); // 创建我们需要的标签
let wrapper = document.createElement('div');
let iconBox = document.createElement('div');
let textBox = document.createElement('div');
// 为标签添加样式
wrapper.setAttribute('class','wapper');
iconBox.setAttribute('class','icon');
textBox.setAttribute('class','text');
let text = this.getAttribute('text'); // 获取标签里面传递的值
textBox.textContent = text;
let imgUrl;
if(this.hasAttribute('img')) {
imgUrl = this.getAttribute('img');
} else {
imgUrl = 'default.png'; // 设置一个默认图片
}
var img = document.createElement('img');
img.src = imgUrl;
iconBox.appendChild(img);
// 书写样式
var style = document.createElement('style');
let lStyleStr = '.wrapper { display: flex; justify-content: center; align-items: center; width: 100%; height: 50px;}'
lStyleStr += '.icon {margin-right: 10px; width: 50px; height: 50px;}'
lStyleStr += '.icon img { width: 100%; height: 100%;}'
lStyleStr += '.text { flex: 1; font-size: 14px; color: #333; line-height: 50px;}'
style.textContent = lStyleStr;
// 将样式和dom元素挂载到页面
shadow.appendChild(style);
shadow.appendChild(wrapper);
wrapper.appendChild(icon);
wrapper.appendChild(info);
}
}
</script>
2. 注册自定义标签
<script>
customElements.define('popup-info', PopUpInfo);
</script>3. 使用自定义标签
<body>
<popup-info img="you_picture.jpg" text="你的文字"></popup-info>
</body>在html中创建自定义标签的更多相关文章
- 使用原生js创建自定义标签
使用原生js创建自定义标签 效果图 代码 <!DOCTYPE html> <html lang="en"> <head> <meta ch ...
- 在jsp页面中使用自定义标签
在某些场景中,自定义标签可封装大量代码,使页面变得更简洁,标签也可以很方便地在不同页面中实现通用而不必去粘贴大量的js代码.现在把最近做的一个自定义标签在这里总结一下.首先总结一下关于自定义标签的一些 ...
- 在Oracle电子商务套件版本12.2中创建自定义应用程序（文档ID 1577707.1）
在本文档中 本笔记介绍了在Oracle电子商务套件版本12.2中创建自定义应用程序所需的基本步骤.如果您要创建新表单,报告等,则需要自定义应用程序.它们允许您将自定义编写的文件与Oracle电子商务套 ...
- js中创建html标签、加入select下默认的option的value和text、删除select元素节点下全部的OPTION节点
<pre name="code" class="java"> jsp 中的下拉框标签: <s:select name="sjx&qu ...
- javaweb回顾第八篇如何创建自定义标签
前言:在javaweb开发中自定义标签的用处还是挺多的.今天和大家一起看自定义标签是如何实现的. 1:什么是标签 标签是一种XML元素,通过标签可以使JSP页面变得简介易用,而且标签具有很好的复用性. ...
- 在 ASP.NET MVC 中创建自定义 HtmlHelper
在ASP.NET MVC应用程序的开发中,我们常碰到类似Html.Label或Html.TextBox这样的代码,它将在网页上产生一个label或input标记.这些HtmlHelper的扩展方法有些 ...
- spring中的自定义标签
为了给系统提供可配置化支持,一般会用原生态的方式去解析定义好的XML文件,然后转化为配置对象.这种方式对于简单.单一的配置文件,或者是XML配置格式固定的配置文件,比较容易处理.但是对于一些配置非常复 ...
- Spring源码学习-容器BeanFactory(四) BeanDefinition的创建-自定义标签的解析.md
写在前面 上文Spring源码学习-容器BeanFactory(三) BeanDefinition的创建-解析Spring的默认标签对Spring默认标签的解析做了详解,在xml元素的解析中,Spri ...
- 在django中使用自定义标签实现分页功能
效果演示: github地址:https://github.com/mncu/django_projects/tree/master/django_projects/pagination_test 本 ...
随机推荐
- Python - 编程技巧，语法糖，黑魔法，pythonic
参考,搬运 http://python-web-guide.readthedocs.io/zh/latest/idiom/idiom.html 待定 1. Python支持链式比较 # bad a = ...
- ios APP进程杀死之后和APP在后台接收到推送点击跳转到任意界面处理
https://www.jianshu.com/p/ce0dc53eb627 https://www.cnblogs.com/er-dai-ma-nong/p/5584724.html github: ...
- Ubuntu将Python3软连接到Python
sudo ln -s /usr/bin/python3 /usr/bin/python
- PageObject
import org.openqa.selenium.WebDriver; import org.openqa.selenium.ie.InternetExplorerDriver; import o ...
- spring demo
参考: https://www.tutorialspoint.com/spring/spring_applicationcontext_container.htm
- springmvc启动加载指定方法
官网: https://docs.oracle.com/javaee/7/api/javax/annotation/PostConstruct.htmlblog:https://blog.csdn.n ...
- Java基础 -2.4
字符型char类型 在任何的编程语言之中,字符都可以与int进行互相转换,也就是这个字符中所描述的内容可以通过int获取其内容所在的系统编码 public class ddd { public sta ...
- Java基础 -1.4
标识符与关键字 对于标识符的组成在Java之中的定义如下:由字母.数字._.$ 组成 其中不能使用Java的保留字(关键字) 其中 $ 一般都有特殊的含义 不建议出现在自己所编写的代码上 关键字 是系 ...
- Codeforces Global Round 4E（字符串，思维）
#include<bits/stdc++.h>using namespace std;string s,a,b;int main(){ cin>>s; int n=s.size ...
- 深浅copy浅析
Python代码在开始执行的时候,代码会被系统从硬盘调入内存,等候CPU执行,至于怎么个调入逻辑,还不清楚. 在高级语言中,变量是对内存及其地址的抽象.也就是说变量就是内存地址. 那么我们先来介绍两种 ...