セレクトボックスをモーダルウィンドウで選択できるjQueryプラグインを作成 | キノコログ
前回に、iOSのセレクトボックスが使いづらい問題についてまとめました。 iOSブラウザのセレクトボックスUIが使い辛すぎ問題 僕の作ったサイトでは、iOSのユーザーが70%を超えるほど多く、かつプロフィールの送信では<select>を多用していたため、どうにかしたいと思っていました。 そのため、デバイス問わず、セレクトボックスをモーダル選択に置き換えるプラグイン「selmodal.js」を作成しました。 iOSデフォルトのセレクトボックスとプラグイン導入後の比較です。 後者のほうがサクサク入力を完遂できることが見て分かると思います。 主にiOSブラウザのユーザービリティ向上のための対策用プラグインなため、iOSユーザーの割合を見て導入を検討してみてください。 <head> <!-- プラグインのCSSを読み込む --> <link href="css/selmodal.css" rel="
hiraku.js - オフキャンバスメニュー用 jQuery プラグイン をリリースしました | OSS | スタッフブログ | 名古屋のCMS構築・Web制作会社 アップルップル
この hiraku.js は、弊社で開発している a-blog cms の中で利用するために作られた「オフキャンバスメニュー用のJavaScript」を、より多くの人に利用してもらえるように jQuery のプラグイン化したものです。 オフキャンバスメニューとは画面左右から出現するメニューのことで、ドロワーメニューとも呼ばれたりします。 オフキャンバスメニュー用の JavaScript は Google で「offcanvas JavaScript」のように検索すると多く見つけることができますが、今回 hiraku.js で実装した特徴を全て満たすものを探す事ができなかった事から自作する事になりました。 appleple.github.io/hiraku では、簡単に英語で利用方法が解説されていますが、こちらでは日本語でしっかり解説を書いてみようと思います。
レスポンシブのうまいアイデア満載！RWD対応のナビゲーションを実装するスクリプトのまとめ
Off Canvas, On Canvas, On the Flyなど、レスポンシブのさまざまなアイデアを備えたナビゲーションを簡単に実装できるスクリプトを紹介します。 ※各キャプチャはAm I Responsiveを使用して作成しました。 Slidebars (jQueryのプラグイン) Slidebars -GitHub デモページ Off Canvasタイプのナビゲーション、左右どちらからでもパネルをスライドさせることができます。 WordPressのプラグインも有り。 mmenu (jQueryのプラグイン) mmenu -GitHub デモページ On and Off Canvasタイプのナビゲーション、左右・上下からパネルをスライドさせることができ、モバイル端末向けのさまざまなエフェクトが用意されています。
MasonryのようなJqueryプラグイン
今年もあと2ヶ月となりました。 こんばんはmuchoです。 3ヶ月ぶりのエントリーです。 いくつかの案件で、カードを敷き詰めたような、 いわゆるMasonry Layoutを実装したのですが、 それが有名なライブラリではうまくいかず、自作してみました。 参考にしたのはこの3つ jQuery Masonry http://masonry.desandro.com/ Isotope http://isotope.metafizzy.co/ jquery.vgrid.js http://blog.xlune.com/2009/09/jqueryvgrid.html どれもソートが可能な反面、隙間がところどころに発生してしまい、 そこを詰めたいな、ということになり、そこそこ詰めるように 作り直してみました。 言葉では美味く説明できませんが、 サンプルを見て頂くと分かりやすいと思います。 http:
ページの切り替え時にアニメーションを加える Animsition - Webクリエイターズニュース
下記の動画Gifでは見えませんがローディングアニメもあります。 やりすぎると鬱陶しいのでページ数少ないサイトや、閲覧頻度の低いサイト向きですね。 Animsition · A simple and easy jQuery plugin for CSS animated page transitions. 後藤賢司 東京と大分を拠点として全国的に活動しています。出版社、デザイン会社、Web制作会社、企画・マーケティング会社での経験を生かし、媒体にとらわれない提案・企画・設計が得意です。自社メディア運営によるノウハウを持ち、様々な視点を活用した提案をしております。よつばデザイン（後藤賢司）は、中小企業庁「中小企業・小規模事業者ワンストップ総合支援事業（ミラサポ）」の派遣専門家として認定を受けたり、大分商工会議所が主催する「大分商工会議所ビジネスなんでも応援隊」のサポートメンバーとして、中小企業
軽快で美しいページ遷移を追加するjquery.smoothState.js - Webクリエイターズニュース
後藤賢司 東京と大分を拠点として全国的に活動しています。出版社、デザイン会社、Web制作会社、企画・マーケティング会社での経験を生かし、媒体にとらわれない提案・企画・設計が得意です。自社メディア運営によるノウハウを持ち、様々な視点を活用した提案をしております。よつばデザイン（後藤賢司）は、中小企業庁「中小企業・小規模事業者ワンストップ総合支援事業（ミラサポ）」の派遣専門家として認定を受けたり、大分商工会議所が主催する「大分商工会議所ビジネスなんでも応援隊」のサポートメンバーとして、中小企業様の経営課題や広告・看板・宣伝ツール・Webサイトなどのプロモーション相談を受けております。 その他、WordPressの勉強会を主催したり、Webやデザイン系のセミナーで登壇しています。すみだクリエイターズクラブ、CPIエバンジェリスト。和菓子（あんこ）好き。 よつばデザイン よつば手帖（ブログ） CO
スクロールで画像がクロスフェードするCrossfade.js
「Crossfade.js」 は、スクロール量に応じて画像をクロスフェードで切り替えるプラグインです。最近流行の「ぼかし」のかかった写真を用意すれば、ページをスクロールすると写真がぼやけていくオシャレなトップページが作れます。 Crossfade.js は非常に軽量で、非圧縮版でも3.2KBしかありません。また、アニメーション用のJavaScript APIであるwindow.requestAnimationFrame を使って画像を再描画するので、レンダリングが高速です（window.requestAnimationFrame をサポートしていないブラウザーにも対応しています）。 ライセンスはMITです。ライセンスに従って著作権表示は削除せずに利用しましょう。 step1 jQueryプラグインの読み込み jQuery本体をjQueryの公式サイトから、Crossfade.jsをGitH
Datepicker のカレンダーで選択できる日付の範囲を設定
jQuery UI の Datepicker プラグインについての記事。Datepicker プラグインは、テキスト入力欄に、カレンダーから、日付を入力できるようにするプラグイン。選択できる日付の範囲を設定したい場合は、minDate オプションと、maxDate オプションを使う。 実装例（サンプル） 日付: 実装例（サンプル）の動作について 「日付:」の右側の、テキスト入力欄をクリックすると、今月のカレンダーが現れる。 カレンダーの日付をクリックすると、その日付を、テキスト入力欄に入力する。 をクリックすると、次月のカレンダーになる。 をクリックすると、前月のカレンダーになる。 本日の1週間前から、本日の1カ月10日後までの範囲を指定してある。範囲外の日付は選択できない。 実装例（サンプル）のソースコード 読み込み パスは、それぞれ、アップロードした場所を指定する。 まとめて読み込む場
Beautiful WYSIWYG HTML Editor | Javascript Rich Text Editor | Froala
Your WYSIWYG HTML Editor Beautiful Javascript web editor that's easy to integrate for developers and your users will simply fall in love with its clean design. Take a tour Download Buy Froala Editor is a lightweight WYSIWYG HTML Editor written in Javascript that enables rich text editing capabilities for your applications. Its complete documentation, specially designed framework plugins and tons o
Maplace.js - 軽量なjQuery × Googleマップライブラリ MOONGIFT
Googleマップをプログラマブルに組み込むのに良さそうです。 GoogleマップはAPIの多彩さ、機能の柔軟さもあって様々なサービスで使われています。位置情報や地図を扱おうと思ったら一番に考えるのではないでしょうか。 そんなGoogleマップをさらに手軽に使えるようにしてくれるライブラリがMaplace.jsです。機能は限られますが広範囲に利用できそうです。 まずは簡単なデモ。地図の表示を行います。コードとしてはたった数行です。 // JavaScript var maplace = new Maplace(); maplace.Load(); // or new Maplace().Load(); // HTML <div id="gmap"></div> その結果は次のようになります。 シンプルな地図表示。 次はドロップダウンやリストを使ったマーカーのデモ。マーカーは自動的に中央に表
Flipboard風エフェクトをブラウザ上で実現するためのjQueryプラグイン「flip」:phpspot開発日誌
Jquery-flip Flipboard風エフェクトをブラウザ上で実現するためのjQueryプラグイン「flip」。 次のように、縦にも横にもページをめくる風のUIが作れます。アプリ程ではないにせよ、面白いエフェクトがブラウザ上で作れるのはいいですね 使い方次第だとは思いますが、１から作ろうとすると大変そうなので覚えておくとよさそう 関連エントリ １ページ内で複数ページに分割できるjQueryプラグイン「windows」 マスクを使ったお洒落なスライダーが作れるjQueryプラグイン「Maskify Slider」 レスポンシブなカバーフローっぽいスライドショーが作れるjQueryプラグイン「Flipster」 レスポンシブでタッチ対応な軽量なスライダー実装jQueryプラグイン「Unslider」 テーブル内容を入力値でフィルタリングできるjQueryプラグイン「FilterTable
最近また増えてきた可変グリッドレイアウトのjQueryプラグインまとめ 2012年9月 | webrecuration:IT/Webデザイン系ブログ
可変グリッドレイアウトとは、ボックスをタイル状に並べるプラグイン…っておなじみですね。Pinterestやfacebookのタイムラインにも採用されています。基本的にこのレイアウトの実装はmasonry.js一強な感じだったのですが最近またあたらしく登場してきたのでご紹介。 Masonry.js まずは一番流行しているMasonryから。日本語の解説もいっぱいあるのでだいぶ安心です。 無限スクロールを実装するInfiniteScrollと組み合わせた例。 ボックス要素を綺麗に整列出来るjQueryプラグイン・jQuery MasonryにInfinite Scroll（無限スクロール）機能を加えたサンプル – かちびと.net WordPressのデフォルトテンプレートであるTwentyElevenに導入した例。WordPressではそのままだとうまくいかないようです。 WordP
Google Mapのルート表示なども簡単に表示できるjQueryプラグイン「Maplace.js」
twitter facebook hatena google pocket Google Mapを表示するJavaScriptはそこそこ簡単ですすが、ルート表示させるとなかなか厄介です。 jQueryプラグインのMaplace.js - A small Google Maps Javascript helper.を利用するとルートを簡単にプロットできたり、特定位置をつなぐ、塗りつぶすなど簡単に表示させられることが可能です。 sponsors 使用方法 Maplace.js - A small Google Maps Javascript helper.からファイルをダウンロード。 <script src="http://maps.google.com/maps/api/js?sensor=false&libraries=geometry&v=3.7"></script> <script t
たった１行で完成？凄まじくレスポンシブデザインなサイトの作り方 | DECONCEPTER
簡単に作れる！みんな大好き可変グリッド 先日話題になっていた「なんだこれ！！「NHKスタジオパーク」のレスポンシブ・ウェブデザインが凄まじくレスポンシブ！！」で紹介されていたNHKスタジオパークのレスポンシブデザイン。 こちらのサイト、プラグインを使ってとてもシンプルに作られています。キレイ。このシンプルさを伝えたくてうずうずしてきました。せっかくうずうずしたのでどんな作り方をしているのかサンプルを交えて紹介します。 まずはこちらのデモを御覧ください。 凄まじくレスポンシブデザインなサイトデモ 使われているのはjQuery Masonryというプラグインだ！ @planetofgoriさんのブログで紹介されているように、jQuery Masonryというプラグインが使われています。このプラグインたった数行でNHKのサイトのような可変グリッドレイアウトが作れてしまいます。可変グリッドのレイア
スマホサイトに入れると使いやすくなる！おすすめjQuery4選！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうも、はやちです_(:3」∠)_ スマホに使うとよりサイトが見やすくなるjQueryをまとめてみました。 アコーディオン アコーディオンみたく開閉式のメニューが実装できるjsです。 記事の多いコンテンツをまとめるのに便利ですね。 ■動きをみる HTML <dl class="acordion"> <dt class="trigger">アコーディオンメニュー<span class="open-close">open</span></dt> <dd class="acordion_tree">テキストテキストテキストテキストテキストテキストテキストテキスト</dd> <dd class="acordion_tree">テキストテキストテキストテキスト テキストテキストテキストテキスト</dd> <dd class="acordion_tree">テキストテキストテキストテキストテキストテキ
NHKスタジオパーク
NHKスタジオパーク その２ NHKスタジオパークをVRで！大人気だったアニメのアフレコやキャスター体験をどうぞ！ NHKスタジオパーク 閉館について ２０２０年５月１１日 平素よりＮＨＫスタジオパークをご利用いただき誠にありがとうございます。 新型コロナウイルス感染拡大防止のため臨時休館中のＮＨＫスタジオパークは、６月の再開をめざしてきましたが、このたび閉館させていただくことといたしました。 緊急事態宣言が延長されるなど新型コロナウイルスをめぐる状況の先行きが見通せないことと、東京オリンピック・パラリンピックの延期に伴い、放送センターの建て替え工事の準備作業にスケジュールの変更が生じたためです。 当初はことし９月いっぱいでの閉館を発表していましたが、諸般の状況の変化に伴い、閉館時期を早める判断に至りました。 長年、多くの方々にご利用いただき、心より御礼を申し上げます。 既に団体予約をされ
スマホのタッチイベントを一気に実装できる13KBの軽量ライブラリ「QUOjs」:phpspot開発日誌
QUOjs - Micro JavaScript Library スマホのタッチイベントを一気に実装できる13KBの軽量ライブラリ「QUOjs」 タップ、ダブルタップ、ホールド、スワイプ、スワイプ上下左右、ドラッグといったイベントを実装するのに使えそう モバイルということで3G回線にも配慮した13KBは嬉しい。 今後はローテートやピンチイン・アウトにも対応予定だそう 実装はjQueryライクで超簡単。 関連エントリ たった2KBで動作するスマホ用マルチタッチジェスチャーライブラリ「Hammer.js」 スマートフォンでの指ジェスチャの説明に使えるアイコンセット「Cue」
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Flipsblog.jp
PC
Victor Coulon : Mon blog High Tech