ドラッグ&ドロップにも対応の、JavaScript製タイムスケジューラー・「jq.schedule.js」
mb.ideas.repository - web-design, jQuery, design and more
Are you expressing your mission, your ideas, your passion, your creativity adequately through your website? For most people, you ARE your website. If you want people to remember you, to get what you can offer, why not use our services to elaborate on your ideas and create a web presence that people will understand? We have been creating web sites since 1998 – improving web sites ever since. How to
React.js/jQuery 対応の JavaScript で文字列中の URL をリンクに変換するプラグイン Linkify
フロントエンドを JavaScript で記述する際、テキスト中にある URL をリンクに変換したい、という事は多いだろう。 しかし、URL の文字列をリンクに変換するというのは結構面倒だ。ググると正規表現で置換する方法が出て来るが、URL の正規表現は非常に複雑である上に、ユーザーが投稿するような Web アプリでは XSS の元にもなる。 何か良い方法は無いかと探してみた所、Linkify というプラグインを利用すると簡単にテキスト中の URL をリンクへ変換する事ができたので紹介しよう。 http://soapbox.github.io/linkifyjs/ このプラグインは単体で使う事もできるし、jQuery のプラグインや React.js のコンポーネント形式で利用する事もできる。 Linkify のインストール方法 Linkify のインストールは環境や利用する機能によって異
「position: sticky;」より便利！スクロールしたらヘッダやサイドバーがぴたっと貼り付くスクリプト -Fixed Sticky
HTMLは汚さずに、ヘッダ、ナビゲーション、サイドバー、ボタンなど、さまざまな要素をスクロールした際に指定した位置にぴたっと貼り付けるスクリプトを紹介します。 IE7+からサポートされており、「position: sticky;」の代替になる便利なスクリプトです。 Fixed Sticky- GitHub Fixed Stickyの特徴 Fixed Stickyのデモ Fixed Stickyの使い方 Fixed Stickyの特徴 Fixed Stickyで貼り付ける要素の位置は、親要素に依存します。 つまり、スクロールしてぴたっと貼り付く位置は、常に親要素となるコンテナ内です。 基本的な動作を見てみましょう。 まずは、要素に「top: 20px;」を指定してみます。
resTables by codefog
resTables jQuery plugin for the responsive tables View on GitHub Download .zip Download .tar.gz resTables - jQuery plugin for responsive tables The resTables jQuery plugin allows you to easily make your table responsive. It has been created based on the stacktable.js concept by John Polacek. View the documentation at https://github.com/codefog/restables Basic demo Shrink your browser window below
レスポンシブなタイル状レイアウトを実現できる「jquery-mosaic」:phpspot開発日誌
GitHub - tin-cat/jquery-mosaic: A free plugin for jQuery to build responsive mosaics of images or any other content fitted to match heights in multiple rows while maintaining aspect ratios. レスポンシブなタイル状レイアウトを実現できる「jquery-mosaic」 タイル状レイアウトを実装するものもレスポンシブ対応できないものもありますが、こちらは対応可能で安心して使えそうです 関連エントリ JS＆CSS3でWindowsMetroのタイルUIを実装する「TileJS」
Engineers Blog - jQueryで美しいグリッドレイアウトを実現できる「jquery.vgrid.js」
こんにちは、webデザインとかコーディング担当のさとうです。 初回から挨拶もそこそこにjqueryプラグインを紹介いたします。 今回紹介するプラグインはグリッドレイアウトを綺麗に、かっこ良く見せるものです。とても便利。 可変グリッドレイアウトのjQueryプラグイン書いたよ | Xlune::Blog ブログのタイトルを見るとわかるように、このプラグインは日本の方が作っています。 必要なもの jQuery本体 http://jquery.com/ jQuery easing http://gsgd.co.uk/sandbox/jquery/easing/ jquery.vgrid.js http://blog.xlune.com/2009/09/jqueryvgrid.html 実装方法 HTML+CSS ※サンプルではコードが長くなってしまうのでdivが2つしかありませんが、各自で増やし
jQuery：画像の拡大（ズーム）表示ができるプラグイン「elevatezoom.js」 | raining
画像をマウスオーバーした時に、画像の一部をズームして拡大表示することができる jQueryのプラグイン「elevatezoom.js」をご紹介します。 「elevatezoom.js」 マウスオーバーした時に画像を拡大させて見せることができるので、 ショップなどの商品画像を見せる際などに利用できると思います。 下記にjQueryのプラグイン「elevatezoom.js」を使用して、画像の一部をズームさせて拡大表示したときの方法をメモします。 ■ 「elevatezoom.js」の設置方法 下記URLより、ダウンロードします。 http://www.elevateweb.co.uk/image-zoom ダウンロードした「jquery.elevatezoom.js」を読み込みます。 【共通で読み込むファイル】 <script src="http://ajax.googleapis.com/
画像の特定範囲を複数選択できて切り取り等に使える「jquery-select-areas」:phpspot開発日誌
GitHub - 360Learning/jquery-select-areas: jQuery pluggin for selecting an extensible area in a picture 画像の特定範囲を複数選択できて切り取り等に使える「jquery-select-areas」 画像上で範囲選択をするプラグインは過去に見ましたが、複数の選択範囲を指定できるものは初めて見た気が。 画像の切り取り以外にも画像内にコメントをしたりする場合に使えそうです 関連エントリ ページ内をJSでズームイン・アウトできるようにするjQueryプラグイン「jQuery-Page-Zoom」 カスタマイズ性が超高いツールチップ実装jQueryプラグイン「Protip」 範囲指定のUI実装jQueryプラグイン「range-picker」 フォームの送信をAjax化できるjQueryプラグイン「S
timedropper jQuery time plugin
DateDropper datedropper JS is a Pure Javascript user-friendly date picker that allows users to easily select a specific date from a calendar-like interface. What does Datedropper do Datedropper streamlines date selection, saving time and reducing errors. This datepicker allows users to select the desired date by clicking on it. The selected date will then be displayed in the input field and can be
日付・時刻入力を手助けしてくれるデートピッカー・タイムピッカーを実装できるスクリプト 15 | NxWorld
ユーザーに日付や時刻を入力してもらう際に手助けするデートピッカー・タイムピッカーを実装できるスクリプトのまとめです。 日付であればカレンダーを、時刻であれば時計を表示させるといったように選択しやすい感じの見栄えにしてくれるものもあれば、シンプルな見た目で入力・選択させるといったものもあり、使いたいデザインのテイストに合わせて選べると思います。 以前だとjQueryを使っている環境でデートピッカーといえば「jQuery UI Datepicker」が定番という印象で、オプションが豊富なのでいろいろな機能・見せ方を実装できますし、ちょっとしたカスタマイズ情報なども検索でたくさん出てくることもあって使ったことあるという人も多いと思います。 ただ、今では同じjQueryプラグインでももっと軽量なものだったり、そもそもjQueryなどは使わず単体で動いて且つオプションが豊富でカスタマイズもしやすいス
textareaでタブ入力を可能にするjQuery「Textarea Tabbing」:phpspot開発日誌
Textarea Tabbing ? code based tabs | A Plus Design textareaでタブ入力を可能にするjQuery「Textarea Tabbing」 タブを入れると通常は次の要素に移動してしまいますが、サンプルを使えばタブ入力が出来ます。 Mootools(なんていうライブラリもあったなぁ・・)のサンプルもある、かなり古い記事ですが問題なく使えるようでした。 関連エントリ textareaに行番号を付けられるjQueryプラグイン textareaを入力値によってリサイズできるシンプルなjQueryプラグイン「autoresize-textarea」 textareaにドロップダウン形式の入力補助を実装できる「jQuery.textcomplete」 textareaの変更履歴を記録していけるUIが作れる「textbox-revision-track
ページ遷移をアプリっぽくすることができる「jQuery.smoothState.js」:phpspot開発日誌
Home - jQuery.smoothState.js ページ遷移をアプリっぽくすることができる「jQuery.smoothState.js」 WEBページというと画面遷移で一旦画面がクリアされて再描画されるため、アプリっぽい体験にすることは通常難しいですが、こちらのプラグインを使って、よりアプリっぽいWEBページ作りが出来ます。 ページ遷移後はURLもa.html→b.htmlのように変わるため、ブックマークやSEO的にも問題のないWEBページ作りに役立てられます 関連エントリ ページ遷移を意識させないアニメーションによるページ切り替え効果実装 モダンでかっこいいページ遷移アニメーションサンプル
Canvasを使ったMaterialアバター実装jQueryプラグイン「material-avatar」:phpspot開発日誌
GitHub - hellsan631/material-avatar: Simple material design avatars using canvas Canvasを使ったMaterialアバター実装jQueryプラグイン「material-avatar」。 次のような四角or円形＋文字でマテリアルデザインっぽい画像を作れます。 WEBサービスなどで、画像を使わなくても個人のアバターとして使うことが出来そうですね。 関連エントリ Rebound.jsとCanvasを使った超カッコイイローディングアニメーション実装デモ Canvasを使って画像の明るさ、コントラスト、セピア等の細かい調整が出来る「CamanJS」
最近流行ってる画像のぼかし加工が簡単に作れるjQueryプラグイン『Image Blur Plugin』 | バンクーバーのうぇぶ屋
ただのぼかし加工プラグインなら紹介するまでも無いかと思いましたが、丁度今進行中のプロジェクトでも使えるかもなと思ったくらいに丁度良かったのでご紹介。 最近はワンページデザインなんかに良く見られる背景をぼかした写真で表示するようなデザインって良く見ますよね。あれって実際作ってみると分かるんですが、ただ単にぼかせば良い感じになるかって言われると意外と難しい表現の一つだったりする。ぼかすだけであれば今やCSS3でも表現は可能ですが、微妙な調整やJS使ってカルーセルなんてしようと思うとなおのことイミフになりやすい。ブラウザ対応も面倒。 そんな時、今回ご紹介するImage Blur Pluginは、細かい調整も可能だし、様々な用途で使えそうだったので、是非覚えておくと良いかもしれません。 ぼかし画像の切り替えにも対応 Switch Header Imageの画像をクリックするとヘッダー上の背景ぼかし
シングルページなサイトをデザインする上で、知っておいて損は無いかもしれないプラグインとか色々！ | バンクーバーのうぇぶ屋
最近多いですねー、1ページで完結するタイプのサイト。One Page Loveのサイトなんかから、シングルページの事例も大量に見ることが出来ますし、パララックスやらフリップ型のコンテンツやら、なんか色々出てきてて着いて行くのがやっとです… でも実際シングルページをつくろうとすると、え？何これどうなってんの？って物も多くてビビることもしばし。 ってことで、今日は僕が知ってる中で『お、これ、シングルページ作る時に使えるんじゃね？』って物を幾つかご紹介させて頂きます！ 主にはシングルページデザインの表現の幅を広げるjQueryプラグインの紹介になるかなと思いますが、楽しい物も多いので、是非興味があれば試してみてくださいませ〜！ それではいってみましょー！ パララックススクローリング系プラグイン この辺は以前に紹介したことがあるものばかりなので、ぱぱーっと行きます。 jQuery Waypoint
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ドラッグ&ドロップで作れるコンテンツエディター実装スクリプト・「KEditor」
入力値のマスクとバリデーションがリアルタイムに行える「Jquery.inputmask」:phpspot開発日誌
コンテキストメニューにアイコンやcheckbox/radioを付けられる「jQuery.contextMenuCommon」:phpspot開発日誌
Arctext.js - Curving text with CSS3 and jQuery