実際のサイト上で動作するチュートリアルが簡単に作れるIntro.jsが便利すぎる件 - (ﾟ∀ﾟ)o彡 sasata299's blog
2013年05月08日18:21 JavaScript 実際のサイト上で動作するチュートリアルが簡単に作れるIntro.jsが便利すぎる件 さて、先日簡単なチュートリアル作ろうと思ったんですが、どうやるのが良いのかなーと思って悩んでました。キャプチャ取ってそこに説明文を書いて…ってしてもいいんですけど、キャプチャだと一部分なのでサイト上のどの辺なのかわかりにくかったり、サイト側は変更したのにキャプチャが古いままとかになったりしちゃいますよね＞＜ とか思って探してみたらこちらの Intro.js が便利だったので紹介してみます。 さて、この Intro.js を使うとですね、サイト上で動作するチュートリアルを簡単に作れるんですよ。使い方も簡単で、動作させたい要素に対して data-intro (表示する説明文) と data-step (チュートリアルの何番目に表示するか) を指定します。チ
[JS]シンプルなページ内スクロールから、ちょっと面白いスクロールまで簡単に実装できるスクリプト -Scrolld.js
Demo 3 一番目はdiv、二番目はネコの画像、下の方には表示幅に合わせてエフェクトが変わります。 Scrolld.jsの使い方 Step 1: 外部ファイル jquery.jsと当スクリプトを</body>の上あたりに外部ファイルとして記述します。 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="../demo/js/scrolld.min.js"></script> Step 2: JavaScript スクリプトのトリガーを外部ファイルの下に記述します。 <script type="text/javascript"> $("[id*='Btn']").stop(true).on('click',function(e){e.preventD
簡単に実装できる、ボタン画像のマウスオーバーイベント 10+ - NxWorld
画像のオンオフ切り替えといったようなマウスオーバーイベントで、簡単に実装できるものをいくつか紹介します。 CSS3やjQueryを使ってちょっと変わった動きを取り入れるサイトも見かけることも多くなりましたが、今回は普段も使用頻度が高いと思う定番のものに絞りました。 サンプルで使用する画像とDEMOについて 各マウスオーバーの動きを実装するにあたって上のような3タイプのボタン画像を用いており、各ボタンはそれぞれ以下のようになっています。 type A 単体のボタン画像 type B オンとオフを1枚の画像にした、スプライト型 type C オンとオフをそれぞれ別の画像にし、オフ時のものは_off、オン時のものは_onを拡張子前に入れています。 また、サンプルも用意したので実際の動きはこちらで確認して下さい。 CSS：マウスオーバー時に透過させる CSSのopacity（IEはfilter）の
グラフを描画してくれるjQueryプラグインは、多分”jQuery Visualize”がベスト！ - Shinichi Nishikawa's
グラフを描画してくれるjQueryプラグインは、多分”jQuery Visualize”がベスト！ 2011 10/11 グラフを描画してくれるjQueryプラグインを紹介します。 グラフを動的に作ってくれるものとしては、他のjQueryプラグインやGoogle Chartというサービスなどがあります。 が、今回の”jQuery Visualize”は、中でも一番使いやすそうでしたので、ご紹介します。 他のプラグインについては、【jQuery】IEでも使えるグラフ描画ツール | 岡山のWebプログラマーがつぶやくブログ | 神歌.blogでまとめて紹介されています。 作れるグラフの種類 グラフは以下のものを使うことができます。 棒グラフ 線グラフ 線グラフで線の下を薄く塗れるやつ 円グラフ デザインは二種類 冒頭写真の黒っぽいCoolなのと別に、白っぽいのも用意されています。 また、背景画
はじめてのスマートフォンサイト制作「jQuery Mobile を使った制作編」
前回の基礎知識や開発環境の準備編で、基本的な勉強や開発環境は揃えましたので、本記事では具体的な制作に入っていきます。 どんな風に作るのか ハイクオリティで広範囲のプラットフォームに対応したスマートフォンサイトを作りあげるにあたって jQuery Mobile を使用していきます。また URL は統一して（スマホサイトを別 URL で作成せず）スマホアクセス時にスマホ用の出力に最適化します。そのため、サイトの構造に変更は加えませんが、全てのページにおいてスマホ用のレイアウトを出力できるように変更を加えていきます。 jQeury Mobile について スマホサイトの作成に jQuery Mobile について学んでいきます。今まで jQuery Mobile を使用したことがありませんので、今回一から全て勉強しました。といっても、基本的なことは全て下記サイトにありますので、jQuery Mo
jQuery Mobile使用時によく使うマークアップで日本語サンプルを作ったので配布します - かちびと.net
簡単なものですけど、jQuery Mobile でのマークアップ時によく使うっぽい UIのサンプル作ったので配布します。 簡単なチートシート代わりになるのでは 無いかと思ったのでシェアしてみよう かと。良かったら使ってください。 というのも、JQMの日本語サンプルの配布先を見かけなかったので、なかなかお困りの方もいらっしゃるんじゃないかなと。調べるの面倒ですし、手元にサンプルコードあったほうが何かと便利ですよね。 というわけで、以前マークアップサンプルの記事書いたときに作ったサンプルサイトに手を加えた物を丸ごと配布します。 流石にかなり出てるので今更説明不要かもですけど、ざっくり説明するとWebサイトをスマフォ向けに簡単に出来るjQueryプラグインです。 以下のサンプルで使用しているファイルが丸ごと梱包してあります。 サンプル※別窓 いちおうキャプチャ。 目次 サムネイル付きのサンプルと
[JS]ページ内のリンクを印刷時にQRコードにして配置するスクリプト -printQr
ウェブページを印刷する際、ページ内に配置されたリンクをページ下部にQRコードとして配置するスクリプトを紹介します。 ページをPDFで印刷したキャプチャ ※分割印刷には「iPrint」を使用してます。詳しい説明は「不必要な箇所は印刷しない！必要なページだけ印刷（割付印刷も）ができるフリーソフト -iPrint」をどうぞ。 printQrの実装 printQrの実装は簡単で、既存のページにも簡単に実装できます。 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして、指定します。 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> <script src="jquery.printqr.min.js"></script> JavaScript すべてのa要素を抽出す
スクロールした位置に付いてくるサイドバーを実装するjQueryプラグイン・Contained Sticky Scroll - かちびと.net
気になったので備忘録。スクロール した位置に付いてくるサイドバーを 実装してくれるjQueryプラグイン・ Contained Sticky Scrollです。細 かいオプションも設定できて、IE6や IE7でも動作してくれるので覚えて おこうと思って記事にします。 Web Designer Wallがリニューアルしてサイドバーを固定していました。これはcssで実装してるみたいですが、IE6利用率が10％を超える日本では、まだ捨てるわけにもいかないのが現状ですね。（個人的には徐々に捨て始めてますがｗ） 基本的にはアニメーションで付いてきますが、ノンアニメーションも可能です。 使い方 いつもどおりjQueryとプラグインのパスを書きます。 <script type="text/javascript" src="jquery.min.js"></script> <script type="te
長〜いulリストを１行で複数行に分割できるjQueryプラグイン「Multi-column lists」:phpspot開発日誌
長〜いulリストを１行で複数行に分割できるjQueryプラグイン「Multi-column lists」 2011年02月03日- Multi-column lists | jQuery Plugins 長〜いulリストを１行で複数行に分割できるjQueryプラグイン「Multi-column lists」。 <ul><li>1</li><li>2</li> ....... </ul> と、長い ul リストを、jQuery("ul").columns(5, true);のようにすることで、5行に勝手に分割してくれます。6行にしたければ6を指定 次のようになります。 通常これをやろうとすると、数値で割って、規定値にきたら一旦</ul>で閉じてみたいなことをする必要がありますね。 これをたった1行で出来るというのはかなりHTML出力側のプログラムが楽ちんになり、頭を使う必要がないですね。 行
http://neteye.github.com/activity-indicator.html
NETEYE Activity Indicator A jQuery plugin that renders a translucent activity indicator (spinner) using SVG or VML. Features Lightweight script No images required No external CSS Resolution independent Alpha transparency Highly configurable appearance Works in all major browsers Uses feature detection Degrades gracefully Supported Browsers The plugin has been successfully tested in the following b
セレクターで要素を選択する - jQuery 日本語リファレンス
jQueryを使ってコーディングする上で、最も頻繁に出てくる作業のひとつがセレクターによる要素選択でしょう。 この便利さが、他のライブラリをおさえてjQueryがデファクトになりつつある要因のひとつでもあると思います。 殊にバージョン1.3になってからはエンジンがsizzleに変わり、更に柔軟性と実行速度を向上させています。 通常はidによる単一要素選択が多くなるかもしれませんが、上手に使うことでより一層、jQueryによる開発が楽しくなると思います。 セレクター書式確認用ツール しかし、セレクター書式は時に非常に難解です。 これを確認するために、簡単なブックマークレットを作ってみました。 以下のリンクを、Firefoxであればツールバーなどにドラッグして下さい。 IEならば右クリックして「お気に入りに追加」を選び、警告は無視して登録します。 [jQuery Selectors Inspe
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQuery Multicolor animation drop down navigation menu | Required:jquery | Tags:horizontal navigation menu,drop down navigation menu | Menu & Navigation
Thumbnails Navigation Gallery with jQuery