[英]Creating Text Editor like Line Numbers using jQuery and CSS, HTML
i was just wondering if any such thing is possible/available or not 我只是想知道是否有可能/可用的东西
For each line in my HTML Page i want a Line Number to be displayed in extreme left of the page similar like many Programming editors.. Do u know any such plugin or design that fulfills this ? 对于我的HTML页面中的每一行,我希望在页面的最左侧显示行号,类似于许多编程编辑器。你知道任何这样的插件或设计能够实现这一点吗?
Here's something rough that I cooked up for the sake of simplicity and you are welcome to expand on it: 这是为了简单起见我做的粗略的东西,欢迎你扩展它:
http://jsfiddle.net/L4MEu/2/ http://jsfiddle.net/L4MEu/2/
HTML: HTML:
<div id="linenum"></div>
<div id="content">
test<br/>
one<br>
two
</div>
CSS: 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: 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.