JQUERY


【JQuery】異なるイベントで同じ関数を実行する

異なるイベントで同じ関数を実行させたい場合、イベント発生時の処理用に共通の関数を定義して、それぞれのイベントから実行させる。

サンプルスクリプト
-----------------------------------------------
//検索欄でenterキーが押されたら実行
$('#kensaku-form').keydown(function() {
if( event.keyCode == 13 ) {
myFunc();
return false; //enterキー無効
} //if
});

//もしくは検索ボタンが押されたら実行
$('#kensaku-button').click(function(){
myFunc();
});

//実行される共通の関数
function myFunc() {
alert('イベントが実行されました');
};
-----------------------------------------------

【JQuery】スマホでhoverを使う

hover を使ったリンクをつくって iPhone で見ると、リンクにタッチした瞬間には hover は反応せずに指を画面から離した瞬間に反応する。

PC上の hover がマウスポインタを置いた瞬間に反応するように、タッチした瞬間にスマホ画面を反応させるには JQuery を使うといい。

Jquery ファイル
/////////////////////////////////////////////////
//PC用 hover 処理。css に hover を記述するとスマホサイトで見たときに
//挙動がおかしくなるので PC 上の挙動もここでつくる
//PC用とスマホ用を上下入れ替えると、android で挙動がおかしくなる。
//android が hover とtouchstart(touchend)のどちらにも反応するためだと思われる。
$('.touch-res').removeClass("touchstyle").addClass("notouchstyle");
$('.touch-res').hover(
function () {//---マウスオーバーの処理
$(this).removeClass("notouchstyle").addClass("touchstyle");
},//---カンマを忘れずに
function () {//---マウスアウトの処理
$(this).removeClass("touchstyle").addClass("notouchstyle");
}
);

//スマホ用。touchstart & touchend で処理。
$('.touch-res').bind({
'touchstart': function(e) {
$(this).removeClass("notouchstyle").addClass("touchstyle");
},
'touchend': function(e) {
$(this).removeClass("touchstyle").addClass("notouchstyle");
}
});
/////////////////////////////////////////////////

//CSSファイル
/////////////////////////////////////////////////
/* JQuery専用なので、htmlファイルには touch-res クラスだけリンクに設定する*/
.touchstyle { background-color:#d9effc;}
.notouchstyle { background-color:transparent;}
/////////////////////////////////////////////////

問題点がひとつあって、iPhone で次のページに進んだ後、戻るボタンでもどると、リンクの色が変わったままになっている。

iPhone だけなら css の擬似クラス :active で、PC上の hover と同じような反応を出すことができる。ただし、android は反応しなくなる。

【javascript】スマホで縦スクロール禁止

javascript の記述
---------------------------------------
//touchmove の縦スクロールを禁止
document.body.addEventListener( 'touchmove', function(e){
e.preventDefault();
});
---------------------------------------

jQuery の場合
---------------------------------------
// スクロール禁止
$(window).on('touchmove.noScroll', function(e) {
e.preventDefault();
});

// スクロール禁止 解除
$(window).off('.noScroll');
---------------------------------------
※.noScroll は解除するためにつけた名前

参考ページ

http://qiita.com/kokushin/items/ef96194bd0fa7c145d7b

【javascript jQuery】eachでループして出力するとundefinedが出る

jQuery(javascript) で eachでループして出力すると undefined が出た。

//each で配列を展開
-------------------------
var my_value;
$.each(my_value, function(i, value) {
all_my_value += my_value;
});
-------------------------

上記の all_my_value は先頭に undefined という文字が入る。原因は var my_value; の部分で変数に何の値も代入していないこと。

undefined は 未定義値のこと。変数を宣言だけして何も代入していないと出る。

//これだと undefined の出る可能性がある
-------------------------
var 変数名
-------------------------

出したくなければ殻の値でも入れておく

//これだと undefined は出ない
-------------------------
var 変数名 = ""
-------------------------

参考ページ こちら

【jQuery】JavaScriptで追加した要素にイベントを設定するonの使い方

JavaScript を使って後から追加した要素に対してイベントを設定する on の書式。よく忘れるのでメモ。

on の書式
------------------------------------
$(親セレクタ).on(イベント名, 子セレクタ, function(){
------------------------------------

on の使用例
------------------------------------
$(document).on('click', '.class_name', function(){
------------------------------------

jQuery ui の dialog を最善面にする

jQuery ui の dialog が下に回り込んで見えなくなることがある。最善面にする方法は次のとおり。

css に設定する
-------------------------------
.ui-dialog { z-index: 1000 !important ;}
-------------------------------

z-index の値を大きくするほど前面に出る。

【Jquery】右クリックでイベントを発生させる

右クリックでイベントを発生させる記述

---------------------------------------
$(document).on('contextmenu', 'セレクター名', function() {

//イベントに対応して行うべき処理を記述

return false; //右クリックメニューを出さない処理

});
---------------------------------------

もしくは

---------------------------------------
$(document).bind('contextmenu', 'セレクター名', function() {

//イベントに対応して行うべき処理を記述

return false; //右クリックメニューを出さない処理

});
---------------------------------------

bindだと、ajax等で変更した要素にはイベントが発生しないので注意。

なお、contextmenu(コンテキストメニュー) とは、右クリックで出てくるメニューのこと。

textareaで一部の文字だけ装飾する

textareaで一部の文字だけ装飾する方法をネットで調べると Jquery を使った方法がいくつか見つかった。しかし自分のしたかったものとはちょっと違った。見つかった方法のソースをいじって自分のやりたかったことができればいいのだが、そこまで詳しくなので、理解するの時間がかかって面倒くさい。

で、タイトルとちょっと違うのだが、html や css で装飾した文字を textarea の文字のように簡単に編集できる方法を発見。やり方も超簡単だったので採用した。

サンプル

この文字は直接編集できます。textarea は使っていません。

html
--------------------------------
<div id="box" contenteditable=true>この文字は直接編集できます。textarea は使っていません。</div>
--------------------------------

css
--------------------------------
#Box {
border: 1px solid #999;
width:300px;
height:100px;
}

.font1 {
color: red;
}

.font2 {
color: blue;
}

.font3 {
font-weight: bold;
}
--------------------------------

大事なのは「contenteditable=true」の部分のみ。これは html5 の属性。たったこれだけで box 内の装飾された文字を、あたかも textarea 内に書かれた文字のように編集できる。

jQuery uiのdialogでタイトルに変数を使って更新させる

jQuery ui の dialog で タイトルを設定する場所は主に二箇所ある。

ひとつは jQuery ファイル内
---------------------------
//jQuery_ui の詳細設定
$('#dialog').dialog({
autoOpen: false,
width: 600,
title: 'ここがタイトルになる',
modal:false,
resizable:false,
buttons: {
"元に戻す": function() {
//$(this).dialog("close");
alert('元に戻す');
},
"閉じる": function() {
$(this).dialog("close");
}
}
});

---------------------------

もうひとつは html(PHP)ファイル内
---------------------------
<div id="dialog" title="ここがタイトルになる">
<p>ここがダイアログの内容</p>
</div>
---------------------------

二箇所どちらにもタイトルを設定すると jQuery ファイルの情報が優先される。

このたび、タイトルに変数を用いて、条件によってタイトルの内容を変更したかったのだが少し苦戦した。上記二箇所をいじってもタイトル文章がうまく更新できなかったのだ。
結論だけ言うと、タイトルはオプションを使っても指定できる。

jQuery ファイル内でダイアログのタイトルを上書き
---------------------------
$('#dialog').dialog('option', 'title', '新しいタイトル');
---------------------------

ここに変数を持ってきて、希望通りに表示できた。

参考サイト

画像ファイルを持っていかれないようにする方法

インターネットで公開している以上、絶対に画像を持っていかれない方法はない。

ここで紹介するのは、画像を持っていきにくくして、知識の乏しい人なら画像の持ち出しを諦めるだろう方法。そして簡単な実装できる方法を選んだ。

1.baseタグで基準となるURLを設定する

baseタグは、相対パスで書かれたURLの基準を指定するもの。

もしページのソースを見られたら画像の場所がわかってしまう。

絶対パス
----------------------------
<img src="http://example.com/image2001/image01.jpg">
----------------------------

相対パス
----------------------------
<img src="image2001/image01.jpg">
----------------------------

上の二つどちらも、画像ファイルは「http://example.com/image2001/」の中にあると読める。

そこでbeseタグを使うと画像ファイルの場所を少し分かりにくくできる。

headタグの間にbaseタグを記述する
----------------------------
<base href="http://example.com/image2001/">
----------------------------

すると「image2001フォルダ」までが基準になるのでimgタグへの記述は下記のようになる。

相対パスで
----------------------------
<img src="image01.jpg">
----------------------------

「image2001」の記述を省略できるのでimgタグ内だけを見ても画像の場所が分からなくなる。

2.baseタグはjavascriptで隠す。

imgタグだけを見ても画像ファイルの場所は分からないが、headタグ間に記述したbaseタグを見ると分かってしまう。
そこでbaseタグはheadタグ間に書かずに、外部ファイルとしてjavascriptで書くとよりいい。

外部ファイルとして読み込む
----------------------------
document.write('<base href="http://example.com/image2001/">');
----------------------------

参考

http://www.broadband-xp.com/hidesource/base.html

3.右クリックを無効にする

これまでの実装でソースを見ても画像ファイルの場所をわかりにくくすることは出来るが、画像自体を右クリックすれば画像のURLも分かるし、保存も出来てしまう。

そこで右クリックを禁止する。

bodyタグ内に記述
----------------------------
<body onContextmenu="return false">
----------------------------

これだと右クリックは防げるがデスクトップへドラッグすれば保存できてしまう。
そこでjquery.dwImageProtector.jsというjqueryのプラグインを使う。

使い方はこちらこちらが分かりやすい。

http://www.css-lecture.com/log/javascript/dwimageprotector.html

jquery.dwImageProtector.jsのソースはこんな感じ
---------------------------------------------------------
jQuery.fn.protectImage = function(settings) {
settings = jQuery.extend({
image: 'blank.gif',
zIndex: 10
}, settings);
return this.each(function() {
var position = $(this).position();
var height = $(this).height();
var width = $(this).width();
$('<img />').attr({
width: width,
height: height,
src: settings.image
}).css({
border: '1px solid #f00',
top: position.top,
left: position.left,
position: 'absolute',
zIndex: settings.zIndex
}).appendTo('#content')
});
};
---------------------------------------------------------

head内のソースはこう
---------------------------------------------------------
<script src="http://example.com/js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="http://example.com/js/jquery.dwImageProtector.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).bind('load', function() {
$('img.protect').protectImage();
});
</script>
---------------------------------------------------------

保護するイメージには class を設定する
---------------------------------------------------------
<img src="image01.jpg" alt="" width="500" height="500" class="protect" />
---------------------------------------------------------

画像を囲む枠がずれる場合は「.appendTo('body')」の部分をbodyでなく任意の場所に変更すればうまくいく。

2 / 3123