自定义标签,自定义标签在IE6

自定义标签在IE6-8的泥坑

2015/07/20 · HTML5 ·
IE,
自定义标签

初稿出处:
司徒正美   

或是今后前端组件化之路都以自定义标签,但那东西早在20年前,JSTL已在搞了。未来Web
Component还唯有webkit支持。但三个组件库,还亟需一个非凡的标识它们是一块的。但是这些XML已经帮我们化解了,使用scopeName,如”<xxx:dialog>”。在自己继续往下想如何处理怎样为那个标签绑定数据,与别的零件通讯,管理生命周期,等等大事从前,笔者还有七个不得不面对的题材,正是何等包容IE6-8!

比如说以下1个页面:

图片 1

在chrome, firefox, IE11, IE11的IE6包容方式分别如下:

图片 2
图片 3
图片 4
图片 5

我们会意识IE6下实际是多出举不胜举标签,它是把闭标签也成为3个单独的要素节点

图片 6

以此AA:DIV标签被开膛破肚,里面子节点全体暴出来,成为其兄弟节点了。由此想包容它,就要费点劲。有个七个情景需求考虑,1是用户已经将它写在页面上,意况同上;2是用户是将它坐落字符串模版中,这么些用正则消除。然则正则要是冲击复杂的属性名,依旧会晕掉。因而小编或然打算选用原生的HTML
parser。换言之,字符串,我还是会将它变成节点。这么办吧?!作者想了无数方法,后来或然使用VML的命名空间法化解!

自定义标签,自定义标签在IE6。我们将地点的页面改复杂点,再看看效果!

图片 7
图片 8

能够看来其套嵌关系今后完全正确,并且标签名不会大写化,也不会生成多余节点!

好了,大家再判定一下是还是不是为自定义标签,大概纯粹地说,这几个节点是还是不是我们组件库中定义的自定义标签。有些情状下,3个页面可以存在多套组件库,包含avalon的,ploymer的,也许是平昔用Web
Component写的。

avalon的零部件库将应用命名空间,这样就好界别开。在IE6-9中,判定element.scopeName是不是为aa(那是组件库的命名空间,你可以改个更宏伟上的名字),在任何浏览器判定此因素的localName是不是以aa:起初就行了!

JavaScript

function isWidget(el, uiName){ return el.scopeName ? el.scopeName ===
uiName: el.localName.indexOf(uiName+”:”) === 0 }

1
2
3
function isWidget(el, uiName){
  return   el.scopeName ? el.scopeName === uiName: el.localName.indexOf(uiName+":") === 0
}

那一个难点消除后,大家就足以开搞基于自定义标签的UI库了!

1 赞 1 收藏
评论

图片 9

1.firefox和IE的自定义标签能够经过以下样式进行联合
<html XMLNS=””
XMLNS:TEST=”;
2.自定义标签的的定义也足以实行联合
<TEST:mylabel value=”mylabel”/>
<TEST:mylabel value=”mylabel2″></TEST:mylabel>
3.js到手自定义标签的值就有分别了(假使有统一的点子,请务必留言)
function f_test(){
var mylabels;
if(IE)//如果是ie
mylabels = document.getElementsByTagName(“mylabel”);
else//如果是FF
mylabels = document.getElementsByTagName(“TEST:mylabel”);
}

1.firefox和IE的自定义标签能够因而以下样式实行统一
<html XMLNS=””
XMLNS:TEST=”//www.jb51.net”>
2.自定义标签的的定义也能够拓展统一
<TEST:mylabel value=”mylabel”/>
<TEST:mylabel value=”mylabel2″></TEST:mylabel>
3.js获得自定义标签的值就有分别了(假若有统一的办法,请务必留言)
function f_test(){
var mylabels;
if(IE)//如果是ie
mylabels = document.getElementsByTagName(“mylabel”);
else//如果是FF
mylabels = document.getElementsByTagName(“TEST:mylabel”);
}

自定义标签类,自定义标签

选取标签能够替换jsp页面上的剧本,让页面尤其简明,维护特别便利,增添程序安全性。

在javaee
api中有叁个接口javax.servlet.jsp.tagext.JspTag,它是有着的竹签的根接口。

在jsp2.0自此,定义了2个尤其简约的javax.servlet.jsp.tagext.SimpleTag,那个接口就讲述了哪些自定义标签。

标签的分类:

  • 守旧标签
  • 不难易行标签SimpleTag

SimpleTag体系

     SimpleTag有二个贯彻类SimpleTagSupport,自定义标签类一般会一而再它。

概念2个标签的步调:

关于SimpleTag接口的不二法门描述

  • doTag方法它的功能:描述标签的作用 (会被活动调用)
  • setJspContext:它的参数是JspContext,它的效劳是将页面包车型大巴pageContext对象传递到标签类中。(相当的大用途,用于获取别的八大对象)
  • setJspBody:将标签体的内容缓存到内部存款和储蓄器对象中,而参数JspFragment
    也就是标签体内容。
  • getParent  setParent 将标签的父标签引入。(基本不用)

 

html XMLNS=””
XMLNS:TEST=”” 2.自定义标签的的定义也能够进…

你也许感兴趣的稿子:

  • 在asp.net(C#)中选取自定义标签和XML、XSL突显数据
  • jsp 自定义标签实例
  • JSP自定义标签Taglib实现进度重点总括
  • jsp自定义标签技术(落成原理与代码以及平台搭建步骤)
  • 美高梅mgm7991 ,JSP自定义标签获取用户IP地址的法门
  • jsp简单自定义标签的forEach遍历及转义字符示例
  • ThinkPHP模板自定义标签使用方法
  • ThinkPHP分组下自定义标签库实例
  • JSP自定义标签rtexprvalue属性用法实例分析
  • JSP自定义标签基础知识学习

上面是八个自定义标签类:(用于是一个频仍打字与印刷标签体内容的 java 类)

package online.mytag;

import java.io.IOException;

import javax.servlet.jsp.JspException;
import javax.servlet.jsp.JspWriter;
import javax.servlet.jsp.tagext.SimpleTagSupport;

public class PrintTag extends SimpleTagSupport {

    private int count;   //这里的字段,要在 .tld 文件中使用的话,就必须提供 get/set 方法

    public int getCount() {
        return count;
    }

    public void setCount(int count) {
        this.count = count;
    }
    //打印
    @Override
    public void doTag() throws JspException, IOException {
        String str = getJspBody().toString();
        JspWriter out = getJspContext().getOut();
        for (int i = 0; i < count; i++) {
            out.write(str);
        }
    }
}

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图