2012.08.10

javascriptとjQueryでAjaxをするまとめ

概念がなかなか納得できないので簡単にまとめておきます。
Ajaxの考え方とシンプルなコード。

(続きを読む…)

2012.06.04

wordpressでfancybox

wordpressでfancybox(jQueryの画像ポップアッププラグイン)を使います

(続きを読む…)

2012.05.28

jQueryでアコーディオン

長いソースだとかメモだとかを残しておきたい、が
普段は畳んでおいて必要なときだけ表示するようにしたい。

(続きを読む…)

2012.05.17

jQueryで自動目次作成

jQueryでヘッダーを読み込んで目次を作成します。
ネットにあるサンプルを自分のwordpress用に少し改変。

→長い文章でのサンプル

(続きを読む…)

2011.10.23

Jquery練習用ファイルセット

Jqueryの練習用に基本ファイルセットを作っておきます。

新しいコードをテストしたい時に、
すごく初歩的なファイルセットを作っておくことで、
超基本的な動作確認をスキップできよう。

再配布するのはどうかなあということで非公開にしておく。

ファイル構造

  ├── css
  │     └── reset.css
  ├── js
  │     └── jquery-1.6.4.js
  └── main.html

ソースコード

HTML:
  1.     <head>
  2.         <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
  3.         <title>Plane Jquery</title>
  4.         <link rel="stylesheet" type="text/css" href="css/reset.css">
  5.         <style TYPE="text/css">
  6.             <!--
  7.                 .testCss { color: blue; }
  8.             -->
  9.         </style>
  10.         <script type="text/javascript" src="js/jquery-1.6.4.js"></script>
  11.         <script type="text/javascript">
  12.             $(function() {
  13.                 $('p').click(function() {$(this).css("color","red");});
  14.             });
  15.         </script>
  16.     </head>
  17.     <body>
  18.         <p class="testCss">クリックで文字色を変化</p>
  19.         <p>クリックで文字色を変化</p>
  20.         <p>クリックで文字色を変化</p>
  21.     </body>
  22. </html>

2009.12.15

JQueryでイベント,スタイル変更の練習

●jQuery入門 (ver 1.3)

http://www.openspc2.org/JavaScript/Ajax/jQuery_study/ver1.3.1/index.html

を参考にJqueryの勉強をしました。
とりあえず全部読んで、良く使いそうな「イベント処理」「スタイルシート操作」を使ってサンプルを作ってみました。

イメージ画像

イメージ画像

マウスオーバーすると段々色が暗くなるDIVが並んでいるだけのページです。

※サンプルページ

http://matubuse.jp/upfiles/samples/20091215-divcolorchange/div_colorchange.html

※以下解説

(続きを読む...)