タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
前回に、iOSのセレクトボックスが使いづらい問題についてまとめました。 iOSブラウザのセレクトボックスUIが使い辛すぎ問題 僕の作ったサイトでは、iOSのユーザーが70%を超えるほど多く、かつプロフィールの送信では<select>を多用していたため、どうにかしたいと思っていました。 そのため、デバイス問わず、セレクトボックスをモーダル選択に置き換えるプラグイン「selmodal.js」を作成しました。 iOSデフォルトのセレクトボックスとプラグイン導入後の比較です。 後者のほうがサクサク入力を完遂できることが見て分かると思います。 主にiOSブラウザのユーザービリティ向上のための対策用プラグインなため、iOSユーザーの割合を見て導入を検討してみてください。 <head> <!-- プラグインのCSSを読み込む --> <link href="css/selmodal.css" rel="
レスポンシブ対応！万能カルーセルスライダーjQueryプラグイン「slick.js」を研究してみる | yanagi's memo
なぜ「slick.js」がいいのか レスポンシブ対応 IE11でも問題なく動く カスタマイズ性が高い 王道プラグインだけあって、JavaScriptも活用した質の高い解説ブログが山ほど見つかる←重要！ slick.jsの準備 A: slick.jsをダウンロードする 公式サイトからダウンロードします。 色んなパターンのスライドが実装できまっせ〜なサンプルを上に流して流して、設置方法の説明も流して、settingの解説も流して流して、だいぶ下の方にダウンロードボタンがあります。 急ぎのときは、グロナビの「get it now」をクリックするとダウンロードボタンのところまで一気にスクロール移動できます。 解凍後、slick.min.js、slick.css、slick-theme.css、ajax-loader.gif、fontsフォルダをそれぞれ格納（UP）します。 fontsフォルダはsl
Jmap jQuery plugin 日本地図 jQuery プラグイン - Released under the MIT license Jmap jQuery pluginは、情報配信に適したシンプルな形状の日本地図を表示することができます。 出力される地図はHTMLコーダーやCSSデザイナーも気軽に利用できるようHTMLとCSSのシンプルな構造となっており、カスタマイズ性に優れかつ便利な機能を複数備えています。
jquery.simpleTicker.jsは、回転したり横からスライドインしてくるニュースティッカーを実装できるjQueryプラグインです。 挙動については、以下デモページよりご確認いただけます。 デモページを見る jquery.simpleTicker.jsの使い方 ステップ1. jquery.simpleTicker.jsのダウンロードと設置 GitHubよりjquery.simpleTicker.jsをダウンロードします。 jquery.simpleTickerフォルダ内に入っている「jquery.simpleTicker.css」と「jquery.simpleTicker.js」をサーバー上に設置しましょう。 <head>内に以下を追加してそれぞれのファイルを読み込みます。 <link href="./jquery.simpleTicker/jquery.simpleTicker
今回は、お手軽にtableにソート機能を追加するjQueryプラグインをご紹介します。 いくつかテーブルソート系プラグインを試してみましたが、最もシンプルかつ最も汎用性に長けたプラグインだと思いますので、ソート機能を実装に悩んでいる方は是非チェックしてください。 テーブルにソート機能を追加するtablesorter.js 紹介したいプラグインは「tablesorter.js」。 下記のソースを貼りテーブルを指定するだけで、ソート機能を実装できます。 設定ファイルを自サーバーに入れてそれを読み込みたい方はダウンロードして運用してください。 ダウンロードファイルはこちら また、デザイン用のcssスキンが存在しますが、今回は「既存のテーブルにソート機能を追加する」に絞って紹介します。 オススメポイント 他のソート系プラグインとは異なる、tablesorter.jsのオススメポイントを2つまとめま
jquery.graphviz.svg - GraphvizのSVGデータを表示/機能追加するjQueryプラグイン MOONGIFT
チャートやネットワーク図などを描くのに使われるのがGraphvizです。多くの場合PNGなどの画像で出力して利用しますが、SVGへのエクスポートも可能です。Web向けであれば、画像よりも使い勝手が良いでしょう。 そんなGraphvizで出力したSVGを表示するのがjquery.graphviz.svgです。 jquery.graphviz.svgの使い方 表示しました。 ノードをクリックすると、ハイライト表示されます。 さらにズームイン/アウトができます。 jquery.graphviz.svgはGraphvizのSVGデータに対して、ハイライトとズームイン、ズームアウトを追加します。さらにデータをレスポンシブにしてくれるので、どのデバイスに対しても適切な表示が可能です。 jquery.graphviz.svgはjQuery/JavaScript製のオープンソース・ソフトウェア（MIT L
JQueryで拡大画像のモーダルウィンドが作れる「Lightbox」というプラグインはご存知でしょうか？ Lightboxはサイトにギャラリーを載せる際などに小さな画像を拡大して表示する時によく使われます。 ライセンスもMITなので無料でかつ、商用利用もできて入門者でも簡単に使えるので、JQueryで拡大画像のモーダルを作る際には一番おすすめのプラグインです。 そこで、今回はLightboxをJQueryで使う方法について詳しく解説していきます。 Lightboxとは何か LightboxはJavaScriptで、拡大画像が表示できるモーダルウィンドウが作れるJQueryのプラグインです。 サイトへの導入も簡単でJavaScriptとCSSのファイルをダウンロードするだけですぐに使うことができます。 また、JQueryは1.7以降が安定的に動作するので、別バージョンのものを用意のが面倒な場
【 jQuery】プラグイン無しで［Contact Form 7］にjQuery Datepicker（カレンダー機能）を追加する方法 ワードプレスプラグインの［Contact Form 7］使用時に、日付選択でカレンダー機能を追加する場合、4〜5年前までは［Contact Form 7 Datepicker］を利用するケースがほとんどでした。 しかしながら［Contact Form 7 Datepicker］はクロスサイトスクリプティング（XSS）の脆弱性が発覚し、すでに開発が終了しています。 公式ディレクトリからも削除されていますね。 同じ機能の代替プラグインとしては［Date Time Picker for Contact Form 7］が存在します。 Date Time Picker for Contact Form 7 もし［Contact Form 7 Datepicker］を
Tags: CSS HTML JavaScript jQuery あけましておめでとうございます、ナガです。 簡単にスライダーを実装できて、オプションも豊富で、案件では大変お世話になっているjQueryプラグイン「bxSlider」。 2017年一発目のエントリーは、「bxSlider」の Callback関数についてまとめさせていただきます。 # はじめに 「bxSlider」を実装するときにオプションの値はどんなのあったっけなーと思って、よくググるんですが、 Callback関数を使ったサンプルを掲載しているエントリーがサクッと出てこなかったので、備忘録がてら自分で書いてみます。 ※見つからなかったのは僕のググり方が悪いだけかもしれませんが…。 # 使い方 # ダウンロード 先ずは「bxSlider」を下記サイト右上のボタンからダウンロードします。 jQuery Content Sli
以前『wow.jsの使い方』で同じような物をご紹介しましたが、実務でよく使うのは圧倒的に『inview.js』の方になります。 正確に言えばフェードインだけではなく、スクロールして表示領域に入ったらclassを付与して色んなイベントを発生させることが出来ます。 今回は画像とサンプルを使って『inview.js』の使い方を解説していきます。 また、GSAPを使えばCSSを編集せずに実装できるので、GSAPを使う方法もおすすめです。
【JavaScript】スクロールをマウスドラッグで可能にする | マウスドラッグスクロール | JS | jQueryプラグイン(拡張) - IT the Best
JavaScript(jQuery)でマウスドラッグによるスクロールを可能にする。 マウスドラッグスクロール DEMO コード jQuery拡張版 使用方法 jQuery拡張版 使用例 補足 マウスドラッグスクロール ※環境によっては正常に動作しない可能性があります。 当処理はjQueryを使用しています。 www.it-the-best.com DEMO 1 2 3 4 5 コード function mousedragscrollable(element){ let target; // 動かす対象 $(element).each(function (i, e) { $(e).mousedown(function (event) { event.preventDefault(); target = $(e); // 動かす対象 $(e).data({ "down": true, "mov
ブログのRSSフィードからブログ記事の目次を表示するブログパーツ(API)とjQueryプラグインを公開します。使用はもちろん無料です。 プラグイン内ではGoogle Feed APIを利用しています。jQueryプラグインはGPLライセンスです。いずれもSSL対応なので、httpsのサイトでもご利用いただけます。 PCではIE8～11・Firefox・Chrome・Safari、スマートフォンではiOSのSafari・Android標準ブラウザで動作確認済みです。
![RSS表示ブログパーツ(API)＆jQueryプラグイン [無料ホームページ作成クラウドサービス まめわざ]](https://cdn-ak-scissors.b.st-hatena.com/image/square/59194e8ec27d448dff4dab444c73231a90e06d11/height=288;version=1;width=512/https%3A%2F%2Fmamewaza.com%2Fimg%2F1438919246365s.jpg)
IE対応のSVGアニメーション その① | jQueryプラグイン DrawSVGを使って実装してみた | yanagi's memo
ここでは便宜上PNGを貼っていますが、SVGアニメーションで必要なのはimgタグで貼り付けるSVGファイルではなく、SVGコードの方です。 SVGファイルをテキストエディターで開くか、Illustratorでファイル＞別名で保存...からファイル形式：SVG（svg）として保存をクリックします。 上記SVGオプションのウインドウになるので下のSVRコード…ボタンをクリックすると、SVGコードが表示されます。 必要なのは<svg>内になります。sample01.四角のSVGコードはこうなりました。 <svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 400 400" st
ピクシブ株式会社とさくらインターネット株式会社が開発した画像変換配信サービス ImageFlux をimgタグに簡単に適用できるjQueryプラグインを作ってみました。 ImageFluxの仕組み ImageFluxにはオリジンサーバを設定し、それに対応したドメインが割り当てられます。CDNに似てますね。 ImageFluxのドメインに対して変換パラメータ付きで画像のパスを指定することで、変換パラメータ通りに変換され、キャッシュされます。 最も簡単で効果的な使い方はWebPへの変換でしょう。 例えば、オリジンが https://www.example.com/、 対応するImageFluxのドメインが p1-XXXXXXXX.imageflux.jp の場合、imgタグを以下のようにすることで、WebPに対応したブラウザに対してWebPで画像を配信することができます。
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
セレクトボックスをモーダルウィンドウで選択できるjQueryプラグインを作成 | キノコログ
Jmap - 日本地図簡単表示ライブラリ(jQueryプラグイン)
シンプルなニュースティッカーを実装できるjQueryプラグイン「jquery.simpleTicker.js」
テーブルにソート機能を追加するjQueryプラグインを紹介 | キノコログ
JQueryプラグインLightbox2の使い方【商用利用OK】
【 jQuery】プラグイン無しで［Contact Form 7］にjQuery Datepicker（カレンダー機能）を追加する方法
定番のスライドショーjQueryプラグイン「bxSlider」の Callback関数まとめ | WEBMAN
inview.jsでスクロールして表示領域に入ったらフェードインさせる方法【jQueryプラグイン】
RSS表示ブログパーツ(API)＆jQueryプラグイン [無料ホームページ作成クラウドサービス まめわざ]
imgタグにImageFluxを適用するjQueryプラグインを作った - Qiita
busmagazine.bestcarweb.jp
www.eurospace.co.jp
naho.ht.gob.jp
shinodahideaki.blog.jp
honzaru.hatenablog.com
anond.hatelabo.jp