fullPage.js ポートフォリオや企業のプロモーションでもよく見かける1ページで構成されたサイトで、フルスクリーンの垂直スクロール、そして水平のスライドにも対応したウェブサイトを作るためのスクリプト。 こういう作りは特にタブレットで操作がしやすいですね。 FancyScroll.js スマフォやタブレットのようにページの終わりまでスクロールした際にバウンドするのをはじめ、ちょっと面白いさまざまなエフェクトをスクロールに与えるスクリプト。
fullPage.js ポートフォリオや企業のプロモーションでもよく見かける1ページで構成されたサイトで、フルスクリーンの垂直スクロール、そして水平のスライドにも対応したウェブサイトを作るためのスクリプト。 こういう作りは特にタブレットで操作がしやすいですね。 FancyScroll.js スマフォやタブレットのようにページの終わりまでスクロールした際にバウンドするのをはじめ、ちょっと面白いさまざまなエフェクトをスクロールに与えるスクリプト。
ちょっと便利そうなライブラリがあった ので備忘録。Googleマップでキーワード や郵便番号を入力するだけで、該当する 場所を表示します。ちょっと場所を確認 したい、みたいなシーンは地味にありま すし、これは手軽に実装出来るので覚え ておきたい。 Googleマップネタです。jQueryでオート検索する地図コンテンツを作りましょう、というもの。フォーム入力の補助にもなりそうなならなそうな。 jQuery Automatic Geocoder 動作サンプルです。適当に入力してみてください。郵便番号でも検索できます。 表示が、ブログのCSSに影響されてしまっていますが気にしないで下さい。シンプルで使いやすい印象でした。 コード <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.
なかなか良さそうだったので備忘録。iOSやAndroidなど、スマートフォンでのHTML5環境に合わせて作られた軽量モバイルフレームワークです。jQuery互換なので慣れてる方は使い方もすぐに覚えられると思います。特に軽量なのが嬉しいですね。 現状、jQueryを使うのであればスマートフォンにはjQuery Mobileという選択肢となりますが、やはりファイルサイズが気になります。そこで、jQueryをなんとか軽量に使おう、という動きが少し目立ってきました。 例えばzepto.js。がそうですし、jquipという、目的に合わせてjQueryを細分、モジュール化するライブラリなどもあります。 jQ.Mobiもその一つで、jQueryっぽく使えるHTML5環境のスマートフォン向け軽量ライブラリです。 用途を絞ることで軽量化できる、って事ですかね?こういう動きは個人的に歓迎ですけど、問題は派生ラ
複数の電話番号や住所などを入力できる、フォームの項目をユーザーが追加・削除できるようにするjQueryのプラグインを紹介します。 SheepIt! - Form Cloning Jquery Plugin デモページ [ad#ad-2] SheepIt!の特徴 フォームのアイテムを追加したり、削除することができます。 フォームのアイテムの数をコントロールできます。 フォームのコードは通常のHTMLで実装します。 フォームのアイテムにデータをロードすることができます。 コールバック機能を備えています。 SheepIt!の実装 前述のデモのHTMLは、下記のようになります。 HTML フォームの箇所は通常のHTMLです。 <!-- sheepIt Form --> <div id="sheepItForm"> <!-- Form template--> <div id="sheepItForm
ついでなので。 こちらもサンプルソースを見ると、 HTMLはただdialogってidでdiv作っておいて、 <div id="dialog" title="Basic dialog"> <p>ここに中身</p> </div> JavaScript側はこんだけ。 $(function() { $( "#dialog" ).dialog(); }); そっけないなあ。 ドキュメントのoptionsとか見ても皆目見当が付かない。 ただやはりこれも同じHTMLのソース(テンプレ)の中にダイアログ用のソースをどんどん書いていくと、ごちゃごちゃになってくる。 1個、2個くらいならいいとは思うが。 ということで調べてみると、 Loading a page into a dialog こういう記事があり、やり方はあることが分かった。 jqueryでまず一発 div を生成し、そこに .load() で別フ
jQueryのanimateで自由にアニメーションできるようになろう jQueryにはアニメーションをするための機能がいろいろとありますが、ここでは「animate」メソッドの扱い方をご紹介いたします。 投稿日2011年12月27日 更新日2011年12月27日 動かす前の準備 jQueryの前に動かす要素をhtml&cssで作成しておきましょう。 html <div id="box"></div> css #box { width: 100px; height: 100px; background: #3399FF; } jQueryコードを書くときの基本的な形は次のようになります。 javascript <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.m
日時(月、時間など)に合わせて、背景画像を自動的に変更したいとき。 月に合わせて、背景画像を(正月、節分、ひな祭り、......)のように替えたい場合、まず1〜12月の画像を連番で用意する。月については、 1月はimage0.png、2月はimage1.png のように0を初期値として連番で画像に名前をつける。表示するためのjavascriptは以下の通り。 var theDate = new Date(); var thisMonthImage = "url(image" + theDate.getMonth() + ".png)"; $("#content").css("background", thisMonthImage); head要素でjQueryを読み込んでおく id="content"の属性を付けたHTML要素の背景画像が設定される
一定時間がたつと画像が切り替えるスクリプトでございます。jQueryつかってます。 サンプルデモはこちらです。 ファイルのダウンロードはこちらから。 画像を切り替えるスピードなどは簡単に変えることができます。ちなみにスピードのとこの3000というのは3秒のこと。1秒は1000です。 画像を<p id=”gallery”>とかで囲めば表示されます。切り替える画像の数も拡張子も自由に変えれるけれど、画像の名前は1.jpgとか2.pngとか、1、2、3とかの連番でなくてはいけない。 [html] <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無題ドキュメント</title> <script src="js/jquery.js" type="text/javasc
アラート、コンファームだけでなく、AJAXコンテンツ、画像、動画など表示するモーダルウインドウを実装するスクリプトを紹介します。 Simple Modal [ad#ad-2] Simple Modalの特徴 Simple Modalのデモ Simple Modalの実装 Simple Modalのダウンロード Simple Modalの特徴 モーダルウインドウを簡単に生成します。 生成したモーダルウインドウは、ドラッグ操作で移動可能です。 コールバック関数を備えています。 画像や動画、AJAXコンテンツにも対応しています。 Simple Modalのデモ デモではSimple Modalのさまざまな実装例があります。
解説 高機能なダイアログウィジェットです。 dialog は、タイトルバーとコンテンツエリアを持つ、フローティングウィンドウです。 デフォルトでは、移動、リサイズすることができ、右上の "x" ボタンでウィンドウを閉じることができます。 コンテンツの大きさが最大値を超えた場合は、スクロールバーが自動的に表示されます。 書式 依存ファイル jquery.ui.core.js jquery.ui.widget.js jquery.ui.mouse.js jquery.ui.position.js jquery.ui.draggable.jsオプション jquery.ui.resizable.jsオプション 引数 optionsオプション 関数 String: "destroy"、 "disable"、"enable"、"option"、"widget"、"close", "isOpen", "
====================================================== 漢(オトコ)のコンピュータ道: 地震による災害復旧に対して今我々が出来ること。 ====================================================== jQuery UIのダイアログを使って見て、デフォルトボタンの指定をするオプションが見当たらなかったので、調査した結果をメモ。 今回の情報元: javascript - jquery-ui Dialog: Make a button in the dialog the default action (Enter key) - Stack Overflow javascript - Submit jQuery UI dialog on <Enter> - Stack Overflow 調べた結果に
JQuery-UIのダイアログボックスがカッコいいです。 ただ、formをsubmitするときの「ホントに登録しますか?」みたいな確認用のダイアログボックスをアレで実現しようとすると色々とややこしい問題が出てきました。 毎度毎度ややこしい問題と対峙しながら実装を繰り返すのは大変なのでJQueryのプラグインにしました。 ダウンロード jquery.confirm.js 使い方 form要素のJQueryオブジェクトでconfirm()関数が使えるようになります。 $("form").confirm();formタグの中にclass="dialog"のdivタグを書いておくと、submit時にそいつがダイアログボックスになって表示されます。 <form method="post"> <input type="text"/> <input type="submit" value="登録する"/
HavaLite 文字を映画ばりにカッコよくアニメーションさせるjQueryプラグイン「jWise.js」 アニメーション系は説明が難しいので以下のデモページを見ていただくのが一番速いです。 デモページ 数種類のアニメーションがあり、切り替えタイミングやフェードの状態なんかはオプション指定できます。 あとは $(element).jwise(options); で動きます プロモーションサイトなんかで使えそうですね。 スマホ全盛となり、AdobeがモバイルFlashの開発をやめたことで、HTML5やこうしたJavaScriptを使ったものが重要度を増していきそうです。 関連エントリ バックグラウンドを奇妙にアニメーションさせるjQueryプラグイン テキストをCSS3でぼやけさせてアニメーションできたりするjQueryプラグイン「TextBlur」 画面上で誰かがタイピングしているようにア
AutoAnchors jQuery Plugin ページの目次ナビゲーションを自動で作ってくれるjQueryプラグイン「AutoAnchors」 見出しに<h3>なんかを使っていたとして、このプラグインを初期化すると次のような目次があらわれてクリックすれば指定の場所に移動できるという物が作れます。 h3で記事を書いておいてとりあえず後で見返してナビゲーションを作るなんていう作業をしたことがありますが、自動でやることで文書の変更にも対応できますね。 次のように、h3とか好きなタグは自分で選ぶことが出来ます。 ナンバリングもやってくれちゃいます。 関連エントリ ゴージャスなドロップシャドウをクロスブラウザで実現できるjQueryプラグイン「pShadow」 Twitter OAuth認証をポップアップで行うjQueryプラグイン ファンシーなデザインのカウントダウンタイマー実装jQueryプ
Simplify dynamic JavaScript UIs with the Model-View-View Model (MVVM) pattern Declarative Bindings Easily associate DOM elements with model data using a concise, readable syntax Automatic UI Refresh When your data model's state changes, your UI updates automatically Dependency Tracking Implicitly set up chains of relationships between model data, to transform and combine it Templating Quickly gene
こんにちは、2011年度新卒エンジニアの夏目です!突然ですがみなさんJavaScript書いてますか? 最近はjQuery Mobileなどを利用したスマートフォン向けアプリ開発において、クライアントサイドでもヘビーなJavaScriptのコーディングをする機会があると思います。そのようなときコードのいたるところにHTMLが混入したり、どこでどのデータを扱っているのか分からなくなるということになりがちです。 今回はそんな悪夢のようなコーディング生活に一筋の希望の光を照らすBackbone.jsを紹介したいと思います。 対象読者 JavaScriptでの開発経験がある方 Backbone.jsとは Backbone.jsはDocumentCloudが開発をしている、クライアントサイドのJavaScriptコードをModel、View、Controllerで構築するためのフレームワークです。b
jqueryプラグインのjMP3を使用したMP3プレイヤーを設置する方法を解説します。 といっても、このjMP3というプラグインは実はMP3プレイヤーとしての機能はなく、 実際は、jMP3からsinglemp3playerというFLASH swfファイルのmp3プレイヤーを使用します。 singlemp3player.swfだけでも機能としては十分ですが、複数設置する場合便利になります。 singlemp3playerは、設定によって、mp3ファイルを左クリックでダウンロードさせることができます。 HTMLでmp3ファイルに直リンクした場合、左クリックすると設定してある音楽プレイヤーが起動してしまうため、 「右クリック」→「名前を付けてリンク先を保存」といったこと(あるいはその注意書き)が必要になります。 そこを解消してくれるので、「試聴→ダウンロード」をPCにあまり詳しくない方でも簡単に
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く