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

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つの手順で解決することができました。


スポンサーサイト

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

<<スクロールするとgoogleAdsenceの広告が画面をはみ出す問題!? | ホーム | 仕事マーケットプレイス「Lancers」>>

コメント

コメントの投稿


管理者にだけ表示を許可する

トラックバック

トラックバック URL
http://kanamehackday.blog17.fc2.com/tb.php/144-a62abe88
この記事にトラックバックする(FC2ブログユーザー)
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。