こんにちは。
今回はtextareaに行番号を表示してくれるjQueryプラグイン「JQuery LinedTextArea」!です。
textareaに行数を表示できるjQueryプラグインを紹介します。
textareaに行番号を表示してくれるjQueryプラグイン「JQuery LinedTextArea」!
JQuery LinedTextArea
jQueryプラグイン「JQuery LinedTextArea」をダウンロードしてみよう!
http://alan.blog-city.com/jquerylinedtextarea.htmにアクセスし、下部の「Download」の箇所をクリックして、ダウンロードします。
jQueryプラグイン「JQuery LinedTextArea」を設置してみよう!
jquery-linedtextarea.cssをhead内に読み込みます。
1 | <link rel="stylesheet" href="css/jquery-linedtextarea.css"> |
jQuery本体とjquery-linedtextarea.jsを/bodyの手前に読み込みます。
1 2 | <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="jquery-linedtextarea.js"></script> |
その下に下記のスクリプトを記述します。
selectedLineでハイライトできますよ。
1 2 3 4 5 | $(function() { $(".lined").linedtextarea( {selectedLine: 5} ); }); |
html部分を記述します。
先ほど指定したlinedというクラスを付けますよ。
1 | <textarea class="lined" rows="10" cols="60"></textarea> |
jQueryプラグイン徹底活用 プロのデザインアイデアとテクニック
知っておくと便利ですね。
以上でtextareaに行番号を表示してくれるjQueryプラグイン「JQuery LinedTextArea」!でした。