smoothState.js - 滑らかな画面遷移を提供 MOONGIFT
スマートフォン向けのWebサイトなどでは画面遷移が大事です。普通のURLを遷移するような動きではUXがよくありません。新しいコンテンツがスライドしてきたり、前の画面と滑らかに入れ替わることでユーザの意識を切らさずに操作を継続できるようになります。 そうした動きをサポートしてくれるライブラリがsmoothState.jsです。履歴管理も行ってくれるライブラリです。 smoothState.jsの使い方 デモです。クリック時にコンテンツがスムーズに表示されます。 アニメーションのされ方も複数あります。 メニューで使うパターンです。 smoothState.jsを使うと画面遷移はもちろん、履歴管理も行ってくれます。スマートフォンはもちろんデスクトップブラウザでも利用できるでしょう。多くのフレームワークでは同様の機能がありますが、大げさになってしまいます。遷移機能だけ欲しい時に良さそうです。 sm
jquery-rsSlideIt - 2D/3Dでダイナミックなスライド切り替え MOONGIFT
よりインパクトのあるスライドを目指すならば一つ一つのスライドはもちろん、そのスライドの切り替えにもこだわると良いでしょう。ダイナミックなアニメーションがあると目を引くプレゼンテーションにつながるはずです。 今回紹介するjquery-rsSlideItはjQueryプラグインとして作られたスライド切り替えライブラリです。 jquery-rsSlideItの使い方 2Dの場合です。回転の伴うスライドが作れます。 3Dです。よりダイナミックに回転しながら表示されます。 jquery-rsSlideItは回転しながらダイナミックにコンテンツの表示が切り替わります。プレゼンテーションのスライドはもちろん、写真などを印象強く表示するのにも使えそうです。jQueryプラグインなので使いやすいのも魅力です。 jquery-rsSlideItはjQuery/JavaScript製のオープンソース・ソフトウェ
BorderColorAnimate - 枠線をアニメーションさせるjQueryプラグイン
ユーザのアクションに対して反応することで、相手のストレスを軽減できます。特にAjaxを使うSPAなどでは通信状態を適切に表示しておくのが大事です。何の反応もなかったら、ユーザは何度もボタンを押してしまうでしょう。 一例として紹介したいのがBorderColorAnimateです。枠をアニメーションさせるという面白い方法です。 BorderColorAnimateの使い方 アニメーションさせているところです。 ボタンを大きくしたり、バウンドさせたりするのに比べるとシンプルなアニメーションです。また、単に文字を変えるだけなのに比べてインパクトがあります。意外と使えそうな手法ではないでしょうか。 BorderColorAnimateはjQuery/JavaScript製のオープンソース・ソフトウェア（MIT License）です。 payalord/BorderColorAnimate: jQu
これからは今まで以上に、jQueryが必要なくなるかもしれない
3, 4年前あたりから、jQuery無しでこう記述するとか、jQueryの一部の機能を代替する軽量スクリプトなどが出始めました。 2017年も半年が過ぎ、その状況はさらに変わり始めています。 (Now More Than Ever) You Might Not Need jQuery 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 現在のブラウザ事情 jQueryに替わる、JavaScriptの選択肢 マイクロライブラリの台頭 IE9への対応はポリフィルで NodeListの反復 jQueryは遅いのか？ jQueryについて私が嫌いなもの $なしでは生きていけない？ 現在のブラウザ事情 jQueryが2006年にリリースされてから、DOMとブラウザのAPIは飛躍的に向上しています。2013年に「You Might Not Ne
軽量なのに強力！jQueryそっくりなJavaScriptライブラリ「Umbrella」とは？
オープンソースのjQueryライブラリはWeb開発の現場において何年もの間不動の地位についていました。 JavaScriptのことを深く理解していなくとも、オブジェクト指向で分かりやすい構文、豊富な外部プラグイン、加えてAjaxなどの非同期通信も簡単に扱うことができたのが、その人気の理由です。 JavaScriptを用いた開発現場ではいまもなお人気のjQueryですが、ここに来て新たなJavaScriptライブラリが注目を集めています。 それが、Umbrellaです。 UmbrellaはjQueryと同様に完全オープンソースで、jQueryと同じく要素セレクタを扱うことができたり、DOM操作ができたり、Ajaxリクエストを行うことができます。 また、UmbrellaはjQueryと若干異なる文法や関数の呼び出し方を採用していますが、基本的に残りの部分はほとんどjQueryと一緒です。 それ
長いページをサクッと分割！メモると便利なjQueryページネーションプラグイン
長いページを分割して読みやすくするページネーション（ページング）。jQueryで手軽に実現するプラグインをまとめてみました。2017年現在の「使える」プラグインの情報です。 長くてかさばるコンテンツを単純に並べて表示しても、情報の見せ方としては今一つです。そこでページネーションが重要になります。長めのコンテンツにとっては特に重要です。 サーバーサイドのページネーションは一般的にページ化されたコンテンツを取り出したり、複数のページ（ユニークなURLを持つことが多い）に分割された内容を表示したりするために使用されます。これでもうまく動きますが、クライアントサイドでページネーションを実現する方法もあります。この記事ではコンテンツを効果的に複数のページに分割できるjQueryベースのプラグインを紹介します。 TWBS jQuery Pagination シンプルで効果的、かつ便利なページネーション
ClockPicker
A clock-style timepicker for Bootstrap (or jQuery). Download ZIP CSS < 6KB, JS < 9KB, after minified. Browser support All major browsers are supported, including IE 9+. It should look and behave well enough in IE 8. Device support Both desktop and mobile device are supported. It also works great in touch screen device. Dependencies ClockPicker was designed for Bootstrap in the beginning. So Bootst
jquery.balloon.js Demo page
jquery.balloon.js Demos A jQuery plugin to add balloon tips to elements User-friendly, fine-tunable and without css and images Getting started (1) Download and load this plugin javascript file after jQuery. <script src="/js/jquery.balloon.js"></script> (2) Call $().balloon(options) in document ready event of jQuery. $(function() { $('selectors').balloon(options); }); Distinct features Without css
jQuery学習者にReactも学習してほしい3つの理由と学習方法まとめ
jQueryの初版が登場して10年が経ちました。 jQueryの登場により、これまでJavaScriptで書いていた複雑なコードがよりシンプルになりました。CSS操作やDOM操作、Ajaxなどの拡張性も非常に便利なものでした。 時が経つにつれ、さまざまな特徴を持ったJavaScriptライブラリ・JavaScriptフレームワークが登場し、jQeuryに触れることなく大規模なアプリケーション開発をすることも珍しいことではなくなりました。 そうした中、昨今注目されているのがReact.js(React)です。 今回は、jQueryを学習した人に、Reactも学習してほしい理由とその学習方法についてまとめてみました。 Reactとは？ Reactとは、ユーザーインターフェイス(UI)を構築するためのオープンソースのJavaScriptライブラリです。 Facebookが開発の主導となっており、
Webサイトにツアーコンテンツを実装するjQueryプラグイン・jQuery TourBus - かちびと.net
Webサイトツアーを実装できる、というスクリプトのご紹介。jQueryに依存します。よくある類のものと変わりませんが個人的に使いやすい印象だったので備忘録として。 Webサイトツアーです。そこまで多用する機会は無いのですけど・・ よくあるツアーコンテンツ。キャプチャはオーバーレイですが、オーバーレイ無し等も可能です。 $(document).ready( function() { var tour = $('#foo').tourbus( {} ); } ); jQueryと本プラグインを読み込み、上記のコードを書けば準備完了です。あとはオプションを書いていくだけ。 ドキュメントが非常に充実していますので詳細は本サイトでご覧ください。 jQuery TourBus
textareaでオートコンプリート機能を実装するjQueryプラグイン・jQuery.textcomplete - かちびと.net
textareaでオートコンプリート機能を実装するスクリプト・jQuery.textcompleteのご紹介。デモではコメント投稿で絵文字を使う、みたいなケースが紹介されています。 textareaでオートコンプリート機能を実装する、というもの。使いどころは限られそうですが、コンテンツ次第では便利なスクリプトですね。 こういうの。上記例では絵文字を打つのにコロンで括るので、コロンを打つとオートコンプリートで候補を出してくれるようになっています。 jQueryは1.7以降を使うように、との事。 $('textarea').textcomplete(strategies); セレクタを指定して呼びだすテキストを作っていきます。 デモではコロンを正規表現で判別して事前に作ってあったテキストをオートコンプリートとして実装、アイコン付きに置換してるみたいですね。詳細はGithubに書かれています。
Twitter Bootstrap向けのMarkdownエディタを実装出来るスクリプト・Bootstrap Markdown - かちびと.net
Bootstrap向けのMarkdownエディタを実装出来る、というスクリプトのご紹介です。Markdown対応のエディタで、タグ保管機能も付いています。なかなか良さそうです。 Twitter Bootstrap向けのMarkdownエディタを実装出来るスクリプト・Bootstrap Markdownです。実装も楽なので覚えて置いて損は無いかも。 Boostrapに設置可能なMarkdownエディタです。シンプルで使いやすい印象でした。 <textarea name="content" data-provide="markdown" rows="10"></textarea> textareaにカスタムデータ属性を与えればいいみたいです。 <div data-provide="markdown-editable"> <h3>foo</h3> <p>bar hoge fuga</p> </d
ページ内の目次を自動生成するjQueryプラグイン・jQuery Jump To - かちびと.net
ページ内の目次を自動生成する、というスクリプトのご紹介です。見出しを検出してページ内のナビゲーションを作成出来ます。冗長なページにはあると良さそうですね。 ページ内の見出しを使ってナビゲーションを作成します。現在閲覧中の見出しにもスタイルを当てられますのでユーザーに分かりやすいナビゲーションを作成出来そうですね。 長いページにはページ内ナビゲーションがあると便利。ドキュメントや規約など冗長化しやすいコンテンツと相性良さそうです。 $(document).ready( function() { $(".page_container").jumpto({ firstLevel: "> h2", secondLevel: "> h3" }); }); リンクとして取り出す要素は上記のように指定します。ネストも可能ですが2段階層までの対応のようです。 シンプルなので手軽に使えそうですね。詳細は以下
contentEditable属性対応の、オートコンプリートでテキストや絵文字の入力を補完するライブラリ・At.js - かちびと.net
オートコンプリートでテキストや絵文字等の入力を楽にしてくれる、というスクリプトです。以前紹介したものと被りますが、選択肢は多いほうがいいですね、という事でメモ。 以前ご紹介した、jQuery.textcompleteと似た機能になります。コメント機能のあるコンテンツにあるとユーザーにも喜んでもらえるかも知れませんね。 入力を補完します。コロンや@を入力すると補完テキストが表示され、続けてテキストを入力するとそのキーワードに合わせて絞り込まれるという仕組み。contentEditable属性にも対応できます。 jQueryに依存しており、1.7以上で動作するようです。詳細は以下より。あと、話は変わりますが、11月半ばあたりに出張でイタリアに行くので10日ほど連絡取れません。悪しからずご了承下さい。 At.js
任意のテキストを手軽にオートコンプリートとして実装できるjQueryプラグイン・Completer - かちびと.net
送信フォーム等で任意のテキストを手軽にオートコンプリートとして出せるようにする、というスクリプトのご紹介です。手軽さが気に入ったのでメモ。 簡単にオートコンプリート機能を付与できるスクリプトです。ファイルサイズは非圧縮で10KBほど。jQueryに依存しています。 文字を入力すると、いくつかのメールアドレスが候補として表示されます。 <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script src="completer.min.js"></script> 本体とプラグインを読み込みます。 <input type="text" completer data-separator="@" data-source="['gmail.com', 'live.com', 'yahoo.ne.jp', 'i.s
textareaやinput要素内の任意のテキストをハイライトするスクリプト・jQuery highlightTextarea - かちびと.net
textareaやinput要素内の任意のテキストをハイライトするjQueryプラグインのご紹介です。どこかで利用する機会があるかと思ったので備忘録。 フォームの入力項目でユーザーの入力したテキストに、設定したテキストがマッチしたらハイライトする、というもの。 東京と江戸をハイライト設定しています。 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="jquery.highlighttextarea.min.js"></script> 本体とプラグインと用意されているCSSを読み込みます。 $('textarea').highlightTextarea({ words: [{ color: '#ADF0FF', words: ['foo'
マテリアルデザイン風ボタンをjQueryとCSSで実装する方法｜BLACKFLAG
Webサイト上の要素の動きや操作によってユーザーに「触覚」を生み出すマテリアルデザイン。 そんなマテリアルデザインの一種として ボタンをクリックした際に、そのクリックしたポイントから波動を出す動作があります。 その動作をjQueryとCSSを使って実装する マテリアルデザイン風ボタンを作ってみたので紹介してみます。 「マテリアルデザイン風ボタンをjQueryとCSSで実装する方法」サンプルを別枠で表示 画面上にあるボタンをクリックすると そのクリックしたところをポイントとして 円形の波動が広がるアニメーションを実行させます。 クリックしたポイントからアニメーションを実装することで 「ボタンをクリックした」ということと クリックした場所が視覚的に明確に分かるようになる効果があります。 このボタン動作の全体構成について まずはHTMLから。 ◆HTML <div id="linkArea">
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
強度の高いパスワードを生成できる「jquery.passwordGenerator」:phpspot開発日誌
誰もが知っておくべきjQueryのTips - Qiita
JavaTechnology Slot Online | Cara Daftar bermain Slot Online
