top


総投稿数 本 
no_

スポンサーサイト

 --------
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
カテゴリ :スポンサー広告 トラックバック(-) コメント(-)
no_517

script.aculo.us:ははは。これを入れて試してみたかったのだ ・・・ 【JavaScript】

 2008-12-02
 JSのライブラリにはいろいろあるけれど
script.aculo.us
これ、面白いねぇ。

下記に利用例・参考例が出ているけれど
こういうのとても楽しい。
 (意味の無い遊びはそれほど興味ないけれど
  これには、ときめいた)

(下記の作例のように)
・フォーム入力チェックで
  入力なければ(エラーなら)
  「テキストボックスを震わせる」なんて!
 楽しいじゃないか!

エラーでブルブル!! JavaScriptでおもしろフォーム
 ( by ASCII.jp )
 で題材にされている・・・

 何にも入れないで、
 [ Go! ] すると・・・!



 さぁ、これをこのブログに入れてみよう・・・
 ※そのために、先回
  ・Jquery.js が入っているこのブログに 加えて
   Prototype.js を入れたかったのだ。

 さぁどうなった!?
 さて、その顛末は・・・
 ◎script.aculo.usを組み込んで少し、遊ぶ

 追記に ▼

FC2ブログランキングにほんブログ村 IT技術ブログ Webサイト構築へブログ王ランキング人気ブログランキング人気ホームページランキングへ


more さぁどうなった!?
  ・・・ と、その前に ・・・

/# ---------------------------------------------- #/
 ■(実は)先回の
  Prototype.js がうまく入らなかった件
  > 解決しました。

  ・おかしい原因は、(やはり)
   Jquery.js と Prototype.js のコンフリクトだった!

  こちらで、情報いただいた。
  ・jQuery と prototype.js を同時に使う。($(); のコンフリクト回避)
 ( by flat memo )
  ・jQuery.noConflict
 ( by mintsuku )
  ・prototype.jsと同時に使うには
 ( by jQuery 1.2.6 日本語リファレンス )
 ありがとうございました。

  要は、名前空間に設定した変数名を一度クリアし
  違う名前にセットし直して、以後はそれを使う・・・と。
  気をつけて使う必要があるが、
  これしかないんだろうな。

  ・組込み
<script type="text/javascript">
<!--
jQuery.noConflict();
var j$ = jQuery; // 頭にjが入る形に置き換え
-->
</script>


  ・注意
   □まず、prototype.js を先に組込み
   □次に、jquery.js を組み込み 上記を実施
   □それ以後、
    (今まで、 $() で指定していたものを
     j$() として 利用する)
    ・・・と。

  ・で、私は前に
   jquery を利用する「thickbox.js」を組み込んでいるから
   このファイルも中を開いて すべて j$()の形式に変更
/# ---------------------------------------------- #/



 さて、
 本題の「script.aculo.us」の実装・・・

 ・問い合わせ(フォームメール)は、
  fc2 が用意してくれたものなので、
 ・上部ヘッダーの「検索ボックス」に組み込む

**************************************************
script.aculo.usを組み込んで少し、遊ぶ
**************************************************

【作業記録】
最新版をダウンロード
・scriptaculous-js-1.8.2.zip
 (おぉそうだ。ライセンス気にしなくては・・・
  この間、ライセンスについて
  まとめたばかりだった。このソースは
  「MIT License」だ。
  
  ・MIT License( by WikiPedia )
   ・誰でも無償で無制限に扱って良い。
   ・但し、著作権表示および本許諾表示を、
    ソフトウェアのすべての複製または重要な部分に記載
   ・コピーレフトでは無く、
    オープンソースであるか無いかに関わらず再利用を認めている。
   ・作者または著作権者は、
    ソフトウェアに関してなんら責任を負わない。

   ※かなり、緩いライセンスなのですね。
    ありがとうございます。


◆組込み
 ※上記のダウンロードに Prototype.js も同梱されている(libフォルダ)
  srcフォルダ のeffects.jsとあわせ・・・
<script type="text/javascript" src="**********/prototype.js"></script>
<script type="text/javascript" src="**********/effects.js"></script>


◆「検索ボックス」の変更
 ※上記
  エラーでブルブル!! JavaScriptでおもしろフォーム の作例
  では、
<form action="./" method="post" id="search" name="search" onSubmit="return formCheck()">

 のような使い方を示されていたが、私の場合は、フォームの中で
 別目的のチェックボックスがあり、うまく作用しなかったので、
 submit のボタンの方を
<input type="button" value=" 検索 "  onClick="JavaScript:formCheck()" />

 として

 受けるJavaScriptの関数を
function formCheck(){
var stat = Field.present('q1');
if(stat){
var form = this.document.forms['search'];
form.submit();
}else{
$('q1').visualEffect("Shake");
}
}

 とした。

 ■2008年12月02日 AM 11:30
  ようやく、目的達成


 右上(ヘッダー部)の検索ボタンを
 何も入力しないで、押してみてください・・・

 あ~ 楽し。
commentsコメント
comment_post












管理者にだけ表示を許可する
commentトラックバック
トラックバックURL:
http://metaboy.blog23.fc2.com/tb.php/517-c99d4378
ようこそ
Add to Google 創るmetaboy:RSSフィード
My Yahoo!に追加
最新記事のRSS | 問い合わせ

仕事検索、アルバイト検索、依頼仕事の検索ポータル - 仕事検索.COM - www.jobkensaku.com ツクルン

創るmetaboy - WEB創る、サイト創る、何創る - 創ったmetaboy

 

リンク集

 

最近の記事

 

ブロとも申請フォーム
Sponserd by

さくらのレンタルサーバ さくらのレンタルサーバ
大容量・高機能レンタルサーバー heteml 大容量・高機能レンタルサーバー heteml
XREA (ValueDomain)
お名前.com お名前.com
名づけてねっと名づけてねっと
ムームードメインムームードメイン

 

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。