javascript
以前 http://d.hatena.ne.jp/schipperke0614/20120814/1345742020こちらで書いた記事の続きですが、、、、カスタマイズを http://nicolahibbert.com/demo/liteAccordion/demo-suite.htmlこちらの画面で行うとjavascriptが出力されるのでそれを使えば普通に動…
新馬場 やきとり 鶏也さんとは別のサイトですが、横展開のアコーディオンを使おうかと思ってます。 liteAccordion http://nicolahibbert.com/demo/liteAccordion/授業でやったっけ？？ 見た記憶はあるんだけど。。。。ちょっとカスタマイズしながら使う予定。…
http://www42.atpages.jp/schip/lesson0802/ Easy Sliderのパラメタを少しいじって 横スライダーなんですが、コマ送り動画を作ってみた。フリーサーバなんでちょっと重いですが、ローカルでは結構面白いです。 ちなみに画像数24枚 <html lang="ja"> <head> <meta charset="UTF-8"> <title>横ライダー</title> <link rel="stylesheet" href="css/slider.css"> <script src="js/jquery.min.js"></link></meta></head></html>
あえてhtml5のタグは使わずやってみた（dtdは面倒なのでhtml5のまま） <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/style.css"> <script src="../js/jquery-1.7.2.min.js"></script> <script src="js/common.js"></script> </link></meta></head></html>
ダウンロード http://jqueryui.com/download <html lang="ja"> <head> <meta charset="UTF-8"> <title>タブパネル</title> </meta></head></html>
Yetii http://www.kminek.pl/lab/yetii/js以外ダウンロードできない模様。。。 先生のをそのままみたいで恥ずかしいですが、メモということで。。。 <html lang="ja"> <head> <meta charset="UTF-8"> <title>タブナビ</title> <style> *{margin:0; padding:0;} #tabBox { width: 500px; margin: 0px; } ul#tabBox-nav { list-st</meta></head></html>…
準備 ダウンロード http://jquerytools.org/download/ <html> <head> <meta charset="utf-8"> <title>jQuery Tools standalone demo</title> <script src="js/jquery.tools.min.js"></script> </meta></head></html>
<html lang="ja"> <head> <meta charset="UTF-8"> <title>jQuery UI Example Page</title> <link type="text/css" href="css/overcast/jquery-ui-1.8.21.custom.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> </link></meta></head></html>
<html lang="ja"> <head> <meta charset="UTF-8"> <title>Crossfader</title> <style type="text/css"> <!-- *p2* { margin: 0; padding: 0; } div#container { width: 400px; margin: 50px auto; } img { border: none; } ul { list-style: none; } --> </style> <script src="js/bsn.Crossfader.js"></meta></head></html>
使用したモジュール jQuery UI：scrollable http://jquerytools.org/download/ Lightbox 2.0 http://leandrovieira.com/projects/jquery/lightbox/ <html lang="ja"> <head> <meta charset="UTF-8"> <title>横スライド：サンプル</title> <link rel="stylesheet" href="css/horizontal.css" /> </link></meta></head></html>
一応本音を言えば面倒だったので例題をコピーしたんですが、、、、 うーん。。。ちょっと出来が悪すぎない？ってことで手を入れてみました。 <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/style.css"> <script src="../js/jquery-1.7.2.min.js"></script> <script> $(function(){ $("dd:not(:first)").css("display","n…</link></meta></head></html>
セレクタは結構種類があって面倒ですが、正直すべてを覚えなくてもよくて 普段はid指定「$("#id")」がほとんどです。ですが、二つだけしっかり覚えとかなきゃいけないことがあります。 日本語でいいので「こんな選び方があったなー」っていうおぼろげな記憶 …
<html lang="ja"> <head> <meta charset="UTF-8"> <title>jqueryテスト</title> <link rel="stylesheet" href=""> <script src="../js/jquery-1.7.2.min.js"></script> </link></meta></head></html>
とりあえず調整したのは タイトル部分の文字ずれ タイトルクリック時に開きっぱなしであったところを開閉可能にした HTML <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/style.css"> <script src="js/common.js"></script> </link></meta></head></html>
カーソルの形を変える クリック時にメッセージ表示 <html lang="ja"> <head> <meta charset="UTF-8"> <title>DOMによる要素の指定</title> </meta></head></html>
<html lang="ja"> <head> <meta charset="UTF-8"> <title>DOMによる要素の指定</title> <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script> <…</meta></head></html>
実はずっとうまくいってなかった問題が解決。自作したlightbox内に動的にタグを生成して、そのクリックイベントを取得することができずに「クローズ」させるリンクが作れていませんでしたが、やっと解決！問題の原因は一つだけ 生成される前のエレメントにエ…
やっとできた。。。。 スライダーって言ってもものすごく簡単で使っている関数というかコマンドにあたるのかわかりませんが、 使っているのは２つだけ 「.show()」 「.hide()」 ただし、これだけだと単に消えるか出るかだけなのでjQuery UIのプラグインを二…
この人のプレゼン資料好きです！ この資料なら20分で話しきれるし、集中して聞かせられる自信がある！http://www.slideshare.net/ym405nm/jquery-it
以下のように商品の単価と在庫の関係の表組みを表示させなさい。 解答 <html> <head> <meta charset="utf-8"> <style type="text/css"> table{ border:1px solid #333; border-collapse:collapse; } th{ width:200px; border:1px solid #333; background-color:#999999; } td{ border:1px solid #333; background-colo</meta></head></html>…
以下のように商品の単価と個数の関係の表組みを表示させなさい。 解答 <html> <head> <meta charset="utf-8"> <style type="text/css"> table{ border:1px solid #333; border-collapse:collapse; } th{ width:200px; border:1px solid #333; background-color:#999999; } td{ border:1px solid #333; background-colo</meta></head></html>…
以下のように演算結果を表示させなさい。 解答 <html> <head> <meta charset="utf-8"> <style type="text/css"> table{ border:1px solid #333; border-collapse:collapse; } th{ width:200px; border:1px solid #333; background-color:#999999; } td{ border:1px solid #333; background-color:#fff; text-align:cen</meta></head></html>…
配列を使い、以下のようにリストのリンクを表示させなさい。 解答 <html> <head> <meta charset="utf-8"> <title>実践課題C</title> </head> <body> <script type="text/javascript"> var list = new Array("ホーム","会社情報","製品情報","お問い合わせ"); var strHtml="<ul>"; for(i=0;i<list.length;i++){ strHtml+="<li><a href='#'>"+list[i]+"<\/a><\/li…</list.length;i++){></ul></body></html>
配列を使い、以下のような表組みを表示させなさい。 解答 <html> <head> <meta charset="utf-8"> <style type="text/css"> table{ border:1px solid #333; border-collapse:collapse; } th{ border:1px solid #333; background-color:#999999; } td{ border:1px solid #333; background-color:#fff; } </style> <title>実践課題B</title> …</meta></head></html>
おみくじの結果「大吉」「中吉」「小吉」「吉」「凶」をランダムに表示させなさい。 解答 <html> <head> <meta charset="utf-8"> <title>実践課題A</title> </head> <body> <h1>今日の運勢</h1> <p>今日のあなたの運勢は</p> <script type="text/javascript"> var omikuji = ["大吉","中吉","小吉","吉","凶"]; document.write(omikuji[Math.floor(Math.random()*5)]); </script>…</body></html>
写真でなくタグごとスライドできるっぽい。 http://bl6.jp/web/javascript/easy-light-jquery-slider/⇒閉鎖されてました・・・・
<html> <head> <meta charset="utf-8"> <title>ラベルつき配列</title> <script type="text/javascript"> var member = [ { name:'佐藤', age: 35 }, { name:'伊藤', age: 38 }, { name:'山田', age: 28 }]; for(i=0;i<member.length;i++){ document.write(member[i].name+"さんは"+member[i].age+"才です\n<br>"); } </member.length;i++){></meta></head></html>
<html> <head> <meta charset="utf-8"> <title>配列の勉強</title> <script type="text/javascript"> var nameAry = new Array(); nameAry.push("佐藤"); nameAry.push("伊藤"); nameAry.push("山田"); document.write("３番目に"+nameAry[2]+"さんが登録されています<br>"); document.write("現在"+nameAry.length+"人が登録されています。"); </meta></head></html>
ついでにカウントダウンもつけてみた <html> <head> <meta charset="utf-8"> <title>クリックカウント</title> <script type="text/javascript"> var count=0; window.onload = function() { document.calcForm.up.onclick = countUp; document.calcForm.down.onclick = countDown; document.calcForm.clear.onclick = clearResult; …</meta></head></html>
金利 金額 期間 計算ボタンで計算 クリアボタンで内容クリア <html> <head> <meta charset="utf-8"> <title>複利計算</title> <script type="text/javascript"> window.onload = function() { document.calcForm.calc.onclick = calculate; document.calcForm.clear.onclick = clear; } function calculate(){ var obj=document.calcForm;…</meta></head></html>
