-->
./
<!-- フラ&#65533;ュが見れな&#65533;のためにここに何か書&#65533; --> フラ&#65533;ュがインス&#65533;&#65533;ルされて&#65533;&#65533;たいで&#65533;&#65533;&#65533;

2010年03月31日

Shadowbox.js

Shadowbox.js » Download
 PDFファイルも開けました。しかし、Railsでは問題が発生、Ajaxで読み込んだ部分では機能してくれないのです(lightbox.jsだと大丈夫)。lightbox.jsとも干渉を起こし、両立できません。JavaScriptを読み込むタイミングに問題があるのでしょうか。ヘッダで次のように読み込んでいます。外部JavaScriptファイルで、いろいろな方法を試してみたのですがだめでした。
 LightWindow も試したのですが、それ自体は問題なく使えたもののprototype.jsと一部干渉を起こしていました。

<link rel="stylesheet" type="text/css" href="../javascripts/shadowbox/shadowbox.css">
<script type="text/javascript" src="../javascripts/shadowbox/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init({
    overlayOpacity: 0.8
});
</script>


shadowbox-pdf_20100331
shadowbox-pdf_20100331 posted by (C)hirono-hideki



Powered by ScribeFire.



posted by hirono at 08:57| Comment(0) | TrackBack(0) | JavaScript

2010年03月29日

[JavaScript]リストボックスの値を取得

リストボックスの値取得と値の比較

 formではsubmitボタンを使うのが常識なのか、なかなか情報がみつかりませんでした。
 意外なことにprototype.jsでは情報を見つけることが出来ず、たぶん標準のJavaScriptのコードを使っているみたいです。
 もっとも$()関数やinnerHTMLは、prototype.jsを読み込んでいないと使えないと思います。

    <div style="float:left">
        <form name="fm1">
        <select name="val1" size="1">
            <option value="Linux">Linux</option>
            <option value="Windows">Windows</option>
            <option value="Emacs" selected="selected">Emacs</option>
            <option value="Vim">Vim</option>
            <option value="テレビ">テレビ</option>
            <option value="音楽">音楽</option>
        </select>
        </form>

        <form name="fm2">
        <select name="val2" size="6">
            <option value="Linux">Linux</option>
            <option value="Windows">Windows</option>
            <option value="Emacs" selected="selected">Emacs</option>
            <option value="Vim">Vim</option>
            <option value="テレビ">テレビ</option>
            <option value="音楽">音楽</option>
        </select>
        </form>

        <button onClick="javascript:disp1();">xxx1</button>
        <button onClick="javascript:disp2();">xxx2</button>
    <script type="text/javascript">
    function disp1() {
        <!--$('xxx1').innerHTML = document.getElementsByName("val1")[selectedIndex].value-->
        $('xxx1').innerHTML = document.fm1.val1.options[document.fm1.val1.selectedIndex].value
    }

    function disp2() {
        <!--$('xxx2').innerHTML = document.getElementsByName("val1")[selectedIndex].value-->
        $('xxx2').innerHTML = document.fm2.val2.options[document.fm2.val2.selectedIndex].value
    }

    </script>


    </div>

    <div id="xxx1" style="clear: both">
        xxx1 &nbsp;
    </div>
    <span id="xxx2"><span>

posted by hirono at 05:08| Comment(0) | TrackBack(0) | JavaScript

2010年03月24日

rtype.js-prototype.js for Rhino

rtype.js - prototype.js for Rhino — ありえるえりあ
Rhinoブーム到来 だそうです。

Rhino絡みのエントリは初回なので軽く説明しておくと、 Rhino とはJavaによるオープンソースのJavaScript実装です。JavaScriptを単体で実行できる他、Javaアプリケーションに組み込んだりもできます。Mozillaがメンテしています。JDKにもバージョン6から同梱されるようになり、OpenOffice.orgでも利用されているようです。ちなみにRhinoという名前はオライリーのサイ本から付けられたそうです。

話は変わって、何年か前にAjaxが流行り出した頃からJavaScriptライブラリが続々と登場しています。もはやデファクトスタンダードと言っても過言ではないprototype.jsを筆頭に、Dojo、Yahoo! UI、ExtJsなど多様な用途の様々なライブラリが利用できるようになり、JavaScriptによるWeb開発はずいぶん容易になりました。一方で、これらのライブラリはあくまでブラウザ組込みのJavaScript処理系での動作を意図しており、RhinoやSpiderMonkeyなどブラウザ以外での動作を念頭に置いたJavaScriptライブラリは見かけません。

というわけで、prototype.jsをRhinoで動くように改造してみました。名付けてrtype.js。昔の某弾幕系シューティングゲームと名前が似ているのは偶然の一致です。多分。

http://sourceforge.net/projects/rtype/

RhinoだとJavaのクラスライブラリ使えるから外部ライブラリいらないじゃん、とかいう突っ込みはなしの方向でお願いします。もともと実用性はあまり重視していなくて、prototype.jsをRhinoで使えたら面白いかな、という発想をそのまま実行に移しただけなのです。rtype.jsの半分はネタでできています。とは言っても、JavaScriptでオブジェクト指向っぽいプログラミングがやり易くなるとか、それなりのメリットはあると思いますが。

機能的な追加はありません。ブラウザ固有の機能(HTML-DOMアクセスとかAjaxサポートとか)を一方的に削っただけです。作業時間の9割は、UnitTestをRhino上で実行できるようにすることに費やしました。

とりあえず公開しましたが、まだUnitTest全部通ってません。ので、バグあります。α版です。人柱版です。

くれぐれも、クリティカルな用途には使用しないで下さい。


 Ubuntu9.10でも
sudo apt-get install rhino
で簡単にインストールできました。インストールの終わりにメッセージが出て、jsというコマンドで起動できることもわかりました。Fedora8のものはバージョンが古いままなのかもしれません。Fedora8とは違い、方向キーでコマンド履歴をさかのぼることもできました。Ctrl+p、Ctrl+nも使えましたが、Ctrl-rでの履歴の検索はできませんでした。

 prototype.jsではRubyに似たpushなどの配列操作の関数が使えるのですが、rhinoではメソッドが未定義だというエラーが出ていました。prototype.jsのファイルを調べるとinspectメソッドもこのファイル内に定義されていました。load関数でprototype.jsを読み込もうとしたのですが、エラーが出て読み込めず、そこで調べて見つけたのがこのサイトのrtype.jsです。エラーもなく読み込め、pushもinspectも使えました。ありがたいことです。



Powered by ScribeFire.

posted by hirono at 02:41| Comment(0) | TrackBack(0) | JavaScript

2010年03月23日

JavaScriptインタプリタ(Rhino)

JavaScript+Java:Rhinoの導入と基本的な利用法 - page2 - builder by ZDNet Japan

  rhinoというものがあると知り、Fedora8のyumでインストールしたのですが、うまく起動しませんでした。jarファイルにクラスパスを通し、
java org.mozilla.javascript.tools.shell.Main

</span>と実行すればよいとのことですが、バージョンの違いからかパッケージ内のパスが違っているのかもしれません。yumでインストールしたものの、コマンド自体が見あたりませんでした。
js.jarというファイルをlocateコマンドで探し、/usr/share/java/js.jarにあったもので試しました。


 他にOpenOfficeのなかに同名のファイルがあったので次のようにすると、うまく起動して使えました。</span>
java -jar /usr/lib/openoffice.org/program/classes/js.jar

F8H:[~]% java -jar /usr/lib/openoffice.org/program/classes/js.jar
Rhino 1.5 release 4.1 2003 04 21
js> help()

Command                Description
=======                ===========
help()                 Display usage and help messages.
defineClass(className) Define an extension using the Java class
                       named with the string argument.
                       Uses ScriptableObject.defineClass().
load(["foo.js", ...])  Load JavaScript source files named by
                       string arguments.
loadClass(className)   Load a class named by a string argument.
                       The class must be a script compiled to a
                       class file.
print([expr ...])      Evaluate and print expressions.
quit()                 Quit the shell.
version([number])      Get or set the JavaScript version number.

js>


 Rubyのirbのようなものを期待したのですが、コマンドを履歴をさかのぼることも出来ないみたいです。あまり高機能ではないみたいで少し残念ですが、手軽にコードを試したり、動作確認ができそうです。



posted by hirono at 04:54| Comment(0) | TrackBack(0) | JavaScript

2010年03月22日

JavaScript のプロトタイプチェイン

JavaScriptのプロトタイプチェインをちゃんと理解する - builder by ZDNet Japan

プロトタイプ
  コンストラクタを用いることで、複雑な初期化ができると紹介しました。しかし、コンストラクタは処理だけでオブジェクトを組立てるため、作られるオブジェクトの全貌がソースコードから見渡しにくくなってしまいます。そこで、 JavaScriptではもうひとつのオブジェクト初期化方法を用意しています。それが、プロトタイプです。

プロトタイプとはオブジェクトの雛型となるオブジェクトのことで、コンストラクタが呼び出される前にあらかじめプロパティを与えることができます。

プロトタイプの定義方法は簡単で、コンストラクタのprototypeプロパティにオブジェクトを格納しておくだけです。格納されたオブジェクトがそのク ラスのプロトタイプになります。例えばリスト7の例を、プロトタイプを使ってリスト8のように書くことができます。

 試してみました。文法がちょっとややこしいですが、:がハッシュのような役割をしているようです。無名関数もJavaScriptでは当たり前のように使われています。functionはEmacs-Lispのlambdaと似ています。

var ValEntry = function(title, val) {
  this.title = title;
  this.val = val;
};

ValEntry.prototype = {
  name: "Blog",
  showTitle: function() {
    alert(this.title);
  },
  showVal: function() {         // function
    alert(this.val);
  },
  showFull: function() {
    alert(this.title + "\n" + this.val);
  }

};

var test1 = new ValEntry("たいとる", "データ");
test1.showFull();
alert(test1.name);




posted by hirono at 21:34| Comment(0) | TrackBack(0) | JavaScript

クロージャを利用したトグル・ボタンの例

第3回 変数の宣言とスコープ − @IT
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head><title>トグルボタン</title></head>
<body>

<form id="form1" runat="server">
  <div>
    <input id="btn" type="button" value="無効" />
  </div>
</form>

<script type="text/javascript">

document.getElementById('btn').onclick = setButtonState();

function setButtonState() {
    var flag = false;
    var btn = document.getElementById('btn');

    return function() {
        flag = !flag;
        this.innerText = flag ? "有効" : "無効";
  };
}
</script>

</body>
</html>


 Firefox3.6で、そのままコピペして実行したのですが、動きませんでした。

posted by hirono at 17:30| Comment(0) | TrackBack(0) | JavaScript

JavaScriptラジオボタン値の取得

ラジオボタン値の取得 - JavaScript Market
現在の背景色:
背景色変更: 標準

<script>
function disp(parts){
   f = parts.form;         //ラジオボタンの値を取得
   color = parts.value;    //取得値を変数colorに代入
   document.bgColor = color;  //bgColor()により背景色を変更
   f.infcolor.value = color;  //テキストフォームに取得値を表示
}
</script>

<form>
現在の背景色:<input name="infcolor" value="#ffffff" size="10"/>


背景色変更:
<!--onClick()により選択時にdisp()に引数を渡す-->
<input type="radio" value="#ffffff" checked onClick="disp(this)"/>標準
<input type="radio" value="#c0c0c0" onClick="disp(this)"/>灰
<input type="radio" value="#0000ff" onClick="disp(this)"/>青
<input type="radio" value="#ff0000" onClick="disp(this)"/>赤
</form>

 こういう方法で、ボタンやリンクを使わずに関数の実行ができるのですね。試していませんが、リストボックスでも同じことができるのかもしれません。いろいろ参考にさせていただきました。同じ名前のname属性を入れることでグループ化され、択一の選択状態になるみたいです。このままだと、選択したボタンすべてにチェックがついたままになっていました。

posted by hirono at 04:03| Comment(0) | TrackBack(0) | JavaScript

JaJavaScriptではブロック・レベルのスコープが存在しない

第3回 変数の宣言とスコープ − @IT
for (var i = 0; i < 10; i++) { // ブロック内の処理 } window.alert(i); // 表示結果は?
 試してみると、結果は10でした。

posted by hirono at 02:24| Comment(0) | TrackBack(0) | JavaScript

[JavaScript]データ型の確認

第3回 変数の宣言とスコープ − @IT
var x = 10;
window.alert(typeof x); // number


posted by hirono at 02:06| Comment(0) | TrackBack(0) | JavaScript

2010年03月21日

JavaScript でヒアドキュメント

JavaScript でヒアドキュメントもどき - 地獄の猫日記

 参考にやってみました。

        var flash_data = <><![CDATA[
             <embed src="http://hirono-hideki-01.sakura.ne.jp/swf/entry_swf_20100130.swf" width="400" height="50">
             </embed>
             <noembed>
                 フラッシュがインストールされていないみたいです。
             </noembed>
        ]]></>;


 Rubyだととても簡単なのですが。

flash_data = <<-END
                  <embed src="http://hirono-hideki-01.sakura.ne.jp/swf/entry_swf_20100130.swf" width="400" height="50">
                          <!-- <embed src="../images/title_you.swf" width="400" height="50"> -->
                  </embed>
                  <noembed>
                                  フラッシュがインストールされていないみたいです。
       </noembed>
END

Powered by ScribeFire.

posted by hirono at 19:34| Comment(0) | TrackBack(0) | JavaScript

2010年03月19日

複数の効果を同時に実行する

Script.aculo.usで実現できる、さまざまな視覚効果(4/5):CodeZine
 同時に複数の効果を表示するには、「Parallel」というものを利用します。これは、引数にあらかじめ用意しておいた効果の配列を同時に実行するものです。例えば、Opacity,Move,Scaleの3つの効果を同時に実行させる場合を考えてみましょう。


posted by hirono at 19:55| Comment(0) | TrackBack(0) | JavaScript

2010年03月18日

Script.aculo.usで実現できる、さまざまな視覚効果(2/5):CodeZine

Script.aculo.usで実現できる、さまざまな視覚効果(2/5):CodeZine
 続いて、イメージのフェードイン、フェードアウトです。これは、それぞれ「Effect.Appear」「Effect.Fade」というメソッドとして用意されています。これらは、それぞれ次のように呼び出します。


posted by hirono at 00:09| Comment(0) | TrackBack(0) | JavaScript

2010年03月13日

LightBoxの使い方とカスタマイズ方法 | CSS Lecture

LightBoxの使い方とカスタマイズ方法 | CSS Lecture
Lightbox JS v2.0は知っている方も多いと思いますが、基本的な使い方とカスタズって言える程ではないですが、Lightbox表示中の「背景の色」「画像周りの色」「ボタン系の画像の変更」の変更の仕方についての解説をしたいと思います。


posted by hirono at 23:43| Comment(0) | TrackBack(0) | JavaScript

[prototype.js]Title:class属性の追加/削除

参考:http://journal.mycom.co.jp/series/prototypejs/005/index.html

<button id="toggle_check" onclick="toggleTest();">show(表示)< /button>
<p id='toggle_text' style='display: none'>
 要素の表示/非表示 - show(表示) / hide(非表示) / toggle(交互)
 状態の確認 - visible
 $( 'demo' ).show(); または Element.show( 'demo' ); など

 要素の表示/非表示は、これら3つのメソッドで行う。toggleは、要素が表示されていればhide()を、表示していなければ
show()を実行する。要素が表示中であるかの確認はvisible()で行う。
 </p>

<style type="text/css">
  .style_01 { width: 400px; padding: 10px; color: green; }
  .style_02 { width: 600px; padding: 25px; color: pink; }
</style>

<button onclick="$( 'toggle_text' ).addClassName( 'style_01' );"> 01スタイルの追加</button>
<button onclick="$( 'toggle_text' ).removeClassName( 'style_01' );"& gt;01スタイルの削除</button>
<button onclick="$('toggle_text').addClassName( 'style_02' );">02ス タイルの追加</button>
<button onclick="$('toggle_text').removeClassName( 'style_02' );"> 02スタイルの削除</button>


posted by hirono at 04:15| Comment(0) | TrackBack(0) | JavaScript

[prototype.js]DOM要素の表示の切り替えUPDATED:2010-03-13_03:40

DOM要素の表示の切り替え UPDATED:2010-03-13_03:40
function toggleTest() {
    $('toggle_text').toggle();

    if (Element.visible('toggle_text')) {
        $('toggle_check').innerHTML = '非表示';
        Element.setStyle('toggle_check',{"backgroundColor" : "#789089", "color" : "#801032"});
    } else {
        $('toggle_check').innerHTML = '再表示';
        Element.setStyle('toggle_check',{"backgroundColor" : "orange", "color" : "red"});
    }
}

posted by hirono at 03:48| Comment(0) | TrackBack(0) | JavaScript

[JavaScript]正規表現でリンクの作成

参考:http://www.site-cooler.com/kwl/javascript/15.htm

ちょっと試してみました。prototype.jsを使っています。

function createLink() {
  var src = "  aaaaaa http://www.google.ne.jp
[url] https://www.nnnn.jp http://yahoo.ne.jp \
             xxxx  eeeeeee xx
http://hhhh.net
PPP";
  text = src.gsub(/(https?:\/\/[^(\s|<)]+)(
|
)?/, '#{1}#{2}');
  $('div7').innerHTML=text;
}

実行結果:brタグが有効になって改行されています。
aaaaaa http://www.google.ne.jp
[url] https://www.nnnn.jp http://yahoo.ne.jp xxxx eeeeeee xx
http://hhhh.net
PPP

 有効なリンクは、googleだけです。yahooも以前はこのURLでつながったような気がするのですが、試してみると無効でした。

 後方参照以外はRubyと同じ正規表現が使えるみたいです。
a http://www.google.ne.jp
[url] https://www.nnnn.jp http://yahoo.ne.jp              xxxx  eeeeeee xx
http://hhhh.net
PPP"
irb(main):004:0> text = src.gsub(/(https?:\/\/[^(\s|<)]+)(
|
)?/, '#{1}#{2}');
irb(main):005:0* text
=> "  aaaaaa \#{1}\#{2} [url] \#{1}\#{2} \#{1}\#{2}              xxxx  eeeeeee xx
\#{1}\#{2} PPP"
irb(main):006:0> text = src.gsub(/(https?:\/\/[^(\s|<)]+)(
|
)?/, '\1\2');
irb(main):007:0* text
=> "  aaaaaa http://www.google.ne.jp
[url] https://www.nnnn.jp http://yahoo.ne.jp              xxxx  eeeeeee xx
http://hhhh.net
PPP"
irb(main):008:0> 



posted by hirono at 02:37| Comment(0) | TrackBack(0) | JavaScript

2010年03月12日

Event.observe - イベントを監視

Event.observe - イベントを監視 - prototype.jsリファレンス
14 // click 以外に次のイベントがハンドリング可能
15 // blur(フォーカスを失った)
16 // change(変更があった)
17 // click(クリックされた)
18 // dblclick(ダブルクリックされた)
19 // error(エラーがあった)
20 // focus(フォーカスされた)
21 // keydown(キーがダウンされた)
22 // keypress(キーが押された)
23 // keyup(キーがアップされた)
24 // load(読み込まれた)
25 // mousedown(マウスダウンされた)
26 // mousemove(マウスが動いた)
27 // mouseout(マウスが外れた)
28 // mouseover(マウスオーバーした)
29 // mouseup(マウスがアップされた)
30 // reset(リセットされた)
31 // submit(サブミットされた)
32 // unload(アンロードされた)


 次のように使ってみました。情報がまとまっていて助かります。
<div id='div1' class='cls1'>----DIV_1----</div>
<div id='div2' style="display: inline-block">----DIV2----</div>
<div id='div3' class='cls_2'>----DIV_3----</div>
<div id='div4' class='cls_css'>----DIV_4----</div>
<div id='div5'>----DIV_5----</div><span>----span----</span>
<div id='div6'>----DIV_6----</div>

<script type='text/javascript'>

function insertText(){
  new Insertion.Before("div5", "サンプル");
}

function timesTest(){
  var n = 3;
  n.times(function(val){
      new Insertion.Before("div5",val +  "サンプル" + "<br />");
      });}

function gsubTest(){
  var str = "日本語の文章、日本国憲法。日本の四季 日本ンのサンプル";
  str = str.gsub(/日本(の|ン)(\W{2})/,'#{2}(Japan)#{1}');
  new Insertion.Before("div6", str);}
  //----span---- 日本語の文章、日本国憲法。四季(Japan)の のサ(Japan)ンンプル

function stripTagsTest() {
  var html="<div style='display: block'>日本語の文章</div>".escapeHTML();
  var escape = html.unescapeHTML();
  var text = escape.stripTags();
  new Insertion.Before("div5", "HTML---> " + html);
  new Insertion.Before("div5", "<br/>ESCAPE---> " + escape);
  new Insertion.Before("div5", "<br />TEXT--->" +  text + "<br />");
}

Event.observe('div1', 'click', gsubTest);
Event.observe('div2', 'mouseover', function(){Element.setStyle('div2',{"backgroundColor" : "pink"});});
Event.observe('div2', 'mouseout', function(){Element.setStyle('div2',{"backgroundColor" : "white"});});
</script>
    <a href="javascript:timesTest()">timesTest</a>
    <a href="javascript:insertText()">insertText</a>
    <a href="javascript:gsubTest()">gsubTest</a>
    <a href="javascript:stripTagsTest()">stripTagsTest</a>
    <a href="javascript:testStyle()">Style</a>


Powered by ScribeFire.

posted by hirono at 21:01| Comment(0) | TrackBack(0) | JavaScript

Prototype.jsとはなにか

【連載】いまからはじめるPrototype.js (1) Prototype.jsの概要と$で始まるメソッド | エンタープライズ | マイコミジャーナル
Prototype.jsは、Sam Stephenson氏を中心とするチームによって開発されているAjax対応JavaScriptライブラリだ。単体でもAjaxian.comの2006年と2007年の調査で最もよく知られたAjaxフレームワークに選ばれるほどの人気を得ているが、実はWebアプリケーション・フレームワークRuby on Railsのプロジェクトで開発されているプロダクトであり、同フレームワークに同梱されているため、Ruby on Rails経由で使用されるケースも多い。

ライブラリはMITライセンスで公開され、ドキュメントはクリエイティブ・コモンズ(Creative Commons)ライセンスのAttribution-Share Alike 3.0で公開されている。詳細はライセンスのページで確認していただきたい。


 わかりやすく参考になりました。

 次のように試してみました。
<div id='div1' class='cls1'>----DIV_1----</div>
<div id='div2'>----DIV_2----</div>
<div id='div3' class='cls_2'>----DIV_3----</div>
<div id='div4' class='cls_css'>----DIV_4----</div>
<div id='div5'>----DIV_5----</div><span>----span----</span>
<div id='div6'>----DIV_6----</div>

<script type='text/javascript'>
  function invoke() { //HTMLタグ(DOMオブジェクト
    $('div2', 'div4', 'div6').invoke('toggle');
  }

  function css() {  //CSSセレクタ
    $$('div[class^="cls"]', 'div[id^="div6"]').invoke('toggle');
  }

  function Aspan() {
      var elements = document.getElementsByTagName("span");
        alert(elements.length + "個の要素が見つかりました");
      $A(document.getElementsByTagName('span')).invoke('toggle');
  }

  function testRange() {
    var kana = $R('ア', 'ン');
    var str = "";
    kana.each( function(val, idx){
      str += val;
    });
    alert(str);
  }

  function testStyle(){
    $w('div1 div2 div3').each( function( tagId )  {
       $(tagId).style.color = 'red';
  } );
  }


</script>
    <a href="javascript:invoke()">invoke</a>
    <a href="javascript:css()">css</a>
    <a href="javascript:Aspan()">Aspan</a>
    <a href="javascript:testRange()">Range</a>
    <a href="javascript:testStyle()">Style</a>


posted by hirono at 12:13| Comment(0) | TrackBack(0) | JavaScript

2010年03月07日

view_entry_html/75#RJSでDOM要素を操作

page.select('div#d1 span.s1').each do |value|
     value.toggle();
end


http://api.rubyonrails.org/classes/ActionView/Helpers/PrototypeHelper/JavaScriptGenerator/GeneratorMethods.html
を参考にしました。


RJSでDOM要素を操作
RJSでDOM要素を操作 posted by (C)hirono-hideki

Powered by ScribeFire.

posted by hirono at 21:16| Comment(0) | TrackBack(0) | JavaScript

Title: prototype.jsでCSSのスタイルを変更

http://kennsu.jp/2006/10/prototypejs.html
を参考にしました。

 jQueryは取り除き、使っていません。参考にしたところとは違って、jQueryと同じくハイフンを除いて次の文字を大文字にする必要がありました。動かなかったので試したところ、これでうまくいきました。


HTMLの一部(Railsなのでerbテンプレート)
  
  ウィンドウ下中央部

    aaaaaaaa
    JavaScript
    bbbbbbbb
    JavaScript
    cccccccc
    JavaScript
    dddddddd
    JavaScript



function setjsStyle(){
  Element.setStyle('js_title', 
  {
"fontSize" : "30pt", "color" : "green"
  });
}


test1

Powered by ScribeFire.




prototype.jsでCSSのスタイルを変更
prototype.jsでCSSのスタイルを変更 posted by (C)hirono-hideki

posted by hirono at 20:48| Comment(0) | TrackBack(0) | JavaScript

prototype.js v1.5.0 の使い方

prototype.js v1.5.0 の使い方
それは何?

prototype.js は Sam Stephenson によって書かれた JavaScript ライブラリです。 この熟考の上記述された標準に準拠したコードは、Web 2.0 において特徴となるリッチでインタラクティブなウェブページを制作する際の重荷を、あなたの肩から取り去ってくれるでしょう。

もしこのライブラリを使ったことがあるなら、充実したドキュメントがこのライブラリの売りではないことに気がついたはずです。 私は他の開発者と同様に、ソースコードを読み、試行錯誤しながら prototype.js を理解しました。 自分が学んでいる間にメモを取り、それを他の人たちと共有することは価値があるのでは、と考えたのです。

加えて、このライブラリによって提供されているオブジェクト、クラス、関数、拡張機能についての 非公式リファレンス も提供しています。

ここで提供する例とリファレンスを読んでいると、プログラミング言語 Ruby に詳しい開発者は Ruby のビルトインクラスと、このライブラリが実装している拡張が非常に似ていることに気がつくかもしれません。

目次


Powered by ScribeFire.

posted by hirono at 16:45| Comment(0) | TrackBack(0) | JavaScript

jQuery/CSSセレクタタイプ

jQuery入門(その1) - japan.internet.com デベロッパー
:フィルタ $("input:button") コロン(:)によってクエリにフィルタが適用されます。jQueryは3つのCSSフィルタといくつかのカスタムフィルタをサポートしています。
例: :not、:button、:visible、:hidden、:checked、:first,nth-child(1)、:has、:is、:contains、:parent

[属性] $("p[id^=pk_"] 要素の属性を選択します。
= 等価の文字列
^= ?で始まる
$= ?で終わる
*= ?を含む


posted by hirono at 04:20| Comment(0) | TrackBack(0) | JavaScript

2010年03月01日

jQuery Enchant でエフェクト - fx.js

jQuery Enchant でエフェクト - [JavaScript]All About
Enchant
Enchantは、直訳すると「魔法をかける」「魅惑する」といった意味ですが、主にエフェクト関連のライブラリです。

 リンク切れになっていましたが、fx.jsは
http://github.com/github/jquery/commit/2c25616a58747c0149fbb86bf882cd01d820c157#diff-21
にありました。



Powered by ScribeFire.

posted by hirono at 17:21| Comment(0) | TrackBack(0) | JavaScript

2010年02月28日

prototype.jsと同時に使うには - jQuery 1.3.2 日本語リファレンス

prototype.jsと同時に使うには - jQuery 1.3.2 日本語リファレンス
日本でも人気の高いprototype.jsのようなライブラリを、既に用いてサイト構築をしている人も多いかと思います。
しかし、新たにjQueryも試してみたい。あるいはjQueryで作られたライブラリを導入してみたい...というような場合、最も問題になるのは「$」関数の扱いです。

prototype.jsにおいて、$は"document.getElementById"に代わるもので、非常によく使われます。
一方でjQueryでは核であるjQueryオブジェクトのことで、これを使わずにjQueryのコードを書くことは、ほぼ無いでしょう。

これらを共存させるには、jQueryの"noConflict"を使います。


Powered by ScribeFire.

posted by hirono at 16:29| Comment(0) | TrackBack(0) | JavaScript