LOGIN ID Password Auto Login Register Now! Lost Password?
XUGJ Forum

テキストエリアの入力枠の幅を広げる

投稿ツリー


このトピックの投稿一覧へ

domifara

なし テキストエリアの入力枠の幅を広げる

msg# 1
depth:
0
前の投稿 - 次の投稿 | 親投稿 - 子投稿.1 .2 | 投稿日時 2010/9/7 11:12 | 最終変更
domifara  Ensign   投稿数: 300
あれ投稿したつもりなのに出てこない。操作間違ってかな。

もう1回書きます。モデレーターの方
お手数ですが重複していたら先ほどのは消してください。
簡単なことなので、既出かもしれませんその場合も削除してください。

picoとかもそうだけど、横幅に余裕があっても狭い入力のテキストエリアしかでない。

これはどんな幅のテーマを使っているかわからないので
あんまり大きくなっていないのだろう。

テキストエリア横幅、cols要素で固定されている。
これはフォームを作成されるときに設定される。

そのため、モジュールごとに設定の値が異なる。
picoなどはcols=60(英数で60文字数相当)だけだ。

[モジュール本体を改造せずに、jqueryを使ってテーマだけを改造する方法
どんなモジュールで問題が出るか教えてください。


ほとんどのモジュールに有効になります。(コメント入力も含む)
Leftブロック,rightブロック,センターブロックには影響は出ません。

[調べておくことと作業]
まず、作業のほかにテーマごとにセンターの幅が違うので調べておくことが2つあります。

1:作業:jqueryをダウンロードしてテーマ内に置く。
 (今回 jsディレクトリを作ってそこに置きます)
2.調べる:何文字までテキストエリア1行に打てるか調べる。
3.調べる:モジュールコンテンツを表示している要素名を調べる。
4.作業jSを作成する:JSの記述を作成してテーマ内に配置する。
 (今回 jsディレクトリを作ってそこに置きます)
3.作業:テーマにjs記述を追加して変更で有効とする。


[1作業0:jqueryをダウンロード]
jquery本家のダウンロードより取得します。
今回は、jquery-1.4.2.min.jsを使用します。


[2調べる:そのテーマのテキストエリアの1行に何文字まで入力できるか調べる]

 実際に入力して数えてください、英数小文字で数えた数
 (日本語文字の場合その約半分文字が入力可能となる)

 実際に入力してみてください。英数字小文字で
引用:
123456789012345678901234567890123456789012345678901234567890
 まで入力できれば、今 60 文字指定になっています。

 あと何文字くらいなら表示可能か推定して(横スライドバーの分考慮)
 今回の例では 70文字とするとます。


[3調べる.モジュールコンテンツを表示している要素名を調べる]

 theme.htmlの中からモジュール($xoops_contents)を表示しているところを探します。

      <{if $xoops_contents}>
      <div id="module-contents"> <{$xoops_contents}> </div>
      <{/if}>
 この場合要素名は,module-contents です。

 id="module-contents"となっている場合jsでは
 # 文字を先頭にいれて,jqueryでは #module-contents とする憶えてください。


[4作業;テキストエリアのcolsを変更するjsファイルを作る]
 jquery.xtextarea74.for_xoops.js という名前でファイルを作ります
 適当テーマ内に配置します。
jQuery.noConflict();
;(function($){

	$.fn.xtextarea74 = function(options) {

		options = $.extend({cols: 74}, options || {});

		return this.each(function() {
			var root = this;
				$(this).attr({ 
					cols: options.cols
				});
		});
	};
})(jQuery); // plugin code ends
 テーマのモジュール本体がセットされる要素のテキストエリアに
 チェックなんてしてないの短いattrメソッドひとつのプラグインです。
 標準でcolsを74にセットし直すだけ。実際はcols数は後でオプション指定する。


[5作業:テーマにjsの記述を追加してのテーマキャシュ変更で有効とする。]

//jquery-1.4.2.min.jsを配置した位置を指定する
//ここにjquery-1.4.2.min.jsを配置している場所を指定する。
//すでに指定が別途ある場合不要
<script type="text/javascript" src="<{$xoops_imageurl}>js/jquery-1.4.2.min.js"></script>

<{* ----textarea id module-contents for xoops . initialise plugins - *}>
//ここにxtextarea74.for_xoops.jsを配置した場所を指定する
<script type="text/javascript" src="<{$xoops_imageurl}>js/jquery.xtextarea74.for_xoops.js"></script>
    <script type="text/javascript">

    //プラグイン初期化
    jQuery.noConflict();
    (function($){
        $(document).ready(function(){
            //テーマごとに違う要素名 "#module-contents とcols数 70 を指定する
            $("#module-contents textarea").xtextarea74({cols:70});
        });
    })(jQuery);
</script>
この中の
実際に作成するときにはコード日本語コメントのところは削除してください
プラグイン形式にしたのはjsファイルの中にすべてをいれていないのはテーマごとに
異なるのでバラメーを変える必要があるからオプションにしてます。

以上です。テーマキャシュが最新になれば有効となっています。
pico,d3forum,コメントなどで有効となります。

※[注意]
すべてのモジュール、テーマに有効わけではありせん。
(でも全般に有効となるたとえばコメントも有効となる)

※[例外]
たとえば「hd_default」はテキストエリアをdocument.writeを使って動的に後から
書きこんでいますが、そういうテキストエリア「hd_default全般」では有効となりません。

---------------------------
入力用のテキストエリアに限ると、
使い方はpicoのような投稿用がほとんどなので、わり切って考えて
テーマごとに横幅を後から決めてやるなら方簡単です。

ブロックまで広がると広がりすぎだが
jqueryを使って、モジュールが表示されるDIV要素の中だけ
テキストエリアを広げてやればよいだろうと考えた方法です。
モジュールで特別なtextareaを特別な使用目的で利用している場合は
かえって広すぎると操作しずらくなるかもれません。調整してください


配布用テーマにひっそりいれておいたので
試してみてください。

(だれも聞いてこないといことテーマ使われてないのだろう。)
テーマ ダウンロード
投票数:5 平均点:10.00

  条件検索へ


Back to Page Top
MainMenu
Manuals
Search
XOOPS Official & Dev.
XOOPS Communities