如何在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