タグ

JavaScriptとjQueryに関するnihohiのブックマーク (17)

  • 湯葉でも分かるHighcharts — 湯葉でも分かるHighcharts 0.1 documentation

    このドキュメントについて¶ この文書は @yubais が、ホワイトデーにお返しする相手がいなくて暇だったから書いたものです。 内容に関する責任は負いかねます。 ここに書いている内容は、以下の環境で動作をなんとなくチェックしています。 Highcharts 2.3.3, jQuery 1.8.2 Google Chrome 25.0, Firefox 19.0, Safari 6.0, Opera 12.14, Internet Explorer 10 (およびその互換モード) Windows 8, OS X 10.8 Mountain Lion, Ubuntu 12.04, Android 4.2

  • Flotを使ったリアルタイムグラフ更新を少しカスタマイズしてみた - Splash of waters - 2nd. Season

    Javascript製のグラフ描画用ライブラリとして、色々あるうち、Flotを使ってみた。 他にもいくつか選択肢はあったんだけど、 Ajaxで外部データを取り込んでグラフ描画が可能 以前も使ったことのある実績(簡単に使える) jQuery製であること ひと通りのAPIが提供されていて、サンプルやリファレンスなどのドキュメントが充実している MITライセンス といった理由により、他の選択肢と比べて一歩抜き出ているので、Flotにしてみた。 今回はリアルタイム更新の機能を試してみたかったので、サンプル( http://people.iola.dk/olau/flot/examples/realtime.html )に少し手を加えてみた。 改良点は、 X軸を時系列にする。 データは外部JSONデータを取り込む。 グラフを複数(2)にする。 初期表示時はデータ数は0個で、更新のたびに1個増えて

    Flotを使ったリアルタイムグラフ更新を少しカスタマイズしてみた - Splash of waters - 2nd. Season
  • Flot Examples

    You can update a chart periodically to get a real-time effect by using a timer to insert the new data in the plot and redraw it. Time between updates: milliseconds

  • Flot Examples

  • 解析データの、グラフ化に。JavaScript製統計解析ライブラリ·jStat MOONGIFT

    jStatはJavaScriptで作られた統計解析ライブラリ。Canvasタグにデータをプロットする。 jStatはJavaScript/jQuery製のオープンソース・ソフトウェア。単純に一覧化された数値では分からない情報も、データをビジュアル化すると見えているものがある。トレンドや偏差が見えると、次の手や分析する上でのきっかけが掴めるようになる。 二つのデータを描画 統計のビジュアル化をする解析言語としてはMATLABやRが有名だ。しかしそうした言語を覚えないとデータのビジュアル化ができないのは面倒だ。Webブラウザ上でもっと手軽にグラフを描くソフトウェアとしてjStatを紹介しよう。 jStatでは多様な統計解析を行うライブラリだ。描画にCanvasを使っているのでHTML5をサポートしたモダンなWebブラウザがサポート対象になっている。またjQueryを使っている。線で描画すること

  • Jqueryでグラフ表示 - ochi0218の日記

    仕事でグラフを表示したいという要件が出てきた。 そのため、Jqueryでグラフ表示できるプラグインがないか調査することに。 んで、下記が候補として見つかったプラグイン。 jqplot グラフの見栄えがよく、様々なグラフを表示できる。 表現方法が多い。(色やプロットの形など) 特に、グラフをドラッグで変更できる点などは、素晴らしい。 APIも整備されていて、実装時に、探しやすい。 flot 見栄えはjqplotより落ちるが、様々なグラフを表示できる。 機能的な部分が多い。ズーム、スクロール、リアルタイム描画、描画対象の変更等。 軽量のスクリプトになっているので、ソースリーディングが容易。上記2つで作成した所、スマフォでのグラフ表示ということもあり、グラフ内部のスクロールが出来なければならないため、今回は「flot」を採用することにした。 それぞれで作成した方法を記述しておく。 jqplot

    Jqueryでグラフ表示 - ochi0218の日記
  • jQueryでクリックされたエレメントの属性を取得する

    どうも、俺@仕事中です。 jQuery+Ajaxを使ってインタラクティブなデザインのシステムを構築中なのですが、ちょっとハマったのでめも。 画面にテーブルとか使って、何かデータを一覧表示した場合に、クリックされた要素のvalue値やname属性の値やidの値とか取りたくて、取りたくて、、、取れなくて1時間悩みました。。。 例えば <td><a href="foo" id="foo_id" value="foo_value">FOO</a></td> <td><a href="bar" id="bar_id" value="bar_value">BAR</a></td>のようなテーブルがあるとします。 これでjQueryで'FOO'をクリックした時に、その<a>タグに指定してあるid値やvalue値を取得したい!場合は $("a").click(function() { id = $(thi

    nihohi
    nihohi 2013/06/09
    属性取得
  • Draggable - jQuery UI API 1.8.4 日本語リファレンス - StackTrace

    依存ファイル jquery.ui.core.js jquery.ui.widget.js jquery.ui.mouse.js jquery.ui.draggable.js 引数 optionsオプション String: "disable"、 "enable"、"destroy" のいずれか。 値説明

  • [JS]ダイナミックなアニメーションでページをまるごとズームできるスクリプト -zoom.js

    zoom.js -GitHub デモページ [ad#ad-2] デモ 実装 デモ デモページではページ上のどのエレメントをクリックしてもズームイン(拡大)します。 グリーンの「Float」をクリックするとこんな感じになります。 デモページ:ズームインしたキャプチャ ズームアウト(縮小)するにはもう一度クリックするか、[ESC]キーを押します。 [ad#ad-2] 実装 「zoom.js」はjQueryなどの他のスクリプトには依存せずに、単体で実装が可能です。 外部ファイル 当スクリプトを外部ファイルとして記述します。 <script src="js/zoom.js"></script> HTML/CSS HTMLCSSは通常通りで構いません。 特定のエリアに適用する場合は、そのエリアが指定できるようにidなどを設けます。 JavaScript 特定の要素(例:img)のみ適用する場合は下

  • jQuery リファレンス:css

    索引 ├ リファレンス目次 ├ アルファベット順 └ 検索 Core:コアとなる仕組み ├ 目次 ├ jQuery(selector) ├ jQuery(html) ├ jQuery(function) ├ jQuery.holdReady() ├ jQuery.noConflict() └ jQuery.sub() 他ページ参照 └ jQuery.when() Selectors:セレクタ └ 目次 基礎 ├ *(すべて) ├ element(html要素) ├ #id名(ID属性) ├ .class名(clas属性) ├ 複数のセレクタ(and) └ 複数のセレクタ(or) 階層関連 ├ 先祖 子孫 ├ >(子要素) ├ +(直近の後要素) └ ~(後要素) 属性 ├ [属性名] ├ [属性名='値'] ├ [属性名!='値'] ├ [属性名^='値'] ├ [属性名$='値'] ├

    jQuery リファレンス:css
    nihohi
    nihohi 2013/06/05
    cssのwidthやheightの変更の仕方等
  • jQuery入門講座:マウスホイール

    索引 └ プラグイン目次 1章:小ネタ系 ├ イージングの追加 ├ 要素のセンタリング ├ クッキーの操作 ├ マウスホイール ├ スクロールバー(1) ├ スクロールバー(2) ├ スクロールバー(3) ├ スクロールバー(おまけ) └ アニメの一時停止/再開 2章:ショーケース系 ├ Nivo Slider(1) ├ Nivo Slider(2) ├ Nivo Slider(3) └ Nivo Sliderの改造 3章:カルーセル系 ├ carouFredSel(1) ├ carouFredSel(2) ├ carouFredSel(3) ├ carouFredSel(4) ├ carouFredSel(5) ├ スマホでカルーセル(1) ├ スマホでカルーセル(2) ├ カルーセルとnivo(1) ├ カルーセルとnivo(2) ├ カルーセルとnivo(3) └ カルーセルとniv

    jQuery入門講座:マウスホイール
  • animate(params, [duration], [easing], [callback]) - jQuery 日本語リファレンス

    自分で独自のアニメーション効果を作成するための関数です。 この関数でポイントになるのは、style属性の変化です。例えば”height”,”top”,”opacity”のようなstyleを、どのような値で完了させたいかを渡してやることで現在の値から変化させていきます。 ※ これらの値は、キャメルケースで表記されなければなりません。例えばmargin-leftは、marginLeftのように記述します。 例えば現在のheightが10pxで、animate関数に{height: “100px”}と渡した場合、高さが10pxから100pxに徐々に変化していく効果が得られます。これは数値のみに適用されますが、それ以外にも” hide”,”show”,”toggle”などの文字列が指定された場合にも、対応した効果を作成してくれます。 そもそも数値型の値をとらない属性(backgroundColor

  • 画像スライドショーでjQueryプラグインの基本を学ぶ

    画像スライドショーでjQueryプラグインの基を学ぶ:jQuery×HTMLCSS3を真面目に勉強(2)(1/4 ページ) はじめに この連載で取り扱っているjQueryはJavaScriptのライブラリエンジンです。 世の中には実にさまざまなプログラミング言語があります。昨今主流となっているものの大半は、オブジェクト指向プログラミング言語と呼ばれているものです。 代表的な例を挙げると、Java、C#、RubyPython、Objective-Cといったところでしょう。これらの言語はクラスベースというカテゴリに属しています。クラスベースはアプリケーションにおけるさまざまな機能をクラスと呼ばれる単位でキッチリと分割することで、プログラム全体をキレイに整理整頓できるという特徴を持っています。大規模な開発になるほど、この特徴が威力を発揮するため、先に挙げたプログラミング言語が積極的に採用

    画像スライドショーでjQueryプラグインの基本を学ぶ
  • Hogeで行こう WebSocket:node.jsを使ってみる

    node.js&socket.ioを使用したメモ 環境 node.js 0.5.0 socket.io 0.7.2 ちなみにsocket.ioのインストールは以下のコマンドを実行 $ npm install socket.io ローカルにnode_modules/socket.ioがインストールされます。 server側のソース var sio = require('socket.io'); var io = sio.listen(3000, function(){ console.log("listen start 127.0.0.1:3000"); io.sockets.on('connection', function(socket){ console.log("* connection: " + socket.id); socket.on('message', function(d

  • jQuery UI の プラグイン定義関数 $.widget を使ってみる - Cyokodog :: Diary

    jQuery UI の tabs や accordion といったウィジェット系プラグインでは、専用のプラグイン定義関数 $.widget でプラグイン定義することで、一環性のあるプラグイン API を利用者に提供しています。 今回は、$.widget を使ったプラグインの定義方法について調べてみました。 ui.core.js の入手 $.widget は jQuery UIui.core.js というソースファイル内に定義されてます。 公式サイト(http://jqueryui.com/download)よりプラグイン一式をダウンロードし、zip ファイルを解凍すると、以下パスに ui.core.js があるので、これを読み込み $.widget を使用できるようにします。 jquery-ui-1.7.2.custom/development-bundle/ui/ui.core.j

    jQuery UI の プラグイン定義関数 $.widget を使ってみる - Cyokodog :: Diary
  • jQueryのセレクタ解説 - jQuery入門 - [SMART]

    jQueryには任意の範囲、要素を指定するためのセレクタと呼ばれる機能が用意されています。 たとえば、BODY要素内にあるすべての画像にアクセスしたい場合は下記のようにセレクタを指定します。 $("img") 例えば、IMG要素のボーダーを3ピクセルの赤に設定するには次のようにします。 $("img").css("border","3px solid red"); セレクタで対象を指定し、cssというメソッドでボーダー属性の値を設定しています。 セレクタは要素名以外にも、ID名やCLASS名を指定することができます。 たとえば、BODY要素内にあるすべての画像にアクセスしたい場合は下記のようにセレクタを指定します。 $("img.photo") IMG要素で、かつID名が photo01 の要素を指定するには、次のようにシャープの後にID名を指定します。 $("img#photo01")

    jQueryのセレクタ解説 - jQuery入門 - [SMART]
    nihohi
    nihohi 2013/03/18
    class selector
  • 最近よく使っているコードセットのようなもの 第9回 パーソナルブログの作り方-Re:Creator’s Kansai (リクリ)

    PR 「おすすめのレンタルサーバーランキングが知りたい」「人気のレンタルサーバーを比較したい」という方に向けて、2024年3月最新の人気レンタルサーバーのおすすめ10社をランキング形式で紹介します。 当記事ランキング1位のレンタルサーバーがキャンペーン中! シン・レンタルサーバーがキャンペーン実施中!(2024/5/20まで) 実質385円~「利用料金50%キャッシュバックキャンペーン」 出典:シン・レンタルサーバー公式サイト シン・レンタルサーバーでは、2024年5月20日(月)まで月額利用料金が実質半額になるキャンペーンを開催中です。 ベーシックプランの36ヶ月契約なら、「13,860円」キャッシュバックで、なんと実質「385円/月」で利用できます。

    nihohi
    nihohi 2013/03/18
    addClass/removeClass
  • 1