JavaScriptプログラムに関する各種メモ書き:タグ「prototype.js」での検索

prototype.js の フォーム操作

1行テキストエリア(id="hoge")の値

<input type="text" name="hoge" id="hoge" value="999" >
// ◆ prototype.js
$F('hoge');

オプションメニュー(ドロップダウンリスト)(id="hoge")の値

// ◆ prototype.js
$F('hoge');

ラジオボタン(id="radio_id")の値の取得

// ◆ prototype.js
var data = $A(document.FM.radio_id).find(function(v) {return v.checked;});

単一チェックボックス(id=cb1)の値の取得

<label><input type="checkbox" id="cb1_id" name="cb1" value="あいうえお" />あいうえお</label>
// ◆ prototype.js
alert( $F('cb1') );

No.973
09/09 14:37

edit

prototype.js
フォーム

GoogleによるJavaScriptホスティング(CDN)を使用する

2009年からGoogleが有名なJavaScript(jQuery , prototype.js 等)のホスティングを開始しています。

もちろん運用で使用してもいいのですが、ちょっとしたテスト等には確実に使えます。

使用方法( 最新のjQueryを呼び出す )

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

使用方法(jQuery UI を呼び出す)

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>


使用方法(swfobjectを呼び出す)

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>

使用方法(prototype.jsを呼び出す)

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js"></script>

その他貼りつけソースコードをコピーするサイト

http://scriptsrc.net/

No.795
04/05 17:35

edit

Google
jQuery
prototype.js

jQuery でのフォーム操作

● フォームの種類を判別する( 例 : checkbox か radioか)

alert( $('#hoge').prop('type') );

● 1行テキストエリア(id="hoge")の値を取得する

<input type="text" name="hoge" id="hoge" value="999" >
//  jQuery
var v = $('#hoge').val();
// JavaScriptのみ
var v = document.getElementById('hoge').value;

● 1行テキストエリア(id="hoge")へ値('test_string')をセットする

//  jQuery
$('#hoge').val('test_string');

● オプションメニュー(ドロップダウンリスト)(id="hoge")の値

// ◆ jQuery
var v = $('#hoge').val();
var v = $('#hoge :selected').text();

● ラジオボタンの値の取得

var data = $("input:radio[name='my_radio']:checked").val();

● ラジオボタンのチェックを外して未選択にする

	 $( "[name='my_radio']" ).prop('checked', false);

● 単一チェックボックス(id=cb1)の値の取得

<input type="checkbox" id="cb1_id" name="cb1" value="あいうえお">あいうえお
var v = $('#cb1_id:checked').val();      // IDでアクセスする場合
var v = $("input[name='cb1']:checked").val();     // nameでアクセスする場合
alert(v);

● checkboxにチェックがついているかどうかを調べる

true ,false が帰ってきます。

var flag = $("[name=checkbox1]").prop("checked");

● checkboxにjQueryでチェックをつける

<input type="checkbox" id="cb1_id" name="cb1" value="あいうえお">
// name が「cb1」 valueが「あいうえお」のチェックボックスにチェックを付ける
$('input[type="checkbox"][name="cb1"][value="あいうえお"]').prop("checked",true);

// 全てのチェックボックのチェックを外す
$("input:checbox").attr('checked', false);

● フォームをサブミットする

<form id="FM"></form>
 $('#FM').submit();

● (id="input_button")の送信ボタンを押せないようにする

$('#input_button').prop('disabled', true); // 押せない
$('#input_button').prop('disabled', false); // 押せる

● ドロップダウンリスト(class="my_list")を選択できないようにする

$('.my_list').prop('disabled', true); // 押せない
$('.my_list').prop('disabled', false); // 押せる

● フォーム要素一括セレクタ

$(":input")		// 全てのフォーム要素
$(":button")	// 全てのボタン要素

$(":text")		// テキストボックス
$(":password")	// パスワード入力ボックス
$(":radio")		// ラジオボタン
$(":checkbox")	// チェックボックス
$(":file")		// ファイル選択ボックス
$(":submit")	// 送信ボタン
$(":image")		// 画像ボタン
$(":reset")		// リセットボタン

例:全てのフォーム要素にアクセスする

$(":input").each(function(index, el) {
    console.log(el.name);
});
No.666
06/12 12:21

edit

prototype.js
jQuery
フォーム

prototype.js を使わずにDOMオブジェクトのスタイルを取得する

JavaScriptでのスタイルの取得は

prototype.js を使って

Element.getStyle(element, cssProperty)	

ですが、

Prototype.jsを使わず(JavaScriptだけで)行う場合は

var style = element.currentStyle || document.defaultView.getComputedStyle(element, '') 
alert(style.width);

でOKです。

参考:http://d.hatena.ne.jp/amachang/20070611/1181554170

No.586
12/05 13:22

edit

prototype.js

jQuery , prototype.js 用「ツールチップ(吹き出し説明)」表示ライブラリ

「ツールチップ」とはオンマウス時に表示される画像やテキストのことです。

Windows IEで画像の上にマウスを置いてしばらく待つとALT属性が見えるというアレですね。

これを簡単に実装するライブラリを紹介。jQuery、prototype.js プラグインメインで探してみました。

■ script.js ( prototype.js jQuery不必要 )

http://www.leigeber.com/2008/06/javascript-tooltip/

・おすすめ

・ツールチップがフェードして現れます

■ cooltips ( 要prototype.js , script.aculo.us )

http://okonet.ru/projects/tooltips/index.html

・フェードエフェクトで出現するツールチップ

・ツールチップ枠のデザインはあらかじめ用意されたものを使用することになりそう…。

■ jTip A jQuery Tool Tip ( 要 jQuery )

http://www.codylindley.com/blogstuff/js/jtip/

・Ajaxで動的にツールチップの中身を読み込んで表示します。

・日本語テキストを扱うにはハックする必要がありそう…。

・ツールチップ枠のデザインはあらかじめ用意されたものを使用することになりそう…。

■ jQuery plugin: Tooltip ( 要 jQuery )

http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/

title属性やファイル名をツールチップとして表示させるというライブラリ。

オンマウスになった瞬間に表示されます。

使い方

<script type="text/javascript" src="jquery.tooltip.pack.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.tooltip.css" >
<script>
jQuery('img').tooltip({
    delay: 0, 
    track: true ,
    showURL: false
});
</script>

オプション

http://docs.jquery.com/Plugins/Tooltip/tooltip#toptions


その他 jQueryライブラリはこちらで取り上げられてます

http://coliss.com/articles/build-websites/operation/javascript/356.html

No.564
08/01 10:19

edit

jQuery
prototype.js

jQuery html()メソッドと DOM.innerHTML の違い

例えば id="hogehoge" の中身を書き換えるには

■ prototype.js + DOM の場合

var mytext='aiueo';
$('hogehoge').innerHTML=mytext;

■ jQueryの場合

var mytext='aiueo';
j$("#hogehoge").html(mytext);

と書けますが、このとき

var mytext=0;
$('hogehoge').innerHTML=mytext; // 0 が表示される
j$("#hogehoge").html(mytext); // 何も表示されない

という違いがあるようなので注意!

No.553
05/27 15:37

edit

prototype.js
jQuery

prototype.js のフォームシリアライズ(Form.serialize)をテストする

prototype.js の便利な機能に

Form.serialize('フォームのid名前');

というのがありますが、これをテストしてみます。(↓添付ファイルをダウンロード後、prototype.jsを読み込ませて実行のこと)

実行してみてわかることは

<textarea name="text" rows="3" id="text_id">bbb
bbb
bbb
</textarea>

のところは

text=bbb%0Abbb%0Abbb%0A

という値が帰ってくるということ。調べたとろ

  • htmlファイルの改行コードが「 LF 」「 CR+LF 」「 CR 」いずれの場合も %0A になる。
  • id ではなく name の値でシリアライズされる。

という事みたいです。

別ウィンドウのフォームをシリアライズするには。。。

別ウィンドウの DOM document インターフェイスは

var parent_document = window.opener.document

とすると取得できます。(openerの document を取得)

添付ファイル1
No.551
01/11 20:34

edit

添付ファイル

prototype.js

window.onload 前でも DOM 処理が可能なら通知してくれる domready.js

JavaScriptでDOM操作を行うときはDOMツリーの完成を待ってから処理を行う必要があるため

window.onload を待って処理を行う必要があります。

しかし window.onload は全てのファイルの読み込み完了時に発生するイベントなので、DOMツリーの完成だけを待っている場合画像の読み込み等も待たなくてはならず、無駄が生じます。

そこでDOMツリーの完成を待つイベントを発生させるライブラリ domready.js ↓

[window.onload 前でも DOM 処理が可能なら通知してくれる domready.js - METAREAL](http://weblog.metareal.org/2007/07/10/domready-js-cross-browser-ondomcontentloaded/)

domready.js 記述方法

Event.domReady.add(function() {
       alert('DOMツリーの読み込みが完了しました');
});

ちなみに jQuery では $(document).ready() で実装されています。

$(document).ready(function(){
       alert('DOMツリーの読み込みが完了しました');
});

jQueryで $(window).load() と同じ動作をさせる

jQuery.event.add(window, "load", function(){
       alert('全てのデータの読み込みが完了しました');
});

YUIでは onDOMReadyで実装されています。

YAHOO.util.Event.onDOMReady( alert('DOMツリーの読み込みが完了しました') );

prototype.jsでは Version 1.6以降 で contentloaded というメソッドで実装されています

document.observe('contentloaded', function() {
    alert('DOMツリーの読み込みが完了しました');
});

MooTools では domready イベントで実装されています

window.addEvent('domready', function() {
    alert('DOMツリーの読み込みが完了しました');
});
No.550
07/17 13:20

edit

DOM
jQuery
prototype.js
YUI

入力文字数によってテキストフィールド<textarea>のサイズを変える

A. jQueryを使用してテキストエリアを動的に変更する。【jquery.elastic.js】

http://www.unwrongest.com/projects/elastic/

$(document).ready(function(){
    // 読み込み時にリサイズ
	$('textarea#my_text_area').elastic();
    // クリック時にリサイズ
	$('textarea#text_name').bind("click", function(){
	  $('textarea#text_name').elastic();
	});
});

B. jQueryを使用してテキストエリアを動的に変更する。【autoresize.jquery.js】

http://james.padolsey.com/javascript/jquery-plugin-autoresize/

<script type="text/javascript" src="autoresize.jquery.js"></script>  
<script type="text/javascript"> 
$(document).ready(function(){
	$('textarea#my_text_area').autoResize();
});
</script>

C. prototype.js を使用してテキストエリアを自動的に変更する。

http://jroller.com/page/rmcmahon?entry=resizingtextarea_with_prototype

D. jQueryを使用してテキストエリアを動的に変更する。【jquery.autogrow-textarea.js】

http://javascriptly.com/2008/09/quick-useful-jquery-plugins/

ダウンロード:

http://github.com/jaz303/jquery-grab-bag/blob/master/javascripts/jquery.autogrow-textarea.js

$(document).ready(function(){
  $('textarea#mytextarea').autogrow();
});
No.520
04/28 11:51

edit

prototype.js
jQuery

jQuery と prototype.js を同時に使う。($(); のコンフリクト回避)

jQueryとprototype.js を同時に使いたい場面がまれにあります。

そのとき

$('id_name'); //prototype.js
$('#id_name'); //jQuery

といった書式を jQuery, prototype.js 共に持っているのですが、その動作(書式や戻り値)が違います。

例えば戻り値の場合、

  • prototype.js:DOMオブジェクトを返す
  • jQuery:jQueryオブジェクトを返す

という違いがあります。

そこで jQueryとprototype.jsを同時に使いたい場合は jQueryの $(); を違う名前に変更して使います。

jQuery.noConflict();
var j$ = jQuery;

2行を追加します。

こうすることによって

// jQuery
jQuery('#id_name');
j$('#id_name');
//prototype.js
$('id_name');

として使用できます

No.499
01/13 15:34

edit

jQuery
prototype.js

prototype.js を使ってイベントを登録する。

javascript 実行イベントを毎回 <onload="testfunc();">みたいに入力するのは面倒なので

prototype.js を使って登録する。

Event.observe(window, 'load', testfunc, false);

又は無名関数を使うとこのように書ける

Event.observe(window, 'load', function(){
   alert('test');
});

書式は

Event.observe( 追加する要素 , イベント , 関数 , 段階 );

です。


No.461
09/08 12:46

edit

prototype.js

ある要素にCSS、スタイルシートプロパティをJavaScriptでセットする

■ 1. prototype.js を使います

id="test" な要素に プロパティを追加します。

  Element.setStyle('test', 
  { 
	"font-size" : "x-small" ,
	"line-height" : "20px"
  });


■ 2. prototype を使わずに記述します。

http://bmky.net/text/note/javascript-css.html


No.425
11/15 10:48

edit

prototype.js

htmlページ内のdiv のX,Y座標位置を取得する

■ ライブラリ bytefx を使用する

http://www.devpro.it/bytefx/

<script type="text/javascript" src="../js/lib/bytefx.js"></script>
objX = bytefx.$position(document.getElementById('ID名')).x;
objY = bytefx.$position(document.getElementById('ID名')).y;

で取得できます。便利。

■ prototype.js を使う。

1.6系
var offset = $('elementID').positionedOffset()
alert ( offset ); // offsetLeft, offsetTopが入った配列

1.5系
var off set = Position.positionedOffset()
alert ( offset ); // offsetLeft, offsetTopが入った配列

■ yui(Yahoo! User Interface Library)を使用する方法はこちら

http://www.openspc2.org/JavaScript/Ajax/Ajax_study/chapter81/013/index.html

yui を使うとかなり簡単に座標位置を取得できます。

<script src="js/yahoo.js" type="text/javascript"></script>
<script src="js/event.js" type="text/javascript"></script>
<script src="js/dom.js" type="text/javascript"></script>

でyuiライブラリを読み込んでおいて

position = YAHOO.util.Dom.getXY("myBox");
alert( position );

で取得できます。

ただし Windows版IE は top,left 共に2pxずつ多めに取得されてしまいますので、

ブラウザ判別をして 2px 引いてあげる必要があります。

また座標位置が正確に取得できないことも多々ありますので注意

参考:ghostbass1.4β - 要素の位置を取得する(正解?)


No.424
03/16 14:04

edit

prototype.js
YUI

jQuery, prototype.js でラジオボタンの値を取得する

jQueryでは次のように記述します

// <input name="myform" type="radio" value="yes" />の値を取得
val = $("input:radio[name='myform']:checked").val();

prototype.js では選択されたラジオボタンの値を取得する方法がないみたい。。。

なので↓のようにする

// フォーム name="FM"  ラジオボタン name="radio_flag" の値を取得する 
val = Form.serialize($(FM)).toQueryParams()['radio_flag'];

■ prototype.js を使わない方法

// ラジオボタン name="my_radio" の値を取得
function getRadio() {
    var radioGroup = document.forms[0].my_radio;
    for (i=0; i<radioGroup.length; i++) {
        if (radioGroup[i].checked == true) {
            return radioGroup[i].value
        }
    }
}
No.241
02/12 17:45

edit

prototype.js
jQuery

prototype.js

prototype.js解説ページ( 最新マニュアル日本語訳)

prototype.js v1.5.0 の使い方

メソッドリスト表

Prototype Dissected - Snook.ca

Scripteka

Scripteka :: Prototype extensions library

No.18
11/15 10:53

edit

prototype.js