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

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


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

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

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


無題
上記ホームページは自分が作成しているホームページ[Web@Youtility]です。

サイドにメニューを置いた2カラム構造です。

しかし、このメニュー構造には欠点があります。

それは左に常にメニューを置くことで、メニューにデータが追加された場合

全ページに修正をかけなければいけないというところです。

そこで自分はJavascriptを使用して、メニューを別管理しようと考えました。

別ファイルに記述し、更新する場合は1ファイルだけで良いという方法です。

それを簡単に実現する方法が「JQuery」です。


$(document).ready(function(){
$("#treeNav").load("contents/menu.html");
});


このようにJavascriptを記述するだけで実現できます。

しかしここで、問題が起きました。

ローカルでは正常に動いてみましたがFC2サーバにアップしてみると。。。

IE7では正常に動作しました

しかしFireFoxでは、、、一瞬表示された後サイト全体が消えるという現象がおきました。

原因はわかりませんので他の方法を考えることにしました。
(おそらくCSSをどうにか修正すればできるんじゃないかと・・・むり?)

そこで見つけたのがライブラリの基盤「protortypt.js」

これを使用して

<script type="text/javascript">myInclude("menuId","/contents/menu.html");</script>

と記述しメニューを別管理に成功しました。





遅くなりましたがここからが本題です

【JQueryとprototype.jsの競合問題について】

Javascriptサンプル一覧

このページでは「Javascriptのサンプル一覧」を紹介しています。

ここでJQueryのタブを使用しようと考えました

タブを使用し、説明、ソース、サンプルと分けようと考えました。


ここで問題が発覚しました。


タブを実装してもタブ可されませんでした。。。

原因はメニューに使っている「prototype.js」

これとJqueryに競合問題が存在するらしいのです。

【原因】
両方にしようされている「$()」

詳しい原因はそのうち調べますがw

お互い別の目的で同じものを使用しているために競合問題がおきるそうです。



【解決方法】
<script src="../js/prototype.js" type="text/javascript"></script>
<script src="../js/jquery-1.2.6.js" type="text/javascript"></script>
<script src="../js/ui.core.js" type="text/javascript"></script>
<script src="../js/ui.tabs.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
jQuery.noConflict();
-->
</script>


1.prototype.js→JQueryの順番で記述する
2.jQuery.noConflict(); を使用して競合問題の解決
3.使用するJQueryのスクリプトの「$()」を「jQuery()」に変更する

以上3つの手順で解決することができました。


スポンサーサイト

テーマ:インターネット - ジャンル:コンピュータ

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

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


マークアップを用いないDijitプログラミング

http://journal.mycom.co.jp/series/dojo/004/index.html
上記URLからお勉強


マークアップを用いない = JavaScriptのみを用いる
ということ。



ボタンウィジェットでいうとー

■マークアップの場合


<div id="button" dojoType="dijit.form.Button" label="クリック!></div>


■JavaScriptの場合

var elem = dojo.byId("button");
var button = new dijit.form.Button({label:"クリック!"}, elem);


マークアップの方がすっきりしているのでいいのではないかと感じる。
しかーし
JavaScriptによってウィジェットを生成・操作できるようになると
「任意のタイミングでウィジェットを生成できる」
「ウィジェットの振る舞い(イベントハンドラなど)も、動的に差し替えることができる」
などの利点があるのだ。


なのでここからはマークアップを用いないDijitプログラミングのお勉強です


■マークアップを用いずにDijitプログラミングを行う手順

1.ウィジェットを貼り付けるDOMの確保

<div id="button"></div>

と貼り付ける場所を作成しておきます


2.ウィジェット作成

var button = new dijit.form.Button({label:"クリック"}, elem);

buttonがボタンウィジェットを実装
labelにクリックを設定
id="button"のとこの変数を作るってことです

以上ウィジェット完了!!!!!!







次に上記さんサンプルにちいさな機能を加えてみよう

dojo.require("dojo.parser");
 dojo.require("dijit.form.Button");

 dojo.addOnLoad(function() {
  var button = new dijit.form.Button({label:"クリック"}, dojo.byId("button"););
  button.onClick = function() {
   button.setLabel("こんにちは!");
  };
 });


botton.onClickのfunctionに
button.setLabel("こんにちは!");
を設定しています。


以上です!!!!





ここで補足としてよく使うdojo.connect()について勉強します。

dojo.connect()とはー
イベントに対して、イベントハンドラを『接続』するメソッドです

dojo.connect(target, event, context, method)
引数の意味は以下の通り。

target : イベント処理のターゲットとなるオブジェクト。nullを指定するとwindowオブジェクトとなる
event : イベントハンドラの接続先を文字列で指定する
context : method実行中のthisコンテキスト
method : イベントが発生した際呼び出されるメソッドを、関数名を表す文字列もしくは関数オブジェクトで渡す

という使い方をします。

※contextは省略できる

サンプル

dojo.connect(null, "alert", null, function(msg) {
console.debug("アラートメッセージ:" + msg);
});

alert()が実行されると次のfunctionも実行され

console.debug("アラートメッセージ:" + msg);

これも実行されるようなります


また、

var connection = dojo.connect(...);
dojo.disconnect(connection);

これで
登録したイベントハンドラからconnectを除去します。



以上でとりあえず今回は終わりにしまーす。

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

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

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


先日ドラッグ&ドロップのサンプルを作成しましたー

そこでこの機能もうちょっと使ってみたらもっと便利になるんじゃないか

って思って他のものを移動させちゃいました><

前回のサンプル
http://smileboys.fc2web.com/WebUtility/ajax/dojo/dojo005.html

特に前回と実装の仕方は同じ

違うのは

<div></div>で囲む内容が変わっただけ

こんなものを囲んじゃいました

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

移動させたのはメニューです

Top画面にあるメニューを自在に動かせるようにしました

なんか面白いってか変だよねw

Drag&Dropってあんま使う機会ないって思ってたけど

使いようによっては面白い使い方ができるのかなって思いました。

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

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

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


dojoライブラリを使って背景色を変えるJavaScriptを作成しました

カラーパレットから色を選択したら背景色をかえることができます

以下のJavaScriptで実装できます

使用するのはdijit.ColorPaletteです


dojo.require("dijit.ColorPalette");

dojo.addOnLoad(function() {

// カラーパレットの生成
var palette = new dijit.ColorPalette({}, dojo.byId("palette"));

// onChange処理
dojo.connect(palette, "onChange", function(color) {
dojo.style("paint009", "backgroundColor", color);
});
});




onChangeを使って選ばれた色をbackgroundcolorに設定しています

以下のサイトにサンプルがあります。
http://smileboys.fc2web.com/WebUtility/ajax/dojo/dojo009.html

dojo.conectについても調べないとな・・・

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

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

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


dojoライブラリを使えばドラッグ&ドロップだってほんの数行でできちゃうんですね

以下のjavascriptを作成するだけ

dojo.dnd.Moveableを使用します。
これだけでdojoではドラッグ&ドロップが実行できます。


dojo.require("dojo.dnd.Moveable");

dojo.addOnLoad(function() {
 var dd_div = new dojo.dnd.Moveable(dojo.byId("dd-div"));
 var dd_image = new dojo.dnd.Moveable(dojo.byId("dd-image"));
});


下記のサイトに実際のサンプルがあります

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

AJAXライブラリってすごいな

けどさ、正直Drag&Dropって使い道少ない気がw

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

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