webページを見ている方に画像やテキストを強調してみてもらいたい時にlightboxプラグインはシンプルに取り入れることが出来て効果は高いjsプラグインの一つです。 ただ、その分、プラグインの数も結構な量があります。だから、その中からサイトイメージにあったものを選べればよりサイトの雰囲気をだせるのではないかと思います。 そのきっかけになればと思い今回は、『シンプル』『写真、ギャラリー系』用途を中心に少しだけ紹介したいと思います。 ●LeanModal デモページ&ダウンロード 使用プラグイン：jQuery 対応ファイル：画像（ギャラリー表示は不可)、テキスト 使い方 1.JQueryとダウンロードしたファイルを呼び出します。 <script type="text/javascript" src="js/jquery.js"></script> <script type="text/java
dropzonejs.com 2014月7月1日: dropzone.js のバージョンが上がり、以前の記事の内容では動作しないものが多くなっていたため、2014年7月1日時点での最新版 3.10.2 の仕様にあわせて記事内容を見直し、改訂しています。(更新が遅くなってしまってすみません。) サポートしているブラウザは Chrome 7+ Firefox 4+ IE 10+ Opera 12+ (Mac版のOperaではバグがあるため現在は無効のようです) Safari 5+ となっています。 ドラッグアンドドロップが利用できないブラウザのためには、 クリックするとinput:fileで表示されるファイル選択ウィンドウを表示させたり、 動作しなかったときの処理を書いて対応することが可能となっています。 動作方法 まず実際に動かしてみましょう。 事前にdropzoneを下記よりダウンロードし
if($this->RequestHandler->isMobile()) { echo 'mobile website!'; } ただし、RequestHandlerComponent::is_Mobile() では日本の携帯全てに対応しているわけではないため、日本の携帯にもある程度対応している Ktai Library for CakePHP というものを使用すると良いそうですが、今回は iPhone と Android にスマホ用ページを表示できれば良いので、デフォルトの判定で実装していきます。 CakePHP でモバイルテーマを作成する AppController にて以下の記述をすることで、モバイルでアクセスした場合にテーマ Mobile を宣言します。
一番下までスクロールしたら自動的に次を読み込むって処理をしたかったのでjQueryプラグインを使ってサンプルを作ってみました。 FacebookやTwitterみたいなやつです。 jQuery Bottom かなり簡単なので、あまり説明することはない為、コードだけ貼り付けてみました。 コード プラグインを読み込みます。 [gist id=2574413] 適当にHTMLをマークアップします。（空で） [gist id=2574443] プラグインを実行するコードをチョロッと書く [gist id=2574433] これだけ。 setTimeoutの箇所をgetJSONとかで読み込むように書き換えれば色々出来ます。 実行した結果はサンプルをみてください。 作成したサンプルはここ http://sample.b-prep.com/Bottom/index jQuery Bottom
画像を遅延ロードする定番jQueryプラグイン「Lazy Load」を紹介します。 １．概要 jQueryプラグイン「Lazy Load」を使って画像を遅延ロードさせることで、ページロード時のHTTPリクエストを減らすことができます。 以前、「Lazy Load」を使っても新しいブラウザではHTTPリクエスト回数が減らない問題があったようですが、2012年11月現在は改善されています。 参考：HTML5時代のjquery.lazyloadは画像のdata-original属性を使う 改善後の仕組みは、img要素のsrc属性にダミーの画像ファイルを指定しておき、ページロード後にスクロールによってimg要素が表示領域に入った段階でdata-original属性に指定した画像を読み込みます。 <img src="grey.gif" data-original="foo.jpg" width="6
We couldn’t find the page you are looking for. Perhaps you can try searching:
だいぶ間が空きましたが ちょっとハマったのでメモっておきます。 jQueryでのajaxは $.ajaxというシンタックスにて利用できますが その際にクロスドメインの問題とかの場合、 XMLデータじゃなくてJSONを使ったJSONPという仕組みを使います。 jQuery側は [javascript] $.getJSONP = function(url,callback,param) { return $.ajax({ url: url, dataType:”jsonp”, success:callback }); } $.getJSONP(“./hogehoge/getjson.php”t,onDataHandler) function onDataHandler(response) { //受信後の処理をここに } [/javascript] こんな感
jQuery UI の Sortable プラグインを使い、ドラッグ＆ドロップで並べ替えを行えるようにする方法。 実装例（サンプル） 項目 1 項目 2 項目 3 項目 4 項目 5 項目 6 項目 7 実装例の動作について 「項目 1」をドラッグして、下へ動かし、「項目 2」の上に持ってくると、「項目 2」が上へ移動し、「項目 2」と「項目 3」の間にスペースができる。そのスペースへドロップすると、「項目 1」と「項目 2」が入れ替わり、「項目 2」「項目 1」「項目 3」…の順番になる。 同様に、「項目 1」から「項目 7」の項目全て、ドラッグ＆ドロップによる並べ替えが行える。 実装例のソースコード 読み込み 読み込み方は、2種類ある。パスは、それぞれ、アップロードした場所を指定する。 まとめて読み込む場合 <link rel="stylesheet" href="themes/bas
jQuery UI Autocompleteでかなを入力した際に漢字を表示する住所入力支援ような、対象表示する方法を紹介します。 なお、Autocomplete自体はjQuery 1.6.x 以降でないと動作しません。 住所： 読み込みと設定、実行 CSSファイルとJavaScriptファイルを読み込み、実装するHTMLを用意、データをセットして実行します。 【HTML : head】 <link rel="stylesheet" href="css/jquery-ui.min.css"> <link rel="stylesheet" href="css/jquery-ui.theme.min.css"> <script type="text/javascript" src="jquery1.4.2.js"></script> <script type="text/javascript"
Cakephp+jquery - Presentation Transcript CakePHP jQuery • twitter @nano_eight • github nano-eight • AmazonEC2 • CakePHP • Twitter • Cake 100 LT CakePHP (; ∀ ) jQuery jQuery CakePHP • jQuery CakePHP • jQuery UI • jQuery plugin • jQuery CakePHP JsHelper • effect() ‣ ‣ slideIn fadeOut • submit() ‣ Ajax POST • echo $js->writeBuffer(); • options array('buffer' => false) writeBuffer() JsHelper jQuery UI
Important note: jQuery UI Tabs (Tabs 3) has been released. This version is no longer maintained. Read more about it. To enable history support for Tabs I use my History/Remote plugin. Download package Simple Tabs Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer a
idTabs わずか2KBで直感的に使えるタブインタフェース実装用jQueryプラグイン「idTabs」 以下のようなHTMLを簡単にタブ化できるみたいです <ul class="idTabs"> <li><a href="#aaa">Tab 1</a></li> <li><a href="#bbb">Tab 2</a></li> </ul> <div id="aaa">This is tab 1</div> <div id="bbb">This is tab 2</div> UL要素の中にリストを定義してあるのがタブ部分で、<div>部分が該当ページ部分です。 1ページ内に全部のデータを収めることも出来るところもいいですね。 関連エントリ タブ機能付きパーソナライズドホームページ『Netvibes』 多数のタブをグループ化して管理できる「TooManyTabs」
お仕事で JavaScript によるプルダウンメニューを実装する必要があり、色々試してみて一番お手軽だったのが「droppy」です。 「droppy」 は jQuery のプラグインです。 パッケージをダウンロードすると色々とファイルが入っていますが、必要なのは src ├ javascripts │ └ jquery.droppy.js └ stylesheets └ droppy.css の 2 ファイルです。 プルダウンメニューの実装は、HTML に以下のコードを貼りつけて CSS を適用すればオッケーです。 ■JavaScript … 外部ファイル化がお勧め <script type='text/javascript'> $(function() { $('#nav').droppy(); }); </script> ■HTML … とてもシンプル <ul id='nav'> <
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQuery File Uploadの使い方
