タグ別アーカイブ: jQuery

JavaScript, jQuery, 開発技術

同一画面でバージョンの異なるjQueryを共存させる方法

Web制作の仕事をやっていると、
動きのある機能を導入したいと御客様から要望がある。
しかも、高度な技術が必要なのに、おカネも期間も掛けずにというワガママ付き。。
そんな難題の要望に応えてくれるのが「jQueryを利用したツール」なのだ。

しかし、そんな便利なツールだが、当然問題もいくつかある、、
その問題の一つに、
同一画面で、動きのある機能が複数ある場合だ。 ※ 特にTOPページで
問題が発生した状態としては、片方（もしくは両方）の機能が動作しないこと。
※ 前提として、どちらか片方のみの導入ではうまくいっている

その動作しない原因の多くは、

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
  $・・・
</script>

というように、異なるjQueryのバージョンが「1.7.1」と「1.9.0」で共存しているためだ。
まず、簡単な解決方法としては、新しいバージョンのみ有効とし、
バージョンの古い「1.7.1」のjQueryをコメントアウトしてみる。
※ 「jQueryを利用したツール」ではなく、

<!-- script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script -->

のように、こちらのみコメントアウトする。
これで解決すれば儲けもの。
しかし、解決する可能性はそれほど高くはないのが現状。。
そこで下記を試してもらいたい。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
    var $171 = $.noConflict(true);
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$171(document).ready(function(){
  $171・・・
</script>

こちらのように修正するとそこそこ解決するはず！！

それでも まだ解決されない方は、下記を試してもらいたいが、
この話は別の機会に

(function($){
// ライブラリ自体のJavaScript
})($171)

jQuery

jQueryを使ったフォームの入力チェック

jQueryを使ってフォームで入力チェックをするプラグインjquery.validate.js。

jQueryでフォームの入力チェックする、jquery.validate.js とエラーの日本語化
メッセージを日本語化してくれてます。

onfocusoutやonkeyupなどタイミングも設定出来るっぽい。
jquery.validate.jsの超訳

必須・文字数制限・数値チェック・メールアドレスチェックなど一通り出来るので汎用的に使えそう。

jQuery

jQueryを使ったページネーション

jPaginate
jQueryを使ったページネーション。
マウスカーソルを合わせるとページ番号がくるくるスライドします。

デモサイトのソースを見ると

$("#demo1").paginate({
 count         : 100,
 start         : 1,
 display     : 8,
 border                    : true,
 border_color            : '#fff',
 text_color              : '#fff',
 background_color        : 'black',
 border_hover_color        : '#ccc',
 text_hover_color          : '#000',
 background_hover_color    : '#fff',
 images                    : false,
 mouse                    : 'press',
});

こんな感じでpaginate()でプロパティ設定をしています。

コールバック設定もできるので選択したページをフォーム送信なども簡単に出来ます。

onChange : function (page){
 document.getElementById("hid").value = page;
 document.form.submit();
}

これは使えるのでは。

JavaScript, jQuery

jQuery基本メモ

■読み込み
グーグルのWebサービス「Google AJAX Libraries API」を利用すると、jQuery本体をサーバーにアップしなくてもすぐに使える。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

■読み込み完了後のおやくそく処理

$(function(){
//jQuery処理
})

↑は↓の省略型

$(document).ready(function(){
//jQuery処理
})

jQueryはページの読み込みが完了した後に、記述した処理を実行する。

■セレクタ－
$(要素) ⇒要素を指定するのをセレクターと呼ぶ（種類はいろいろある）

$("#idmane img")

など。

■HTML/CSSの操作
【HTML】
HTMLを操作する場合はhtml()という命令を使う。

$("p#first").html("<strong>変更後</strong>");

⇒セレクターで指定した要素の内側（id=firstのpタグ内）を変更できる
【CSS】
CSSを変更する場合は、css()という命令を使う。
css()はCSSプロパティ名と設定したい値を括弧内に ,(カンマ)区切りで記述する。

$("p").css("color","red");

⇒要素のCSSのcolorプロパティがredに変わる

■イベント

$("button").click(function(){
$("img").attr("src","sea.jpg");
});

button要素をクリックすると、img要素のsrc属性の値がsea.jpgに変わる。attr()は属性値を変更する命令

■アニメーション効果

$("button").click(function(){
$("div").show("slow");
});

予めCSSで定義していた

div{
width:300px;
height:300px;
background:red;
display:none;
}

が、button要素をクリックするとdiv要素内にゆっくりと表示される。

参考： http://ascii.jp/elem/000/000/498/498710/