[英]Creating Text Editor like Line Numbers using jQuery and CSS, HTML
我只是想知道是否有可能/可用的東西
對於我的HTML頁面中的每一行,我希望在頁面的最左側顯示行號,類似於許多編程編輯器。你知道任何這樣的插件或設計能夠實現這一點嗎?
這是為了簡單起見我做的粗略的東西,歡迎你擴展它:
HTML:
<div id="linenum"></div>
<div id="content">
test<br/>
one<br>
two
</div>
CSS:
#linenum
{
width: 5%;
background-color: blue;
color: #FFF;
position: absolute;
top: 0px;
bottom: 0px;
}
#content
{
position: relative;
left: 7%;
}
body
{
overflow-x: hidden;
}
JQuery的:
$(document).ready(function(){
var splitCondition = new RegExp("<br/?>");
var lines = $("#content").html().split(splitCondition);
for(var i = 1; i <= lines.length; i++)
{
$("#linenum").append(" " + i + ".<br/>");
}
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.