グラフを描画してくれるjQueryプラグインは、多分”jQuery Visualize”がベスト！ 2011 10/11 グラフを描画してくれるjQueryプラグインを紹介します。 グラフを動的に作ってくれるものとしては、他のjQueryプラグインやGoogle Chartというサービスなどがあります。 が、今回の”jQuery Visualize”は、中でも一番使いやすそうでしたので、ご紹介します。 他のプラグインについては、【jQuery】IEでも使えるグラフ描画ツール | 岡山のWebプログラマーがつぶやくブログ | 神歌.blogでまとめて紹介されています。 作れるグラフの種類 グラフは以下のものを使うことができます。 棒グラフ 線グラフ 線グラフで線の下を薄く塗れるやつ 円グラフ デザインは二種類 冒頭写真の黒っぽいCoolなのと別に、白っぽいのも用意されています。 また、背景画
twitter facebook hatena google pocket ページをめくるような表現付けたくなる時ありますよね。 そんな時はturn.js - The page flip effect for HTML5を利用すると簡単に実現できます。 スマホ、タブレット対応していますが、HTML5なので一部のIEには非対応です。 sponsors 使用方法 turn.jsからファイル一式をダウンロード。 <script type="text/javascript" src="jquery-1.7.2.min.js"></script> <script type="text/javascript" src="turn.min.js"></script> <script> $(function(){ $('#magazine').turn(); }); </script> 上記のようにJav
JavaScriptjQuery の extend メソッドは便利なんだが複雑で忘れてしまいがちなのでメモしておく。jQuery.extend の呼び出しパターンは次の４通り。$.extend([deep,] target, obj1, [obj2, [obj3, ...)$.extend([deep,] obj)$.fn.extend([deep,] obj)$(...).extend([deep,] obj)全てのパターンで第一引数に [deep,] がある。これはオプションの引数で true を指定するとディープコピーしてくれる。以下では分かりやすくするために deep オプションは省略した一覧を掲載する。$.extend(target, obj1, [obj2, ...)$.extend(obj)$.fn.extend(obj)$(...).extend(obj)だいぶシンプルにな
はじめに 勉強がてら Canvas を使ってなにか作りたいなーと思いまして、昔作っていた STG のドット素材を利用して、簡単なマルチタッチ対応 STG を作ってみました。 だんまくてすと 触った指の数だけゆっくりが出てきます。マウスでもプレイ出来ます。死んだらクリックで復活します。 作成の過程で学んだことなどを共有できればと思い、簡単にまとめてみました。 解説は何回かに分けて行おうと思います。今回は、N-Way 弾が画像で出せるところまで書いてみました。 あ、ちなみにタイトルではこんなこと言ってますが、ぶっちゃけ重いので弾とかエフェクトを1000個とか結構辛いです(´・ω:;.:...。 勉強に使った場所 Canvas - HTML5.JP 今更聞けないcanvasの基礎の基礎 | tech.kayac.com - KAYAC engineers' blog canvasでキラキラした背
※コメントにも頂いておりますが、この公開版はバグがありますので、承知の上でご利用になるか、ご自身でカスタマイズされる方がお使いください。 スマートフォンサイトにおいて、左のムービーのようなフリック動作ができる画像スライドのjQueryプラグインを作りました。（ムービーはiOSシミュレータによるデモです）iPhone・Androidでご覧の方はデモに直接アクセスしてください（ムービーは再生されません）。 【デモを見る（iPhone・Androidで見てください）】 【ダウンロード】 なぜプラグイン化したか 横向き対応がハードルを高くする ご自身でこの手のUIを組んだ経験がある方はわかると思いますが、絶対配置（position:absolute）を使ったリキッドレイアウトを組むのはなかなか手の込んだことが必要で、今後の仕事で都度ゼロからUI作成を行うのは効率が悪くなってしまうと思ったからです。
iPhone とかの フリックで操作するカルーセル UI を jQuery mobile で作ってる話 (jquery.mobile.carousel) AppStoreとかで、アプリのキャプチャを複数表示したい時にカルーセルなインタフェース(これのAPIの名前わからん)にして画面の高さを節約する事をすると思うんですが、それをjQuery mobileで再現するプラグインを書いてみました。 全画面で画像をプレビューする用途で作ってあります。ポイントは、AppStoreの画面キャプチャ見るやつと同等の動きをするって所です。 画像サイズも画面サイズに合わせて自動的にリサイズして、良い感じに自動的に配置するという。 画面の恥じっこに引っ張ったときの跳ねっ返りも再現してあります。 ぼくAndroidもってないので、Androidな人に是非とも添削して欲しいです。それかAndroid端末下さい。 コ
twitter facebook hatena google pocket ファイルをアップロードするとき1つずつでは手間がかかります。 また、アップロードしてもらう時には、指定のファイル拡張子以外送ってもらいたくありません。 Multiple File Upload plugin for jQueryは複数かつ拡張子を指定してアップロードさせるjavascriptです。 sponsors 使用方法 Multiple File Upload plugin for jQueryからjquery.MultiFile.jsをjQueryからjquery.jsをダウンロードします。 <script src="http://yourdomian/jquery.js" type="text/javascript"></script> <script src="http://yourdomian/jqu
Ajaxの覚え書き＠じゅえ Ajaxを使って一味違ったホームページを作ってみませんか？ このサイトでは、Yahoo! User Interface Library、Ext JS、Dojo Toolkitなどの Ajaxライブラリを使ったAjaxのサンプル集を掲載しています。 POSTメソッドでAjax通信を行うには、$.ajax()メソッドを使用します。 $.ajax()メソッドのurlオプションにアクセス先のURLを、typeオプションに"POST"を、dataオプションに送信するデータオブジェクトを、dataTypeオプションに"json"を記述します。 また、successオプションに通信成功時の処理(メソッド)を、errorオプションに通信失敗時の処理(メソッド)を記述します。 サンプルでは、通信終了時にも処理を行うためにcompleteオプションに通信終了時の処理(メソッド
こんにちは、2011年度新卒エンジニアの夏目です！突然ですがみなさんJavaScript書いてますか？ 最近はjQuery Mobileなどを利用したスマートフォン向けアプリ開発において、クライアントサイドでもヘビーなJavaScriptのコーディングをする機会があると思います。そのようなときコードのいたるところにHTMLが混入したり、どこでどのデータを扱っているのか分からなくなるということになりがちです。 今回はそんな悪夢のようなコーディング生活に一筋の希望の光を照らすBackbone.jsを紹介したいと思います。 対象読者 JavaScriptでの開発経験がある方 Backbone.jsとは Backbone.jsはDocumentCloudが開発をしている、クライアントサイドのJavaScriptコードをModel、View、Controllerで構築するためのフレームワークです。b
Not your computer? Use a private browsing window to sign in. Learn more about using Guest mode
See related links to what you are looking for.
Ajaxライクに非同期でファイルをアップロードできるjQueryプラグインつくりました。 同様のプラグインやライブラリはいくつかありますが、Flashを使用しないシンプルな実装で jQueryのスタイルを踏襲しているものがなかった（要は好みじゃなかった）ので再実装しました。 デモ ダウンロード サンプル ファイルの選択と同時にそのファイルをアップロードする場合は下記のようになります。 $('input[type=file]').change(function() { $(this).upload('/action/to/upload', function(res) { // アップロード完了時の処理 }, 'json'); }); upload(url, [data], [callback], [type]) url: アップロード先のURL data: 追加で送信するパラメータ call
テキストボックスやラジオボタンなどのフォーム部品は、論理モデルとしては単純なnameとvalueの組み合わせであるものの、jQueryを以ってしても画面上では統一的に扱えずに意外と苦労する。忘れがちなので纏めてみた。 フォーム部品共通 フォーム部品（のjQueryオブジェクト）を取得する var obj = $('#target'); // id指定 var obj = $('.targets'); // class指定 var obj = $('input[@name=xxx]'); // name指定 テキストエリア、リストメニューなど同一ドキュメントで唯一なものにはユニークなidを振っておき、チェックボックスやラジオボタンなど同一のname要素で複数存在するものにはそれらで共通のclassを振っておくか、name要素で指定するのが無難か。 テキストボックス（input[@type=t
jQueryでスクロールすると表示する系いろいろ 最近はスクロールするときにいろいろ仕掛けをするのが流行なようです。 ここではシンプルにある要素の位置とか最下部までスクロールしたら何か表示するということをやってみます。 投稿日2012年03月08日 更新日2019年12月19日 ちょっとスクロールするとフェードして「トップへ戻るボタン」を表示を表示します。 ボタンは下の方にこんな感じで配置します。 html <p id="page-top"><a href="#wrap">PAGE TOP</a></p> fixedにすると固定配置されます。 css #page-top { position: fixed; bottom: 20px; right: 20px; font-size: 77%; } #page-top a { background: #666; text-decoration
Not your computer? Use a private browsing window to sign in. Learn more about using Guest mode
JavaScriptjQuery を使って JSONP でリクエストする方法を２通り紹介するよ。その１: $("")createElement を $() を使って実装。 $("") .attr('type', 'text/javascript') .attr('src', "http://www.example.com/jsonp.cgi?param1=value1&callback=myCallback") .appendTo($("head")); function myCallback(json){ // ロード完了時にここが呼ばれる } http://www.example.com/jsonp.cgi?param1=value1&callback=myCallback にリクエストがいく。callback のところは、サービスによって指定の仕方が違うかもね。その２: $.ajax
What’s new in v5Code quality and rewrite in ES6The script is now distributed as an ES module and does not require a build step to use. The documentation is also updated and now includes more examples. Simpler initialization and dynamic import supportPhotoSwipe now supports dynamic import and does not block page rendering. <script type="module"> import Lightbox from './photoswipe-lightbox.esm.js';
« iPhone とかの フリックで操作するカルーセル UI を jQuery mobile で作ってる話 (jquery.mobile.carousel) | Main | FizzBuzz最短回答 もしくは Yahoo!Japan 入社課題提出エントリ » iPhone で position:fixed な UIToolBar を簡単に作る jquery.mobile.iscroll.js を作った iPhoneのWebサイトを作っていて、良くあるアプリの上と下の position:fixed なメニューを実装しようとした時に、iScrollを使えばわりかし楽に実装出来ます。 jQuery mobile (1.0a2) を使ってると header/footer 要素に data-position="fixed" を書いておけばそれっぽい動きになるんですが、スクロールイベントを受け取るた
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
