マルチウィンドウ｜jQuery plugin｜Ajax｜PHP & JavaScript Room
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-eq
Drk7jp
奥さんが東京にいる間に迎賓館に行きたいっ！と申すので、奥さんに丸任せで日帰り旅行の旅程を組んでもらった。その結果、「迎賓館赤坂離宮 本館内部見学と東京プリンスホテルのブッフェ」というコース名のはとバスツアーに行くこととなった。迎賓館赤坂離宮なんかは自分ではチョイスしない行き先なので、人任せにして旅を楽しむのも意外と良いかもしれないと思ったりした。 奥さんが以前から行きたいと言っていた益子にでも行ってみるかなとの考えに至った。調べてみると、栃木県益子町では例年、春のゴールデンウィークと秋の11月3日前後の年二回、町をあげての一大イベントとして益子陶器市が開催されていることを知った。県内外から春には約40万人、秋には約20万人が訪れ、益子焼を求める人々で賑わうとのことです。益子焼の陶器が欲しいなら、このイベントを逃す手はありません。朝早くから頑張ってお出かけしてきました！ 家計を１つのクレジッ
jQueryでページの所定位置までスクロールしたら要素を表示させる方法｜ブログを書く人のアイデアノート
ブログを書く人のアイデアノート ブログを書く人に役立つアイデアを書き留めるブログ。 このブログの読者になる（チェック） 記事一覧 | 相互RSSについて » テーマ：ブログカスタマイズ 2010年10月13日 jQueryでページの所定位置までスクロールしたら要素を表示させる方法 訪問者に対するアプローチとしてはかなり効果的な ページ上部にスライドしながら出てくる 【このブログは役にたちましたか？】を設置する方法をご紹介。 今回のjava scriptはskuare.netさんのブログを元に アメブロ用に改良して作ってみました。1ページ1記事表示推奨です。 ■[チュートリアル]jQueryでページの所定位置まで来たら要素表示 via could ※設置しても動作しない場合は、上記サイト様をご参照ください。 設置方法 まずjava scriptをフリープラグインに書きます。 <
なんでも拡大しちゃうjQueryプラグイン「Zoomooz.js」
twitter facebook hatena google pocket これわりと使いようによっては面白くなりそうなjQueryプラグインです。 Zoomooz.jsは指定要素をクリックしたら拡大表示してくれます。 ステップなどで利用すると良さそうです。 sponsors 使用方法 Zoomooz.jsからファイル一式をダウンロードします。 <link rel="stylesheet" href="zoomooz.css" type="text/css" /> <script type="text/javascript" src="sylvester.js"></script> <script type="text/javascript" src="jquery-1.4.2.min.js"></script> <script type="text/javascript" src="jq
jQueryメモ delayメソッドでずらしてみる - lovelog || Loveness×Zeroless
This blog is a blog for the study of hirou that aims at an independent web creator. The knowledge such as Flash actionscirpt3, CSS2, CSS3, Javascript, jQuery, microformats, and SEO is being studied evenly now. This blog is customized fast as a proving ground of the design. 以前、jQuery1.4で楽しみなメソッドで書いたjQuery 1.4のdelayメソッドを少し触ってみました。 動きをより追求できるdelayメソッド要素のアクションに遅延効果を追加出来るのがdelayメソッドです。animateメソッドとの相性はも
jQueryでクールなくるくるウィジェットを作ろう (1/5)
数年前に登場した「Googleマップ」を皮切りに、ページを遷移せずに一部を書き換える“Ajax”が大流行しました。Ajax/JavaScriptによるユーザーインターフェイス（UI）はWebサイトの操作性を大きく向上できるので、地図サイトなど、いわゆる「Web 2.0的」サイトでは多用されていますが、（特に国内の）テキストと画像を組み合わせた昔ながらのWebサイトでは、まだまだ活用されていないようです。 今回は、AjaxでリッチなUIを実現している英国のWeb制作会社のWebサイト「Web Design by TVI」に注目します。単に見た目がかっこいいだけでなく、Ajaxを効果的に活用した使い勝手のいいUIをお手本にします。 今回のお手本サイト： 『Web Design by TVI』 Webデザイン、ECサイト構築、CMS開発などを手掛ける英国のWeb制作会社「TVI」の企業サイト。会
Amazonと楽天のアフィリエイトを効率化するjQuery技 (1/5)
書評サイトやDVDレビューサイトなど、特定の商品を紹介するWebサイトを運営しているなら一度は検討したいのが、アフィリエイト広告の掲載です。個別の商品を紹介しているページからショッピングサイトに当該商品ページへアフィリエイトリンクを張れば、ユーザー（読者）は商品をすぐに購入できるようになり、サイト運営者はその分の報酬（紹介手数料）を手にできます。 たとえば、多くの映画ファンが集うコミュニティサイト「映画生活」では、すでにDVDになっている映画作品のページにAmazon.co.jpと楽天ブックスへのアフィリエイトリンクを設置しています。今回は、この映画生活のサイトと同様に、サンプルの書評サイトにアフィリエイトリンクを付けてみます。 今回のお手本サイト：『映画生活』 ユーザーによるレビュー、掲示板などのコミュニティ機能に強みを持つ総合映画情報サイト。1999年に個人サイトからスタートし、200
jQueryで作るAmazon流リキッドレイアウト (1/5)
国内外を問わず、多くのECサイトがお手本とする「Amazon.co.jp」。この連載でも以前、Amazonが採用する「カルーセル」（回転表示するスライドパネル）の作り方を紹介しましたが（関連記事）、Amazonは優れたユーザーインターフェイス（UI）の宝庫でもあります。 中でも、過去の閲覧履歴などからページの大半が動的に生成されるAmazon.co.jpのトップページは、ユーザーを商品購入へと導くさまざまな仕掛けが組み込まれています。今回は、このAmazon.co.jpのトップページに注目します。 今回のお手本サイト：『Amazon.co.jp』 米アマゾン・ドットコムの日本法人アマゾンジャパンが2000年から運営するECサイト。書籍販売から始まり、現在ではペットボトル飲料水や紙おむつ、キッチン家電まで1000万点超の膨大な商品を扱っている。取扱商品の拡大に合わせて、2008年4月に大規模
長～いページもスッキリ！jQueryでタブ表示 (1/2)
1つのWebページに多くの情報を載せようとすると、縦に長くなって見づらくなってしまいます。そのようなWebページを整理するには、ページをいくつかのタブに分けるのが1つの方法です。今回は、jQuery UIの「Tabs」というウィジェットを使って、ページをタブに分ける方法を紹介します。 Tabsをダウンロードしてみよう jQueryには、ユーザーインターフェース関連の基本的なライブラリを集めた「UI」（User Interface）があります。その中の1つに「Tabs」というウィジェットがあります。Tabsは、Webページを複数のタブに分割して、切り替えられるようにするものです。 jQuery UI Tabsを使うには、まずこのJavaScriptファイルをダウンロードします。ダウンロードページに接続すると、ダウンロードするモジュールを選ぶページが表示されますので、「UI Core」と「Ta
ASCII.jp：透過PNG対応！jQueryでオリジナルツールチップ｜Web制作の現場で使えるjQuery UIデザイン入門
透過GIFで作る固定位置のツールチップ 次に作成するのは、透過GIFを利用した「ふき出し」風のツールチップです。先ほどのツールチップはマウスカーソルの動きに合わせて位置を移動していましたが、今度はあくまでも「ふき出し」に見せるため、位置を固定して表示します（サンプル02）。 テキストの量に応じて縦方向にふき出しのサイズが自動で調整されるように、ふき出しの下側コーナー部分を除いた上側大半の画像と、下側コーナー部分を含む下側の画像の2つを用意します。上側の画像をふき出しテキストの入るp要素の背景として設定すれば、テキストの量によってp要素の高さが決まり、高さに合わせて背景として設定されたふき出しの画像サイズが調整されます。p要素の直後にふき出しの下部をくっつければ、テキストの量に応じて高さが調整されるふき出しになるわけです。 ふき出し部分のHTMLは、ツールチップに表示する内容をclass属性
jQueryとAjaxで作るスムーズページング (2/3)
データを読み込んで表示する側（フロント側）のHTML／XHTML（以下、HTML）は次のように記述します。コンテンツを表示したい領域に、id属性「content」を設定したdiv要素を用意します。表示する内容は前に作成したデータ用のHTMLから読み込みますので、div要素にはデータ取得中に表示するローディングアイコン（GIF画像）を配置しておきます。各ページへのナビゲーションリンクはul/li要素で記述し、li要素内のa要素のhref属性にはコンテンツデータのHTMLファイル名を設定します。 ▼サンプル01（HTML部分） <h1><img src="images/header.jpg" alt="新着書籍" /></h1> <div id="content"> <p class="loading"><img src="images/loading.gif" alt="" /></p> <
JavaScript Library Archive
JavaScript Library Archiveについて JavaScriptライブラリをまとめたサイトです。用途別に探すことができ、配布元、使用方法、ライセンスなどについて解説をしております。 新着JavaScriptライブラリ プログラムのコードに色を付ける「google-code-prettify」 角丸を表現する「jQuery Corners 0.3」 jQueryベースのカラーピッカー 「Farbtastic」 水平方向のアコーディオンメニュー「horizontal accordion」 セレクトボックスをカスタマイズする「Script.aculo.us Select Box」 IE6でhover,active,focus擬似要素を使う為の「csshover」 画像に光沢を与えるjsライブラリ『Glossy.js』 IE6以下をIE7と同じようにするライブラリ『IE7.js』
jQueryで自作するフローティングウィンドウ (2/2)
IE6での不具合を解消する サンプル01のフローティングウィンドウは、Internet Explorer 6（IE6）で開くと、ドラッグ操作時にハンドラー部分のテキストやWebページの一部が選択状態になってしまう場合があります。この問題は、IE6のテキスト選択機能がドラッグ処理に関係なく動作してしまうのが原因で、ドラッグ操作時だけIE6の選択機能を一時的にオフにすることで解決できます。 IE6の選択機能は、mousedownイベントとmouseupイベントに以下の記述を追加するとオフにできます。 ▼サンプル02（スクリプト部分） $("#floatWindow dl dt").mousedown(function(e){ $("body").bind('selectstart', function(){ return false; }) }).mouseup(function(){ $("
40分で覚える！jQuery速習講座 (1/6)
いまやWeb制作に欠かせなくなったJavaScript。でも、「JavaScriptはほとんど“アリモノ”で済ませている」という方も多いのでは？ そこで、WebデザイナーやマークアップエンジニアなどのWeb制作者の方向けに、いま一番人気のJavaScriptライブラリー「jQuery」の基本を学べる特別レッスンをお届けします。題して、「40分で覚えるjQuery」。要点だけにぎゅっと絞って解説しますので、手を動かしながら今すぐjQueryを始めましょう。 【0分目：導入編】 jQueryのダウンロードと利用方法 jQueryのライブラリー本体（JavaScriptファイル）は公式サイトからダウンロードし、head要素などにscript要素を書いて読み込みます。
東京のWeb制作会社・ホームページ制作会社 | フライング・ハイ・ワークス
「フライング・ハイ・ワークス」はWeb制作・ホームページ制作会社【東京都 渋谷区】です。企業サイトやスマホサイト、ポータルサイトなど様々なホームページの制作、デザイン制作を行っており、「売上」に繋がる質の高いサービス提供を心がけています。
jCarousel Lite をカスタマイズして記事毎に！
jCarousel Lite をカスタマイズして記事毎に！ 【 ありのごとくあつまりて 】 この記事に含まれるタグ （Keyword） : jQuery jCarousel javascript テンプレート カスタマイズ jCarousel Lite をカスタマイズして記事毎に！ 2010/05/19 (水) カテゴリー： ブログカスタマイズ上級 勿体ないのと、説明が面倒なのとで 紹介を避けていましたが... jQueryライブラリ を利用した jCarousel Lite を FC2ブログで使う上でのちょっとしたヒントを載せておきます。 変数 を利用すれば、ブログ記事内 に利用することだってできるし、カスタマイズして見た目を整えて使えば、読み込み中 や スクリプトOFF の場合でも格好悪くなりません。 jQueryプログラミング入門 jQueryで作るAjaxアプリケーション
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://blog.net-king.com/2010/06/11/jquery%E3%81%AE%E3%82%B9%E3%83%A9%E3%82%A4%E3%83%89%E3%82%B7%E3%83%A7%E3%83%BC%E3%80%81jcarousellite%E3%82%92%E4%BD%BF%E3%81%86/
ASCII.jp：Web制作の現場で使えるjQuery UIデザイン入門
ASCII.jp：jQuery＋CSSによるカルーセルパネルの作り方 (2/3)
http://www.sohtanaka.com/web-design/examples/image-zoom/