75回目授業内容
[授業][Dreamweaver][PhotoShop][JavaScript][jQuery]
jQuery Mobile
- 一般的なリスト data-role属性「listview」
<body> <div data-role="page"> <div data-role="header"> <div data-role="content"> <ul data-role="listview"> <li>list</li> <li>list</li> <li>list</li> <li>list</li> <li>list</li> </ul><!--listview--> </div><!--content--> </div><!--header--> <div data-role="footer"> </div><!--footer--> </div><!--page--> </body>
- 入れ子状態のリスト
<body> <div data-role="page" id="index"> <div data-role="header"> <div data-role="content"> <ul data-role="listview"> <li>list <ul> <li><a href="#page2">list</a></li> <li><a href="#page2">list</a></li> <li><a href="#page2">list</a></li> <li><a href="#page2">list</a></li> <li><a href="#page2">list</a></li> </ul> </li> <li>list</li> <li>list</li> <li>list</li> <li>list</li> </ul><!--listview--> </div><!--content--> </div><!--header--> <div data-role="footer"> </div><!--footer--> </div><!--page--> </body>
- 分割リスト
<ul> <li><a href="#page2">list2</a><a href="#page2">detail</a></li> <li><a href="#page2">list2</a><a href="#page2">detail</a></li> <li><a href="#page2">list2</a><a href="#page2">detail</a></li> <li><a href="#page2">list2</a><a href="#page2">detail</a></li> <li><a href="#page2">list2</a><a href="#page2">detail</a></li> </ul> </li> <li>list</li> <li>list</li> <li>list</li> <li>list</li> </ul><!--listview-->
- 角丸のリスト data-inset属性「true」
<ul data-role="listview" data-inset="true">
- 説明付きのリスト
<li><a href="#page2"><h1>見出し</h1><p>説明の内容</p></a><a href="#page2">detail</a></li> <li><a href="#page2">list2</a><a href="#page2">detail</a></li>
- リスト項目の右上に補足的な情報表示
<li><a href="#page2"><p class="ui-li-aside">2012年2月11日</p><h1>見出し</h1><p>説明の内容</p></a></li><li><a href="#page2">list2</a><a href="#page2">detail</a></li>
- リストに見出しを設定 data-role属性「list-divider」
<li data-role="list-divider">見出し</li>
- お問合せフォーム
<div data-role="page" id="contact"> <div data-role="header"> <h1>TQS Contact</h1> </div> <div data-role="content"> <form action="form.php" method="post"> <div data-role="fieldcontain"> <label for="name">お名前：</label> <input type="text" name="name" id="name" value="" placeholder="お名前を入力"> </div> <div data-role="fieldcontain"> <label for="email">メールアドレス : </label> <input type="email" id="email" name="url" placeholder="メールアドレス入力"> </div> <div data-role="fieldcontain"> <fieldset data-role="controlgroup" data-type="horizontal"> <legend>お問い合わせ種類を選んで下さい。</legend> <input type="checkbox" name="checkbox[]" id="check1" value="web" data-theme="d"> <label for="check1">Web製作</label> <input type="checkbox" name="checkbox[]" id="check2" value="music" data-theme="d"> <label for="check2">音楽製作</label> <input type="checkbox" name="checkbox[]" id="check3" value="q" data-theme="d"> <label for="check3">ご質問</label> </fieldset> </div> <div data-role="fieldcontain"> <label for="textarea-a">お問い合わせ内容：</label> <textarea name="textarea" id="textarea"></textarea> </div> <div data-role="fieldcontain"> <label for="gender">性別：</label> <select name="gender" id="gender" data-role="slider" data-theme="b"> <option value="男性">男性</option> <option value="女性">女性</option> </select> </div> <div data-role="fieldcontain"> <label for="select-choice">オプション：</label> <select name="shipper" id="shipper"> <option>選択してください</option> <option value="プロフェッショナル">プロフェッショナル</option> <option value="スタンダード">スタンダード</option> <option value="エンタープライズ">エンタープライズ</option> </select> </div> <div data-role="fieldcontain"> <label for="slider">満足度:</label> <input type="range" name="slider" id="slider" value="0" min="0" max="5" data-theme="d" data-track-theme="d"> </div> <div class="ui-grid-a"> <div class="ui-block-a"> <input type="reset" id="reset" data-theme="c" value="リセット"> </div> <div class="ui-block-b"> <input type="submit" id="submit" data-theme="b" value="送信"> </div> </div><!-- /grid-a --> </form> </div><!--content--> <div data-role="footer" class="footer-docs ui-bar" id="footer" data-theme="c"> <div data-role="controlgroup" data-type="horizontal"> <a href="#about" data-role="button" data-icon="back" data-rel="back" data-direction="reverse">Back</a> <a href="#portfolio" data-role="button" data-icon="star">portfolio</a> <a href="#access" data-role="button" data-icon="home">access</a> <a href="#contact" data-role="button" data-icon="check">contact</a> </div><!--controlgroup--> <form method="get" action="/doc/jquery_mobile/" style="float:left;margin-left:5px;"> <input type="search" name="q" value="" data-theme="d" placeholder="ドキュメント検索..." /> </form> <div style="float:right; margin-top:10px; margin-right:10px;"> <a href="http://twitter.com/TokiyoTQS"><img src="http://dev.screw-axis.com/img/twitter.gif" /></a> <a href="http://facebook.com/ttokiyo"><img src="http://dev.screw-axis.com/img/facebook.png" /></a> <a rel="author" href="https://plus.google.com/103040855988995841420/posts"><img src="https://www.google.com/images/icons/ui/gprofile_button-16.png" width="16" height="16"></a> </div> </div><!--footer--> </div><!--page-->
-
- phpは後日！
74回目授業内容 Safariの準備〜jQuery Mobile
[授業][Dreamweaver][PhotoShop][JavaScript][jQuery]
Safari
- 詳細設定で開発メニューの表示をチェックする。
jQuery Mobile
- 基本を打ち込む(基本的な単一ページテンプレート)
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>無題ドキュメント</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" /> <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>My Title</h1> </div><!--/header--> <div data-role="content"> <p>Hello World</p> <ul data-role="listview" data-inset="true" data-filter="true"> <li><a href="#">Acura</a></li> <li><a href="#">Audi</a></li> <li><a href="#">BMW</a></li> <li><a href="#">Cadillac</a></li> <li><a href="#">Ferrari</a></li> </ul> <form> <label for="slider-0">input slider:</label> <input type="range" name="slider" id="slider-0" value="25" min="0" max="100"> </form> <a href="#" data-role="button" data-icon="star" data-theme="b">Button</a> </div><!--/content--> <div data-role="footer"> <h4>Page Footer</h4> </div><!--/footer--> </div><!--/page--> </body> </html>
- 複数ページテンプレート
<body> <!-- Start of first page --> <div data-role="page" id="foo"> <div data-role="header"> <h1>Foo</h1> </div><!--header--> <div data-role="content"> <p>I'm first in the source order so I'm shown as the page.</p> <p>View internal page called <a href="#bar">bar</a></p> </div><!--content--> <div data-role="footer"> <h4>Page Footer</h4> </div><!--footer--> </div><!--page--> <!-- Start of second page --> <div data-role="page" id="bar"> <div data-role="header"> <h1>Bar</h1> </div><!--header--> <div data-role="content"> <p>I'm the second in the source order so I'm hidden when the page loads. I'm just shown if a link that references my ID is beeing clicked.</p> <p><a href="#foo">Back to foo</a></p> </div><!--content--> <div data-role="footer"> <h4>Page Footer</h4> </div><!--footer--> </div><!--page--> </body>
- Ajaxナビゲーションにおけるページタイトル
<div data-role="page" id="foo" data-title="Page Foo">
- ページ切替効果
- flip
<p>View internal page called <a href="#bar" data-transition="flip">bar</a></p>
-
- flow
<p>View internal page called <a href="#bar" data-transition="flow">bar</a></p>
- ダイアログの作成
- backBtnの作成
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> <script> $(document).bind("mobileinit", function() { $.mobile.page.prototype.options.addBackBtn = true; }); </script> <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
73回目授業内容 jQuery基本形
[授業][Dreamweaver][PhotoShop][JavaScript][jQuery]
72回目授業内容
[授業][Dreamweaver][PhotoShop][JavaScript][jQuery]
*
71回目授業内容 jQueryメソッド〜
[授業][Dreamweaver][PhotoShop][JavaScript][jQuery]
jQueryメソッド
- スタイルを変更する - CSS
<style> #div1 { margin: 10px; width: 100px; height: 100px; background-color: #369; border: dotted 1px #036; } #div2 { margin: 10px; width: 100px; height: 100px; background-color: #C66; } #div3 { margin: 10px; width: 100px; height: 100px; background-color: #306; } </style>
<div id="div1">div1</div> <div id="div2">div2</div> <div id="div3">div3</div> <script> $(function() { $('#div1').css('border','3px solid red'); $('#div2').css('background','pink'); $('#div3').css('opacity',0.5); }); </script>
- 要素の表示／非表示を変更する - show/hide
- CSSにdisplay noneを入れておく
<div id="div1">最初は非表示になっているdiv</div> <div id="div2">最初は表示されているdiv</div> <script> $(document.body).click(function () { $('#div1').show(); $('#div2').hide(); });</script>
- 要素の幅／高さを変更する - width/height
<div id="div1">width</div> <div id="div2">height</div> <script> $(document.body).click(function () { $('#div1').width(300); $('#div2').height(300); }); </script>
- フェードアニメーション - fadeIn/fadeOut
<div class="container"> <div id="div1">fadeIn example.</div> <div id="div2">fadeOut example.</div> </div> <script> $(document.body).click(function () { $('#div1').fadeIn("slow"); $('#div2').fadeOut("slow"); }); </script>
- スライドアニメーション - slideDown/slideUp
slideDown example.
slideUp example.
- 汎用的なアニメーション - animate
- CSSにposition: absolute;を入れておく
<div id="div1">box</div> <script> $(function(){ $('#div1').animate({ top: 200, left: 400 }); }); </script>
- 要素の内容をまるごと書き換え - text/html
<div id="div1">入っていたテキスト</div> <div id="div2">入っていたテキスト</div> <div id="div3">入っていたテキスト</div> <div id="div4">入っていたテキスト</div> <script> $(document.body).click(function () { $('#div1').text('textメソッドでの内容書き換え'); $('#div2').html('htmlメソッドでの内容書き換え'); $('#div3').text('<strong>textメソッド</strong>での内容書き換え'); $('#div4').html('<strong>htmlメソッド</strong>での内容書き換え'); }); </script>
- 要素の内容を空にする - empty
<div id="div1">入っていたテキスト</div> <script> $(document.body).click(function () { $('#div1').empty(); }); </script>
- 要素の属性値を変更する - attr
<img src="img1.jpg" width="200" alt=""> <img src="img1.jpg" width="200" alt="" id="changeThis"> <img src="img1.jpg" width="200" alt=""> <img src="img1.jpg" width="200" alt=""> <script> $(document.body).click(function () { $('#changeThis').attr('src','img2.jpg'); }); </script>
- 要素の入力値を変更する - val
<form action="#" method="get"> <input id="input1" type="text" size="40" value="テキストフィールドです" /> <textarea id="textarea1" rows="3" cols="20">テキストエリアです</textarea> <select id="select1"> <option value="saitama">埼玉</option> <option value="tokyo">東京</option> <option value="kanagawa">神奈川</option> </select> <select id="select2" multiple="multiple"> <option value="shinjukuku">新宿区</option> <option value="shibuyaku">渋谷区</option> <option value="chiyodaku">千代田区</option> </select> </form> <script> $(document.body).click(function () { $('#input1').val('テキストフィールドの値を書き換えました'); $('#textarea1').val('テキストエリアの値を書き換えました'); $('#select1').val('tokyo'); $('#select2').val(['shibuyaku','chiyodaku']); }); </script>
- 要素のクラスを追加／削除 - addClass/removeClass
<div id="div1">div1</div> <div id="div2" class="box">div2</div> <div id="div3" class="box">div3</div> <div id="div4" class="box alert">div4</div> <script> $(document.body).click(function () { $('#div1').addClass('box'); $('#div2').removeClass('box'); $('#div3').addClass('alert'); $('#div4').removeClass('alert'); }); </script>
div { margin:0 0 10px; padding:10px; } .box { border:3px solid #0F0; } .alert { border-color:#F00; }
- 要素を移動する1 - append
#basket{ background:brown; padding:10px; } #apple{ background:red; margin:5px; } #banana{ background:yellow; margin:5px; } #orange{ background:orange; margin:5px; }
<div id="basket">basket</div> <div id="apple">apple</div> <div id="banana">banana</div> <div id="orange">orange</div> <script> $(document.body).click(function () { var basket = $('#basket'); var apple = $('#apple'); var banana = $('#banana'); var orange = $('#orange'); basket.append(apple); basket.append(banana); basket.append(orange); }); </script>
- 要素を移動する2 - appendTo
$(document.body).click(function () { var basket = $('#basket'); var apple = $('#apple'); var banana = $('#banana'); var orange = $('#orange'); apple.appendTo(basket); banana.appendTo(basket); orange.appendTo(basket); });
- 要素を移動する3 - prepend
$(document.body).click(function () { var basket = $('#basket'); var apple = $('#apple'); var banana = $('#banana'); var orange = $('#orange'); basket.prepend(apple); basket.prepend(banana); basket.prepend(orange); });
- 要素を新しく作る - $(文字列)
- クリックするごとにjpgが追加されていく
<div id="div1"></div> <script> $(document.body).click(function () { var div1 = $('#div1'); $('<img src="img1.jpg" width="100" alt="">').appendTo(div1); }); </script>
- クリックを監視する - click
<div id="div1">div!</div> <script> $(document.body).click(function () { $('#div1').click(function(){ $('#div1').text('クリックされました'); }); }); </script>
- マウスののりおりを監視する1 - mouseenter/mouseleave
<div id="div1">div!</div> <script> $(document.body).click(function () { $('#div1').mouseenter(function(){ $('#div1').text('マウスのりました'); }); $('#div1').mouseleave(function(){ $('#div1').text('マウスおりました'); }); }); </script>
- フォーカスを監視する - focus/blur
- イベントとthis - 失敗
<div class="clickTest">div!</div> <div class="clickTest">div!</div> <div class="clickTest">div!</div> <div class="clickTest">div!</div> <div class="clickTest">div!</div> <script> $(document.body).click(function () { var elements = $('.clickTest'); elements.click(function(){ elements.text('クリックされました'); }); }); </script>
- イベントとthis - 成功
<script> $(function () { $('.clickTest').click(function() { $(this).text('クリックされました'); }); }); </script>
- それぞれについて処理する - each
<div class="animal">cat</div> <div class="animal">dog</div> <div class="animal">turtle</div> <div class="animal">tiger</div> <script> $(function () { $('.animal').each(function(){ var name = $(this).text(); alert(name); }); }); </script>
- 値や内容をセットする/取得する
<div id="div1">div!</div> <script> $(function () { var div1 = $('#div1'); alert(div1.width()); alert(div1.height()); alert(div1.css('font-size')); }); </script>
- ロールオーバー - 基本形
<div class="header"> <ul class="nav"> <li><a href="#" class="rollover"><img src="btn_gnav01_off.gif" alt="Home"></a></li> <li><a href="#" class="rollover"><img src="btn_gnav02_off.gif" alt="Products"></a></li> <li><a href="#" class="rollover"><img src="btn_gnav03_off.gif" alt="Company"></a></li> </ul> </div>
<script> $(function () { $('.rollover').each(function(){ var a = $(this); var img = a.find('img'); var src_off = img.attr('src'); var src_on = src_off.replace('_off','_on'); $('<img>').attr('src', src_on); a.hover(function(){ img.attr('src', src_on); },function(){ img.attr('src', src_off); }); }); }); </script>
- ロールオーバー - 発展形
<script> $(function () { $('.rollover').each(function(){ var a = $(this); var img = a.find('img'); var src_off = img.attr('src'); var src_on = src_off.replace(/^(.+)_off(\.[^\.]+)$/,'$1_on$2'); $('<img />').attr('src', src_on); a.bind('mouseenter focus', function(){ img.attr('src', src_on); }); a.bind('mouseleave blur', function(){ img.attr('src', src_off); }); }); }); </script>
- ガイドテキスト - 基本形
<form method="get" action="http://example.com/"> <input class="guideText" type="text" size="30" value="お名前を入力してください"> <textarea class="guideText" cols="30" rows="8">メッセージを入力してください</textarea> <input type="submit" value="送信"> </form>
<script> $(function () { $('.guideText').each(function() { var guideText = this.defaultValue; var element = $(this); element.focus(function() { if(element.val()===guideText) { element.val(''); element.removeClass('guide'); } }); element.blur(function() { if(element.val()==='') { element.val(guideText); element.addClass('guide'); } }); if(element.val()===guideText){ element.addClass('guide'); } }); }); </script>
- アコーディオン - 基本形
<dl class="accordion"> <dt>item1</dt> <dd>some explanation here. some explanation here. some explanation here. some explanation here. some explanation here. some explanation here.</dd> <dt>item2</dt> <dd>some explanation here. some explanation here. some explanation here. some explanation here. some explanation here. some explanation here.</dd> <dt>item3</dt> <dd>some explanation here. some explanation here. some explanation here. some explanation here. some explanation here. some explanation here.</dd> </dl> <dl class="accordion"> <dt>item1</dt> <dd>some explanation here. some explanation here. some explanation here. some explanation here. some explanation here. some explanation here.</dd> <dt>item2</dt> <dd>some explanation here. some explanation here. some explanation here. some explanation here. some explanation here. some explanation here.</dd> <dt>item3</dt> <dd>some explanation here. some explanation here. some explanation here. some explanation here. some explanation here. some explanation here.</dd> </dl>
* { margin:0; padding:0; line-height:1.4; } body{ padding:40px; font-family:Arial, Helvetica, sans-serif; } dl{ width:320px; margin:0 0 20px; } dt{ padding:6px 10px 6px; background:#444; color:#fff; margin:0 0 3px; font-weight:bold; border-radius:8px 0 0 0; border-left:2px solid #444; border-top:2px solid #444; } dd{ padding:8px 10px 12px; width:298px; border-left:2px solid #444; background:#eee; margin:-3px 0 3px; }
<script> $(function() { $('.accordion').each(function() { var dl = $(this); var allDt = dl.find('dt'); var allDd = dl.find('dd'); allDd.hide(); allDt.css('curor','pointer'); allDt.click(function() { var dt = $(this); var dd = dt.next(); allDd.hide(); dd.show(); allDt.css('cursor','pointer'); dt.css('cursor','default'); }); }); }); </script>
70回目授業内容 課題サイト製作続き〜jQueryとは
[授業][Dreamweaver][PhotoShop][JavaScript][jQuery]
jQueryとは
- JavaScriptのライブラリのひとつ
- ブラウザ依存を気にしなくてよい
- DOMの操作が簡単
- 記述の仕方は、CSSに似ている
- write less, do more.
- オープンソース（MITライセンス+GPLライセンス）
- http://iquery.com/
- jQueryの概念
-
- 「何かを取ってくる」→「それに何かする」
$('h1').show(); //表示させる
$('h1').fadeIn();//フェードインさせる
$('h1').slideDown(); //スライドアニメーションつきで表示させる
$('h1').css('border', '1px solid red'); //1pxの赤線をつける
$('h1').remove(); //削除する
- ID セレクタ
<body> <ul> <li>fox</li> <li id="cat">cat</li> <li>fish</li> <li id="dog">dog</li> <li>bird</li> </ul> <script> $(function() { $('#cat').css('background','pink'); $('#dog').css('background','yellowgreen'); }); </script> </body>
- CLASSセレクタ
<body> <ul> <li class="man">Paul</li> <li class="man">Billy</li> <li class="woman">Alice</li> <li class="man">Taro</li> <li class="woman">Hanako</li> </ul> <script> $(function() { $('.man').css('background','lightblue'); $('.woman').css('background','pink'); }); </script> </body>
- タイプセレクタ（element）
<body> <h1>Heading</h1> <p>The quick brown fox jumps over the lazy dog.</p> <ul> <li>The quick brown fox jumps over the lazy dog.</li> <li>The quick brown fox jumps over the lazy dog.</li> </ul> <script> $(function() { $('p').css('background','pink'); $('li').css('background','yellowgreen'); }); </script> </body>
- 子孫セレクタ（ancestor descendant）
<body> <div> <p>I have a <strong>pen</strong>.</p> </div> <ul> <li>His <strong>pen</strong> is red.</li> <li>I need his <strong>pen</strong>.</li> </ul> <p>She dosn't need a <strong>pen</strong>.</p> <script> $(function() { $('div strong').css('background','lightblue'); $('ul strong').css('background','pink'); }); </script> </body>
- 変数を何度も使う
<script> var lastName = 'Yamada'; var me = lastName + 'Taro'; var father = lastName + 'Ichiro'; var mother = lastName + 'Hanako'; alert(me); alert(father); alert(mother); </script>
- jQueryで変数を使う
**脱線話（復活） -
69回目授業内容 課題サイト製作続き
[授業][Dreamweaver][PhotoShop][JavaScript]
課題サイトコーディング製作続き
- smoothScrollを使ってみる
- 製作時間：１分
- Billbord画像をJavaScriptで開くたびに違う画像に置換する
- 製作時間：10分
<script>
<!--
myImg = ["img/home01.jpg","img/home02.jpg","img/home03.jpg",];
i =Math.random()*myImg.length;
myVal = Math.floor(i);
document.write('<img src ="'+ myImg[myVal]+'">');
</script>
- Nivo Slider
