slick - the last carousel you'll ever need
Features Fully responsive. Scales with its container. Separate settings per breakpoint Uses CSS3 when available. Fully functional when not. Swipe enabled. Or disabled, if you prefer. Desktop mouse dragging Infinite looping. Fully accessible with arrow key navigation Add, remove, filter & unfilter slides Autoplay, dots, arrows, callbacks, etc... Single Item
【jQuery】slickのカルーセルスライダー実装方法とサンプル集｜Gimmick log
TOPjQuery 【jQuery】slickのカルーセルスライダー実装方法とサンプル集 【jQuery】slickのカルーセルスライダー実装方法とサンプル集 公開日：2015.12.02 更新日：2023.03.19 jQuery, カルーセルスライダー 様々なレイアウトのスライダー、スライドショーを実装出来る slick の使い方をまとめました。 これまでも slider-proやcarouFredSelをご紹介しましたが、slickは両者のいいとこ取りという感じです。詳細は以下の機能概要をご覧ください。 slick.js配布元 サンプルページ slickの機能概要 レスポンシブ対応 横幅のブレイクポイントごとにスライドの表示数、スクロール数を変更可 （centerModeではスクロール数は1つで固定） タッチデバイス対応 IE8以上で動作（スライド数のドットの色は変化しない） 縦カル
【jQuery】iPad・iPnoneにも対応！ドラッグ＆ドロップで移動できるリストを作る方法 ｜ KLUTCHE
なんだか難しそうに見えるドラッグで動かして順番を変えれるコンテンツもjQueryを使うことで簡単に実装できます。 こんなやつ まずはデモをご覧下さい。ドラッグでダムの順番を入れ替えれるかと思います。 デモページ 使用するjQueryとプラグイン 3つのJavascriptファイルを使います。 jQuery.js jQuery-ui.js jQuery.ui.touch-punch.js 上の2つのJavascriptがあればPCで動きます。 最後のJavascriptはiPhone・iPadで動作させる為のプラグインです。 Javascript 上記3ファイルを読み込みます。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <
【JQuery】処理待ち中にアニメーション表示する – ysklog
JQueryで処理待ち中にアニメーションを流す方法を紹介します。 ページの読み込みやajaxでの通信に時間がかかる場合、ユーザーに「動いているのか？」とストレスを与えるかもしれないので、そういうときに有効かと思います。 アニメーションの準備 処理待ち中に「動いてますよー」というアニメーションは下のようなgif画像を用います。 肝心なgif画像の作り方ですが、以下のようなツールがありますので、それを使うと手っ取り早いです。 http://loadergenerator.com/ http://loadinfo.net/ ここではアニメーションgif画像のファイル名は「loading.gif」にしたいと思います。 HTML id要素「loading」と「contents」をもつブロックを作成します。 そして1つ目のブロックにアニメーションgif画像を、2つ目のブロックにコンテンツを入れます。
sortable()で変更した並び順を取得するサンプル
手軽にドラック＆ドロップで並び替えが実装できるJqueryUIのsortable() 並び替え後をトリガーにしてイベントを実行するプロパティはupdateかstop 並び替え後の順番を取得するにはtoArrayを使います toArrayは並び替えられた要素のidが配列となって返ってきますので、そのままDBへの保存などに使えますね html <ul id="datas"> <li id="1">1</li> <li id="2">2</li> <li id="3">3</li> <li id="4">4</li> <li id="5">5</li> <li id="6">6</li> </ul> <p id="log"></p> js $('#datas').sortable({ update: function(){ var log = $(this).sortable("toArray"
jQuery Touchwipe (iPhone, iPad, iPod Touch Gesten Gestures Event Wischeffekt / Wipe Effect)
jQuery Touchwipe Plugin (iPhone, iPad, iPod Touch Gesten / Gestures, Wischeffekt / Wipe Effect) The small 1 KB library allows you to obtain the wipe event on an iPhone, iPad or iPod Touch which can be used for example to scroll through an image gallery (see demo below). Should also work with Android touchscreens. Die 1 KB kleine Bibliothek ermöglicht das Abfangen des Wischevents auf einem iPhone,
<table></table>で自動ページネーションをしてみる(ajaxじゃないやつ) - せたがやえんじにあぶろぐ
ページネーションのプラグインはとても豊富。 中でも、jQuery.autopagerはすごく素敵です。 ある要素にIDを振っておいて、スクロールした時に そのIDを持つDOM要素が表示されたら、ページネーションするといった具合。 所謂、無限スクロールというやつ。 それをとても簡単に実装出来るのがjQuery.autopager https://code.google.com/p/jquery-autopager/ それをテーブルでもやりたいなと思った。 さらに、jQuery.autopagerはajaxで次ページを取得して、末尾にappendする仕組みになっているけど、 そうではなく、htmlはすべて生成済みでテーブル要素は最初の数十件のみ表示させ、以降は予めdisplay:none;とか、$.hide();で隠しておき、最後の要素が表示された時点で次のn件を表示させたい。 理由は 1.A
iziModalでjQueryのモーダルウィンドウを実装する｜Gimmick log
TOPjQuery iziModalでjQueryのモーダルウィンドウを実装する iziModalでjQueryのモーダルウィンドウを実装する 公開日：2016.09.02 更新日：2020.05.20 jQuery, モーダルウィンドウ 簡単な設定でリッチなアニメーションやカスタマイズが可能なモーダルウィンドウのjQueryプラグインiziModalをご紹介します。 ライセンスはApache License 2.0です。 サンプル ファイルの準備 必要なファイルを読み込む 配布元のサイトからjsとcssデータをダウンロードして、html内で読み込みます。 必要なファイルはダウンロードデータの以下に格納されています。（2016年9月現在） iziModal-master ├ css │└ iziModal.min.css └ js └ iziModal.min.js <link rel="
軽量でシンプルなコンテキストメニューを実装できる「jQuery Context Menu」 – bl6.jp
jQuery Context Menuは、軽量でシンプルなコンテキストメニューを実装することができるjQueryプラグインです。ナビゲーションメニューやダイアログボックス、フォームなどをポップアップ式で表示させることが可能です。 以下、jQuery Context Menuの実際のデモとコードになります。 デモ デモでは、Simple menu、Dialog box、User Input formといった項目が用意されていて、いずれかをクリックすることでそれに対応したコンテンツが表示されます。 一般的なナビゲーションメニューからユーザーが入力するためのフォームまで、いろんなものをポップアップ式で表示させることができます。 シンプルながらも柔軟性に富んだ機能といえそうですね。容量が軽量に仕上がっているところもうれしいポイントの一つです。 オプションには、contextBoxClass、clo
jQuery高速化！処理速度を10倍上げるテクニック20選
Aircraft manuevers during an airpower deomonstration. / Official U.S. Navy Imagery Javascriputを簡単に書けるようにしてくれるライブラリのjQueryですが、使い方をちょっと変えるだけで、パフォーマンスに大きく差がでます。ハイスペックPCでは分かりづらいかもしれませんが、スペックの低いPCやモバイルではWebページの表示速度が遅くすぐに閉じられるかもしれません。 Webページがたった1秒高速化するだけでECサイトなんか、売上が10％向上した事例もあります。そこで、jQuery高速化のポイントや方法をここにまとめておきます。 jQueryの最新バージョンを使う 図1 jQueryのバージョンによる速度 https://jsperf.com/speed-comparison-of-jquery-vers
jQuery UI Touch Punch - Touch Event Support for jQuery UI
Tested on iPad, iPhone, Android and other touch-enabled mobile devices. jQuery UI Touch Punch is a small hack that enables the use of touch events on sites using the jQuery UI user interface library. Currently, jQuery UI user interface library does not support the use of touch events in their widgets and interactions. This means that the slick UI you designed and tested in your desktop browser wil
jQuery Max Length
A jQuery plugin that applies a maximum length to a textarea. The current version is 2.0.1 and is available under the MIT licence. For more detail see the documentation reference page. Or see a minimal page that you could use as a basis for your own investigations. Download now Defaults Options Events Styling In the Wild Quick Ref The max length functionality can easily be added to a textarea with
Custombox - Modal dialog with awesome effects by @dixso9
Custombox is a modern dialog library which is highly configurable and easily styleable. Has a clear and simple API, works on mobile devices, and can be customized to match your style. Overview Check out the some following examples: Simple Fullscreen Loader Custom positions Custom animations Multiple dialogs Non overlay Video
【翻訳まとめ】jQuery 3.0 アップグレードガイド - Qiita
はじめに jQuery 3.0が正式リリースとなったので、最新のアップグレードガイドをまとめようと思います。 原文から一部わかりやすいように言い換えたり、補足したり、省略したりしています。 注意: 長いです。主要な変更点は前回の記事【翻訳まとめ】jQuery 3.0 alpha リリースノートを参照してください。 jQuery Core 3.0 Upgrade Guide 全体像 APIを綺麗にしてバグを修正しました。 - 一部破壊的な変更があり - 既に非推奨と公表していたAPIを削除 - ドキュメントにない隠しAPIの削除 - 特定の入力値に対する既存APIの振る舞いを修正 サポートブラウザ IE9 以上 Chrome, Edge, Firefox, Safariの最新版とそのひとつ前のバージョン Operaの最新版 iOS 7 以上のモバイルSafari Android 4.0以上
Chromeで日本語入力を禁止する - Qiita
Chromeで日本語入力を禁止したい ・IEやFFと同じようにChromeで日本語の入力を禁止したい ・ChromeはCSSのime-mode:disabledに対応していない ・「とにかくヤレ」と神の声を賜ったので、JavaScriptで頑張ってみる 2015/9/17編集 masa-kunikataさんアドバイスの正規表現方式に変更。 textareaで改行・タブもとおるようにしました。 jQuery(document).ready(function() { // ime-modeが使えるか var supportIMEMode = ('ime-mode' in document.body.style); // 非ASCII var noSbcRegex = /[^\x00-\x7E]+/g; // 1バイト文字専用フィールド jQuery('.sbc_field') .on('key
jqPlot - Pure Javascript Plotting
jqPlot is a plotting and charting plugin for the jQuery Javascript framework. jqPlot produces beautiful line, bar and pie charts with many features: Numerous chart style options. Date axes with customizable formatting. Up to 9 Y axes. Rotated axis text. Automatic trend line computation. Tooltips and data point highlighting. Sensible defaults for ease of use.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
floatingLabel.js | A small javascript floating label library
test
http://plugmin.co/472/
http://www.99lime.com/elements/