月別アーカイブ: 2014年10月

jqueryバージョンについてのメモ

忘れない為のメモ

1.X系2.X系の違い

  • 1.x 系は IE8 以前をサポートするレガシーブラウザ向けのバージョン
  • 2.x 系は IE8 以前のサポートは無いバージョン

1.9系以降の注意点

1.9.x系から、削除や変更されたコードがあり、プラグインが動かない場合が出てくる

対処法

  • 以前のバージョンを使用する方法
  • jQuery Migrate pluginを使用する方法

今の所はjquery-1.8.3.jsが一番よいのかも
ほんと、まだまだですが理解するのは大事ですね。

バージョン一覧:
jQuery Core – All Versions
http://code.jquery.com/jquery/

参考サイト
http://web-pc.net/jquery012

「bxSlider」見つけました!

bxSlider

これはいいですね!

レスポンシブ、スマフォでのタッチ操作にも対応しています。

機能も充実していて、いいです。

詳細
英語サイトなんですが、なんとなくわかると思います。
http://bxslider.com/

<div id="itemView">
	<div class="itemImg">
		<ul class="bx-Slider">
			<li><img src="img/image1.jpg" /></li>
			<li><img src="img/image2.jpg" /></li>
			<li><img src="img/image3.jpg" /></li>
			<li><img src="img/image4.jpg" /></li>
		</ul>
	</div>
	<div class="bx-pager">
		<a data-slide-index="0" href=""><img src="img/image1.jpg" /></a>
		<a data-slide-index="1" href=""><img src="img/image2.jpg" /></a>
		<a data-slide-index="2" href=""><img src="img/image3.jpg" /></a>
		<a data-slide-index="3" href=""><img src="img/image4.jpg" /></a>
	</div>
	<div class="bxNav-next"></div>
	<div class="bxNav-prev"></div>
</div>
$('.bx-Slider').bxSlider({
	auto: false,
	pagerCustom: '.bx-pager',
	nextSelector: '.slider-next',
	prevSelector: '.slider-prev',
	nextText: '',
	prevText: ''
});

RSSで読み込み、1件目とその他を分ける新着情報を作る

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("feeds", "1"); //APIを読み込みます

function initialize(){
	
	var feed = new google.feeds.Feed("読み込むRSSのURLを指定");
	
	feed.setNumEntries(5); //記事を読み込む件数を設定します
	feed.load(dispfeed);	
	
	function dispfeed(result){

		if(!result.error){
			var container_new = document.getElementById("newsFeed"); //HTMLに書き出す対象のIDを指定します
			var container = document.getElementById("newsFeedList"); //HTMLに書き出す対象のIDを指定します			
			for (var i = 0; i < result.feed.entries.length; i++) {

				var entry = result.feed.entries[i];

				var entryDate = new Date(entry.publishedDate); 
				var entryYear = entryDate.getYear();
				if (entryYear < 2000){
					entryYear += 1900;
				}
				var entryMonth = entryDate.getMonth() + 1;
				if (entryMonth < 10) {
					entryMonth = "0" + entryMonth;
				}
				var entryDay = entryDate.getDate();
				if (entryDay < 10) {
					entryDay = "0" + entryDay;
				}
				var date = entryYear + "." + entryMonth + "." + entryDay;

				if ( i == 0 ){
					container_new.innerHTML += '<li>' 
					+ '<a href="' + entry.link + '">'
					+ date + '<br />'
					+ '<span>' + entry.title + '</span>'
					+ ' </a></li>';	
				} else {
					container.innerHTML += '<li>' 
					+ '<a href="' + entry.link + '">'
					+ date + '<br />'
					+ '<span>' + entry.title + '</span>'
					+ ' </a></li>';
					
				}
				
			}
		} else {
			//エラー
			読み込み中
		}
	}
}
google.setOnLoadCallback(initialize);
</script>

<ul id="newsFeed"></ul>
<ul id="newsFeedList" class="closeBox"></ul>

参考サイト
ブログのRSSを読み込んで新着記事を表示!Google AJAX APIを使ってみました
http://kana-lier.com/javascript/google_ajax_rssfeed/

「もっと見る」を作成

scriptを作成

$(".closeBox").hide();
var flg = "close";
$("#newsBloc .btnBloc").click(function(){
	$("#newsBloc .closeBox").slideToggle();
	if(flg == "close"){
		$("#newsBloc .btnBloc span").text("閉じる");
		$("#newsBloc .btnBloc span").toggleClass("closeBtn");
		flg = "open";
	}else{
		$("#newsBloc .btnBloc span").text("もっと見る");
		$("#newsBloc .btnBloc span").toggleClass("closeBtn");
		flg = "close";
	}
});

htmlの作成
最初から表示させるリストと、「もっと見る」ボタンとボタンを押してから表示するリストを作成

<div id="newsBloc">
  <ul>
     <li>aaa</li>
     <li>aaa</li>
  </ul>
  <ul class="closeBox">
     <li>bbb</li>
     <li>bbb</li>
  </ul>
  <div class="btnBloc"><span class="btn1">もっと見る</span></div>
</div>

参考サイト
jquery クリックで内容の表示・非表示の切り替え(ボタンのテキストも入れ替え)
http://jump-up.info/jquery/jquery_toggle.html