JavaScriptでselectの値を操作

2008/04/10 | JavaScript/Ajax

JavaScriptでプルダウン(select)の値を操作する方法のメモ書き。

■メニューのうち上から何番目が選ばれているか(一番上が0)
index=document.forms[‘myForm’].elements[‘selectElement’].selectedIndex

■上記のオプション(option)内で指定されている値(value)
value=document.forms[‘myForm’].elements[‘selectElement’].options[index].value

JavaScriptは最近でこそAjaxの関係で必要になったからやっているけど、昔はぜんぜん使わなかったので、基本的なことすら覚えていない。面倒だ。

openWYSIWYGにファイル操作機能を追加

2008/02/09 | JavaScript/Ajax

JavaScriptのWYSIWYGエディタ「openWYSIWYG」。簡単設置なところが大変気にいっているのだが、画像ファイルの差し込みをしようと思ったらFTPなどで別途アップロードし、そのファイルのURLを(何らかの手段で)確認して、そのURLを入力しなくてはいけない。画像さえ使わなければ何の問題もないのに、すべて手動で操作しなくてはいけないのはイタダケナイ。

そこでPHPでファイルアップロードの仕組みと、自動で画像のURLを差し込んでくれる機能を実装してみた。面倒だったのでJavaScriptも適当だし、PHPも適当だけど、とりあえずIE7の環境で動いてくれているようだ。せっかくなので、公開することにした。以下のURLからどうぞ。

openWYSIWYGアップロードライブラリ

ファイルをダウンロードしたらまず解凍。できたファイルをwysiwyg.jsと同じところへ設置。popups/insert_image.htmlは上書き(バックアップは残しておくほうが無難)。wysiwyg.jsと同じ階層にfilesというディレクトリを作成してファイルをアップロードできるよう権限を与えておく。

著作権は・・・BSDライセンスにしようかな。ちょっと検討。
検討してからファイルに追加の予定。

openWYSIWYGでの改行

2008/02/07 | JavaScript/Ajax

openWYSIWYGでは、テキストエリア内で普通に改行すると<p></p>タグに変換されるようだ。でも、不要な余白もあくので普通に改行したい(それで十分)。

調べたらシフトキーを押しながらエンターキーで、希望通りの改行になることがわかった。
どこかFAQサイトがほしいな。

簡単に使えるWYSIWYGエディタ

2008/02/06 | JavaScript/Ajax

すごく簡単に導入できるJavaScriptベースのWYSIWYGエディタを見つけた。
OpenWYSIWYG

何も考えずに本当に簡単に使える!。

<script language="JavaScript" type="text/javascript" src="wysiwyg.js"></script>

上記の一行でライブラリを読み込んでおいて、フォーム内のWYSIWYGとしたいテキストエリア部分を以下のように指定する。

<textarea id="textarea1" name="test1"></textarea>
<script type="text/javascript">generate_wysiwyg(‘textarea1′);</script>

JavaScriptだけで実装されているので、画像の差込をするには別途事前にファイルをサーバにアップロードしておく必要がある。
何はともあれ超簡単WYSIWYGエディタだ。

クリックで画像が指定したものに変わる

2007/10/23 | JavaScript/Ajax

画像クリックで、違う画像が表示される仕組みをJavaScriptで作っていた。最初は1枚の画像に対して、クリックで別画像が表示され、再クリックでもとの画像が表示されるという単純なものだった。しかしいろいろ考えていると
「画像が3枚とか4枚のローテーションになったらどうしよう」とか「スクリプトにファイル名を書き込んだら、画像変更の際はやっぱりプログラムを書き換える?」とか思ってしまい、結局関数にした。JavaScriptで汎用的に使えそうな関数を書くなんてめったにないのでメモっておく。

var overimg=0;
function clickChange(){
  property=clickChange.arguments;
  imgArray=new Array();
  for(i=0;i<property.length;i++){
    if(i==0){
      target=property[i];
    }else{
      imgArray[i-1]=property[i];
    }
  }
  overimg++;
  if(overimg>imgArray.length-1){
    overimg=0;
  }
  document.getElementById(target).src=imgArray[overimg];
}

使い方はこんな感じ。
<a href="javascript:clickChange(‘img1′,’a.jpg’,’b.jpg’,’c.jpg’);"><img src="a.jpg" id="img1" /></a>

第1引数:変化させたい画像のID値
第2引数:元の画像のURL
第3引数:1回目のクリックで表示させる画像のURL
第4引数:2回目のクリックで表示させる画像のURL


という感じで、ローテーションさせたい画像の数だけ引数に指定してやる。ローテーションが最後までいくと、再度もとの画像が表示され、そこから再び同じ手順で・・・。
JavaScriptは苦手なので、できたときはちょっとうれしい気分♪。


守谷市(まちの情報ポータル) 無料アンケートレンタルjpForm.net