タグ

javascriptとuiに関するfubar_fooのブックマーク (11)

  • JS Charts - JavaScript charts examples

    Here are just a few examples of what JS Charts can do with your stats. Please note that all the charts bellow are generated entirely with the JS Charts component!

  • 棒グラフ(垂直) - JavaScript ライブラリー - HTML5.JP

    JavaScriptから棒グラフ(垂直)をcanvas要素に描画します。パラメータを指定することで、項目、色、凡例表示などお好みの棒グラフ(垂直)を柔軟に描画できます。 ダウンロード Release Date Size (byte) Download 使い方 graph_vbar_x_x_x.zipを解凍し、html5jpフォルダをウェブサーバにそのままアップロードしてください。グラフを表示させたいHTMLには次のタグを記述してください。 <div><canvas width="400" height="300" id="sample"></canvas></div> 上記タグは次の点に注意してください。 canvas要素は、必ずdiv要素で囲んでください。 canvas要素には、必ずwidth属性とheight属性を記述し、幅と高さを指定してください。 canvas要素には、必ずid属性

  • Closure Library を使うべき 10 の理由 - WebOS Goodies

    WebOS Goodies へようこそ! WebOS はインターネットの未来形。あらゆる Web サイトが繋がり、共有し、協力して創り上げる、ひとつの巨大な情報システムです。そこでは、あらゆる情報がネットワーク上に蓄積され、我々はいつでも、どこからでも、多彩なデバイスを使ってそれらにアクセスできます。 WebOS Goodies は、さまざまな情報提供やツール開発を通して、そんな世界の実現に少しでも貢献するべく活動していきます。 先週 Closure Library で構築したドローウィジェット Closure Draw を公開しましたが、はてぶ数などを見る限りさほど多くの反響はなかったようです。まあ、機能が中途半端だったり作りが甘かったりというところが大きいのは間違いありませんが、 Closure Library 自体がまだメジャーではないのもあるのかな、とも思います。実際、ぐぐってもフ

  • フォントサイズを変える「大・中・小」ボタンを実装する方法

    知り合いのデザイナーさんに、「大・中・小」のボタンでフォントサイズを変更する方法ってどうやるのですか?という質問をいただきました。 CSSJavaScript(場合によってはJSのみ)で簡単にできてしまうので、サンプルをご紹介しておきます。 フォントサイズを変える「大・中・小」ボタン実装 jQueryを使ってフォントサイズを変える「大・中・小」ボタンをサクサクっと実装してみようと思います。 まずは仕様を考えてみましょう。 仕様 ・大・中・小のボタンをクリックするとフォントサイズが変更される ・それぞれのボタンにIDをセットしておき、そのID名をもとにclassをセット ・CSSにあらかじめ各class用のフォントサイズを入れておく ・再度訪れたとき、クッキー情報があればそのサイズ、なければ中サイズを。 スタイルシートごと変更する方法もあるのですが、今回はCSSとclassでセットで対応し

    フォントサイズを変える「大・中・小」ボタンを実装する方法
  • あるSEのつぶやき: Ajaxライブラリまとめ

    Ajax/JavaScriptライブラリをまとめておきます。(順不同) | 基 | 統合 | 表示系 | GUI部品 | イメージ | PGM連携 | ブラウザ | Flash | その他 | | 部品集 | リンク | 編集履歴 | ・基ライブラリ ・・・Ajax開発のベースになるもの ↑TOP prototype.js 超メジャーなAjaxライブラリ prototype.js の開発者向けメモ prototype.jsリファレンス prototype.jsリファレンス(JavaScriptist) prototype.js逆引きサンプル集 Prototype 1.5.0 Cheat Sheet Prototype 1.5 PDFAPI/サンプル/解説 Prototype.js Documentation - まとめサイト Prototype 1.6.0へのアップグレード実例紹

  • arbor.js

    about arbor Arbor is a graph visualization library built with web workers and jQuery. Rather than trying to be an all-encompassing framework, arbor provides an efficient, force-directed layout algorithm plus abstractions for graph organization and screen refresh handling. It leaves the actual screen-drawing to you. This means you can use it with canvas, SVG, or even positioned HTML elements; whate

  • WindowsアプリのツリービューっぽいUIをWEB上で簡単実装できるjQueryプラグイン「jquery.dynatree」:phpspot開発日誌

    WindowsアプリのツリービューっぽいUIをWEB上で簡単実装できるjQueryプラグイン「jquery.dynatree」 2010年11月25日- jquery.dynatree.js | jQuery Plugins WindowsアプリのツリービューっぽいUIをWEB上で簡単実装できるjQueryプラグイン「jquery.dynatree」。 次のように、デザインそっくりのUIが比較的簡単に実現できます。 スキンに対応していて、次のように、Vistaっぽくすることも可能 アイコンを付けてより分かりやすくすることもできます。 ドラッグ&ドロップも出来たりします。移動している最中のUIWindowsアプリそっくり 各ツリーはAjaxに対応していて、読み込み時に全部読む必要がなく、巨大なツリーを表示することにも対応しています。 Windowsアプリなんかでは何かと便利なこのUIですが

  • JavaScriptのポップアップウィンドウ禁止しているブラウザへの代替処理 | Creazy!

    ものすごく今更な話しかもしれないけど、最近、IE・FirefoxはもちろんSafariやOperaを同時に起動していたりして気付いたんだけど、モダンブラウザにはポップアップブロック機能(別ウィンドウを開くのを禁止する機能)がついていて、しかもその設定がデフォルトでONになっていたりしますね。 なので、UI的に使いやすいからといって window.open を多様していたりすると、実際にはブラウザがブロックして表示されていなかったり、いちいちユーザがブロックを解除する設定をしないといけなかったりします。 もし、固定サイズのポップアップウィンドウを開くのが絶対条件でないのなら、ポップアップブロックしているブラウザ向けの処理を用意しておいた方が良さそうです。 ポップアップブロックを考慮したポップアップ関数 function openWindow( url, name, option ) { if

    JavaScriptのポップアップウィンドウ禁止しているブラウザへの代替処理 | Creazy!
  • MOONGIFT : 多機能、高性能なjQuery UIウィジェット「Wijmo Open」 オープンソース・ソフトウェア/フリーウェアを毎日紹介

    Wijmo Openはメニューやカレンダーなど多彩なウィジェットを提供するjQueryプラグイン。 MOONGIFTはこう見る Wijmo Openは多数のウィジェットが提供されている。この手のライブラリは増えつつあるが、大事なのはどれくらいのパターンに対応できるかということになる。Wijmo OpenはWebアプリケーション全体を規定する訳ではないので、足りないものは他のjQueryプラグインで補えるのが利点になる。 テーマ機能もあるので、いわゆる○○臭は抑えられると思われる。Webアプリケーションはもとより、ちょっとしたイフェクトやデザイン(ウィザード形式の処理など)を実装するのにも役立つと思われる。 [/s2If] Wijmo OpenはjQuery製のオープンソース・ソフトウェア。今後、モバイルのネットワーク利用が当たり前になったり、SaaSが隆盛になっていけば、Webアプリケーシ

  • IEでも動作する画像を超簡単に角丸化できるjQueryプラグイン「IMGr」:phpspot開発日誌

    IMGr :: jQuery Image Rounder IEでも動作する画像を超簡単に角丸化できるjQueryプラグイン「IMGr」 $("imageElement").imgr(); と唱えるだけでクロスブラウザで画像の角を丸くすることが可能です。 $("imageElement").imgr( optoins ); でradiusやサイズ、色のカスタマイズが可能。 赤いボーダーで角丸の例 ボーダーを消した例 四方の角丸の操作も自由自在です。 IE 6, IE 7, IE 8, FF 3.6, Chrome 6.0, Safari 5.0, Opera 10.62 のブラウザ上でテストされているそうです。 関連エントリ CSSで角丸テクニック25 角丸を使った可愛いカレンダーピッカー実装JavaScript「jsDatePick」 CSS3で影付き角丸グラデーション付きのボタンを作成す

  • あなたのWebを入力しやすくするjQueryプラグイン10選

    あなたのWebを入力しやすくするjQueryプラグイン10選:CSSの書き方も分かるjQueryプラグイン実践活用法(終)(1/5 ページ) jQueryと、そのプラグインの使い方を、UI効果(エフェクト)のテーマごとに紹介する連載。jQuery/JavaScript/HTMLコードだけではなく、CSSの書き方も解説することで、より実践的にjQueryプラグインを使うための参考ドキュメントになることを目指しています。 前回の「画像や動画を綺麗に回転/拡大するjQueryプラグイン」では、イメージを回転させたりズームインする「jCarousel」「Zoombox」プラグインの使い方を解説しました。今回は、フォームを使いやすくするための各種プラグインを、以下のようにチェックボックス/ラジオボタン、ドロップダウンリスト、テキストボックス/テキストエリア、フォームのカテゴリ別に分類して紹介します。

    あなたのWebを入力しやすくするjQueryプラグイン10選
  • 1