日付・時間のピッカーを単独のWebコンポーネントとして利用できる軽量JavaScript -Aeon Date Picker
デスクトップでもスマホでもタブレットでも動作し、フレームワークの有無に関係なく機能する、日付・時間のピッカーを簡単に実装できるわずか5Kbの軽量JavaScriptを紹介します。 依存関係は一切なく、単独のWebコンポーネントとして利用できるので、非常に便利です。日本語環境のフォーマットにも対応しています。 依存関係はなし スタンドアロンの単体で動作する軽量JavaScriptで実装されたWebコンポーネント。 どこにでも使用できる どんなページにもどんなフレームワークにも設置可能。 プログレッシブエンハンスメント コードの読み込みに失敗した場合は、ネイティブのピッカーまたはテキストボックスにフォールバック。 アクセシブル マウス・タッチ・キーボード・スクリーンリーダーで動作し、ネイティブのフォーム要素として動作します。 多言語対応 デフォルトでブラウザのローカル言語と日付形式を使用します
ApexCharts.js - Open Source JavaScript Charts for your website
What is ApexCharts? ApexCharts is a modern charting library that helps developers to create beautiful and interactive visualizations for web pages. It is an open-source project licensed under MIT and is free to use in commercial applications. DOWNLOAD VIEW DEMO Built for developers Integrating visualizations with ApexCharts is as simple as it can get with extensive API docs and 100+ samples ready
フェッチ API の使用 - Web API | MDN
フェッチ API は、リクエストやレスポンスといったプロトコルを操作する要素にアクセスするための JavaScript インターフェイスです。グローバルの fetch() メソッドも提供しており、簡単で論理的な方法で、非同期にネットワーク越しでリソースを取得することができます。 コールバックベースの API である XMLHttpRequest とは異なり、Fetch は Promise ベースであり、サービスワーカー で簡単に使用できる優れた代替手段を提供します。Fetch は、CORS やその他の HTTP 拡張機能などの高度な HTTP 概念も統合します。 基本的なフェッチリクエストは、以下のコードを見てください。 async function logMovies() { const response = await fetch("http://example.com/movies.
flatpickr
Introductionflatpickr is a lightweight and powerful datetime picker. Lean, UX-driven, and extensible, yet it doesn’t depend on any libraries. There’s minimal UI but many themes. Rich, exposed APIs and event system make it suitable for any environment. This “lean” philosophy translates to less size and better performance, with a bonus of not having to load 8 libraries for a calendar. Dive right int
GitHub - ankurk91/vue-flatpickr-component: Vue.js component for Flatpickr datetime picker :calendar:
[JS]0.6kBの超軽量！基本的なDOM操作を実行するためだけに開発されたシンプルなライブラリ -nanoJS
要素にclassを加えたり、変更したり、要素を削除したり、::beforeや::afterを加えたり、要素の表示位置を取得したり、変更したり、クリックやホバーのイベントを設定したり、基本的なDOM操作を実行するためだけに開発された超軽量ライブラリを紹介します。 jQueryは使うけど、$関数や上記の挙動しか利用しないという人には、特にぴったりなスクリプトです。 nanoJS nanoJS -GitHub nanoJSの特徴 nanoJSのデモ nanoJSの使い方 nanoJSの特徴 トータル100行、0.6kBの超軽量スクリプト。 jQueryに似た構文が利用でき、オブジェクトの連鎖的もサポート。 それぞれのメソッドは単独で機能するため、削除・追加することも可能。 IE9対応（addClass, removeClass, toggleClassのみ非対応）。 nanoJSのデモ ドキュメ
![[JS]0.6kBの超軽量！基本的なDOM操作を実行するためだけに開発されたシンプルなライブラリ -nanoJS](https://cdn-ak-scissors.b.st-hatena.com/image/square/40cbc63a058df9588ea63a08df7cc3661edb7792/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201802%2F2018053005.png)
Micromodal - Tiny javascript library for creating accessible modal dialogs
Introduction Micromodal.js is a lightweight, configurable and a11y-enabled modal library written in pure JavaScript It enables you to create WAI-ARIA guidelines compliant modal dialogs, with confidence and with minimal configuration. At just 1.9kb minified and gzipped, its a tiny library for big change. Following are some of the interactions handled by the library:- Closing modal on overlay click
Web制作者は要チェック！モーダルダイアログをアクセシブルに実装する超軽量スクリプト -Micromodal.js
ちょうどいいモーダルってなかなか見つからないんだよな、と探している人は要チェックです。シンプルで操作性もよく、アクセシブルに実装する超軽量の単体で動作するJavaScriptのライブラリを紹介します。 WAI-ARIAガイドラインに準拠したモーダルダイアログを実装。 1.9kbの超軽量のJavaScriptライブラリ。 aria属性でモーダルの開閉を切り替える。 オーバーレイをクリックすると、モーダルを閉じる。 escボタンを押すと、モーダルを閉じる。 モーダル内のタブをフォーカス。 モーダル内の最初のフォーカス可能な要素にフォーカスを合わせる。 モーダルを閉じた後、フォーカスされた要素の状態を保持。 Micromodal.jsのデモ デモでは実際の動作を楽しめます。 モーダルを閉じるトリガーは、Closeボタン、Xボタン、オーバーレイのクリック、escボタンが用意されています。
SweetAlert2
Sweet Alert 2 A beautiful and customizable replacement for Javascript's "Alert" Supported fork of t4t5/sweetalert Download CDN So... What does it do? Here’s a comparison of a standard error message. The first one uses the built-in alert -function, while the second is using SweetAlert2 . Normal alert Show error message Code: alert ( 'Oops... Something went wrong!' ) Sweet Alert 2 Show error message
Air Datepicker
DescriptionLight (~36kb minified js file and ~9kb gziped) customizable cross-browser calendar, built withes5andcss flexbox.Works in all modern browsers: IE 10+, Chrome, Firefox, Safari 8+, Opera 17+. Installation bower i --save air-datepicker Or you can download files directly from GitHub UsageInclude styles and scripts from/distdirectory: <html> <head> <link href="dist/css/datepicker.min.css" rel
Spectrum - The No Hassle jQuery Colorpicker
<input type='color' value='#f594d0' /> Why A Colorpicker? I wasn't satisfied with the solutions available for colorpicking. Many of them included a ton of images, were hard to skin or customize, or were very large plugins. Here are the goals I had when making a new one: Small Footprint Just include the needed CSS and JavaScript files, and you are ready to go! <script src='spectrum.js'></script> <l
SNSのシェアボタンの設置方法まとめ (サンプルコード付き)
サンプルデモ真ん中寄せをして、ウィンドウの横幅が480px以上の場合は、5つのシェアボタンを横並びで表示し、スマホなど、ウィンドウの幅が狭いブラウザでは、LINEを含めた6つのボタンを1行に3つずつ表示するレスポンシブ仕様になっています。ここで表示している個々のボタンは画像を使用していますが、実際と同じように動作するので、ウィンドウの幅を広げたり縮めたりしてみて下さい。実際のシェアボタンでのデモを見たい人は、「サンプルデモを見る」のボタンから別ページにアクセスして下さい。 HTML <h2>シェアボタンの表示</h2> <p>横幅を狭めると、2行になり、LINEボタンが出現します。LINEボタンの画像は、<a href="https://media.line.me/howto/ja/" target="_blank">公式ウェブサイト</a>よりダウンロードする必要があります。</p> <
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - flatpickr/flatpickr: lightweight, powerful javascript datetimepicker with no dependencies