PivotTable.jsを使ってjavascriptで集計を簡単に表示するテスト(jqueryでピボットテーブル) - tweeeetyのぶろぐ的めも
はじめに アプリのデータの集計系画面ってもっと楽にできないかなーと思いますよね。 集計結果を画面に出したいにしてもその過程は 1.バッチで集計したものをDBに入れてそのままだす 2.半分集計したデータをDBに入れてサーバサイドでゴリゴリやって画面に出す 3.結構そのまま渡してsmartyなんかのテンプレートエンジンでゴリゴリやる 4.結構そのまま渡してjavascriptでゴリゴリやる とかとかいろいろあるかと思います。 今回は4のパターンで javascriptにお任せしてバッチもサーバサイドも手を抜いて簡単にやっちゃおう っていう導入事例をメモしておきます。 今回使うのはPivotTable.jsというjqueryプラグインです。 詳細はこちらもどーぞ →https://github.com/nicolaskruchten/pivottable 補足 こんなのも書いたので合わせてどうぞ
第17回 「その場編集」を実装する | gihyo.jp
「その場編集」を実装 前回はツールチップの実装方法をご紹介しました。 今回「Edit In Place」や「その場編集」と呼ばれる、テキストをクリックすると、その場で編集できるようにする仕組みを実装してみます。 今回の仕組みを考える この「その場編集」の仕組みを考えてみましょう。今回の要件は以下の通りにします。 最初はただのテキスト クリックをすると、テキストがinput要素に置き換わり編集可能に。 input要素からフォーカスが外れたら、input要素が編集後の文字に置き換わる。 フォーカス外れた時、valueの値が空なら最初の値に戻す。 本来であれば、上記の仕組みの４の後に、PHPなどでデータベースに編集後の情報を送信し、保存するという仕組みになるのですが、今回はその前のところまでの実装方法のご紹介とします。 まずは完成サンプルとソースコードを見てみましょう。 完成ソースコード jQu
Expanding Overlay Effect
Expanding Overlay Effect: Revealing content using CSS clip
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
jQuery Lively Layout - サイト訪問者に強烈なインパクトを残すWebサイトアニメーション MOONGIFT
これはインパクト大！が、多用は禁物なようです。 動きのあるWebサイトは目を引きます。Flashや画像を使ったアニメーションは多いですが、jQuery Lively LayoutはさらにWebサイト自体をアニメーションさせてしまうという凄いソフトウェアです。 何はともあれまずは動画を見てもらうのが良いと思います。 ということで凄さは分かってもらえたと思いますので使い方です。まずJavaScriptファイルを読み込みます。 <script type="text/javascript" src="/path/to/jquery.js"></script> <script type="text/javascript" src="/path/to/jquery.easing.js"></script> <script type="text/javascript" src="/path/to/jqu
ScaleOut | Supership
2024年4月1日より、Supership株式会社は親会社であるSupershipホールディングス株式会社に吸収合併されました。 合併に伴い、存続会社であるSupershipホールディングスは社名をSupershipに変更し、新たな経営体制を発足しました。本件に関する詳細は、プレスリリースをご確認ください。 2024年4月1日より、Supership株式会社は親会社であるSupershipホールディングス株式会社に吸収合併されました。 合併に伴い、存続会社であるSupershipホールディングスは社名をSupershipに変更し、新たな経営体制を発足しました。 本件に関する詳細は、プレスリリースをご確認ください。
パララックスエフェクトの基本
jQueryをメインにHTML5やCSS3を使ったリッチな表現のためのテクニックを紹介。まずはパララックスエフェクトの基本から。 Webサイトの55％で利用されているjQuery はじめまして。クラスメソッドのフロントエンドエンジニア、山田です。「jQuery×HTML5×CSS3を真面目に勉強」という連載をスタートします。 2005年2月にGoogle mapsが登場して以来、Web開発者の間でJavaScriptの株は上昇の一途をたどっています。その勢いはとどまることを知らず、リッチなWebコンテンツを作るには、Flashをはじめとしたプラグインに頼るという、それまでの常識をすっかり覆してしまいました。 さらに、HTML5やCSS3も登場し、各ベンダのブラウザがWeb標準の仕様に合わせて実装の足並みを揃え始めるなど、プラグインに頼らずともリッチなUIのWebコンテンツを少ない手間で作れ
jQueryでスクロールすると上部に固定されるナビゲーション
Posted: 2012.02.21 / Category: javascript / Tag: jQuery グローバルナビゲーションはロゴの下に配置されていることが多いですが、スクロールするとナビゲーション部分だけが上部に固定されるようなものをjQueryでやってみたいと思います。 html & css htmlです。 html <h1><a href="#">タイトル</a></h1> <div class="nav"> <ul class="clearfix"> <li><a href="#">HOME</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">NEWS</a></li> <li><a href="#">LINK</a></li> </ul> <!-- /#nav --></div> <div id="artic
jQueryでスクロールすると表示する系いろいろ
Posted: 2012.03.08 / Category: javascript / Tag: jQuery, アニメーション 最近はスクロールするときにいろいろ仕掛けをするのが流行なようです。 ここではシンプルにある要素の位置とか最下部までスクロールしたら何か表示するということをやってみます。 ちょっとスクロールするとフェードして「トップへ戻るボタン」を表示を表示します。 ボタンは下の方にこんな感じで配置します。 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-
[jQuery] いつでもどこでもローディングアイコンを表示 NETEYE Activity Indicator | バシャログ。
最近目がかゆくてやたらとクシャミが出るんですけど、PM2.5 ってホント迷惑ですね～。みなさん、こんにちは nakamura です。 最近ちょっとおぉ！と思った jQuery プラグインがあったので今日はそのご紹介です。Ajax を使った非同期な処理も今やすっかり定番ですが、毎回メンドクサイな～と思うのがローディングアイコン。アニメーション Gif を用意して、どこで呼び出しても見栄えがするように CSS 調整して・・・。あーもうしゃらくせえ！と思っていたら、その辺全部勝手にやってくれる jQuery プラグインがあったんですね～。 NETEYE Activity Indicator っていうプラグインがそれです。github で公開されてます。 NETEYE Activity Indicator jquery-plugins/activity-indicator at master ·
![[jQuery] いつでもどこでもローディングアイコンを表示 NETEYE Activity Indicator | バシャログ。](https://cdn-ak-scissors.b.st-hatena.com/image/square/6a7c7828e73c1691039a9aa0dce7f4c767e36c92/height=288;version=1;width=512/https%3A%2F%2Fbashalog.c-brains.jp%2Fimages%2Fcat_javascript.png)
jQueryの可能性は無限大！？プラグインまとめ番外編 - Webデザイン初心者向けのあれこれ
どうもこんばんは、僕です。 今まで何度かjQueryプラグインを紹介してきましたが、今日は番外編？と言った感じです。 一応今までのプラグインまとめ記事はこちらです。 ・ひと工夫でこんなことも！ユニークなjQueryプラグイン5つ集めてみました ・すっごい動くよ！テキストをアニメーションさせるjQueryプラグイン集めてみた ・今更ながらみんな大好き（？）「lightbox」プラグインを集めてみました ・jQueryを使ったスライド・ギャラリーのライブラリを7個集めてみた ・jquery-tubular http://code.google.com/p/jquery-tubular/ ページの背景にYouTubeの動画を指定することができます。 背景を考える幅が広がるのではないでしょうか。 ・jquery.snipe http://rayfranco.github.com/jquery.sn
Textillate.js
About Textillate.js combines some awesome libraries to provide a ease-to-use plugin for applying CSS3 animations to any text. Usage Simply include textillate.js and it's dependencies in your project to start creating unqiue effects. Credits Textillate.js is built on top of the simple, yet amazingly powerful animate.css and lettering.js libraries.
ドラッグ＆ドロップによるクールなファイルアップロードを実現できる「Dropzone.js」:phpspot開発日誌
Dropzone.js ドラッグ＆ドロップによるクールなファイルアップロードを実現できる「Dropzone.js」。 ファイルをブラウザ内にD&Dすると画像ならサムネイルがすぐに表示されつつ、プログレスバーが表示されて進捗が分かり、更に完了した際にはチェックマークでアップロード完了が分かります なかなかカッコいいだけでなく、便利なアップロードが可能。 ブラウザ非対応時のフェイルバックも 関連エントリ クロスブラウザでファイルのドラッグ＆ドロップ、Ajaxアップロードを可能にする「FileDrop」 DropBoxからファイルアップロードをする＆切り取って保存するデモ jQueryとHTML5でドラッグ＆ドロップアップロードを実現するチュートリアル ファイルアップロードのレジュームをブラウザ上で行える「Resumable.js」
[JS]多彩なアニメーションを備えたスライドショーがスクリプトを一行も書かずに実装できるスクリプト -Cycle.js
スクリプトもスタイルシートも書かずに、多彩なアニメーションで画像がスライドするスライドショーを実装できるスクリプトを紹介します。 こういう実装方法がこれから増えてくるかもしれませんね。 Cycle.js Cycle.js -GitHub 対応ブラウザは下記の通り。 IE8+ Chrome Firefox Safari Opera TODOとして、ARIAのサポート、キーボード操作、IE7対応、エフェクトの追加を予定しているそうです。 いつもは、デモ、使い方、の順番で紹介していますが今回はデモと使い方を併せてご紹介。 Cycle.jsのセットアップ Cycle.jsのバリエーション Cycle.jsのセットアップ ベースとなるHTMLは非常にシンプルです。 スタイルシートをhead内に、スクリプトを</body>の上に外部ファイルとして記述します。 <title>Cycle.js</titl
スライダー、ツールチップの他多種多様な機能が詰まったjQueryベースのUIキット「jKit」:phpspot開発日誌
jKit - jQuery based UI Toolkit - Index スライダー、ツールチップの他多種多様な機能が詰まったjQueryベースのUIキット「jKit」 １つのライブラリで様々な機能を実現できます。必要に応じて読み込む必要がありますが、基本的にマークアップと属性をベースに記述でき、スクリプトを可能な限り書かないでもよいような実装ができるみたい。 スライドショー LightBox ソータブルなテーブル 簡易グラフ スクリプトを書くのが苦手という方は使ってみてもよさそうなライブラリでした。 関連エントリ 超クールなjQueryUIテーマ「Delta」 jQuery UI をタッチイベントに対応させるライブラリ「jQuery UI Touch Punch」 綺麗なUIのサイトがサクサク組めるTwitter Bootstrapを使ったjQuery UIテーマ「jQuery UI
レスポンシブなjQueryスライドショープラグイン2012年保存版
RefineSlide / Cycle2 / iosscripts.com &ndas...他...全18件
アコーディオンまとめ8選！ | 株式会社LIG
(……きこえますか……きこえますか) Σ(◉◒◉)ん？ (……どうもです……はやちです(:3_ヽ)_) ？？？(◉◒◉)三(◉◒◉)？？？ (いま……あなたの……心に……直接……呼びかけています…(:3_ヽ)_) (◉◒◉;)お 俺にか……？？ (以前「スマホサイトに入れると使いやすくなる！おすすめjQuery4選！」の中でアコーディオンメニューを紹介しましたが、他にも参考になるデザインとUIはないかなと思い集めてみました。ご紹介します……(:3_ヽ)_) (◉◒◉;)ほ ほほう Flexible Slide-to-top Accordion （矢印がくるっと回ってアコーディオンが開くタイプ。矢印の動きがおもしろいですね。_(:3」∠)_) (◉◒◉)ほほう DEMO http://tympanus.net/Tutorials/FlexibleSlideToTopAccordion/ SI
jQueryカルーセルプラグインいろいろ
jQuery Infinite Carousel... / CarouFredSel 5.5.0 / WOW Slider他...全10件
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Facebookのようなサイトツアーを実装できるjQueryプラグイン5選
http://www.designwalker.com/2009/09/jquery-table.html
