これからは今まで以上に、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ページネーションプラグイン
長いページを分割して読みやすくするページネーション（ページング）。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
hiraku.js - オフキャンバスメニュー用 jQuery プラグイン をリリースしました | OSS | スタッフブログ | 名古屋のCMS構築・Web制作会社 アップルップル
この hiraku.js は、弊社で開発している a-blog cms の中で利用するために作られた「オフキャンバスメニュー用のJavaScript」を、より多くの人に利用してもらえるように jQuery のプラグイン化したものです。 オフキャンバスメニューとは画面左右から出現するメニューのことで、ドロワーメニューとも呼ばれたりします。 オフキャンバスメニュー用の JavaScript は Google で「offcanvas JavaScript」のように検索すると多く見つけることができますが、今回 hiraku.js で実装した特徴を全て満たすものを探す事ができなかった事から自作する事になりました。 appleple.github.io/hiraku では、簡単に英語で利用方法が解説されていますが、こちらでは日本語でしっかり解説を書いてみようと思います。
2015年総まとめ、jQueryのプラグインとスクリプト100選
毎年恒例のjQueryのプラグインとスクリプトの総まとめを紹介します。「100選」の名称は恒例なので、実際は100以上あります。 今年目立ったのは、ランディングページなどの縦長ページ系、スクロールエフェクト系・CSSやSVGのアニメーションでしょうか。あとレスポンシブ周りも単にサイズ変化に対応させるだけでなく、ユーザビリティを向上させるものが充実していました。 背景関連 SVG関連 縦長ページ関連 スクロール連動・パララックス関連 その他スクロール操作・補助関連 レスポンシブ関連 ナビゲーション関連 レイアウト関連 コンテンツ生成関連 コンテンツ紹介・ツアー関連 ソーシャル関連 スライダー・カルーセル関連 画像拡大・配置・キャプション関連 アニメーション関連 エフェクト関連 テキスト関連 タブ・アコーディオン関連 テーブル・リスト・チャート関連 フォーム関連 パネル・ボックス関連 モーダル
ものっすごい簡単にGoogleマップAPIを操作出来るjQueryGoogleMAPプラグイン
タイトルで全部言っちゃってる気がしないではないですが、WebサイトにGoogleMAPを設置して、色々と簡単にAPIを叩けるプラグインです。 ちなみにこの記事の為にこのjQueryプラグインを読み込むなんてことはしておりませんので、説明で使用しているMAPは全てキャプチャー画像です。本来なら、ぐりぐりと拡大縮小出来るあのMAPを貼り付ける事が出来ます。気になる方は、最後に紹介するチュートリアルページをご覧になっていただければ、わかると思います。 まずは呼び出し 基本の呼び出し。 まずはページのどっかに書いて読み込みましょう。 <script src="javascripts/jquery.js"></script> <script type="text/javascript" src="//www.google.fr/jsapi"></script> <script type="text/
高機能ファイルアップロードjQueryプラグイン｜ドラッグ＆ドロップ、プログレスバー、オーディオ、ビデオ、各種ファイルサポート対応
高機能で美しい インターフェイスはやはり2015年度版という感じはしますが、UIはある程度設定で変更出来ます。インターフェイスデザインは5年たったらがらりと流行りが変わるので便利かもしれませんね。 ドラッグ&ドロップサポート もちろん普通にアップロードする事も可能ですが、それ以外にドロップアンドドロップにも対応しているという事です。 同時に複数のファイルをアップロード可能 幾つかのファイルを同時にアップすることが出来ます。先にアップロードするファイルを選び、一斉アップロードも出来ますし、一つ一つアップロードすることも可能です。 対応デスクトップブラウザ まさかのIE6から対応。 Google ChromeApple Safari 4.0+Mozilla Firefox 3.0+Opera 11.0+Microsoft Internet Explorer 6.0+ 対応モバイルブラウザ Ap
jQuery だけで Single Page Application を作る方法 - Qiita
ぶっちゃけ誰も得しないけど、一度作った経験がある(ただしそれはJSONで動的データを読み込んだりはしないが)ので、一応できるんだぜということを示すために作った。 https://github.com/srd7/jquery-spa-sample 注意 with-webpack は、webpack を利用して jquery と自作コードをまとめあげている。ただしクライアントサイド的には依存ライブラリは jquery のみ。いやまぁ Jade を読み込んだりはしてますけども・・・。 なので「jQueryだけじゃねーじゃん」というツッコミを受けそうなのでonly-jqueryというのを作った。 ただしこれは with-webpack のコードをコピペして手動で一つのファイルにまとめあげた感じ。 その他の違いとして、with-webpack Jade -> HTML に変換した HTML を Ja
[JS]シンプルで超軽量なのがいい！レスポンシブ対応のカード型レイアウトを簡単に実装できるスクリプト -minigrid
レスポンシブ対応のカード型レイアウトを簡単に実装できる、jQueryなどの他スクリプトに依存しないシンプルで超軽量（2KB）のスクリプトを紹介します。 デモのアニメーション minigridの使い方 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 <body> ... コンテンツ ... <script src="http://henriquea.github.io/minigrid/minigrid.js"></script> </body> Step2 :HTML 各アイテムには「.grid-item」を、ラッパーには「.grid」を付与します。 <div class="grid"> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div
![[JS]シンプルで超軽量なのがいい！レスポンシブ対応のカード型レイアウトを簡単に実装できるスクリプト -minigrid](https://cdn-ak-scissors.b.st-hatena.com/image/square/51d7e65c86ee67bce7000a1d7008655aaff74295/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015080204-01.png)
はじめてajaxを使うときに知りたかったこと - Qiita
はじめに 今更ですが最近ajaxを少し触るようになりました。 jQueryを使えば簡単にajax通信ができるため、単純なものであればそれほど実装は難しくないかと思います。 ですが少し複雑なことをやろうとしてみると、急にハードルが上がる気がします。 そこで自戒を込めて、ajax初心者の方に対してはじめにこれを知りたかったと思えるんじゃないかというものをまとめてみたいと思います。 ※jQueryを利用したajax通信を想定しています 目次 処理の順番を意識する $.ajax()の省略メソッドを知る イベントを知る デバッグ方法を知る 通信状況を想定する（タイムアウトを設定する） 連続クリックを防止する ← [New!] 連続通信を防止する ← [New!] 処理の順番を意識する ajaxを使用する場合は、非同期通信で処理したいケースがほとんどかと思います しかし単純にそのまま書いただけでは処理
jQuery：スクロールで表示されるページトップの実装方法 - NxWorld
数多くのサイトで実装されているのを見かける、ページを一定量スクロールすると出現する「このページの先頭へ」のようなページトップを実装する方法を紹介します。 このブログでも実装している（現在は未実装）のですが、同じような動きを実装したいというお問い合わせをいただいたのでその方への回答も兼ねて、動きが被っている感じですが全7タイプの実装方法を紹介します。 最近ではちょっと変わったタイプも多く見かけますが、今回は凝ったアニメーションなども特にないシンプルなものなので、どんなタイプのサイトにも合わせやすいかと思います。 はじめに ここで紹介している実装方法は全てjQueryを使用していますので、あらかじめjQueryを読み込ませてください。 また、HTMLは全て下記のものを使用しています。 紹介しているサンプルはclassにpagetopを用いて実装していますので、class名を変更した場合はCSS
Handsontable is a JavaScript data grid that looks and feels like a spreadsheet - Available for React, Angular, and Vue
JavaScript Data Grid with Spreadsheet UI A front-end component that combines data grid features with spreadsheet UX/UI. Professional support included. Works with React, Angular, Vue, and plain JavaScriptGet Started What's new in v15.3.0 of April 29, 2025 → All spreadsheet featuresWhen you work with Handsontable, it's like you're working with Excel or Google Sheets. There's no steep learning curve
プリロードやローディング画面を簡単に実装できるjQuery.ImgLoaderの使い方 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、おじいちゃんです。 今回は簡単にプリロードやローディング画面を実装できるjQuery.ImgLoaderの使い方をご紹介したいと思います。 jQuery.ImgLoaderとは 多くの画像やWebフォントを使うサイトを作成する場合、ロードにかかる時間が長くなり、デザインが反映される前の状態をユーザに見られてしまうことがあります。 デザインは綺麗な状態を見てもらいたいですよね。 そんなときはローディング処理を簡単に実装できるjQuery.ImgLoaderを使って、ローディング画面を作ってあげましょう。jQuery.ImgLoaderは画像のプリロードを行うライブラリなのですが、ローディング画面も実装することができます。 準備 まずはImgLoaderを使うための準備をします。 下記URLからダウンロードしてみましょう。 https://github.com/Takazudo/j
Alton: jQuery Scroll Jacking Plugin - Paper Leaf
Yo! We’re leaving this post up, but this is really old and we super don’t maintain Alton. You can probably find a better scroll-jacking solution, if you should even use one. Alton is a jQuery-powered scrolling plugin that utilizes 100% height & width, custom vertical scrolling effects in order to present and navigate through web content in a unique manner. It utilizes the whole scrolljacking idea,
なんだかんだで SPA から jQuery に戻った話 - ボクココ
最近は SPA とか React といった話題が尽きないが、自分は結局 フロントエンド JavaScript は jQuery が最もいいと感じている。それはそれら SPA の JavaScript をいじった経験を踏まえての感想。 理由としては、「 やりたいことができにくい 」これに尽きる。 最新を追うということ 自分が最初にSPAを触ったのは AngularJS だった。なるほど、この ng-repeat や $route, $scope などを使えば、今までサーバサイドでやってたようなレンダリングが表側で制御できるようになる！と感動したものだった。この気持ち良さはきっとサーバーサイドでごにょごにょやっていた経験のある人ならなおさら感動するものだ。 さて、じゃあといって「次作るのは SPA のサービスにしよう！」と意気込んで初めて見たとする。それで作っただけで話題になるし、エンジニアと
jquery.cookieでjsオブジェクトをJSONで保管するメモ - すたら日記
要望 フォームの入力情報をクッキーに保存したい。 1つのクッキーに複数の項目の情報をまとめて保存したい。 解決策jQueryプラグインの"jquery.cookie"を使うことで全て解決しました。 外部: https://github.com/carhartl/jquery-cookie デモ: https://codepen.io/sutara79/pen/GBdKQX 解説自動JSON化のオプションを有効にすれば、JavaScript側では連想配列として、クッキー側ではJSON形式の文字列として扱えるように自動で変換してくれます。 // 自動JSON化を有効に $.cookie.json = true; // 連想配列をJSONで保存 var hash1 = { ... } $.cookie('cookie1', hash1); // JSONを連想配列に復元 var hash2 =
[JS]気持ちいいアニメーションを伴ったさまざまなスクロールエフェクトが簡単に実装できてしまうスクリプト -Space.js
スクロールすると、ページに配置されているあらゆる要素が3D空間にあるみたいに気持ちよくアニメーションするjQueryのプラグインを紹介します。 さまざまなエフェクトが驚くほど簡単に実装できるので、お試しあれ！ Demo 2: Out of Space Space.jsの使い方 Step 1: 外部ファイル 当スクリプトとjquery.jsを外部ファイルとして記述します。 <head> ... <script type="text/javascript" src="[jquery]"></script> </head> <body> ... コンテンツ ... <script type="text/javascript" src="space.min.js"></script> </body> Step 2: エフェクトの設定 まずは、コアとなるフレームを作成します。この中に
![[JS]気持ちいいアニメーションを伴ったさまざまなスクロールエフェクトが簡単に実装できてしまうスクリプト -Space.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/24728443d0a7001537016b0816df756534c67040/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015040301.png)
animatedModal.js
animatedModal.js is a jQuery plugin to create a fullscreen modal with CSS3 transitions. You can use the transitions from animate.css or create your own transitions. DOWNLOAD VERSION 1.0
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQueryは必要ない（You Don't Need jQuery）
マテリアルデザインのPullして更新をWEB上で実現できるjQueryプラグイン:phpspot開発日誌