jquery

  • bxsliderのデフォルトで設定されている影を消すのは以前のエントリーで書いたが、ページに組み込んだ時にローテーション画像の位置がずれて気になる場合がある。
    (さらに…)

  • webkitを搭載ブラウザ対応のみでよければ、CSS3のfilterを使う方法もあるが、FirefoxやChromeへの対応を考えた場合はこの方法は使えない。
    (さらに…)

  • 以前の記事「AjaxでCSVを読み込みJavascriptDBを使いselectで抽出表示する方法」でAjaxを使って外部のCSVファイルを読み込み、JavascriptDBで表示するまでを解説したが、今回はまとめとして、スタイルシートでレイアウトして表示する部分を中心に説明する。
    (さらに…)

  • jQuery Mobile 1.4の新機能として追加されたタブ表示のための data-role=”tabs” は簡単なコーディングでタブレイアウトを実装出来るが、デフォルトのスタイルシートでの表示は、タブとしての機能にはなっていても、見た目としてはタブとイメージできない。

    デフォルトCSSを使ったのサンプルページ

    せっかくjQuery Mobile 1.4を導入してタブ仕様にするなら、スタイルシートをカスタマイズして「タブらしい」レイアウトにしたい。
    jQuery Mobileへの指定の追加と少しのカスタムスタイルシートを追加することでサンプルのようなタブスタイルにすることが可能。

    カスタマイズしたサンプルページ

    設定方法

    まずはベースとなるjquery mobile 1.4のスタイルシートを読み込む

    CSS

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css"/>

    javascriptを読み込む
    スマートフォンやタブレットなどの新しいモバイル端末がターゲットならjquery 1.11よりも軽量のjquery 2.1がおススメ
    jquery mobile は最新版の1.4.2

    JAVASCRIPT

    <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>

    タブの実装部分は以下

    HTML

    <div data-role="page" id="page1">
    <div role="main" class="ui-content">
    	<div data-role="tabs">
    		<div data-role="navbar">
    			<ul>
    				<li><a href="#fragment-1">タブ1</a></li>
    				<li><a href="#fragment-2">タブ2</a></li>
    				<li><a href="#fragment-3">タブ3</a></li>
    			</ul>
    		</div><!-- navbar -->
    		<div id="fragment-1">本文1</div>
    		<div id="fragment-2">本文2</div>
    		<div id="fragment-3">本文3</div>
    	</div><!-- tabs -->
    </div><!-- main -->
    </div><!-- page -->

    デフォルト状態でのタブならこれで完成。

    ここからがカスタマイズ

    まず、デザインをカスタマイズするため、data-role=”page” に data-theme=”none” を指定する。

    HTML

    <div data-role="page" id="page1" data-theme="none">

    次にスタイルシート
    jquery.mobile-1.4.2.min.css の後に読み込む

    CSS

    <style>
    div[data-role=navbar] ul li a {
    	color:#000;
    	border-color:#ccc;
    	border-width: 1px 1px 0px 1px;
    }
    li[aria-selected=false] {
    	background-color: #eee;
    	border-bottom:1px solid #ccc;
    }
    #fragment-3,#fragment-2,#fragment-1 {
    	margin:-1px 3px 0px 0px;
    	padding:11px 10px 10px 10px;
    	border:1px solid #ccc;
    	border-width: 0px 1px 1px 1px;
    }
    @media screen and (min-width: 321px) {
    	#fragment-3,#fragment-2,#fragment-1 {
    		margin:-1px 2px 0px 0px;
    	}
    }
    @media screen and (min-width: 641px) {
    	#fragment-3,#fragment-2,#fragment-1 {
    		margin:-1px 0px 0px 0px;
    	}
    }
    </style>

    これだけで、タブらしいデザインにカスタマイズ出来る

    補足説明

    #fragment-3,#fragment-2,#fragment-1の指定にある

    margin:-1px 3px 0px 0px;

    は本文ボックスの右の縦罫線を揃えるためのおまじない

    ウィンドウサイズによってズレの幅が違うからmin-widthで振り分け調整している。

    @media screen and (min-width: 321px) {
    	#fragment-3,#fragment-2,#fragment-1 {
    		margin:-1px 2px 0px 0px;
    	}
    }
    @media screen and (min-width: 641px) {
    	#fragment-3,#fragment-2,#fragment-1 {
    		margin:-1px 0px 0px 0px;
    	}
    }

    スマートに出来る方法があったらコメントして貰えると嬉しい

  • jquery mobile 1.3から導入されたdata-role=”panel”を使えば、Facebookみたいなボタンをタップするとコンテンツがスライドするようなメニューも超簡単に作ることが可能。

    (さらに…)

  • Pop EasyはRemodalよりもさらに軽量。jqueryでモーダルウィンドウを実装するためのスクリプト。

    通常版
    jquery.modal.js → 5キロバイト

    min版はさらに軽量で
    jquery.modal.min.js → 2キロバイト

    Remodalと違いデフォルトではスマートフォンには対応していないため、スマートフォン向けサイトで使用する場合はスタイルシートでポップアップウィンドウのサイズを設定する等の必要があるが、エフェクトの指定等も簡単に出来るからサイトの高速化を考えている人にはおススメなスクリプトと言えよう。

    設置は簡単。

    まずは最小限のスタイルシート

    CSS

    <style>
    .modal p {
    	font-size: 14px;
    	text-align: left;
    	margin: 10px 0 0;
    }
    .modal p:hover {
    	cursor: pointer;
    }
    .overlay {
    	width: 100%;
    	height: 100%;
    	position: fixed;
    	top: 0;
    	left: 0;
    	z-index: 1000;
    	display: none;
    }
    .modal {
    	display: none;
    	background: #eee;
    	padding: 0 20px 20px;
    	overflow: auto;
    	z-index: 1001;
    	position: absolute;
    	width: 500px;
    	min-height: 300px;
    }
    </style>

    javascriptはbody閉じタグの直前に

    JAVASCRIPT

    <script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
    <script type='text/javascript' src='./js/jquery.modal.js'></script>

    オプションの設定のjavascriptを読み込む

    JAVASCRIPT

    <script type='text/javascript'>
    $(document).ready(function(){
    	$('.modalLink').modal({
    		trigger: '.modalLink',
    		olay:'div.overlay',
    		modals:'div.modal',
    		animationEffect: 'fadeIn',
    		animationSpeed: 400,
    		moveModalSpeed: 'fast',
    		background: '000000',
    		opacity: 0.5,
    		openOnLoad: false,
    		docClose: true,
    		closeByEscape: true,
    		moveOnScroll: true,
    		resizeWindow: true,
    		videoClass:'video',
    		close:'.closeBtn'
    	});
    });
    </script>

    オプションの一部を説明すると

    animationEffect
    スライドインまたはフェードイン

    animationSpeed
    moveModalSpeed
    表示速度

    background
    オーバーレイの背景色

    opacity
    オーバーレイの透明度

    HTML

    呼び出しボタン(リンク)

    <a class="modalLink" href="#modal1">Click</a>

    オーバーレイのためのタグが別途必要

    <div class="overlay"></div>

    ポップアップするモーダルウィンドウはこんな感じ

    <div id="modal1" class="modal">
    	<p class="closeBtn">Close</p>
    	<h2>モーダルウィンドウのサンプル</h2>
    </div>

    サンプルページ

    ブラウザの画面に表示されるClickをクリックするとモーダルウィンドウがポップアップする。

    ダウンロードはこちら
    http://thomasgrauer.com/popeasy/

  • Remodalは軽量で簡単設置、スマートフォンにも対応している、jqueryでモーダルウィンドウを実装するためのスクリプト。

    どれくらい軽量かと言うと、例えば多機能で多くのサイトで使われているfancyboxを例にあげると、

    jquery.fancybox.js → 49キロバイト

    それに比べて

    jquery.remodal.js → 9キロバイト

    min版はさらに軽量で

    jquery.remodal.min.js → 4キロバイト

    もちろん、fancyboxとの機能差はあるが、コールバックも受けられ、ちょっとしたモーダルウィンドウには十分な機能がある。
    特に、スマートフォン向けサイトのような場合は、回線速度を考え少しでも軽くすることがユーザーエクスペリエンスの向上に繋がることから導入することをおススメする。

    設置は簡単。

    まずはスタイルシートを読み込む

    CSS

    <link rel="stylesheet" href="./css/jquery.remodal.css">

    javascriptはbody閉じタグの直前に

    JAVASCRIPT

    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="./js/jquery.remodal.min.js"></script>

    呼び出しボタン(リンク)

    HTML

    <a href="#modal">Click</a>

    ポップアップするモーダルウィンドウはこんな感じ

    HTML

    <div class="remodal-bg">
    	<div class="remodal" data-remodal-id="modal">
    		<h1>Remodal</h1>
    		<p>モーダルウィンドウのサンプル</p>
    	</div>
    </div>

    サンプルページ

    ブラウザの画面に表示されるClickをクリックするとモーダルウィンドウがポップアップする。

    ダウンロードはこちら
    https://github.com/VodkaBears/Remodal

  • jqueryのプラグインを使わず簡単なjavascriptとcssで実現可能。

    サンプルページ

    まずはjqueryを読み込む

    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

    一定の範囲スクロールしたらボタンを表示させ、クリックでページトップへスクロールするjavascriptを読み込む

    JAVASCRIPT

    <script type="text/javascript">
    $(function(){
    	$('#top-link').hide();
    	$(window).scroll(function(){
    		if($(this).scrollTop() > 50){
    			$('#top-link').fadeIn(1000);
    		}else{
    			$('#top-link').fadeOut(500);
    		}
    	});
    	$("#top-link").click(function(){
    		$('html, body').animate({scrollTop:0},300);
    	});
    });
    </script>

    解説

    スクリプト内の数字「50」は、ページが何ピクセルスクロールされたら処理を行うかの数値
    スクリプト内の数字「1000」はボタンがフェードインする速度
    スクリプト内の数字「500」はページトップでボタンがフェードアウトする速度
    スクリプト内の数字「300」はスクロールする速度

    ボタンを表示させたままで構わなければもっと簡単

    <script type="text/javascript">
    $("#top-link").click(function(){
    	$('html, body').animate({scrollTop:0},500);
    });
    </script>

    スタイルシートも単純 サンプルではグレイの四角ボタンにしているが、テキスト表示や画像で構わなければもっと簡単

    CSS

    <style>
    #top-link{
    	position:fixed;
    	right: 10px;
    	bottom: 30px;
    	padding:10px 0px;
    	width: 100px;
    	text-align:center;
    	color:#fff;
    	cursor:pointer;
    	cursor:hand;
    	background-color:#ccc;
    }
    </style>

    ボタンの設置も簡単 Page Topのボタンはbody内のどこに記述しても構わない。

    HTML

    <div id="top-link">Page Top</div>

     

  • ページをスクロールすると、ロゴ部分まではスクロールし、メニューのみになったところでスクロールが固定になり、そのままコンテンツ部分がヘッダーの下に隠れていくページを見たことがあるだろう。

    (さらに…)

  • メニューの各項目にマウスオーバーすると、下にあるラインが「ピョ〜ン」とそのメニュー幅になりつつ移動してきて「ボヨヨ〜ン」となるメニューを作りたい時はこの方法。
    何を言ってるのか分からない、という人は以下のサンプルページでメニューにマウスオーバーしてもらえれば意味が分かるはず。

    サンプルページ

    使うのはjqueryとエフェクト用のjquery.easing

    設置方法

    「jquery.easing.1.3.js」は以下のリンクからダウンロード
    http://gsgd.co.uk/sandbox/jquery/easing/

    「jquery-1.11.0.min.js」はjquery.comから呼び出す。
    「jquery.easing.1.3.js」はjsフォルダ内に置いた場合。

    まずはページにjavascriptの呼び出しを挿入

    JAVASCRIPT

    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="./js/jquery.easing.1.3.js"></script>

    同様に、ラインがついてくるようにするためのスクリプトも挿入

    <script>
    $(function(){
    	$('#menu span').css({
    		width:$('#menu .current').outerWidth(),
    		left:$('#menu .current').position().left
    	});
    	$('#menu a').mouseover(function(){
    		$('#menu span').stop(true).animate({width:$(this).outerWidth(),left:$(this).position().left},1000,'easeOutElastic');
    	});
    });
    </script>

    レイアウトのためのスタイルシートを挿入 #menuのwidthや#lineboxのwidth等はメニューの個数やページサイズに合わせる

    CSS

    <style>
    #menu {
    	position: relative; 
    	margin: 0px auto 0px auto;
    	padding: 0;
    	text-align:center;
    	width: 400px;
    }
    #menu a {
    	padding:10px 20px;
    	color:#999;
    	text-decoration:none;
    }
    #menu span {
    	display:block;
    	position:absolute;
    	margin-top:0px;
    	left:0;
    	width:50px;
    	height:5px;
    	background:#666;
    }
    #linebox {
    	margin: 15px auto 0px auto;
    	width:460px;
    	height:5px;
    	background:#eee;
    }
    </style>

    メニュー部分のHTMLは

    HTML

    <div id="menu">
    	<a href="#">menu1</a>
    	<a href="#" class="current">menu2</a>
    	<a href="#">menu3</a>
    	<a href="#">menu4</a>
    	<div id="linebox"><span></span></div>
    </div><!-- menu -->

    マウスが無い状態で、currentの項目にラインが表示されるから、例えば「menu2のページのメニューはmenu2にclass=”current”を入れる」。

    <div id="linebox"><span></span></div>

    の部分はjavascriptによりラインが書き出される。