Archived posts in ' "jQuery"

slideToggle()メソッドのバグについて

Posted by specterant on 2013.04.11

jQueryのslideToggle()メソッドを使用した時に、
IE8でmarginの設定が消えてしまうバグに遭遇しました。
そこで、このバグの回避方法の備忘録です。

「margin」じゃなく、「padding」で書く。
どうしても、「padding」で書けない時は、親要素に「overflow: hidden;」を設定する。
その他にも色々と回避方法があるみたいですが、
上記のどちらかが簡単かと思います。

下記ページを参考にさせていただきました。
[JQuery覚書]IE8でSlidetoggle()のmarginが消えるバグの回避方法 – ponnao-clip

No Comments

jQueryのfindメソッド

Posted by specterant on 2012.07.23

findメソッドは、指定した要素の子要素を、引数で指定した要素に合致したものを取得します。
例えば、ulタグのliタグに背景色を追加しちゃうみたいなことが出来ます。

/********************************
//書式
********************************/
$('セレクタ').find('取得したい子要素');
/********************************
//そんな訳で、記述例
********************************/
$('ul').find('li').css('background-color', 'green');

/********************************
//HTMLの記述
********************************/
<ul>
<li>liタグ</li>
<li>liタグ</li>
<li>liタグ</li>
</ul>

//jQueryで下記のように変更される。
<ul>
<li style="background-color: green;">liタグ</li>
<li style="background-color: green;">liタグ</li>
<li style="background-color: green;">liタグ</li>
</ul>
ちなみに、findメソッドを利用した方が、高速化するみたいです。
//findメソッドを利用しない場合
$('ul li');

//findメソッドを利用する場合
$('ul').find('li');

No Comments

FancyBoxの設定メモ

Posted by specterant on 2012.05.31

たまにFancyBoxを使用するのですが、
設定する時に、オプションを忘れてしまうので、
私用でコピペできるようにメモです。

//ちなみに各オプションはデフォルト値を記述しています。
$("適用したい要素").fancybox({ 
	'width': 560,
	'height': 340,
	'margin': 20,
	'padding': 10,
	'scrolling': 'auto',
	'centerOnScroll': false,
	'autoScale': true,
	'overlayColor': '#666',
	'overlayOpacity': 0.3,
	'titleShow': true
});
詳しくは、下記の参考にさせていただいたサイトを見ていただけたらと。

参考にさせていただいたサイト
Fancyboxで設定できるオプションまとめ|JavaScript|グラビカ学習帳~グラビティ・ワークスの備忘録と知識の共有と蓄積
Fancybox – Fancy jQuery lightbox alternative

※ちなみに、バージョン2から商用利用する場合、有料みたいです。

No Comments

jQuery Mobileを触ってみました

Posted by specterant on 2012.05.30

スマートフォンサイトの構築も出来ないとな〜って思い、
jQuery Mobileを触ってみました。

まだ、ほんの少しだけ触ったので、大それた事は言えないのですが、便利だなぁ〜って思いました。
とりあえず、実装したいのであれば、かなり便利だと思います。

ただ、オリジナルのデザインにするのであれば、
色々とCSSを弄らないとダメなので、慣れるまでは時間がかかりそうなだなぁ〜と思いました。

で、とりあえず私用メモします。

まずは、HTMLです。
divタグ(通常)の属性にdata-role=”要素名”を追加し、それぞれ役割を決めます。
data-role属性は省略することができるのでが、複数ページを作成する場合はdata-role=”page”は必須になります。
あと、jquery.mobile.cssとimagesフォルダ(jQuery Mobileに入っていたもの)は同階層にしといた方が楽ちんだと思います。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8" />
	<title>jQuery Mobile Template</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" /> 
	<link rel="stylesheet" href="./jquery.mobile.css" />
	<script src="./jquery.js"></script>
	<script src="./jquery.mobile.init.js"></script>
	<script src="./jquery.mobile.js"></script>
</head>
<body>
<!--+++++++++++++++++++++++++++++++++++++++++++++ [ contents area start ] +++++++++++++++++++++++++++++++++++++++++++++-->
<div data-role="page">
	<header data-role="header">
		<h1>ヘッダーエリア</h1>
	</header>

	<div data-role="content">
		<h2>コンテンツエリア</h2>
		<p>テキスト</p>
	</div>

	<footer data-role="footer">
		<small>&amp;nbsp;&amp;copy;&amp;nbsp;コピーライト</small>
	</footer>
</div>
<!--+++++++++++++++++++++++++++++++++++++++++++++ [ //contents area end ] +++++++++++++++++++++++++++++++++++++++++++++-->
</body>
</html>

続いて、jQuery Mobileの初期設定用のJavaScriptを読み込む。
別に外部でなくてもいいんですが、jquery.mobile.jsを読み込む前に読み込ませないとダメみたいです。
<script src="./jquery.mobile.init.js"></script>

そして中身です。
諸々、英語なので日本語化したり、ページ遷移のアニメーションを統一させたい時に設定します。
ちなみに、これは必須ではないです。
$(document).bind('mobileinit', function(){
	$.mobile.page.prototype.options.addBackBtn = true; //戻るボタンを表示
	$.mobile.defaultPageTransition = "fade"; //ページ遷移のアニメーション
	$.mobile.loadingMessage = '読み込み中';
	$.mobile.pageLoadErrorMessage = '読み込みに失敗しました';
	$.mobile.dialog.prototype.options.closeBtnText = '閉じる';
	$.mobile.selectmenu.prototype.options.closeText= '閉じる';
	$.mobile.listview.prototype.options.filterPlaceholder = '検索文字列';
	$.mobile.page.prototype.options.backBtnText = '戻る';
});
とまぁ〜こんな感じです。
今後、いろいろ触ってみます。


下記が参考にさせていただいたサイトです。

参考にさせていただいたサイト
ASCII.jp:西畑一馬のjQuery Mobileデザイン入門
jQuery Mobile 1.1.0 日本語リファレンス

No Comments

クロスドメインからRSSを取得してみる

Posted by specterant on 2012.03.01

クロスドメインからRSSを取得する方法についてメモ。

  1. Google AJAX Feed APIを読み込む
  2. 読み込みたいRSSのURLを指定
  3. RSSの情報を取得
  4. 取得した情報を表示

まぁ〜、流れとしてはこんな感じです。
今は、APIキーの取得をしなくてもいいっぽい。

そんな訳で、下記が記述例。
まず、HTMLにscript要素でGoogle AJAX Feed APIを読み込む。

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
で、JavaScriptでゴニョゴニョと諸々設定する。
//Google AJAX Feed APIを読み込む
google.load("feeds", "1");

//フィード情報取得
$(function(){
	//RSS情報を格納するタグ設定
	var siteTitle = $('body').append('<h1></h1>');
	var rssBlock = $('body').append('<div></div>');
	
	//読み込むRSSファイルの設定
	var feed = new google.feeds.Feed("読み込むRSSファイルのURL");
	
	//エントリー数を設定(省略可)※初期値は4
	feed.setNumEntries(10); //10件表示
	
	//XMLファイルの情報を取得
	feed.load(function(result) {
		//XML情報取得
		var xmlentries = result.feed.entries;
		
		//サイトタイトル取得・表示
		var blogTitle = result.feed.title;
		$("h1").text(blogTitle);
		
		//XML情報が無かった場合
		if (xmlentries.length < 1) {
			$('div', rssBlock).append('<p>記事がありません。</p>');
			return false;
		}
		
		//各エントリーを表示
		$(xmlentries).each(function() {
			var titleTxt = this.title; //エントリータイトル
			var dataTxt = dateSetFunc(this.publishedDate); //エントリーの日付
			var linkUrl = this.link; //エントリーのリンク
			var description = this.contentSnippet; //120文字未満のcontent(HTMLタグが外された状態)
			$('div', rssBlock).append($('<p>' + dataTxt + '<br />' + '<a href="' + linkUrl + '" target="_blank">' + titleTxt + '</a><br />' + description + '</p>'));
		});
	});
	
	function dateSetFunc(str)
	{
	    var objDate = new Date(str);
	    var y = objDate.getFullYear();
	    var m = twoDigit(objDate.getMonth() + 1);
	    var d = twoDigit(objDate.getDate());
	    var ymd = y + "." + m + "." + d;
	    str = ymd;
	    return str;
	}
	
	function twoDigit(d)
	{
		d = "0" + d;
	    d2 = d.substr(d.length - 2, 2);
	    return d2;
	}
});
とまぁ〜こんな感じで実装すれば、今度こそブログサービスとかのRSSを取得できます。
覚えてね…オレ。

No Comments

XMLをjQueryで取得してみる

Posted by specterant on 2012.02.25

jQueryでXMLデータの読み込みのお勉強。
とりあえず、このブログのRSSを取得して表示してみることに。

取得してみると日付が「Tue, 07 Feb 2012 04:52:55 +0000」みたいに表示されてしまう。
気に食わなかったので、Dateオブジェクトでゴニョゴニョして変換しました。

で、下記がその結果です。


ほんでもって、こっちがJavaScriptの記述。

$(function(){
	$.ajax({
		url: "http://log.specterant.com/?feed=rss2",
		type: "GET",
		dataType: "xml",
		success: function(xml)
		{
			$("item", xml).each(function(entryNum) {
				var titleTxt = $("title", this).text();
				var dataTxt = dateSetFunc($("pubDate", this).text());
				var linkUrl = $("link", this).text();
				$("div#rssdata").append($('<p>' + dataTxt + ':' + '<a href="' + linkUrl + '" target="_blank">' + titleTxt + '</a></p>'));
			});
		},
		error: function()
		{
			$('div#rssdata').append('XMLの読み込みが出来ませんでした。');
		}
	});
	
	
	function dateSetFunc(str)
	{
		var objDate = new Date(str);
		var y = objDate.getFullYear();
		var m = twoDigit(objDate.getMonth() + 1);
		var d = twoDigit(objDate.getDate());
		var ymd = y + "." + m + "." + d;
		str = ymd;
		return str;
	}
	
	function twoDigit(d)
	{
		d = "0" + d;
		d2 = d.substr(d.length - 2, 2);
		return d2;
	}
});
ブログサービスとかのRSSを取得する時に便利かもってことでメモでした。

【2012.02.28追記】
ブログサービスとかのRSSを取得する時に便利かもって書いたけど、
クロスドメインから取得することになるから、そこんとこ処理しないとだめやね…。
今回記述したのは、同一ドメイン内でしか使えんから…。
近いうちにクロスドメインから取得してみますです。

No Comments

jQueryのbindメソッド

Posted by specterant on 2012.02.01

いつも忘れてしまうのでメモ。
bindメソッドは、セレクタで発生するイベントに対してイベント処理を行う関数を関連付けたり、一度に複数のイベントを設定できるモノ。

で、標準で以下のイベントが設定できます。

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

/********************************
//書式
********************************/
$('セレクタ').bind('イベント名', function() {
  //セレクタでイベントが発生した時に実行するイベント処理
});
 
 
//イベント処理を行う関数にデータを渡す場合
$('セレクタ').bind('イベント名', "イベントデータ", function(event) {
  //event.dataでイベントデータを取得
});
 
 
//複数のイベントを同時に設定する場合(※イベント名の間にスペース入れて区切る)
$('セレクタ').bind('イベント名 イベント名', function() {
  //セレクタでイベントが発生した時に実行するイベント処理
});
/********************************
//そんな訳で、記述例
********************************/
$('#div1 a').bind('click', function() {
  alert("clickしました!");
});
 
 
//イベント処理を行う関数にデータを渡す場合
/* ------------------------------------------------------------------------
var message = '#div2でイベントデータ取得!';
$('#div2 a').bind('click', function() {
  alert(message);
});
message = '#div4でイベントデータ取得!';
$('#div4 a').bind('click', function() {
  alert(message);
});
【出力】#div4でイベントデータ取得!('#div2 a'も'#div4 aも同じになっちゃう。)
------------------------------------------------------------------------ */
var message = "イベントデータ取得!";
$('#div2 a').bind('click', {m:message}, function(e) {
  alert(e.data.m);
});
 
 
//複数のイベントを同時に設定する場合(※イベント名の間にスペース入れて区切る)
$('#div3 a').bind('click mouseout', function() {
  alert("clickかmouseoutしました!");
});

参考サイト
.bind() – jQuery API
bind(type, [data], fn) – jQuery API 1.4.4 日本語リファレンス – StackTrace

No Comments

jQueryのattrメソッド

Posted by specterant on 2012.01.16

jQueryを勉強しているのですが、いつもattrメソッドの意味を忘れてしまうので覚え書き。

attrメソッドは、指定した要素の属性や属性値が操作できるモノ。
例えば、aタグのhrefを書き換えることができたりしちゃいます。

/********************************
//書式
********************************/
$('セレクタ').attr('操作したい属性名', '変更後の属性値');

//複数の属性値を同時に操作もできる
$('セレクタ').attr({
 '操作したい属性名1', '変更後の属性値1',
 '操作したい属性名2', '変更後の属性値2',
 '操作したい属性名3', '変更後の属性値3'
});

//属性値を取得したい場合(※変更後の属性値を指定しない。)
$('セレクタ').attr('取得したい属性名');
/********************************
//そんな訳で、記述例
********************************/
$('#div1 a').attr('href', 'http://log.specterant.com/');

/********************************
//HTMLの記述
********************************/
<div id="div1"><a href="http://www.specterant.com/">リンク</a></div>

//jQueryで下記のように変更される。
<div id="div1"><a href="http://log.specterant.com/">リンク</a></div>
Read the rest of this post »

No Comments