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)を使用する

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

https://developers.google.com/speed/libraries/


### 使用方法( jQuery 2系を呼び出す )

```

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

```


### 使用方法( jQuery 3系を呼び出す )

```

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

```

No.795
06/22 18:50

edit

Google
jQuery
prototype.js

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】

https://github.com/janjarfalk/jquery-elastic

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

● B. テキストエリアを動的に変更する。【autoresize.jquery.js】

https://github.com/jackmoore/autosize
jQueryを使用したくない場合はこちら

// from a NodeList
autosize(document.querySelectorAll('textarea'));

// from a single Node
autosize(document.querySelector('textarea'));

// from a jQuery collection
autosize($('textarea'));

● C. 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
12/13 14:34

edit

prototype.js
jQuery

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