JavaScriptプログラムに関する各種メモ書き:タグ「jQuery」での検索

JavaScript の querySelector の書式入門

jQueryが使えない環境やメモリ的にjQueryを使用したくない場合のDOMセレクターにJavaScriptのquerySelectorがとても便利に使えます。

jQueryが使えないiMacros環境でも使用できます。

querySelector()  : セレクターに最初の要素ひとつを返す
querySelectorAll() : セレクターに合致した全ての複数の要素を返す。(DOMオブジェクトの配列で返る)

● JavaScript クエリセレクタの使い方例

・ID・クラス名で指定

window.document.querySelector("#my_id");
window.document.querySelector(".my_class");
window.document.querySelector([class='my_class']);

・その他いろいろな指定方法

window.document.querySelector("input[type='checkbox']");
window.document.querySelector("table[class='shipInfo'] tr td:nth-of-type(1)");
window.document.querySelector("tr > td");
window.document.querySelectorAll(".my_class");

・残念ながら使えない指定方法(文字列●●●を含む要素)

window.document.querySelector( 'tag:contains("●●●")' );

↑これは使用できません。 (Xpathなら取得できるのですが)

・xpathとクエリセレクタの変換

http://bit.ly/2b5BzLI
http://bit.ly/2bht2by

No.1050
08/31 14:09

edit

iMacros
jQuery
DOM
xpath

アニメーションライブラリ velocity.js の記述方法

● 1. velocity.jsの読み込み(jQueryは読み込まなくても可能ですが、共存することもできます)

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.1.0/velocity.js"></script>

● 2. velocity.js のアニメーション記述

省略記法で記述する例

.velocity( 変形させたいパラメータ,(ハッシュ) アニメーション時間(ms), オプション(ハッシュ),  終了時実行関数(関数) )

例1:

$('#menu').velocity({
  opacity    : [ 1, 0 ],
  translateY : [ 0, -50 ]
},600,{ easing: "easeOutCirc" } ,
function(){ console.log("complete !!");  }
);

例2:opacity と translateY それぞれに違うイージングをかけたい場合

$('#menu').velocity({
  opacity    : [ 1, 'easeInQuart', 0 ],
  translateY : [ 0, 'easeOutQuart', -50 ]
},2000);

● 3. velocity.js の連続アニメーションの記述例

3つのアニメーションを連続して動かします。

$('#menu')
.velocity( { opacity: [ 1, 0 ], translateX: [ -30, 1250 ] },600, { easing: "easeOutCirc" } )
.velocity( { translateY: 10 }, 200 )
.velocity( { translateY: 0 }, 200 );

● 4. 複数の要素に対して順番にアニメーションを動作させる記述例

.velocity.ui を追加で読み込ませます。

  <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.ui.min.js"></script>

Velocity.RegisterEffect でアニメーションを定義して velocityで呼び出します。
stagger が1つ1つの要素を順番にアニメーションしていく際の待ち時間になります。

  $.Velocity.RegisterEffect("trans.my_effect", {
    defaultDuration: 500,
    calls: [[ { opacity: [1,0],  scaleX:[ 1, 0.1 ], scaleY:[ 1, 0.1 ] }, 1.00, { easing: "easeOutCirc" } ]] 
  })

  $('#menu li').css({opacity:0}).velocity("trans.my_effect", {
    easing  : 'ease-in-out',
    duration: 1000,
    stagger : 150
  });

● 5. さらに複雑なアニメーションを記述するには

複雑なアニメーションとそれに伴う処理を簡潔に書くことのできるライブラリ vq を作った

No.1020
06/26 12:05

edit

css
jQuery

jqueryでフォームのふりがな自動入力

jquery.autoKana.js https://github.com/harisenbon/autokana

<form>
<input type="text" id="user_name">
<input type="text" id="kana_name">
</form>
<script src="./jquery.autoKana.js"></script>
<script>
$(function() {
    $.fn.autoKana('#user_name', '#kana_name', {
        katakana : true  //true:カタカナ、false:ひらがな(デフォルト)
    });
});
</script>
No.1005
02/15 10:34

edit

jQuery
フォーム

jQuery(Javascript)で表示中のディスプレイが retina対応か判別する

jQuery(JavaScript)でRetina対応ディスプレイかどうか判別して、出力する画像(プリロードする先読み画像)の種類を分けたい時があります。

JavaScriptのみで対応可能です。 以下のように判別します。

var retinaCheck = window.devicePixelRatio;
if(retinaCheck >= 2) {
	alert('retina対応ディスプレイです。');
}
No.1004
02/08 16:51

edit

画像
jQuery

クリックでクリップボードにコピーするボタンを作るjQueryプラグイン【clipboard.js】

● clipboard.js

https://zenorocha.github.io/clipboard.js/

このclipboard.jsは Flashを使用しません。 そのかわり Safari には未対応となっています。

● 使い方

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.5/clipboard.min.js"></script>
<script>
$(function () {
var clipboard = new Clipboard('.clip_copy_btn');
});
</script>
<input type="text" id="clip_copy_1" value="XXXXX">
<button class="clip_copy_btn" data-clipboard-target="#clip_copy_1" >クリップボードにコピーする</button>

です。

No.1000
01/26 21:27

edit

フォーム
jQuery
HTML5

ドラッグ&ドロップで複数ファイルアップロード + 進捗(プログレスバー)表示する Dropzone.js

● Dropzone.jsを使ってドラッグ&ドロップアップロード + 進捗バー

ファイルアップロードシステムを作るには Dropzone が簡単で便利です。 以下の様な特徴があります。

・jQueryを必要としない。(共存可能です。以下の例ではjQueryと併用します。)
・ドラッグ&ドロップでファイルアップロードが行える
・非同期でファイルアップロードが行える
・ファイルアップロード中の進捗バーを表示することが出来る

使い方は簡単です。

1. ファイルのダウンロード と用意

必要なファイルは

dropzone.js (ダウンロード)
dropzone_config.js (自分で作成)
dropzone_upload.php (自分で作成)
dropzone.css (自分で作成)

です。

・ dropzone.js

https://raw.githubusercontent.com/enyo/dropzone/master/dist/dropzone.js ( .jsファイル)
からダウンロードして保存します。

・ dropzone_config.js

dropzone_config.jsは以下のように作成しておきます (※要追加) のところは適宜追加すること。

$(document).ready(function() {
$('#image_drop_area').dropzone({
	url                          : './js/dropzone_upload.php',
	paramName                    : 'file',
	maxFilesize                  : 999 , //MB
	addRemoveLinks               : true ,
	previewsContainer            : '#preview_area' ,
	thumbnailWidth               : 50 , //px
	thumbnailHeight              : 50 , //px
	dictRemoveFile               :'[×]' ,
	dictCancelUpload             :'キャンセル' ,
	dictCancelUploadConfirmation : 'アップロードをキャンセルします。よろしいですか?' ,
		uploadprogress:function(file, progress, size){
		file.previewElement.querySelector("[data-dz-uploadprogress]").style.width = "" + progress + "%";
	},
	success:function(file, rt, xml){
		// それぞれのファイルアップロードが完了した時の処理(※要追加)
		file.previewElement.classList.add("dz-success");
		 $(file.previewElement).find('.dz-success-mark').show();
	},
	processing: function(){
		// ファイルアップロード中の処理(※要追加)
	} ,
	queuecomplete: function(){
		// 全てのファイルアップロードが完了した時の処理(※要追加)
	} ,
	dragover: function( arg ){
		$('#' + arg.srcElement.id).addClass('dragover');
	} ,
	dragleave: function( arg ){
		$('#' + arg.srcElement.id).removeClass('dragover');
	} ,
	drop: function( arg ){
		$('#' + arg.srcElement.id).removeClass('dragover');
	} ,
	error:function(file, _error_msg){
		var ref;
		(ref = file.previewElement) != null ? ref.parentNode.removeChild(file.previewElement) : void 0;
	},
	removedfile:function(file){
		delete_hidden('dropzone_files[]',file.xhr.response);
		var ref;
		(ref = file.previewElement) != null ? ref.parentNode.removeChild(file.previewElement) : void 0;
	} ,
	canceled:function(arg){
	} ,
	previewTemplate : "\
	<div class=\"dz-preview dz-file-preview\">\n\
	  <div class=\"dz-details\">\n\
	    <div class=\"clearfix\">\n\
	      <img class=\"dz-thumbnail\" data-dz-thumbnail>\n\
	      <div class=\"dz-success-mark\" style=\"display:none;\"><i class=\"fa fa-2x fa-check-circle\"></i></div>\n\
	    </div>\n\
	    <div class=\"dz-progress\"><span class=\"dz-upload\" data-dz-uploadprogress></span></div>\n\
	    <div>\n\
	      <div class=\"dz-filename\"><span data-dz-name></span></div>\n\
	      <div class=\"dz-my-separator\"> / </div>\n\
	      <div class=\"dz-size\" data-dz-size></div>\n\
	      <div class=\"dz-error-message\"><span data-dz-errormessage></span></div>\n\
	    </div>\n\
	  </div>\n\
	</div>\n\
	"
});
});

・ dropzone_upload.php

dropzone_upload.phpは以下のように作成しておきます

<?php
$ds = DIRECTORY_SEPARATOR;
$store_folder = dirname(__FILE__) . $ds . '..' . $ds . 'data' . $ds . 'tmp' . $ds;
// echo $store_folder;
if (!empty($_FILES)) {
	$temp_file = $_FILES['file']['tmp_name'];
	$ext = get_ext($_FILES['file']['name']);	// ファイル名から拡張子を取得
	$target_file = basename($_FILES['file']['tmp_name'].$ext);
	$ja_file     = $_FILES['file']['name'];
	$target_file_fullpath =  $store_folder . $target_file;
	umask(0);									// 権限(パーミッション)を厳格にしたい時はこちらを変更
	move_uploaded_file($temp_file, $target_file_fullpath);
	echo "{$target_file}\t{$ja_file}";		// 英語ファイル名[TAB]日本語ファイル名 を返す
}

//========== _get_ext mime-typeを調べて拡張子を返す
function get_ext($file_name){
	$p = pathinfo($file_name);
	if ( isset($p['extension']) ){
		return '.'.$p['extension'];
	}
	else{
		return '';
	}
}

・ dropzone.css

dropzone.cssは以下のように作成しておきます

#image_drop_area {
	text-align: center;
	padding: 20px 0;
	height: 70px;
	width: 100%;
	color: #666;
	background-color: #f9f9f9;
	border: 4px dotted #bbb;
}
.dragover {
	color: #111               !important;
	background-color: #f1f1f1 !important;
	border: 4px dotted #777   !important;
}
.dz-preview {
	margin: 5px 0;
	padding: 10px;
	float: left;
	background-color: #F5F5F5;
	border-radius: 5px;
}
.dz-details {
	padding: 0;
}
.dz-filename , .dz-size, .dz-my-separator , .dz-remove {
	font: 11px "Lucida Grande", Lucida, Verdana, sans-serif;
}
.dz-filename , .dz-my-separator, .dz-size , .dz-error-message {
	float: left;
}
.dz-my-separator {
	width: 20px;
	text-align: center;
}
.dz-size {
	margin-top: 1px;
}
.dz-progress {
	width: 500px;
}
.dz-progress .dz-upload {
	display: block;
	border: 5px solid #1E9BFF;
	border-radius: 2px;
}
.dz-remove {
	float: left;
	margin-left: 5px;
}
.dz-thumbnail {
	margin-bottom: 3px;
}
.fa-check-circle:before {
	color: #93C54B;
}
.dz-thumbnail , .dz-success-mark {
	display: block;
	float: left;
}
.dz-success-mark {
	height: 25px;
	margin-left: 5px;
}

2. htmlファイルからdropzoneを読み込み

(formタグのactionは dropzone_upload.phpである必要はありません。通常のフォーム送信CGIでOKです。)

<html>
<head>
<meta charset="UTF-8">
<title>dropzone test</title>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="dropzone.js"></script>
<script src="dropzone_config.js"></script>
<link href="dropzone.css" type="text/css" rel="stylesheet" />
</head>
<body>
<form action="XXXXXX.XXX">
    <div id="image_drop_area" >ここにアップロードファイルをドロップ</div>
    <div id="preview_area" class="dropzone-custom"></div>
</form>
</body>
</html>

以上です。

No.982
02/04 16:14

edit

HTML5
フォーム
jQuery
Ajax
画像

JavaScript の getElement系メソッドによる HTMLタグ(DOMオブジェクト)の取得

JavaScriptでIDやタグ(DOMオブジェクト)を取得するとき

jQueryを使わないJavaScript本体では ・getElementsByTagName ・getElementsByName ・getElementById の3つのメソッドが使用できます。

DOMオブジェクト取得時には取得の成否を判別する必要があります。

使い方は以下のとおりです。

■ document.getElementsByTagName(タグ名によるDOMオブジェクトの取得)

<a href="#">テスト</a>
var obj_array = window.document.getElementsByTagName('a');
if (obj_array.length > 0){
  alert('Aタグは存在します。');
  for ( var i=0; i<obj_array.length; i++){
	  alert(obj_array[i].innerText);
  }
}
else{
  alert('Aタグは存在しません。');
}

■document.getElementsByName(name属性によるDOMオブジェクトの取得)
<input type="text" name="hoge_name">
if (window.document.getElementsByName("hoge_name").length > 0){
  alert('name="hoge_name"のタグが存在します。');
}
if (window.document.getElementsByName("fuga_name").length > 0){
  alert('name="fuga_name"のタグが存在します。');
}
else{
  alert('name="fuga_name"のタグが存在しません。');
}

■document.getElementById(ID名によるDOMオブジェクトの取得)
<div id="hoge_id"></div>
if (window.document.getElementById("hoge_id")){
  alert('id="hoge_id"のタグが存在します。');
}
if (window.document.getElementById("fuga_id")){
  alert('id="hoge_id"のタグが存在します。');
}
else{
  alert('id="hoge_id"のタグが存在しません。');
}
No.979
10/23 16:34

edit

フォーム
DOM
jQuery

入力途中のフォーム内容を保存して自動的に復元する 『Sisyphus.js』

『Sisyphus.js』はフォームへの入力途中に「戻るボタン」を押して画面遷移した場合や「リロード」ボタンを押した時に自動的に値をローカルDBに保存して復元してくれるjQueryプラグインです。

HTML5のローカルDBを使用しますので Windows IE は 8以上が必要です。 それ以外のモダンブラウザは全て問題なく動作します。

■ Sisyphus.js

http://sisyphus-js.herokuapp.com/

■ 使い方( input type="hidden" 以外の全てのフォームを自動で記憶する。)

<form id="FM">
</form>
$(function(){
	$( "#FM" ).sisyphus( {
		locationBased: false,
		excludeFields: $('input[type="hidden"]'),
		autoRelease: false
	} );
});
No.974
09/09 15:00

edit

フォーム
jQuery
HTML5

IE8以下で console.log がエラーになる問題の対処

IE8以下で JavaScriptで console.log() を記述しているとエラーとなってしまいます。 そこでIE8以下でもとりあえずエラーが出ないようにする対策

対策1. consoleオブジェクトがあるかどうかを調べてから console.log() を使用する

console.log( my_obj);

  ↓ このように変更する。

if(console && console.log) { console.log( my_obj); }

対策2. 何もしない空のconsoleオブジェクトを作成する

(function () {
    if (typeof window.console === "undefined") {
         window.console = {}
    }
    if (typeof window.console.log !== "function") {
         window.console.log = function () {}
    }
})();

引用 : http://goo.gl/czcLY3

No.972
09/09 10:42

edit

jQuery
エラー対処

フォームのプレースホルダーをjQueryで再現する

HTML5のプレースホルダー(placeholder : 入力例)はブラウザによって挙動が違うためイマイチ使い勝手がよくありません。
そこでjQueryで同様のことを実現します。
さらに、フォーカス時に入力例が消えて、フォーカスが外れると入力例が再び表示される仕様にします。

■ 動作デモはこちら

HTML

<div style="position:relative;" >
<input type="text" class="placeholder_check">
<span class="placeholder">http://</span>
</div>

JS

$(function(){
$(".placeholder_check").each(function(){
if( $(this).val() ){
  $(this).next(".placeholder").hide();    
}
});
$(".placeholder_check").focus(function(){
  $(this).next(".placeholder").hide();
});
$(".placeholder").click(function(){
  $(this).prev(".placeholder_check").focus();
});
$(".placeholder_check").blur(function(){
  if($(this).val() == "") {
    $(this).next(".placeholder").show();
  }
});
});

CSS

.placeholder {
	display: block;
	white-space:pre;
	position: absolute;
	top: 9px;
	left: 30px;
	color: #bbb;
}

参考 : http://hack.aipo.com/?p=3005

添付ファイル1
No.964
07/23 09:54

edit

添付ファイル

jQuery
フォーム
HTML5

JavaScript(jQuery)でギターのタブ譜を表示する

JavaScript(jQuery)でギターのタブ譜を表示するライブラリ。以下のようなものがありました

vexflow

http://www.vexflow.com

gregjopa/HTML5-Guitar-Tab-Player

https://github.com/gregjopa/HTML5-Guitar-Tab-Player
タブ譜と五線譜が両方表示されます。
再生ボタンを押して演奏することもできます。

HTML5 Guitar Tab Player

http://www.codeproject.com/Articles/834206/HTML-Guitar-Tab-Player
旋律用ギタータブ譜。再生ボタンを押して演奏することもできます。

acspike/ChordJS

https://github.com/acspike/ChordJS
ギターコードの指板画像を表示する。

No.945
09/14 00:43

edit

jQuery
HTML5

jQueryでフォームの全ての要素に入力や選択があるかどうかを調べる

関数 is_form_written を定義

function is_form_written(jq_obj){
	var tagname = $(jq_obj).prop("tagName");
	var type = $(jq_obj).prop('type');
	if (tagname==='SELECT'){
		if ( $(jq_obj).val() === '' ){ return false; }
		else{ return true; }
	}
	else if (tagname==='INPUT'){
		if (type==='radio'){
			return $(jq_obj).prop('checked');
		}
		else if (type==='checkbox'){
			return $(jq_obj).prop('checked');
		}
		else if (type==='text'){
			if ($(jq_obj).prop('value')!==''){ return true; }
			else{ return false; }
		}
	}
	else{
console.log($(jq_obj).prop("tagName"));
	}
}

以下のように呼び出して全ての要素(input , select , textarea)をチェックします

$('input,select,textarea').each(function(){
	if ( is_form_written(this) ){
		alert( $(this).prop('name') + ' は入力または選択済みです。');
	}
})
No.935
03/19 19:15

edit

jQuery
フォーム

ドロップダウンリスト(オプション・メニュー)のスタイルを変更するjQueryプラグイン【jquery.customSelect】

<i class="fa fa-github fa-2x"></i> jquery.customSelect

https://github.com/adamcoulombe/jquery.customSelect

ダウンロードするには【Download ZIP】のアイコンをクリック

<select>の後ろに<span class="customSelect">というタグを追加することによりドロップダウンリスト(オプション・メニュー)のスタイルを変更するプラグインです。

■ 使い方

<select class="my_form">
<option value="">選択してください</option>
<option value="土曜日">土曜日</option>
<option value="日曜日">日曜日</option>
</select>

というHTMLを用意して

<script src="jquery.min.js"></script>
<script src="jquery.customSelect.js"></script>
<script>
$(function(){
    $(".my_form").customSelect();
});
</script>

で実行します。

■ 動的に値を書き換える(ドロップダウンリストの状態を変更する)場合

動的に<select>の値を変更しても、jquery.customSelectによって生成された<span>の状態までは書き換えられません。

そこで次のように「trigger('render')」を使って書き換えを行います。

$(".my_form").val('土曜日');
$(".my_form").trigger('render');
No.931
03/07 11:48

edit

jQuery

jQueryでのクラス表示方法・クラス指定方法

あるタグ(jQueryオブジェクト)のクラス,IDを取得し表示

<div id="hoge" class="red big long" >テスト</div>
// そのタグが持つクラスを取得し表示
alert( $('div').attr('class') );
// そのタグが持つIDを取得し表示
alert( $('div').attr('id') );

複数のクラスを持つタグ(jQueryオブジェクト)を選択【AND検索】

<div class="foo bar">テスト</div>
// 間にスペースはいれない
$('.foo.bar')

// +をつかった書き方(こちらのほうが見やすいと思います)
$( '.foo' + '.bar' )

あるIDとあるクラスを持つタグ(jQueryオブジェクト)を選択【AND検索】

<div id="myID" class="myCLASS">テスト</div>
// +をつかって書く
$( '#myID' + '.myCLASS' )

あるクラスまたは別のあるクラス【OR検索】

<div id="myID" class="testA">テストA</div>
<div id="myID" class="testB">テストB</div>
// クラスの間にカンマをはさみます
$('.testA,.testB').each(function(){
    alert( $(this).attr('class') );
})
No.929
12/21 17:44

edit

jQuery

jQueryでフォームの入力値をチェックする(Validation)プラグイン

● jQuery Validation Plugin

http://jqueryvalidation.org

● 日本語での解説

http://kudakurage.hatenadiary.com/entry/20091211/1260521031

● スクリプトの読み込み

http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.min.js

● 用意するHTML

<form name="FM">
<input type="text" name="hoge">
<input type="text" name="fuga">
</form>

● バリデーションの定義

$("#FM").validate({
	rules: {
		hoge: {
			required: true
		} ,
		'fuga': {
			required: true
		} 
	} ,
	messages: {
		hoge: {
			required: '入力してください。'
		} ,
		'fuga': {
			required: '入力必須項目です。'
		} 
	}
});

● 標準搭載されているバリデーションメソッド

required – Makes the element required.
remote – Requests a resource to check the element for validity.
minlength – Makes the element require a given minimum length.
maxlength – Makes the element require a given maxmimum length.
rangelength – Makes the element require a given value range.
min – Makes the element require a given minimum.
max – Makes the element require a given maximum.
range – Makes the element require a given value range.
email – Makes the element require a valid email
url – Makes the element require a valid url
date – Makes the element require a date.
dateISO – Makes the element require an ISO date.
number – Makes the element require a decimal number.
digits – Makes the element require digits only.
creditcard – Makes the element require a credit card number.
equalTo – Requires the element to be the same as another one

● 正規表現のバリデーションメソッドを追加する

$.validator.addMethod("myregex", function(value, element, reg_str) {
	var re = new RegExp(reg_str);
	return re.test(value);
}, "入力値が正しくありません");

バリデーション定義に以下のように記述

rules: {
	postal: {
		myregex: '^[0-9\-]+$'
	}
} ,
messages: {
	postal: {
		myregex: '郵便番号を正しく入力してください。'
	}
}

● バリデーションのルールを追加するには関数を定義します

jQuery.validator.addMethod('my_validation_func', function(value, element) {
	if ( XXXXX ){		// XXXXX にエラー判別ロジックを記述
			return true;	// trueが返るとエラーとならない
		}
	else{
		return false;	// falseが返るとエラー
	}
}, 'デフォルトのエラーメッセージ');

● エラー時にエラーのあったフォーム要素自身にエフェクトをかける

$("#FM").validate({
  highlight: function(element, errorClass) {
     $(element).fadeOut(function() {
       $(element).fadeIn()
     })
  }
});

● フォームのハイライトを中止する

標準ではエラー時にフォーム要素に error というクラスが付加されますが、これがいらない場合は 空のfunction() を定義します。

$("#FM").validate({
    highlight: function(element, errorClass) {
    }
});

● 任意のタイミングでバリデーションを実行する

バリデーションの実行タイミングは ・フォーム Submit時 ・エラー後のフォーム内容変更時 ですが、任意のタイミングでバリデーションを実行するには valid()メソッドを実行すればOK。

<form id="FM">
$("#FM").valid();

● 特定のボタンが押された時など任意のタイミングでvalidationを停止する

$("#FM").validate().cancelSubmit = true;

● バリデーション required 条件の条件分岐1

下記のようにすると id="foo" のラジオボタンやチェックボックスがチェックされている時にだけバリデーションを行います

rules: {
  my_name : { required: '#foo:checked' } 
} ,

次のような指定方法があります

指定値 説明
#foo:checked id="foo" のラジオボタンやチェックボックスがチェックされている時
#foo:filled id="foo" のフォーム要素に何か文字(空白以外)が入力されている時
#foo:visible id="foo" のフォーム要素が表示されている時

● バリデーション required 条件の条件分岐2

rules: {
  my_name : { required: function() { return ($('#my_flg').val() === '1' ); } } 
} ,
messages: {
  my_name: { required: 'my_flgが『1』の時はmy_nameは空欄にはできません' } 
}

● フォームが送信され、バリデーションが実行され、その結果がOKだった場合に処理を行う

例 : #submit_button を非活性にします。

  submitHandler: function(form) {
    // ボタンを非活性
    $('#submit_button').prop('disabled', true);
    form.submit();
   }

● 複数あるテキストの全てが空の場合にエラーを出す

・やり方 1.(フォームの nameを同じにして require にする。 )

<input type="text" name="myform[]">
<input type="text" name="myform[]">
<input type="text" name="myform[]">
rules: {
	'myform[]': {
		required: true
	}
} ,
messages: {
	my_name: { required: '少なくともどれか1つに入力してください。' } 
}

・やり方 2.(フォームの nameを別にしたい場合は、 group_require を定義する。 )

クラス .group_require_1 のうちどれか1つに入力があるとヴァリデーションOKとなります。

<input type="text" name="textA" class="group_require_1">
<input type="text" name="textB" class="group_require_1">
<input type="text" name="textC" class="group_require_1">
jQuery.validator.addMethod("group_require", function(value, element, selector_name) {
  var v = '';
  $(selector_name).each(function( index ) {
    v += $( this ).val();
  });
  if ( v ){ return true; }
  else { return false; }
}, "このフィールドは必須です。");

rules: {
	'student_no[]': {
		group_require : '.group_require_1'
	} ,
messages: {
	my_name: {
		group_require: '少なくともどれか1つに入力してください。' 
	} 
}

● バリデーションルールの追加

validate()メソッドで初期化を行った後でルールを追加するにはadd()を使用します。

$("input[name=other_name]").rules("add", { required: '#other_radio:checked' }); //other_radio にチェックが有る時は必須とする

ルールとバリデーションエラーメッセージを合わせて追加する

$( "#myinput" ).rules( "add", {
  required: true,
  minlength: 2,
  messages: {
    required: "Required input",
    minlength: jQuery.validator.format("Please, at least {0} characters are necessary")
  }
});
No.928
12/30 11:50

edit

フォーム
jQuery
エラー対処

最も簡単にYouTube動画を貼り付けるjqueryプラグイン

■ jQuery.tubeplayer.js ↓(ダウンロードは下記サイトの画面右下【Download ZIP】から)

https://github.com/nirvanatikku/jQuery-TubePlayer-Plugin

コードは下記のようになります

<script src="jquery.js"></script>
<script src="jQuery.tubeplayer.min.js"></script>
<div id='player'></div>
<script>
jQuery("#player").tubeplayer({
	width: 600, // the width of the player
	height: 450, // the height of the player
	allowFullScreen: "true", // true by default, allow user to go full screen
	initialVideo: "[some video id]", // the video that is loaded into the player
	preferredQuality: "default",// preferred quality: default, small, medium, large, hd720
	onPlay: function(id){}, // after the play method is called
	onPause: function(){}, // after the pause method is called
	onStop: function(){}, // after the player is stopped
	onSeek: function(time){}, // after the video has been seeked to a defined point
	onMute: function(){}, // after the player is muted
	onUnMute: function(){} // after the player is unmuted
});
</script>

簡単ですね。

No.914
11/06 16:34

edit

YouTube
jQuery

SWF Object 不要。jqueryのFlashムービー(swf)貼り付けプラグイン

http://jquery.thewikies.com/swfobject/

$('#hogehoge').flash({
  swf: "http://www.youtube.com/v/"+video_id+"&autoplay=1",
  width: 600,
  height: 600,
  bgcolor:'#000000',
  hasVersion: 10,
  hasVersionFail: function (options) {
   alert('version error');
   return false;
  },
  encodeParams: true,
  flashvars: {
   allowfullscreen: 'true'
  },
}
);
No.886
05/17 10:51

edit

jQuery

jQueryで<ul><li>の最後の要素を選択する

jQueryで<ul id="test"><li>の最後の要素を選択するには下記のようにします。

	$('#test li:last');

コーディング例:最後の要素のIDを表示します。

HTML

<ul id ="test">
<li id ="test1">あああ</li>
<li id ="test2">いいい</li>
<li id ="test3">ううう</li>
</ul>

JavaScript

alert( $('#test li:last').attr('id') );
No.885
05/07 14:48

edit

jQuery

jQueryで "ある要素" が画面内にあるかどうかを判別する

jQueryで "ある要素"が画面内にあるかどうかを判別するには 要素のページ内での位置( Y座標)、 現在のスクロール位置( Y座標)、 要素の高さを見て判別します。

function is_in_sight(jq_obj) {
	var scroll_top    = $(window).scroll_top();
	var scroll_bottom = scroll_top + $(window).height();
	var target_top    = jq_obj.offset().top;
	var target_bottom = target_top + jq_obj.height();
    if (scroll_bottom > target_top && scroll_top < target_bottom) {
    	alert('in sight');
    } else {
    	alert('not in sight');
    }
}

$(function() {
    $(window).on('load scroll', function() {
        is_in_sight($('.my-class'));
    });
});
No.879
09/05 12:27

edit

jQuery

IE8 IE7 IE6 でCSS3の background-size: contain; を使用できるようにするjQueryプラグイン

CSS3で追加された background-size。値は以下のとおり指定します。

<b>auto</b> 自動的に算出される(初期値)
<b>contain</b> 背景領域に収まる最大サイズになるように背景画像を拡大縮小する
<b>cover</b> 背景領域を完全に覆う最小サイズになるように背景画像を拡大縮小する
<b>xxx px</b> 背景画像の幅・高さを指定する
<b>xxx %</b> 背景領域に対する背景画像の幅・高さのパーセンテージを指定する

とこれが Windows IE8 7 6 ではこのプロパティは認識されません。

そこで以下のjQueryプラグイン

■ jquery.backgroundSize.js

(要 jQuery バージョン1.7.0以降 )

http://louisremi.github.com/jquery.backgroundSize.js/demo/

■ 使い方(<div class="hoge">に { background-size : cover; } を適用する。)

<script type="text/javascript" src="jquery.js"></script>
<!--[if lte IE 8]>
    <script type="text/javascript" src="jquery.backgroundSize.js"></script>
    <script>
    jQuery(document).ready(function() {
        jQuery('div.hogehoge').css({backgroundSize: "cover"});
    });
    </script>
<![endif]-->

No.872
05/30 10:08

edit

jQuery

ウィンドウサイズ変更を検知してサイズによって画像サイズを変更する

以下のようにウィンドウサイズによって画像サイズを変更したい時があります。

・画面サイズ(横幅)が800px 以下の場合は 800px固定

・画面サイズ(横幅)が800px 以上の場合は 100%(横いっぱい)

jQueryを使って以下のようにします。

<img id="hogehoge" src="./test.jpg" width="800" />
<script>
function liquid_image(){
	var wh = jQuery(window).height();
	var ww = jQuery(window).width();
	if (ww > 800){
		jQuery('#hogehoge').css("width", "100%");
	}
	else{
		jQuery('#hogehoge').css("width", "800px");
	}
}
jQuery(document).ready(function(){
	liquid_image()
});
jQuery(window).resize(function(){
	liquid_image()
});
</script>

jQueryのウィンドウサイズ変更を検知するイベント

jQuery(window).resize(function(){
// ここに処理を記述
});

jQueryの画面スクロール変更を検知するイベント

jQuery(window).scroll(function () {
// ここに処理を記述
});
No.869
01/26 19:25

edit

画像
jQuery

iPad, iPhone, スマートフォン用にviewportをJavaScriptで設定する

下記の用に JavaScriptで端末を判別してからそれぞれにセットしたい viewport を追加します。

下記の例では

iPhoneの時 499px

iPad の時 999px

にセットしています。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
    if(navigator.userAgent.indexOf('iPhone') > -1){
        jQuery("head").append(jQuery('<meta name="viewport" content="width=499, user-scalable=yes" />'));
    }
    else if(navigator.userAgent.indexOf('iPad') > -1){
        jQuery('head').append('<meta name="viewport" content="width=999, user-scalable=yes" />');
    }
});
</script>
No.867
12/01 23:19

edit

jQuery

jQueryで画像やリンクのクリック状態(マウスイベント)やキーボード入力状態を強制的に作り出す

https://api.jquery.com/trigger/

.trigger() メソッドを使って強制的にイベントを作ることができます。

// id=hoge の要素をクリック状態(onclick)を作り出す
jQuery('#hoge').trigger("click");

// id=fuga の要素にマウスオーバーさせる(onmouseover)
jQuery('#fuga').trigger("mouseover");

注意

<input type="text" name="hoge" id="hoge_id">
のフォームがあるとき
$("input[name='hoge']").trigger("focus"); // 動作しません ☓ NG
$("#hoge_id").trigger("focus"); // 動作します ○ OK

となりますので注意。

指定できるのは次のイベントです

 blur, focus, load, resize, scroll, unload, beforeunload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup

*キーボードの入力状態を強制的に作り出す

var evt = $.Event('keydown');
evt.keyCode = 39;    // キーボードの右矢印(→)入力
$('#hoge').trigger(evt);

jQueryのkeycodeはこちらで調べられます

http://goo.gl/HO6ong

keycode一覧表

http://goo.gl/5UwW2

No.853
05/11 13:39

edit

jQuery

JavaScript(jQuery)でスマートフォン(iPhone, iPad, Android)を判別する

jQueryでスマートフォン(iPhone, iPad, Android)を判別するには下記のようにします

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(function(){
	var agent = navigator.userAgent;
	if(agent.search(/iPhone/) != -1 || agent.search(/iPad/) != -1 || agent.search(/iPod/) != -1 || agent.search(/Android/) != -1){
		alert('スマートフォンです:' + agent);
	}
});
</script>
No.846
04/24 15:55

edit

jQuery
iPhone

GoogleによるJavaScriptホスティング(CDN)を使用する

# ● GoogleによるJavaScriptホスティング(CDN)を使用する

https://developers.google.com/speed/libraries/


### 使用方法( jQuery 2系を呼び出す )

```

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

```


### 使用方法( jQuery 3系を呼び出す )

```

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

```

No.795
06/22 18:50

edit

Google
jQuery
prototype.js

jQueryのテンプレートプラグイン【 jQuery.tmpl 】を使用する

jQuery Plugin .tmpl()

http://api.jquery.com/jquery.tmpl/

ダウンロードはこちら

https://github.com/jquery/jquery-tmpl

ソースは以下のとおり

手順は

1. jqueryとjquery.tmpl を読み込む
2. テンプレートを定義する(<!-- template -->で囲まれたところ)
3. データを定義する( var data = ..... ; のところ)
4. テンプレートを表示する ( $tmpl ....... のところ )

です。

簡単ですね。

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

<body>
<div id="target"></div>

<!-- template -->
<script id="template" type="text/x-jquery-tmpl">
  <li>${name}</li>
</script>
<!-- /template -->

<script>
var data = [ { "name" : "HOGE hofe" }, { "name" : "FUGA fuga" } ];
alert( $.tmpl( $('#template'), data ).html() );
$.tmpl( $('#template'), data ).appendTo( "#target" );
</script>

</body>
</html>
No.843
04/09 14:02

edit

Ajax
jQuery

jQueryでオブジェクト(HTMLタグ要素)の存在、表示、アニメーション中を判別する

jQueryでオブジェクト(HTMLタグ要素)の存在を判別するには <b>.length</b>や <b>.is()メソッド</b> を使用します。

●<div id="hoge">が<b>『存在するかどうか?』</b>を調べるには

if($('#hoge').length) {
    alert('存在します');
}

とします。

●<div id="hoge">が<b>『表示中か非表示か?』</b>を調べるには

// 方法1. 「透明度」と「visibility」両方を確認する(おすすめ)
  if ($('#hoge').css('opacity') > 0 && $('#hoge').filter(':not(:hidden)').length ){
    alert('表示中です');
}
// 方法2. 「visibility」のみ確認する
if( $('#hoge').filter(':not(:hidden)').length ){
    alert('表示中です');
}
// 方法3. 「visibility」のみ確認する
if ( $('#hoge').is(':visible') ){
    alert('表示中です');
}

●<div id="hoge">が<b>『CSS3アニメーション中かどうか?』</b>を調べるには

    console.log( $('#hoge').css("transform") );
    console.log( $('#hoge').css("transition") );
    console.log( $('#hoge').css("opacity") );

など、CSSのプロパティを取得してきて変化中の値を見るといいでしょう。

●<div id="hoge">が<b>『JavaScript(jQuery)アニメーション中かどうか?』</b>を調べるには

// 方法1.
if ( $("#hoge:animated").length ){
	alert('アニメーション中です');
}
// 方法2.
if ( $("#hoge").is(":animated") ){
	alert('アニメーション中です');
}

.is() メソッドを覚えておくと色々便利です。

上記の例以外にも

// 要素にフォーカスがあたっているなら
if ($("#hoge").is(":focus") ){
    alert('フォーカスしています');
}

// 要素が最後の要素であれば
if ( $(".fuga").is(":last-child") ){
    alert('最後の要素です');
}

// 要素が表示中なら
if( $("#hoge").is(":visible") ){
    alert('表示中です');
} 

// 要素が非表示なら
if ( $("#hoge").is(":hidden") ){
    alert('非表示です');
}

// 要素がfugaクラスを内包しているなら
if ( $("#hoge").is(":has('.fuga')") ){
    alert('.fugaクラスを内包しています');
}
 
No.829
06/05 15:17

edit

jQuery

Windows版IE6, IE7, IE8 での<label>タグがきかない不具合に対応する。

Windows版IE6, IE7, IE8 での<label>タグがきかない不具合に対応する。

チェックボックスやラジオボタンの様にクリックするのが小さいフォームを作るときは、

フォームの横の文字もクリック出来るようにしておくととても便利です。

それを実現するのが<label>タグなのですがIEでは以下の2つの不具合があります。

■ 1.IE6では<label></label>でテキストを囲んだだけでは動作しない

以下のコードはIE6では動作しません。

<label><input type="checkbox" />チェックボックス1</label>
<label><input type="checkbox" />チェックボックス2</label>

以下のように全ての<checkbox>にidをセットして、<label>タグでそのIDを指定します。

<input type="checkbox" id="label_1" /><label for="label_1">チェックボックス1</label>
<input type="checkbox" id="label_2" /><label for="label_2">チェックボックス2</label>

■ 2.IE6, IE7, IE8では<label>タグ内に画像があった場合その画像をクリックしても何も起こらない

IE9では修正されていますが、IE6,7,8では以下のコードの時画像をクリックしてもチェックボックスにチェックはつきません。

<input type="checkbox" id="label_1" /><label for="label_1"><img src="photo.jpg" /></label>

それを修正するにはJavaScript(jQuery)プラグインを使用します。

$(function () {
        $('label > img').click(function () {
            $('#'+$(this).parent().attr('for') ).focus().click();
        });
});

これを「jquery.ie678label.js」で保存してサーバーにアップロード。

条件付きコメントでIE8以下のブラウザにのみ読み込ませます

<!--[if lte IE 8]>
<script type="text/javascript" src="jquery.ie678label.js"></script>
<![endif]-->

これhtmlは何も書き換えずにIE6,7,8,で<label>内画像をクリックできるようになります。

No.826
04/03 14:45

edit

jQuery

Google Maps を住所から自動生成するサンプル ( Google Maps Platform API 使用)

● Google Maps を住所から自動生成するサンプル ( Google Maps Platform API 使用)

PHPや.Net などで動的に出力されるページにGoogle Mapsを埋め込む場合、 「住所を入力して地図を表示」→「埋め込みコードを取得」→「ページに貼り付け」 をやっていたのでは面倒な場合があります。

そこでGoogle Maps API を使用して簡単に地図表示を行います。

● 1. Google Maps PlatformでAPIキーを作成する

アカウント作成(GoogleアカウントがあればOK)が必要です。 ここにログインし、APIキーを作成します。

* APIキーの作成

・新しいプロジェクトを作成する
・作成したプロジェクトで「Maps JavaScript API」「Geo Coding API」を有効にする
・「API」→「Google Maps Platform」を選択し「認証情報」タブを選択する
・「API とサービスの認証情報にアクセスして行います」のリンクをクリックしてAPIキーを作成する
・「認証情報を作成」→「APIキー」を選択すると新しいAPIキーが作成されます。
・「キーの制限」を適宜設定します。

● 2. Google Maps を住所から自動生成するサンプル

html内に Google Map を表示するDIV タグをセット

<div id="my_map" style="width: 600px; height: 600px"></div>

JavaScriptから呼び出す

<script src="https://maps.googleapis.com/maps/api/js?key=<YOUR-API-KEY>&callback=initMapWithAddress" async defer></script>
<script>
var _my_address = '表示させたい地図の住所';
function initMapWithAddress() {
    var opts = {
        zoom: 15,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
    };
    var my_google_map = new google.maps.Map(document.getElementById('my_map'), opts);
    var geocoder = new google.maps.Geocoder();
    geocoder.geocode(
      {
        'address': _my_address,
        'region': 'jp'
      },
      function(result, status){
        if(status==google.maps.GeocoderStatus.OK){
            var latlng = result[0].geometry.location;
            my_google_map.setCenter(latlng);
            var marker = new google.maps.Marker({position:latlng, map:my_google_map, title:latlng.toString(), draggable:true});
            google.maps.event.addListener(marker, 'dragend', function(event){
                marker.setTitle(event.latLng.toString());
            });

        }
      }
    );
  }
</script>

なお、地図のサイズは

<div id="google_map" style="width: 600px; height: 600px"></div>

をスタイルで書き換えます。

添付ファイル1
No.824
01/30 12:06

edit

添付ファイル

jQuery
Google

jQueryのアニメーションにイージングをかける

■ jQueryのアニメーションにイージングをかけるplugin
http://gsgd.co.uk/sandbox/jquery/easing/

イージングサンプルはこちら
http://semooh.jp/jquery/cont/doc/easing/
No.820
10/12 10:59

edit

jQuery

jQueryで画像にマスクをかける画像ギャラリー【mbmaskedgallery】

■ mbMaskedGallery.js (要jQuery)

http://pupunzi.open-lab.com/2009/02/16/mbmaskedgallery/

サンプルは以下のとおり

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="mbMaskedGallery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
	$("#id名").mbMaskGallery({
		type:"normal",			// または "random"
		transition:"crossfade",		// または "normal"
		galleryMask:"photo.png",	//マスクする画像
		galleryColor:"black",		//マスクの背景色
		galleryLoader:"loader.gif",	//ローディング画像
		loaderOpacity:.3,		//ローダーの透明度
		loader:true,			// または "false"
		fadeTime: 200,			//フェードの時間
		navId:"",
		nextPath:"",
		prevPath:"",
		slideTimer: 2000
		changeOnClick:false,

	});
});
</script>
<body>
<div id="sample">
<img src="g/sky.jpg">
<img src="g/muuu_01.gif">
<img src="g/muuu_02.gif">
<img src="g/muuu_03.gif">
</div>

No.819
10/04 13:54

edit

jQuery
画像

Appleの検索窓のようにフォーカスするとサイズが変わるテキスト入力を実現する

Appleの検索窓のようにフォーカスするとサイズが変わるテキスト入力を実現するjQueryプラグイン

■ jQuery Smooth Animated Search Field Freebie

http://thefinishedbox.com/freebies/scripts/jquery-animated-search/

デモはこちら

http://thefinishedbox.com/files/freebies/jquerysearch/index.html


No.797
05/16 14:03

edit

jQuery

jQueryでiPhoneの電話帳のように画面左に「A〜Z」のショートカットインターフェースを再現する

jQueryでiPhoneの電話帳のように画面左に「A〜Z」のショートカットインターフェースを再現する
■ slidernav
http://devgrow.com/slidernav/
デモ
http://devgrow.com/slidernav-jquery-plugin/

No.796
05/27 13:50

edit

jQuery
iPhone

Googleサジェストライクなプラグイン

入力テキストの値を補間するGoogleサジェストライクなプラグイン

● Bootstrap combbox

http://jsdo.it/mottsu/qqoq

デモ
http://logic.moo.jp/livedemo/bootstrap_combo_box/test.html

● jquery.ajax-combobox

https://github.com/sutara79/jquery.ajax-combobox/

・デモ

http://logic.moo.jp/livedemo/jquery_combo_box/mydemo.html

$(function() {
  $('#foo').ajaxComboBox(
    'mydemo.json',
    {
      db_table: 'name',
      per_page: 20,
      navi_num: 10
    }
  );
});

mydemo.json の中身はこんな感じにします

{
  "result":[
    {"name":"りんご"},
    {"name":"オレンジ"},
    {"name":"みかん"},
    {"name":"メロン"},
    {"name":"グレープフルーツ"},
    {"name":"すいか"},
    {"name":"もも"},
    {"name":"洋梨"},
    {"name":"いちご"},
    {"name":"マンゴー"}
  ] ,
  "cnt_whole":"10"
}

● typeahead.js

https://github.com/twitter/typeahead.js/

● jquery.autocomplete.js

http://docs.jquery.com/Plugins/Autocomplete

サンプルコード

$(function() {
	$("#Keywords").autocomplete('/ajax_suggest.php?flag=amazon', {
		delay : 50
	}).keydown(function(event){
        if( event.keyCode == 13 ){
            if( !event.isDefaultPrevented() ){
                return false;
            }
			else{
				document.form1.submit();;
			}
        }
    });
});
No.794
11/18 15:49

edit

jQuery
Ajax

リファラー(REFERRER)を消して外部ページに移動する

外部ページに移動するときに リファラー(HTTP_REFERER)をサーバに送りたくない時があります。そんなときは次のやり方で行けます。

動作サンプルはこちら

https://pgmemo.tokyo/data/filedir/569_1.html

Safari5 , Chrome で有効な方法

<a href="data:text/html;charset=utf-8,%3Chtml%3E%0D%0A%3Cscript%20%3E%0D%0Alocation.replace(%22http%3A%2F%2Fwww.teria.com%2F~koseki%2Fmemo%2Freferrer%2Fview.php%22)%3B%0D%0A%3C%2Fscript%3E%0D%0A%3C%2Fhtml%3E%0D%0A">リファラ消し</a>

Firefox4 , IE6,7,8 で有効な方法

<a href="javascript:document.open();document.write('<meta http-equiv=\'refresh\' content=\'0;url=http://taruo.net/e/\'>');document.close();">3. リファラ消し</a>

ただしOperaではうまく動作しません。

その場合苦肉の策としてGoogleを経由するという方法を使います

<a href="http://www.google.com/url?q=http://taruo.net/e/">4. リファラ消し(Using Google)</a>

HTML5の rel=noreferrer を使用する方法

<a href="http://taruo.net/e/" rel=noreferrer>5. リファラ消し</a>

◆ 外部リンク時にリファラーを消すjQueryプラグイン【jquery_kill_referrer.js】

https://pgmemo.tokyo/data/filedir/569_3.js

これを jquery_kill_referrer.js という名前で保存して

jQueryとともに読み込ませます(jquery.jsは各自用意してください)

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="jquery_kill_referrer.js"></script> 

読み込ませるだけで、そのページ内の外部リンク全てにreferrerを消す処理を付け加えます

(ただしOperaは未対応)

添付ファイル1
添付ファイル2
No.569
03/28 10:15

edit

添付ファイル

jQuery

ドラッグ、ドロップで要素を順番変更するjQuery UI Sortableモジュール

ドラッグ、ドロップでテーブルやリスト要素を順番変更する【jQuery UI Sortableモジュール】というのがあります。

● JQUERY SORTABLE

http://jqueryui.com/demos/sortable/
http://jqueryui.com/download ←ダウンロードはこちら

js

<script type="text/javascript" src="jquery.min.js"></script> 
<script type="text/javascript" src="jquery-ui-1.8.xxxxx.js"></script> 
<script type="text/javascript"> 
$(function(){
$("#sortable").sortable({
revert: true ,
cursor   : 'move' ,
tolerance: 'pointer' ,
update: function(event, ui) {
    var data  = $("#sortable").sortable("serialize");
    var data2 = $('#sortable').sortable('toArray').toString();
    alert(data);
    alert(data2);
}
})
.disableSelection();
});
<script>

html

<ul id="sortable"> 
<li id="list_1">ほげほげ</li> 
<li id="list_2">ふがふが</li> 
<li id="list_3">てすてす</li> 
</ul>

とするだけで、<li>要素がドラッグ&ドロップで順番入れ替えできます。
入れ替え後のデータは data(PHP用) , data2(CSV形式) に入るのでそれをプログラムに渡すといいでしょう。
オプションは

revert: true , // アニメーションあり
cursor   : 'move'  // 移動中は十字カーソルに変更,
tolerance: 'pointer' , // 要素が重なった瞬間に入れ替え判定

がオススメです。

オプションの解説 : http://cly7796.net/wp/javascript/try-the-sortable-of-jquery-ui/

No.713
07/31 09:54

edit

jQuery
DOM
Ajax

JavaScriptで外部サイトをスクレイピング【Cross-Domain-Ajax】

JavaScriptで外部サイト(別ドメイン)のファイルを取得しようとすると、crossdomainの制約にひっかかってエラーとなります。
そこでCross-Domain-Ajaxプラグインを使用します。
これはYahoo Query Language (YQL)を使用してクロスドメインの壁を越えようというものです
(ですのですべてのサイトのデータが取得できるわけではありません)

● jquery.xdomainajax.js

https://github.com/padolsey/jQuery-Plugins/blob/master/cross-domain-ajax/jquery.xdomainajax.js

● 例1:Yahooのトップを取得します。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.xdomainajax.js"></script>
<script type="text/javascript">
	uri = 'http://www.yahoo.co.jp/';
	$.get(uri, function(data){
		alert(data.responseText);
	});
</script>

● 例2:Yahooのキーフレーズ抽出APIを呼び出してみます。

appid は各自用意してください。 ajaxメソッドを呼び出していますが、【type:'POST'】は使用出来ません。 【type:'GET'】の時のみ正常に動作します。

    // Cross Domain Ajax ajax()メソッド
    jQuery.ajax({
        url: 'http://jlp.yahooapis.jp/KeyphraseService/V1/extract',
        type: 'GET',
        data: {
            appid    : 'XXXXXXXXXX',
            sentence : '庭には二羽鶏がいる',
            output   : 'json'
        },
        success: function(data) {
            alert( jQuery(data.responseText).text() );
        }
    });

簡単ですね。 おすすめです。

No.759
06/12 10:43

edit

Ajax
jQuery

jQueryによるAjax操作の基本

jQueryによるAjax操作の基本

  • きっかけとなるボタン
  • 結果を表示するDIVタグ を用意します。

● jQuery の ajax(GETメソッド)で動的にjson読み込みをした後にタグにjsonの内容をテキストに変換して表示する

<button type="button" class="btn btn-primary btn-sm" onclick="get_stripe_invoice_json('{{ $v->id }}' , this );">Invoice Json</button>
<textarea class="json_detail" id="ajax_123456789"></textarea>                    
function get_stripe_invoice_json( id, btn_obj ){
    $.ajax({
        url: 'ajax取得するURL' ,
        type:'GET',
        data:{
            'id':123456789,
        }
    })
    // on Success
    .done( (data,status) => {
        json_string = JSON.stringify(data,null, 4);
        $('#ajax_' + id).html( json_string ).fadeIn();
    })
    // on Error
    .fail( (data) => {
        alert('Ajax Error');
    })
}

● 要素の内容を書き換える( .html() )

$("#hoge").html('<p>書き換える要素</p>');

● 要素に追加する( .append() )

$("#hoge").append('今ある要素のいちばん後ろに追加します');

● 要素を動的に( test.phpを読み込んで) に追加する( .load() )

$("#hoge").load("test.php,null,function(){
	alert('読み込み完了');
});

● 要素を削除する( .remove() )

$("#hoge").remove();

● (class="hoge"な要素の)CSSプロパティを書き換える

$('.hoge').css({
	'width'  : '100px' , 
	'height' : '200px'
});

● 親要素、子要素を選択するセレクタの記述

#contents の中にある .title 要素を取得する場合

$(.title', '#contents');           // ☓ 遅い
$('#contents').find('.title'); // ○ 高速
$(this).parent().find('.myclass'); // 全ての子要素の中から 「myclass」クラスを取得。
$(this).children('.myclass'); // 直下の子要素の中から 「myclass」クラスを取得。孫要素は取得できない

● 要素の属性を取得する。属性を変更する

var img_src = $("img").attr("src");  // 取得
$("img").attr("src", "b.jpg");  // 変更

● セレクタが正しく動作して、jQueryオブジェクトが取得できているかどうかを調べる

var jq_obj = $('MY_ID');
if ( $(jq_obj).length > 0 ){
	alert('jQueryオブジェクトが正しく取得できています。');
}

$(function(){

$('.my_ajax_btn').on('click',function(){
    $.ajax({
        url:'./request.php',
        type:'GET',				// GET または post
        data:{
            'id':$('#userid').val(),
        }
    })
    // on Success
    .done( (data) => {
        $('.result').html(data);
        console.log(data);
    })
    // on Failed
    .fail( (data) => {
        $('.result').html(data);
        console.log(data);
    })
    // on Always
    .always( (data) => {
    });
});

});

No.754
12/03 10:26

edit

jQuery
Ajax

HTML5またはcssまたはJavaScript(jQuery未使用)で画像の先読み(プリロード)を行う

● CSS、HTMLのみでプリロードを行う(全ブラウザOK)

#preloadedImages {
       width: 0px;
       height: 0px;
       display: inline;
       background-image: url(path/to/image1.png); /* 読ませたいイメージ1 */
       background-image: url(path/to/image2.png); /* 読ませたいイメージ2 */
}
<div id="preloadedImages"></div>

● HTML5のみでプリロードを行う

IEに対応しなくていい場合は 次の link rel="preload" が簡単でいいと思います。
<head>〜ないにタグを1つ加えるだけです。これでプリロードが行われます。(表示はされません。)

<html>
<head>
 <link rel="preload" href="path/to/image1.png" as="image">
</head>
asに指定する値 ファイルの種類
audio 音声ファイル。
document <frame> や <iframe> の中に埋め込まれる HTML 文書。
embed <embed> 要素の中に埋め込まれるリソース。
fetch ArrayBuffer や JSON ファイルのような、フェッチまたは XHR 要求でアクセスされるリソース。
font フォントファイル。
image 画像ファイル。
object <embed> 要素の中に埋め込まれるリソース。
script JavaScript ファイル。
style スタイルシート。
track WebVTT ファイル。
worker JavaScript ウェブワーカーまたは共有ワーカー。
video Video file.

● JavaScript(jQuery使わず)でプリロードを行う(全ブラウザOK)

var img_folder = "./assets/img/common";

var preload_images = [
	img_folder + "/pc-small-header__top--on.png" ,
	img_folder + "/pc-small-header__info--on.png" ,
];

document.addEventListener('DOMContentLoaded', function(){
	for (var i = 0; i < preload_images.length; i++) {
	    var img = new Image();
	    img.src = preload_images[i];
	}
});

No.740
09/05 21:21

edit

jQuery

JavaScriptでCookie(クッキー)を簡単に扱う

■ jQuery.cookie.js

● ダウンロードはこちら(ZIPボタンをクリックでダウンロード開始)

https://github.com/carhartl/jquery-cookie

● CDNはこちら

<script type="text/javascript" src="cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

使い方は

var hoge = $.cookie('the_cookie'); // get cookie
$.cookie('the_cookie', 'the_value'); // set cookie
$.cookie('the_cookie', 'the_value', { expires: 7 }); // set cookie with an expiration date seven days in the future
$.cookie('the_cookie', '', { expires: -1 }); // クッキーの削除
$.cookie('the_cookie', 'the_value', { expires: 7, path: '/', domain: 'jquery.com', secure: true });
$.cookie('cookiename','data',{ expires: 7 });//書き込み{保存days}
document.write($.cookie('cookiename'));//読み出し
No.700
05/16 15:23

edit

jQuery
Cookie

Gmailのように「shift + クリック」でチェックボックスの複数選択を可能にするjQueryプラグイン

Gmailはチェックボックスを複数一気に選択したいときに先頭をまずクリックして、次に最後のチェックボックスを【シフト+クリック】するとその間にあるチェックボックスが一気に選択できて非常に便利なのですが、それをjQueryプラグインで実現するには以下のようにします。

● 1.jQueryをダウンロード

http://jquery.com/ からjQueryをダウンロードします。(ダウンロードしたファイル名を jquery.js とします。)

● 2. jQuery Field Plug-inをダウンロード

http://www.pengoworks.com/workshop/jquery/field/field.plugin.htm から【jquery.field.js】をダウンロードします。

● 3. 以下のようなチェックボックスを含むhtmlを用意します

<form>
  <input type="checkbox" name="user_id" id="ch_1" value="1"><label for="ch_1">Option 1</label>
  <input type="checkbox" name="user_id" id="ch_2" value="2"><label for="ch_2">Option 2</label>
  <input type="checkbox" name="user_id" id="ch_3" value="3"><label for="ch_3">Option 3</label>
  <input type="checkbox" name="user_id" id="ch_4" value="4"><label for="ch_4">Option 4</label>
  <input type="checkbox" name="user_id" id="ch_5" value="5"><label for="ch_5">Option 5</label>
</form>

● 4. 用意したhtmlのヘッダに以下の記述を追加

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.field_j.js"></script>
<script>
	$(document).ready(
		function (){
			$('input[@name="user_id"]').createCheckboxRange();
		}
	);
</script>

以上で「シフト+クリック」による複数選択が実行できます。 とても便利。

また「シフト+クリック」実行後にコールバック関数を指定することもできます。

function (){
	$('input[@name="user_id"]').createCheckboxRange( function(){
		alert('選択完了');
	} );
}
No.591
08/07 10:06

edit

jQuery
フォーム

JavaScript(jQuery)でリッチテキスト編集(wysiwyg)エディタ

JavaScript(jQuery)でリッチテキスト編集できるライブラリを探してみる。

■ cleditor(jQueryプラグイン)

http://premiumsoftware.net/cleditor/

■ jwysiwyg(jQueryプラグイン)

https://github.com/akzhan/jwysiwyg (ダウンロード)

http://akzhan.github.com/jwysiwyg/help/examples/ (デモ)

■ Yahoo! UI (おすすめ)

http://developer.yahoo.com/yui/editor/

http://developer.yahoo.com/yui/examples/editor/flickr_editor.html

■ open wysiwyg (Safari2×)

http://www.openwebware.com/products/openwysiwyg/demo.shtml

■ FCKeditor(Safari2×)

http://www.fckeditor.net/

■ TinyMCE(Safari2×)

http://tinymce.moxiecode.com/index.php


No.589
04/28 12:46

edit

jQuery

最も簡単な画像のロールオーバー導入方法 (jQuery)

■ jQuery用プラグイン jquery.easyrollover.js を使用します。

■ 1. scriptファイルを読み込ませます

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.easyrollover.js"></script>

■ 2. ロールオーバー画像ファイル名の最後に _on をつける。

例: 【image.gif】 の場合 【image_on.gif】

■ 3. HTMLの<img>タグに属性 class="rollover" を追加する

<img src="image.gif" >
  ↓
<img src="image.gif" class="rollover" >

以上の手順で完了。

簡単です。

jquery.easyrollover.js のダウンロードはこちらから↓

添付ファイル1
No.579
01/21 10:20

edit

添付ファイル

jQuery
画像

jQuery , prototype.js 用「ツールチップ(吹き出し説明)」表示ライブラリ

「ツールチップ」とはオンマウス時に表示される画像やテキストのことです。

Windows IEで画像の上にマウスを置いてしばらく待つとALT属性が見えるというアレですね。

これを簡単に実装するライブラリを紹介。jQuery、prototype.js プラグインメインで探してみました。

■ script.js ( prototype.js jQuery不必要 )

http://www.leigeber.com/2008/06/javascript-tooltip/

・おすすめ

・ツールチップがフェードして現れます

■ cooltips ( 要prototype.js , script.aculo.us )

http://okonet.ru/projects/tooltips/index.html

・フェードエフェクトで出現するツールチップ

・ツールチップ枠のデザインはあらかじめ用意されたものを使用することになりそう…。

■ jTip A jQuery Tool Tip ( 要 jQuery )

http://www.codylindley.com/blogstuff/js/jtip/

・Ajaxで動的にツールチップの中身を読み込んで表示します。

・日本語テキストを扱うにはハックする必要がありそう…。

・ツールチップ枠のデザインはあらかじめ用意されたものを使用することになりそう…。

■ jQuery plugin: Tooltip ( 要 jQuery )

http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/

title属性やファイル名をツールチップとして表示させるというライブラリ。

オンマウスになった瞬間に表示されます。

使い方

<script type="text/javascript" src="jquery.tooltip.pack.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.tooltip.css" >
<script>
jQuery('img').tooltip({
    delay: 0, 
    track: true ,
    showURL: false
});
</script>

オプション

http://docs.jquery.com/Plugins/Tooltip/tooltip#toptions


その他 jQueryライブラリはこちらで取り上げられてます

http://coliss.com/articles/build-websites/operation/javascript/356.html

No.564
08/01 10:19

edit

jQuery
prototype.js

jQuery html()メソッドと DOM.innerHTML の違い

例えば id="hogehoge" の中身を書き換えるには

■ prototype.js + DOM の場合

var mytext='aiueo';
$('hogehoge').innerHTML=mytext;

■ jQueryの場合

var mytext='aiueo';
j$("#hogehoge").html(mytext);

と書けますが、このとき

var mytext=0;
$('hogehoge').innerHTML=mytext; // 0 が表示される
j$("#hogehoge").html(mytext); // 何も表示されない

という違いがあるようなので注意!

No.553
05/27 15:37

edit

prototype.js
jQuery

window.onload 前でも DOM 処理が可能なら通知してくれる domready.js

JavaScriptでDOM操作を行うときはDOMツリーの完成を待ってから処理を行う必要があるため

window.onload を待って処理を行う必要があります。

しかし window.onload は全てのファイルの読み込み完了時に発生するイベントなので、DOMツリーの完成だけを待っている場合画像の読み込み等も待たなくてはならず、無駄が生じます。

そこでDOMツリーの完成を待つイベントを発生させるライブラリ domready.js ↓

[window.onload 前でも DOM 処理が可能なら通知してくれる domready.js - METAREAL](http://weblog.metareal.org/2007/07/10/domready-js-cross-browser-ondomcontentloaded/)

domready.js 記述方法

Event.domReady.add(function() {
       alert('DOMツリーの読み込みが完了しました');
});

ちなみに jQuery では $(document).ready() で実装されています。

$(document).ready(function(){
       alert('DOMツリーの読み込みが完了しました');
});

jQueryで $(window).load() と同じ動作をさせる

jQuery.event.add(window, "load", function(){
       alert('全てのデータの読み込みが完了しました');
});

YUIでは onDOMReadyで実装されています。

YAHOO.util.Event.onDOMReady( alert('DOMツリーの読み込みが完了しました') );

prototype.jsでは Version 1.6以降 で contentloaded というメソッドで実装されています

document.observe('contentloaded', function() {
    alert('DOMツリーの読み込みが完了しました');
});

MooTools では domready イベントで実装されています

window.addEvent('domready', function() {
    alert('DOMツリーの読み込みが完了しました');
});
No.550
07/17 13:20

edit

DOM
jQuery
prototype.js
YUI

入力文字数によってテキストフィールド<textarea>のサイズを変える

● A. jQueryを使用してテキストエリアを動的に変更する。【jquery.elastic.js】

https://github.com/janjarfalk/jquery-elastic

$(document).ready(function(){
    // 読み込み時にリサイズ
	$('textarea#my_text_area').elastic();
    // クリック時にリサイズ
	$('textarea#text_name').bind("click", function(){
	  $('textarea#text_name').elastic();
	});
});

● B. テキストエリアを動的に変更する。【autoresize.jquery.js】

https://github.com/jackmoore/autosize
jQueryを使用したくない場合はこちら

// from a NodeList
autosize(document.querySelectorAll('textarea'));

// from a single Node
autosize(document.querySelector('textarea'));

// from a jQuery collection
autosize($('textarea'));

● C. jQueryを使用してテキストエリアを動的に変更する。【jquery.autogrow-textarea.js】

http://javascriptly.com/2008/09/quick-useful-jquery-plugins/ ダウンロード: http://github.com/jaz303/jquery-grab-bag/blob/master/javascripts/jquery.autogrow-textarea.js

$(document).ready(function(){
  $('textarea#mytextarea').autogrow();
});
No.520
12/13 14:34

edit

prototype.js
jQuery

jQuery, prototype.js でラジオボタンの値を取得する

jQueryでは次のように記述します

// <input name="myform" type="radio" value="yes" />の値を取得
val = $("input:radio[name='myform']:checked").val();

prototype.js では選択されたラジオボタンの値を取得する方法がないみたい。。。

なので↓のようにする

// フォーム name="FM"  ラジオボタン name="radio_flag" の値を取得する 
val = Form.serialize($(FM)).toQueryParams()['radio_flag'];

■ prototype.js を使わない方法

// ラジオボタン name="my_radio" の値を取得
function getRadio() {
    var radioGroup = document.forms[0].my_radio;
    for (i=0; i<radioGroup.length; i++) {
        if (radioGroup[i].checked == true) {
            return radioGroup[i].value
        }
    }
}
No.241
02/12 17:45

edit

prototype.js
jQuery