You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
リファレンス jQuery の jqPlot プラグイン 導入方法や基本的使い方について。 jQuery の jqPlot プラグインのオプション オプションについて。 jqplot.barRenderer.js 棒グラフを生成するのに必要なプラグイン。 jqplot.blockRenderer.js ブロックチャートを生成するのに必要なプラグイン。 jqplot.bubbleRenderer.js バブルチャートを生成するのに必要なプラグイン。 jqplot.canvasOverlay.js グラフに線を描き加えるのに必要なプラグイン。 jqplot.dateAxisRenderer.js 年月日や時刻など、軸を時間軸として扱う際に必要なプラグイン。 jqplot.donutRenderer.js ドーナツグラフを生成するのに必要なプラグイン。 jqplot.dragable.js 系列
jQuery レスポンシブメニュープラグイン SlickNav の使い方 CATEGORY: jQuery | TAG: プラグイン, レスポンシブ 2015年1月18日 jQuery レスポンシブメニュープラグイン SlickNav の基本的な使い方や設定に関する個人的なメモ。マルチレベル(メニューの階層)にも対応しているので便利。 SlickNav Responsive Mobile Menu v1.0.1 licensed under MIT 目次 jQuery プラグイン SlickNav のダウンロード SlickNav のページの「DOWNLOAD NOW」をクリックしてダウンロード。 解凍すると以下のようなファイルやフォルダがある。jQuery プラグイン SlickNav を使用するのに必要なファイルは「jquery.slicknav.min.js」と「slicknav.c
jQuery+CSS3で固定ナビゲーション→レスポンシブでハンバーガーメニューに切り替える jQuery+CSS3を使用してスマホではハンバーガーメニューに切り替わる、固定ナビゲーションを作成してみます。 投稿日2015年12月09日 更新日2015年12月09日 PC版のナビゲーションは基本構造は下記を使用します。 jQuery+CSS3でスクロールするとアニメーションして狭くなる固定ナビゲーション HTML #mobile-head はモバイル時色を付けてバーにします。 #global-nav はモバイル時ナビゲーションを開閉するボタンです。 三本の線がspanになります。 HTML <header id="top-head"> <div class="inner"> <div id="mobile-head"> <h1 class="logo">Logo</h1> <div id="
AppleのSiriやGoogleのOK Googleの様に音声コマンドで様々な機能を操作する事が可能になっています。「ブラウザでも似たようなこと出来ないかな」と以前より思っておりました。 そこでHTML5の音声認識API - Speech Recognition API を利用して、ブラウザの要素を音声で操作してみました。 APIのサポート状況は現在のところChromeとAndroid Chromeのみです。caniuse.com - Speech Recognition API 音声認識の基本操作 W3Cのドキュメント - Web Speech API Specification - W3Cにこの様なサンプルが書かれています。 <textarea id="textarea" rows=10 cols=80></textarea> <button id="button" onclick=
jQuery は CSS セレクタで要素を選んで処理できるのが魅力的ですね。そんな jQuery ですが、CSS セレクタの書き方次第で速度が大幅に変わってきます。 ここでは jQuery の内部処理を疑似コードで示しつつ、jQuery を高速に使うためのポイントを5つに絞って紹介します。 何度も同じセレクタを実行しないクラスだけを指定するのは禁止#id を積極的に使う途中までの結果を再利用する子供セレクタ(>)を使うと速くなることがある ※ この記事は jQuery 1.2.6 のソースコードを元に記述しています 1. 何度も同じセレクタを実行しない 改善前 // 例題 1 $("div.foo").addClass("bar"); $("div.foo").css("background", "#ffffff"); $("div.foo").click(function(){alert
HOME>WEBプログラム覚書>[jQuery]こんな機能があったんだ。jQuery stop() [jQuery]こんな機能があったんだ。jQuery stop() 「Buttons like Windows 7 with JS & CSS」を見てて って記述あったので調べてみたらstop()って色々使えるんですね。 全然しらなかったです。 stop([clearQueue], [gotoEnd]) 引数は2つ。何も指定しないとfalse [clearQueue]がtrueの場合、持っているキューが全て削除される。[gotoEnd]はtrueにすると現在のアニメーションの最後のコマへジャンプする。
2012年に紹介したものを中心としたjQueryのプラグイン100+α選です。 今年目立ったのは、やはりレスポンシブ、そしてCSS3アニメーションでしょうか。 スライダーやギャラリー系もレスポンシブ・アニメーション対応、ナビゲーションやPinterst風のレイアウトなど、多くのプラグインにそれら二つの要素が組み合わさっています。 動画関連 画像ギャラリー関連 画像拡大関連 画像配置・キャプション関連 背景画像関連 コンテンツスライダー・カルーセル関連 ナビゲーション関連 レイアウト関連 レスポンシブ関連 パネル・ボックス関連 ツールチップ・ティッカー関連 アニメーション関連 エフェクト関連 スクロール操作・スクロールコンテンツ関連 リスト関連 テーブル関連 フォーム関連 テキスト関連 見出し抽出関連 ローディング関連 エレメント・コンテンツ生成 その他 動画関連
jQueryのDatepickerを導入して、ついでにカスタマイズ。 投稿日:2011年11月24日 カテゴリー JavaScript 投稿者 nonukes “ボウリングの紆余曲折”で、スコア分析をする画面において“○年○月○日~×年×月×日”という日付範囲指定をしたい。 単純にセレクトボックスを使う手もあったが、ここはカレンダーから入力する方がユーザーフレンドリーってなもんだろう。 そこで、カレンダーから日付指定が出来るjQueryのプラグイン “Datepicker”を導入することにした。 まずは、以下のサイトにアクセス。 jQuery UI - ThemeRoller http://jqueryui.com/themeroller/ このサイト、実はjQueryを利用した様々なリッチユーザーインターフェイスを提供してくれるサイトである。 カレンダーはもちろんのこと、タブやアコーディ
セレクトボックスのユーザビリティを劇的に向上できるかもしれないjQueryプラグインです。バージョンアップでjQuery.selectable.jsからjQselectableに名前が変わりました。 サンプルを見てみる トピックス 特徴 ダウンロード 導入方法 スタイル 拡張 表示形式 selectable simpleBox エフェクト 透明度 プルダウン位置の調整(少し高度な設定) プルダウンの高さ カスタマイズ 独自のselectボックスに適用させる id、classの引継ぎ 日付で使う Callback関数を使う 動的にselect要素のDOMを書き換える場合(rebuildメソッド) サンプル 更新履歴・追記 動作環境 特徴 selectボックスの選択ってイライラしないですか?jQselectabeを使えば解決できるかもしれません。以下が主な特徴になります。 セレクトボックスの鬱
jQuery、プラグイン、jQuery UI、Web経由のCDNとは CSSの書き方も分かるjQueryプラグイン実践活用法(1) 基本/おさらいとしてプラグインやjQuery UIについて簡単に触れ、Web経由でjQueryを使うCDNについて解説 デザインハック < リッチクライアント 2009/12/8 今回は「jQuery UI」のより進んだ活用例 ■ jQueryのプラグイン「jQuery UI」とは? 今回紹介するjQuery UIは、JavaScript(Ajax)フレームワークjQueryのプロジェクトがjQuery用に開発している、以下の機能を提供するプラグインです。 ドラッグ&ドロップなどのマウス操作の機能拡張 ユーザーインターフェイスを改善するウィジェット(アコーディオン、日付入力、ダイアログ、スライダー、タブなど) 今回は、jQuery UIのドラッグ&ドロップ機能
使い勝手の良さそうなプラグイン だったので備忘録的にご紹介。 ツールチップを実装するjQuery のプラグインです。マウス追従、 不動タイプの選択が可能、デザ インもCSSのみで作ります。 各ブラウザにも対応、HTMLタグも利用可能、マウス追従の有無の選択、軽量、などの特徴が有ります。 Sample動作サンプルです。 マウス追従への変更も可能です。圧縮版で5KBほどとなかなか軽量です。 コード<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="jquery.tooltipster.min.js"></script>本体とプラグインを読み込み。 $('
説明 Tooltipライブラリでツールチップを表示するにはimgタグなどにtitle属性を指定します。$()にツールチップを表示したいエレメントを指定しtooltip()メソッドを呼び出します。 サンプルプログラム 【HTML】 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>Sample</title> <link rel="stylesheet" href="css/main.css" type="text/css" media="all"> <script type="text/javascript" src="
javascriptを触る人ならjQueryはもうすでにご存じかとは思いますが、 そのjQueryをベースに様々なUIを実装できるのがjQuery TOOLSです。 いろんなことをクールに簡単に実装できる、なんとも便利なライブラリです。 ▼jQuery TOOLSはコチラ▼ http://flowplayer.org/tools/index.html 今回はその中でも、ツールチップについて書きたいと思います。 テキストエリアにカーソル合わせるとツールチップがでてくるUIを実装する機会がありましたので、それについて少しご紹介します。 ▼実装手順▼ ①サイトから、jQuery TOOLSをダウンロードします。 ダウンロードしたjsを、任意のページで読み込みます。 <script type="text/javascript" src="***/jquery.tools.min.js"></scr
やりたいこと: 検索結果から、検索した文字列をハイライトしたい jQueryでプラグインとかないか探してみたら、ありました。 highlight: JavaScript text higlighting jQuery plugin http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html MITライセンスとなっています。あまりメジャーではないのか情報が少なめだったので、本家サイトを参考に導入手順を残しておいてみます。 使い方 1. jQuery本体とプラグインの読み込み <script>タグでjQuery本体、jquery.highlight-3.jsの順に読み込み <script type="text/javascript" sr
実装例(サンプル)の動作について 表のセルにカーソルを合わせると、そのセルが属する行と列をハイライト表示する。 表のヘッダー(thead)やフッター(tfoot)にカーソルを合わせると、その列を薄い青色でハイライト表示する。 実装例(サンプル)のソースコード 読み込み パスは、それぞれ、アップロードした場所を指定する。 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.tablehover.js"></script>
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く