軽量でカスタマイズ容易な日付ピッカー実装jQueryプラグイン「Zebra_Datepicker」:phpspot開発日誌
軽量でカスタマイズ容易な日付ピッカー実装jQueryプラグイン「Zebra_Datepicker」 2012年07月13日- Zebra_Datepicker, a lightweight datepicker jQuery plugin 軽量でカスタマイズ容易な日付ピッカー実装jQueryプラグイン「Zebra_Datepicker」 13KBでクロスブラウザ、CSSによるデザイン変更が容易で国際化対応もしていて日本語カレンダーへのカスタマイズも簡単。 日付の形式も自在に指定可能。YdM等とオプション指定するだけです。 こうしたライブラリは実装が簡単であると同時に、サイトのデザインにマッチするようにカスタマイズできるようになっていると本当に使い勝手がよいですね。 実装自体は便利だけどカスタマイズに数日かかったなんていうとちょっと困ります。 年だけの選択も出来ます 関連エントリ これは新し
[JS]画像にモザイクをかけたり、点描状にするちょっと面白いスクリプト -SeuratJS
アニメーションで点描に paper.seurat({ imageSource: 'circus.png', attributes: {r: 2, stroke: "none"}, animator: function(elm, x,y,step){ var anim = Raphael.animation({r: 7}, 350); elm.animate(anim.delay(35*y)); }); 点描をアニメーションで動かします。 点描のアニメーション paper.seurat({ imageSource: 'eiffle-tower.png', animator: function(elm,x,y,step){ var anim = Raphael.animation({cx: 2, cy: 2, r: 1}, 2e3, function(){ var anim = Raphael
[JS]IE6/7/8でアクセスしたユーザーに新しいブラウザのインストールを促すスクリプト -IE Alert js
ユーザーがIE6/7/8でアクセスした際、IE9へのバージョンアップや他のモダンブラウザのインストールを促すjQueryのプラグインを紹介します。 IE Alert js [ad#ad-2] IE Alert jsのデモ IE Alert jsの使い方 IE Alert jsのデモ デモはIE6/7/8でご覧ください。 IE9、Firefox, Chrome, Safari, Operaでは、下記のように通常通りに表示されるだけです。 デモページ：IE7で表示 [ad#ad-2] IE Alert jsの使い方 使い方は簡単で、2ステップです。 Step 1: 外部ファイル 「jquery.js」と当スクリプト・スタイルシートを外部ファイルとして記述します。 iealertフォルダ内にスタイルシート、および必要な画像が入っています。 <link rel="stylesheet" type=
ストレス無しでGoogleマップを使ったサイトが作れる「gmaps.js」:phpspot開発日誌
gmaps.js ? the easiest way to use Google Maps ストレス無しでGoogleマップを使ったサイトが作れる「gmaps.js」 Googleマップのサイトへの実装が本当に簡単で、かつ多機能なライブラリのご紹介です 簡単なマップを出すのに必要なコードは以下。 表示させるdivと緯度経度を指定するだけです 出来ることリストは以下 マップのクリック、ドラッグ時のイベントハンドラ実装 マーカー付与 ジオロケーション・ジオコーディング マップオーバーレイ マップ上のコンテキストメニュー実装 地図上の区画指定 目的地までのルート描画 静的な画像をマップ表示 などなど超多機能。 Googleマップ使うかもしれない場合は覚えておいて損はありません 関連エントリ Googleマップ関連のjQueryプラグインとチュートリアル集 スマホやタブレットでGoogleマップ風
[JS]iOS向けのページ制作に役立つ便利機能がたくさん詰まったスクリプト -iOS.js
iPhone, iPadなどのiOS向けのページを制作するのに役立つCSSやJavaScriptの便利機能をたくさん備えたスクリプトを紹介します。 iOS.js [ad#ad-2] iOS.jsの特徴 iOS.jsのデモ iOS.jsの特徴 iOS.jsではデスクトップのブラウザ向けページとは異なる点を中心に、より簡単に実装できるよう便利な機能がたくさん用意されています。 改善 min-height ページがスクリーンより小さい時は常にアドレスバーが表示されてしまいますが、スクリーン全部を使って表示します。 ※下記にデモがあります。 リンク ページ内の全てのリンクをWebAppで開きます。 100% height 通常「height=100%」はロードした最初の画面の高さを元にしますが、アドレスバーが隠された後のサイズ変更に対応します。 ※下記にデモがあります。 アドレスバー ページがロー
jQueryでフォームの値を取得する方法をまとめておくので、コピペでご利用ください。 | Ginpen.com
必要ならどうぞ。 デモ jQueryでフォームの値を取得する方法をまとめ – jsdo.it – Share JavaScript, HTML5 and CSS jQueryでフォームの値を取得する方法をまとめ – jsdo.it – share JavaScript, HTML5 and CSS 共通：要素の探し方 input要素なんかにid振っちゃうのが一番なんだけど、属性セレクターを使うと楽な場合があります。つまり[name=xxx]で検索するやり方。 <form id="my-form"> <input type="text" name="my-text" value="This is text." /> </form>
APIと少しのjQueryコードでGoogle Mapの地図の色を変更する
Google MapのデザインをjQueryで変更する為のメモ書き。Google Map APIとjQueryでGoogle Mapの色合いを変更し、オリジナルのマーカーを付けてみます。こうする事で、既存デザインに合わせたGoogle Mapが出来ます。 今後必要になりそうだったので調べ物をしたついでにメモ書きです。デザインを変更、というと語弊がありますけど、好みの色に変えてみます。 ゴール↓ こんな感じのをjQueryでやろう、みたいな内容です。特に目新しい情報では無いですが。 なんかシャドウ変になっちゃった・・色やマーカーだけでもWebサイトで使用している色にあわせれば地図だけ浮いてしまうような事も無くなるんじゃないかなと思います。 ジオコーディングリクエスト<script type='text/javascript' src='http://ajax.googleapis.com/a
羅列した要素をjQueryで徐々にランダム表示させる - かちびと.net
羅列された要素をフェードイン しながら徐々にランダムで表示 させるエフェクトをjQueryで実装 出来る、というプラグインの ご紹介。割と短いコードで作れる エフェクトなので覚えておきたい ですね。 要素をフェードインさせながらランダム表示させるjQueryのプラグイン・champagne.jsです。 champagne.js とても軽量で、テキストでも画像でもOKです。シンプルなので色々応用が利きそう。 以下動作サンプルです。※再生ボタンで動作します。 コード <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="jquery.champagne.m
[JS]シンプルからかっこいいエフェクト付きまで、ページネーションなら何でも任せろのスクリプト -jPages
Table テーブルのコンテンツをページネーションにすることもできます。 jPagesの使い方 外部ファイル スタイルシートとスクリプトを外部ファイルとして記述します。 <link rel="stylesheet" href="css/jPages.css"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="js/jPages.js"></script> アニメーションのエフェクトを使用する場合は、「animate.css」も記述します。 <link rel="stylesheet" href="css/animate.css"> HTML デフォルトのHTMLの例です。 ページネーション用のdiv要素と各アイテムをリスト要素で実装します。 ※各ア
要素にフローティング効果を手軽に与えられるjQueryプラグイン・jqFloat.js
画像とかをフワフワ動かすやつです。 指定した要素を、指定どおりに継続 的にサイト内で動かします。CPUの 問題とかもあると思うので多用は 出来ないと思いますが、よく見かけ るといえば見かけるので一応メモ。 オブジェクトにフローティング効果を与えます。キャラクターのあるキッズ、ファミリーをメインターゲットとしたWebサイトなんかと相性良さそうですね。 いろいろと画像が動きます。自動で動くものもあれば、マウスホバーで、クリックでアニメーションがスタートする、なども設定可能みたいです。 見た方が早いですかね。公式デモです。 Demo デモでは画像のみになっていますが、ボックス要素を丸ごと動かしていますので、テキストにしても同じ動作をしてくれます。 IEでも動く。 iPhoneでも動く。 コード<script src="http://ajax.googleapis.com/ajax/libs/jq
[JS]広大なカンバスを使って次々にコンテンツをスライドさせるスクリプト -jmpress.js
テーマ左上から、base、sunny、le-frog、ui-darkness 対応ブラウザは、下記の通りです。 iPadも対応というのはいいですね。 Chrome/Chromium Safari Firefox IE Opera iPad impress.jsからの移行 jmpress.jsは「impress.js」のjQuery版で、impress.jsの特徴全てと更に多くの機能を備えています。 impress.jsから移行するには、jquery.jsを加え、スクリプトをimpress.jsからjmress.jsにし、スクリプトの呼び出しを「$(selector).jmpress(); 」に変更します。 impressのデモをjmpress.jsで動かしたデモ jmpress.jsの使い方 HTML ルートとなるdiv要素に「id="jmpress"」をつけ、各コンテンツをdiv要素で配
[JS]ページ全体をダイナミックに横にスライドし、コンテンツを表示するスクリプト -PageSlide
デモ PageSlideの使い方 外部ファイル スタイルシートをhead内に記述します。 <link rel="stylesheet" type="text/css" href="jquery.pageslide.css"> ページの下（</body>の上）にスクリプトを記述します。 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="jquery.pageslide.min.js"></script> JavaScript PageSlideさせる要素を指定します。 <script type="text/javascript"> $('a').pa
おしゃれjQuery、Good Parts、Bad Parts - 素人がプログラミングを勉強していたブログ
jQueryは互換性を保ちつつも洗練されたAPIを取り入れているので、新しく書くときは新しいAPIを使った方が良い。 liveとかセレクタの:hoverとかはBad Partsだ。 jQuery.fn.on / jQuery.fn.off live/delegate/bind/click等は滅びた。全てonを使おう。 また、data引数を使う場合は必ずdataをオブジェクトかnullにする。dataが文字列の場合、関数の場合にセレクタ等と区別がつかないからだ。 $("body").on("click", function (event) { alert("Clicked!"); }, false); また、querySelector/querySelectorAllの登場によって、:hover等のjQuery固有のセレクタは滅びた。validなCSSセレクタと、jQueryのメソッドをch
jQueryでスクロールすると上部に固定されるナビゲーション
jQueryでスクロールすると上部に固定されるナビゲーション グローバルナビゲーションはロゴの下に配置されていることが多いですが、スクロールするとナビゲーション部分だけが上部に固定されるようなものをjQueryでやってみたいと思います。 投稿日2012年02月21日 更新日2012年05月10日 html & css htmlです。 html <h1><a href="#">タイトル</a></h1> <div class="nav"> <ul class="clearfix"> <li><a href="#">HOME</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">NEWS</a></li> <li><a href="#">LINK</a></li> </ul> <!-- /#nav --></div> <div id="
jQueryで画面遷移のないサイトを作ろうとしたときのちょっとしたメモ
jQueryで画面遷移のないサイトを作ろうとしたときのちょっとしたメモ jQueryを使って画面遷移のないサイトを作ろうとしたときのちょっとしたメモです。 サーバーとやり取りをする、Ajax的なことは書いていないのであしからず。 投稿日2012年02月03日 更新日2012年02月03日 リンク（href）を無効にする 画面遷移のないWebサイトでもJSのない環境やSEOも考慮して href にリンク先を設定したいときがあります。 hmtl <a href="hoge.html" id="btn">ボタン</a> このような場合だと #btn にイベントを設定しても画面遷移してしまいます。 click イベントに「e.preventDefault()」と記述すればhrefを無効にになり画面遷移が行われません。 javascript $('#btn').click(function(e){
イモムシでjQuery入門 | 第1回デザイナーがイモムシで覚えるjQuery
こんにちは。kamecoです。 androidアプリをhtmlベースで作ったりしています。 それができるのも、jQueryの力でjavascriptをちょっと書けるようになったから。 ということで、jQueryを覚えよう！ 電卓で入門とか色々考えたのですが、 私が覚えた方法で。。 myベストイモムシを作ろう！！！！ とりあえずあなたのイモムシも用意しよう。 ダウンロード とりあえず名前を付けると愛着がわきます。 うちの子は「クロスケ」です。 ↑クロスケ。かわゆす。 練習で書いてた時から書き換えてないので、挙動がおかしいのは見逃してください。。 つまめます。動きます。顔変わります。などなど。 クロスケのjsもブログを書きながら新調してあげようと思います。 イモムシのhtml解説 これから使うhtmlですので構成や呼び出しているものを一応確認しておきます。 cssやh
超定番の jQueryプラグインをサンプルと一緒に集めました。（商用利用OKなもの多め） | KAYAC DESIGNER'S BLOG - デザインやマークアップの話
超定番のjQueryのプラグインを厳選して集めました。 商用利用が可能なものを優先的にピックアップしています。 （利用する際はそれぞれライセンスをご確認くださいね） 超定番プラグイン アニメーションのイージングを簡単に扱えるプラグイン jQuery.easing jQuery.easing
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Loading...
オープンソースのPHP+jQuery製オンラインファイルマネージャ・elFinder - かちびと.net
画像等をクロスフェードするJavaScript5選 – creamu