Reactを使うとなぜjQueryが要らなくなるのか - Qiita
はじめに React（通称 React.js1）を全く知らない、あるいは幾つか記事を見たけどなんなのかピンと来ていない、という人のために書いています。 「jQuery くらいしか知らない」くらいの人に具体的に雰囲気を知ってもらうのが目的であり、すでにやる気がある人向けのチュートリアルではありません。やる気が出れば日本語版ドキュメントを読んで手を動かせばあっという間なので、そこまでの興味が出ることを目標にしています。 以降では ES2015 (ES6) の文法（アロー関数とか）を使っています。この部分が怪しい人は先にアロー関数と const 文だけでも知ってから先に進んでください。 以下の説明中、このアイコンで表すのは（2023 年現在から見た）『昔話』です。新しく自分のコードを書く際には本来知らなくていいことですが、古い記事を見たときに混同しないための参考情報として書いてあります。この記事
ページの構造をサイドバーメニューにすることができるjQueryプラグイン「TOC」:phpspot開発日誌
TOC | jQuery Table of Contents Plugin ページの構造をサイドバーメニューにすることができるjQueryプラグイン「TOC」。 HTMLの文書構造からから自動で次のようなサイドメニューを実装できるプラグイン。 シンプルなHTMLだけ書いてしまって、後はプラグインを使ってナビゲーションを自動生成して使いやすいページに仕上げるという使い方ができそうです。 関連エントリ ハンバーガーメニューから一気にフルスクリーンメニューを開けるようにする「menupuncher」 メニューが多い場合のMegaメニューのドロップダウン実装「Animated-megadrop」 レスポンシブに使えるクオリティの高いサイドメニュー実装「vertical-responsive-menu」 フルスクリーンでカッコよくモダンにオーバーレイするメニュー実装デモ
Coin Slider: jQuery Image Slider Plugin with Unique Effects
Features Compatible with Internet Explorer 6+, Firefox 2+, Safari 2+, Google Chrome 3+, Opera 9+ Free to use under MIT licence Compatible with Android and iPhone Unique transition effects Valid markup Flexible configuration Auto slide Navigation box Lightweight (8kb only) Linking images Fully customizable using CSS
フラットで綺麗なUIライブラリFlatUIのモバイルテーマ「FlatUI」:phpspot開発日誌
ququplay/jquery-mobile-flat-ui-theme GitHub フラットで綺麗なUIライブラリFlatUIのモバイルテーマ「FlatUI」。 jQueryモバイルのテーマとして利用できます。なんというシンプルで美しいUIなんだろうと思ってしまいました。 デフォルトのjQueryモバイルテーマは見飽きたという方は試してみても良さそう UIはこうしてライブラリがどんどん出てくる、という中で、WEBエンジニアとして出来ることを今後考えなくてはいけないな、と思いますね 関連エントリ スマホの入力が超楽になりそうなjQueryモバイル用のオートコンプリートプラグイン GoogleAnalyticsの結果をjQueryMobileでモバイル端末で表示するサンプル モバイルブラウザでの高速クリックを実現するjQueryプラグイン「jQuery Fastbutton」
アニメーションしながらソートできるjQueryプラグイン「Animated Table Sorter」:phpspot開発日誌
jQuery Animated Table Sorter アニメーションしながらソートできるjQueryプラグイン「Animated Table Sorter」。 ソート可能なテーブルを実現するjQueryプラグインはよくありますが、アニメーションするのははじめてかも。 どこからどこに移動したか？という部分が分かりやすく、一瞬でソートされてしまうテーブルよりもカッコ良いだけではなく使い勝手もよさそう 関連エントリ シンプルにテーブルにソート機能を持たせるだけのjQueryプラグイン「jQuery Table Sort」 テーブルを簡単にカッコよくスタイリングできるjQueryプラグイン「tablecloth.js」
いろんな種類のツールチップを簡単実装できる「Opentip」:phpspot開発日誌
Opentip | The free tooltip いろんな種類のツールチップを簡単実装できる「Opentip」 次のような良い感じのデザインのツールチップが、jQuery,Prototypeベースに加え、スタンドアロンでも動かせるようです。 canvasベースの描画ですが、IE7+にも対応。Ajaxによるツールチップの読込にも対応しています 関連エントリ 色々とカスタマイズが可能なツールチップ実装jQueryプラグイン「PowerTip」 スライダー、ツールチップの他多種多様な機能が詰まったjQueryベースのUIキット「jKit」 可愛いツールチップを実装したjQuery＆CSS3のデモ「Sweet Tooltip」
クールなalertダイアログを実現できる「Apprise v2」:phpspot開発日誌
Apprise v2. The, new and improved, attractive alert alternative for jQuery ThrivingKings | web development, code snippets, and general nonsense クールなalertダイアログを実現できる「Apprise v2」。 alertダイアログの代替は数あれど、デザインが洗練されているものは数少ないですね。 そんなデザインの洗練された数少ないalertダイアログ実装jQueryプラグインです。 alert以外にも、prompt 等にも対応。 アニメーションや微妙なグラデーションが、なかなかセンスがいいです。 デモのアニメーション速度が若干遅く感じたものの、カスタマイズは可能。 関連エントリ カスタマイズ可能で動きがよいalertダイアログ実装jQueryプラグ
フルスクリーンでページめくりをするUI実装デモ:phpspot開発日誌
Fullscreen Pageflip Layout with BookBlock フルスクリーンでページめくりをするUI実装デモ。 なかなかいい感じのインタフェースのデモとサンプルのダウンロードが可能。 ページめくり部分はjQuery+CSSで実装されており再利用ができそう ページ全体をめくるというのもなかなかいい、と感じるデモでした。 完成度が高いのでそのままサイトに移植してもよさそうですね 関連エントリ ページめくりを実現するためのjQueryプラグイン集 Flipboardみたくページめくりを実現できるjQueryプラグイン「BookBlock」 HTML5で美麗なページめくり効果が作れるJSライブラリ「turn.js」 美しいページめくり効果が作れるjQueryプラグイン「Flippy」
モバイルブラウザでの高速クリックを実現するjQueryプラグイン「jQuery Fastbutton」:phpspot開発日誌
jQuery Fastbutton モバイルブラウザでの高速クリックを実現するjQueryプラグイン「jQuery Fastbutton」 モバイルブラウザのSafari等でfastClickイベントをbindして高速クリックを実現できるそうです。 色々なサイトで、スマホ端末がPCより上回ってきているという話を聞いたりしますが、より快適なスマホブラウジングを実現するためにテストしてみてもよいかもですね 関連エントリ 様々なタイプのスライダーが作れるjQueryスライダープラグイン「Jquery Slider Shock」 ２Dゲームが作れそうなアニメーションjQueryプラグイン「Motio」 ページ上部に隠れるナビゲーションバーが実装できるjQueryプラグイン「jBar」
ブラウザサイズに応じてsrcやwidthを置き換えてくれるjQueryプラグイン「Responsive Img」:phpspot開発日誌
ブラウザサイズに応じてsrcやwidthを置き換えてくれるjQueryプラグイン「Responsive Img」 2012年11月22日- Responsive Img - a jQuery Plugin for Responsive Images ブラウザサイズに応じてsrcやwidthを置き換えてくれるjQueryプラグイン「Responsive Img」 単に画像をリサイズするだけではなくsrcも置き換えてくれるそう。 PC版を単に縮小するのではなくて、スマホでは別の画像を使う、といった場合にも使えそうですね ブラウザサイズに応じて別の画像に切り替えて最適化したいという場合はそれなりにあると思うので、覚えておいてもよさそうですね 関連エントリ WEBデザインする人なら入れておきたいレスポンシブWEBサイト作成に役立つブックマークレット「Viewport Resizer」 レスポンシブ
textareaのキャレットを細かく制御する関連jQueryプラグインまとめ:phpspot開発日誌
textareaのキャレットを細かく制御する関連jQueryプラグインまとめ ちょっと調査をする必要があったので調査したのですが、あとで忘れそうなのでブログに書きつつシェアです。 textarea内のカーソル位置に何かテキストを入れたい、今のtextarea内でのカーソル位置を知りたい、といった場合、クロスブラウザの事を考えると結構面倒なのですが、そういう際に使えるjQueryプラグイン集です。 カーソル位置にタグを挿入したりする場合なんかに覚えておくとサクっと実装できて良い感じです。 caretPos http://d.hatena.ne.jp/tubureteru/20110101/p1 textarea内でのカーソル位置を数値で設定したり、カーソルの位置を取得することが可能。 jCaret http://www.examplet.buss.hk/jquery/caret.php te
機能全部入りアップローダー実装jQueryプラグイン「Fine Uploader」:phpspot開発日誌
Fine Uploader a.k.a valums file-uploader 機能全部入りアップローダー実装jQueryプラグイン「Fine Uploader」。 プログレスバー付きでアップロード後の即時サムネイル表示、ドラッグ＆ドロップアップロード、複数ファイルアップロード対応など全部入り。 BootStrapのテーマにあわせることもできます。IE7移行も対応しています。 モダンなアップローダーを作るなら１つの選択肢になりそうです 関連エントリ 画像選択時にサムネイルが出て分かりやすい進捗付きjQueryファイルアップローダー「jQuery File Upload Demo」 HTML5を使ったファイルアップロード用プログラム集
テキストをブロックの中にフィットするように自動リサイズできる「jQuery.textFit」:phpspot開発日誌
jQuery.textFit Examples テキストをブロックの中にフィットするように自動リサイズできる「jQuery.textFit」。 通常、ボックスの中にテキストを入れても、テキストの長さなんかがまちまちでかっこ悪くなるのはしょうがない、という所ですが、このプラグインを使えば、自動的にテキストをフィットするようにリサイズしてくれます。 ソースを見れば単なるdivにidが振ってあるだけというものですが、上記のようにリサイズしてくれます。 これだけだと何に使おうか？というところですが応用すればカッコいいレイアウトにするための便利な機能として使えうことができそうですね 関連エントリ 面白いテキストアニメーションが作れるjQueryプラグイン「textualizer」 faviconをアニメーションさせたりテキストを付与できるjQueryプラグイン「jQuery Favicon」 テキス
MacOS X Lion風のスクロールをブロック要素に付けられる「Antiscroll」:phpspot開発日誌
Antiscroll - os x lion style cross-browser native scrolling on the web that gets out of the way MacOS X Lion風のスクロールをブロック要素に付けられる「Antiscroll」 カーソルを合わせるとクールなスクロールバーがフェードインで現れ、マウスホイールやトラックパッドで動くスクロールを実装可能なjQueryプラグインです。 最初からブロックにスクロールバーが現れているのはなかなかかっこ悪く、更にそのスクロールバーがプラットフォームによって大きく表示が違う場合はデザイナーの方には許せない画面だと思いますが、このプラグインでそこら辺をサクっとスッキリ解決できそう。 でも最新のブラウザにしか対応していないんでしょ？と思う方もいるかもしれませんが、IE7、Firefox3等のレガシーなブラウ
ボックスを綺麗に並べてくれるMasonryライクなjQueryプラグイン・Freetile.js
サイズの異なるボックスを綺麗 に配置してくれるスクリプト、 MasonryっぽいjQueryプラグイン、 Freetile.jsです。似たような スクリプトは結構ありますので 参考までに。 よく見かける、異なるボックスを綺麗に並べるスクリプトです。Masonryっぽいやつ。 こういうやつです。ウィンドウサイズが変わってもボックスを再配置してくれます。 $('#foo').freetile();本体とプラグインを読み込んでセレクタ指定します。アニメーションオプション等もありました。 ライセンスはBSDです。手抜きな記事ですけどちょい忙しいので今日はこれにて。 Freetile.js
タッチ可能でレスポンシブなスライダー実装「RoyalSlider」:phpspot開発日誌
RoyalSlider - Touch-enabled Image Gallery and Content Slider Plugin タッチ可能でレスポンシブなスライダー実装「RoyalSlider」。 スライダ内には動画やHTML等なんでも埋め込めOKで、タッチ対応＆レスポンシブでモバイル対応OK。スライダーのデザインが豊富なテンプレから色々と選べて、それぞれカッコいい物が実装できます。 あんまり見たことのないようなインタフェースのスライダーなんかもあり、それぞれカッコいい。有償＄１２となりますが、検討してもいいほどクオリティが良いです ラップトップを枠として写真を切り替えるAppleっぽいスライダーも良い感じ。 関連エントリ jQueryとCSS3でダイナミックに動くコンテンツスライダー エフェクトが色々選べるイメージスライダー実装jQueryプラグイン「Adaptor」 Apple
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
コンテキストメニューにアイコンやcheckbox/radioを付けられる「jQuery.contextMenuCommon」:phpspot開発日誌
[JS]最近のWebサイトで見かける気持ちいいアニメーションや便利な機能が実装できる、使いやすいスクリプトのまとめ![[JS]最近のWebサイトで見かける気持ちいいアニメーションや便利な機能が実装できる、使いやすいスクリプトのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/fe7aba32b3039602901d0b81d414d66c71a445ea/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201601%2F2016031405.png)
jQuery.flickable - Demo
Loading...