新しくブログを開設しました。

Webエンジニアがデザイナーになってみる。


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

新しくブログを開設しました。

Webエンジニアがデザイナーになってみる。


http://www.jsvalidate.com/
JSvalidate

これを使うことにより、フォームに入力された値をリアルタイムにチェックすることができる。

数字以外のものを入力してはいけないときは、これを使うことにより文字列を入力したときにエラーメッセージを表示させることができるのだ。

実際に表示させてみよー

といっても使うのは簡単です。

上記URLからJAvalidateをダウンロードします。

次に

scriptaculous/lib/prototype.js
scriptaculous/src/scriptaculous.js
jsvalidate.js

をHTML上でロードします

あとは


<form name="query" method="get" action="/demo/">
  search:<input type="text" name="search" class="jsrequired">
  <input type="submit" value="find" />
</form>


のようにHTMLで表示するだけ

以下にサンプルを作成しました。

JSvalidateのサンプルだよー

フォームを選択して何も入力しないでカーソルをはずすかボタンを押下してみると・・・?

でてきます

エラーメッセージが!!

英語かよっ!w

みたいな

テーマ:JavaScript - ジャンル:コンピュータ

新しくブログを開設しました。

Webエンジニアがデザイナーになってみる。


今回のAjaxライブラリdojo.jsによる機能はー

要素の移動

ってことで、ボタンクリックで要素が移動しちゃうってものを作りました。

これまた簡単で初歩みたいです。

以下のfunctionにより移動を実装します。
これも簡単でdojo.fx.slideToを使っているだけです


dojo.addOnLoad(function() {
animation = dojo.fx.slideTo({
node: "slideto",
left: 300,
top: 300,
unit: "px",
duration: 500
});
});



そして実装したfunctionを動かすために
play()で実行しています

function slideTo() {
animation.play();
}



本機能のサンプルは以下からどうぞ
要素が移動しちゃうます

テーマ:dojo.js - ジャンル:コンピュータ

新しくブログを開設しました。

Webエンジニアがデザイナーになってみる。


今回はdojo.jsのAjaxライブラリを使って

「ワイプアウト」「ワイプイン」を作ってみました

初級編だね

以下のfunctionを呼び出し、ワイプインとワイプアウトを実装します。
dojo.fx.wipeInってのとdojo.fx.wipeOutってのが用意されてるんでこれを使うだけでok

dojo.addOnLoad(function() {
 dojo.style("wipein", "visibility", "hidden"); // 要素を隠す

 animation1 = dojo.fx.wipeIn({
  node: "wipein",
  duration: 500
 });

 animation2 = dojo.fx.wipeOut({
  node: "wipeout",
  duration: 500
 });
});



そして次に実装したfunctionを
play()で実行するfunctionです

/* ワイプイン */
function wipeIn() {
 animation1.play();
}


/* ワイプアウト */
function wipeOut() {
 animation2.play();
}


これで実行することができます

例としては以下のサイトにサンプルがありますのでよかったらどうぞ。

ワイプイン/ワイプアウトのサンプル


なぜか今回は2つ実装できました。
前回のやつができない理由がわからないですー

テーマ:dojo.js - ジャンル:コンピュータ

新しくブログを開設しました。

Webエンジニアがデザイナーになってみる。


フェードインとフェードアウトを実装してみました。

簡単です
funtionで以下を呼び出します

var animation1;
animation1 = dojo.fadeIn(
{
node: "fadein",
duration: 1000
});
animation1.play();


dojo.fadeInでフェードインを実装し
animation1.play();で実装したフェードインを実行します。



しかし、ここで問題


問題1


フェードインを2箇所にはりつけたらはじめの1箇所しか実行されない。。。


問題2


フェードアウトが実行されない。。。



以下のURLをみて原因わかりましたら誰か使えない自分にコメントください><

http://smileboys.fc2web.com/WebUtility/ajax/dojo/dojo002.html

テーマ:dojo.js - ジャンル:コンピュータ

新しくブログを開設しました。

Webエンジニアがデザイナーになってみる。


Ajaxライブラリの「dojo.js」

使ってみました。

とりあえず使ってみたってことで

使用してるブラウザを調べるスクリプト

ブラウザチェック

functionで以下の条件を呼び出してます

if (dojo.isIE > 0) {
dojo.byId("result1").innerHTML = "お使いのブラウザはInternet Explorerです。";
} else {
dojo.byId("result1").innerHTML = "お使いのブラウザはInternet Explorerではありません。";
}


dojo.isIEでIEであるかチェック。
それだけです
他のブラウザも同じようにチェックしてます。

テーマ:dojo.js - ジャンル:コンピュータ

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