如何在CSS/HTML中创建自定义衍生产品？

Question

我从本论坛搜索了关于在HTML中创建自定义衍生产品的信息。

我要找的是创建一个定制的衍生品，应该是这样的：

<div class="color-blue" dismissable/> 
<input id="hello" type="text" numeric-only/> 

我怎样才能做到这一点？

感谢， 文斯

Answer 1

我不是100％肯定，你在这种情况下“衍生物”，但意思我想你需要的是像data attributesdata-numeric-only="true"。然后你就可以添加你需要的任何逻辑一样：

$('[data-dismissable="true"]').click(function(){ 
 
    $(this).hide(); 
 
}); 
 

 
$('[data-numeric-only="true"]').keyup(function(){ 
 
    $(this).val($(this).val().replace(/[^0-9]+/g, "")); 
 
});

.color-blue{ 
 
    background-color:blue; 
 
    height:100px; 
 
    width:100px; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="color-blue" data-dismissable="true"></div> 
 
<input id="hello" type="text" data-numeric-only="true"/>

或者，你可以创建自己的custom HTML elements