2011-11-01から1ヶ月間の記事一覧

EclipsePDTでデバッグ

PHP

インストールや設定は下記を参考にしました。 http://shin3tky.blogspot.com/2010/08/snow-leopard-eclipse-helios-zend.html http://gattaca6656.blogspot.com/2011/05/zenddebugger.html Xdebugを使ってみます。 デバッグの方法 デバッグボタンを押す PHP…

PHPの開発環境

PHP

PHP用のIDEもいろいろあるみたいですが一番メジャーだと思われるEclipsePDTを使ってみます。 http://eclipse.org/pdt/downloads/ ここからダウンロードします。 インストールと日本語化は以前JavaScriptでやったんで今回は書きません。 使い方はここが詳しい…

Mac(Lion)でXAMPP環境を作る

なんかおかしな表題ですがMacでApache,MySQL,PHPの環境を作ります。 MacにはApacheとPHPは最初から入っていますがMySQLは入っていません。 Mac版のPHPをインストールしてもいいんですが、より手軽に使えると思われるXAMPP for Mac OSXを使ってみます。 ダウ…

入力エリアがフォーカスされたら背景色を変更する

<html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> //</head></html>

コピー&ペーストを抑制する

<html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> //</head></html>

テキストエリアに入力する情報をナビゲートする

<html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.formnotifier.js"></script> <script type="text/javascript"> //</head></html>

郵便番号から住所を取得する

<html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="js/ajaxzip2.js"></script> <script type="text/javascript"> //<![CDATA[ AjaxZip2.JSONDATA = 'data'; //]]> </script> <style type="text/css"> <…</head></html>

フォームの編集中に入力内容をCookieに保存する

<html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.cookie.js"></script> <script type="text/javascript"> //</head></html>

テキストフォームに入力自動補完機能をつける

<html> <head> <link rel="stylesheet" href="css/jquery.autocomplete.css" type="text/css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.autocomplete.js"></script> </link></head></html>

複数のファイルをアップロードするインターフェイス

<html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.MultiFile.js"></script> <script type="text/javascript"> //</head></html>

XMLデータを読み込んでテーブルに表示する

<html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> (function($){ $.loadXML = function(xmlPath, tableId){ $.ajax({ url: xmlPath + "?" + (new Date()).getTime(), type: "GET", dataType: "xml", timeo…</head></html>

アニメーションするロールオーバー

<html> <head> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.easing.1.3.js"></script> <script type="text/javascript" src="js/jquery.backgroundPosition.js"></script> <style type="text/css"> ul { list-style: none; } #container { margin:20px; }…</head></html>

画像のフェードイン・フェードアウト

<html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $("#photo img").hover(function(){ $(this).animate({ opacity: 1 }); }, function(){ $(this).animate({ opacity: 0.35 }); }); }) </head></html>

画像をズームする

画像のズームにはFullsizeというライブラリを使用すると簡単。 画像は実画像とサムネールの2つを用意する。 <html> <head> <link rel="stylesheet" href="css/fullsize.css" type="text/css" media="all" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> </link></head></html>

JSONを利用したスライドショー

<html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ //JSONファイルを読み込む $.getJSON('imgdata.json', function(jsonData){ //img要素を生成し変数imgに設定し#slideshowに挿入 $(jsonData.imgs).…</head></html>

画像のスライドショーを作成する

<html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ //画像を配列に代入 var slideImages = $('#slideshow > img'); slideImages.hide().filter(':first').show(); //画像のタイトルを表示 $('#…</head></html>

ツールチップを表示する

<html> <head> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.tooltip.min.js"></script> <script type="text/javascript" src="js/jquery.dimensions.min.js"></script> <script type="text/javascript"> //</head></html>

オブジェクトの高さをそろえる

<html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> // bigg…</head></html>

オブジェクトをドラッグする

<html> <head> <link rel="stylesheet" href="css/jquery-ui-1.7.2.custom.css" type="text/css" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script> <script type="text/javascript"> //</link></head></html>

オブジェクトのサイズを変更する

<html> <head> <link rel="stylesheet" href="css/jquery-ui-1.7.2.custom.css" type="text/css" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script> <script type="text/javascript"> //</link></head></html>

ページをスムーズにスクロールする

<html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('a[href*=#]').click(function() { //アンカーリンク名を取得 var href = this.hash; var $target = $(href == '#top' ? 'body' : …</head></html>

右クリックをカスタマイズする

<html> <head> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.contextMenu.js"></script> <script type="text/javascript"> //</head></html>

スライダーを使って文字の大きさを変える

<html> <head> <link rel="stylesheet" href="css/jquery-ui-1.7.2.custom.css" type="text/css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script> </link></head></html>

ツリービューインターフェイスを作成する

ツリービューインターフェイスを作成するにはjQueryのTreeviewプラブインを使用する ディレクトリ構成については下記のとおりにする <html> <head> <link rel="stylesheet" href="css/jquery.treeview.css" type="text/css" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.treeview.min.js"></script> </link></head></html>

アコーディオンインターフェイスを作成する

<html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){{ //高さが不確定のものを記述した時にスムーズにアニメーションをする事が出来ないため //li要素全てにheightプロパティを取得し設定する $("ul li li").each(function(){ $(this).cs…</head></html>

ドロップダウンメニューを作成する

<html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> var timeout = 500; var closetimer; var current; //サブメニュー表示 function dropnav_open(){ dropnav_canceltimer(); dropnav_close(); current = $(this).f…</head></html>