カテゴリー「JavaScript」の53件の記事

2009.05.17

Google Chartsのグラフを簡単に

jQuery Google Charts|web creators 2009年6月

今回もweb creators 6月号の「Webデザイン スタイルアップ Tips」に紹介されているテクニックです。
「Google Chart API」は、簡単にグラフを作るコトができる便利なサービスですが、パラメータの記述がややこしい。そこで登場するのが、今回紹介する「jQuery Google Charts」です。

「jQuery Google Charts」にアクセスすると、ページの右側に「↓Download」というボタンがあるのでダウンロードして下さい。いろいろとファイルが入っていますが、とりあえず必要なのは、jgcharts.jsとjquery.jsです。

まずは、サンプルです。(このブログのアクセス数と訪問者数をグラフにしてみました)

↑このサンプルはこちらからダウンロードできます。

各種パラメーターの設定は、サンプルのHTMLの9〜23行目付近に記述していますが、詳しくは「jQuery Google Charts」を見てもらった方が分かると思います。
グラフの種類も変更できますし、他にもいろいろとパラメーターを設定するコトで、気に入ったようにカスタマイズするコトができると思いますよ!

※ただし、IE6では日本語表記ができないので、お気をつけ下さい。 どうしてもGoogle Chart APIを使って、日本語表記のグラフを作成したい!という方は、「moBlur.org - Google Charts GUI with jQuery」を試してみると良いかも知れません。その際は、下記のページを参照するコトをオススメします。

[参考ブログ]
Google Chartsのグラフを日本語で作成できる簡単グラフ作成サービス - WEBマーケティング ブログ

| | コメント (0) | トラックバック (0)

2009.05.15

最後の行だけ違うスタイルにするJavaScript

いろいろできるyuga.js|web creators 2009年4月

若干古いですが、web creators 4月号の「Webデザイン スタイルアップ Tips」に紹介されていたKyosuke.jpさんの「yuga.js」は、小粒ですがなかなか痒いトコロに手が届くスクリプトが集まっています。

中でもcss3classは、CSS3からサポートされる予定の「:lastChild」や「:firstChild」という疑似要素を現状のブラウザでも指定できてしまう。
これを利用すれば、リストやテーブルの先頭の行や最後の行のスタイルを変えるコトが手軽になります。
HTMLで特定の行にclass定義してしまえばそれまでなんですが、更新や修正でいちいち直す必要がなくなるのは、正直非常にありがたいのでは…。
例えば、各行に下線をひくが、最後の行だけは下線なしにしたいとか云う場合にもってこいです。

というコトで、サンプルはこちら

↑このサンプルはこちらからダウンロードできます。

また、yuga.jsには他にもいろいろな機能が盛込まれています。
ロールオーバー、
現在のページをハイライト表示、
外部リンクは別ウインドウを設定、
画像へ直リンクするとthickboxで表示、
ページ内リンクはするするスクロール、
簡易タブ機能、
奇数、偶数を自動追加などなど

ホントに至れり尽くせりと云う感じで、使いたい機能が凝縮されています。
また、jQueryを使うトコロもGood!入れておいて損はないと思いますよ。

「yuga.js :: Kyosuke.jp」

| | コメント (0) | トラックバック (0)

2009.05.14

jQueryのプラグインでツールチップ

jQuery「Beauty Tips」|web creators 2009年6月

web creators 6月号の「Webデザイン スタイルアップ Tips」でも紹介されていますが、jQueryのプラグイン「Beauty Tips」は非常に使い勝手が良い。
スクリプトさえ組み込めば、手軽に見栄えの良いツールチップが表示できる。また、いろいろとカスタマイズできるので、サイトにあわせたツールチップを作成するコトができる。
これはとても重要なコトなので、かなりありがたい。

…という訳で、「Beauty Tips」のページからデータをダウンロードして、web creatorsに載っている通りに作ってみましたが、IEでは表示に不具合が出てしまった。何故???

まあ、サイトからダウンロードしたデモデータはきちんと表示できているので、ソースを調べてみると、IE用には他のスクリプトを読み込まないといけないようである。
その件については、コリスさんの「これ最強かものツールチップスクリプト -BeautyTips」というページを見ていただくと分かると思いますので、お読み下さい。

少し前置きが長くなりましたが、サンプルはこちら

↑このサンプルはこちらからダウンロードできます。

カスタマイズですが、サンプルのHTMLの16〜30行目付近を参考にしてみて下さい。
padding、widthは説明しなくても分かりますよね?
spikeLengthとspikeGirthは、吹き出しのくちばし部分の設定、
cornerRadiusは、角の丸さ、
fillは背景の設定で、RGBを0〜255で設定し、最後に不透明度を少数点で設定します。
strokeWidthとstrokeStyleは、枠線の太さと色、
cssStylesは、文字のスタイルを設定します。

ツールチップには、画像を入れたHTMLを表示させたり、いろいろな設定もありますので、是非「Beauty Tips」のページからデータをダウンロードして、色々試してみて下さい。

| | コメント (0) | トラックバック (0)

2009.04.08

テーブルの背景色を1行おきに変更してみる

今作成している案件で、結構ボリュームのある一覧表を載せるページがありまして…。
縦に長い表だと、視認性を上げるために1行おきに背景色を変更するなんてコトも常套手段となる訳です。

これまでは手作業で、tr要素にclass指定をして、CSSで背景色を変更したりしていたんですが、この方法だと表の途中で追加したり、削除したりという修正がとても手間…というか、ほとんどやり直しになってしまいます。
Javascriptを使えば、何か手軽な方法があるんだろうなぁとは思っていたモノの、なかなか必要に迫られずにサボっていました。

前置きが長くなりましたが、
調べた所、jQueryを使えばとても簡単だ!というコトが分かり、紹介してみます。
参考にしたのは、「sukechan.net」さんの「jQuery でテーブルの背景色を 1 行置きに変更する」というページです。

まず、jQueryから最新のスクリプトをダウンロードして下さい。
HTMLソースにスクリプトを読み込み、下記のように記述
(例)
<script type="text/javascript"><!--
$(function() {
    $(".stripe tr:even").addClass("even");
});
//--></script>

次に適用するtable要素にstripeとclass指定して、
CSSで例えば、
.stripe .even td {
    background-color: #FBF8EE;
}
と、定義してみて下さい。

これで勝手に偶数行のtd要素の背景色が変更できます。項目の並びが変更されようが、追加・削除されようが全然OKです。
さらに、table要素に限らず、li要素などにも応用できます!

…んっ!?
もしかして、プログラムから生成するようなtable要素にも応用できるかも?
今度実験してみます。

| | コメント (0) | トラックバック (0)

2009.02.18

JavaScriptでクロスフェード

DIV要素をクロスフェード

このところバタバタしておりまして…。ストックネタという訳でもないんですが、今回はかなり定番の結構便利なスクリプトを紹介してみます。
「Flashを使うまでもないんだけど、ちょっとした演出が欲しい…」という時などにはうってつけです。

Brand Spanking New」で紹介されている「Crossfader.js」というスクリプトです。ご存知の方も多いかもしれないですね。
このスクリプトの優れている所は、画像ではなくDIV要素に対してクロスフェードさせられるトコロです。…なので、使い方を工夫すれば、いろいろと凝ったアプローチができると思います。しかも、設置は至って簡単!使わない手はないでしょう。

とりあえず、サンプルです。

続きを読む "JavaScriptでクロスフェード"

| | コメント (0) | トラックバック (0)

2009.01.30

JavaScriptでプルアップメニューっぽくスライド表示

情報ブロックをスライドさせて表示|web creators 2008 9月号

以前、このブログの「JavaScriptでプルダウンメニュー」という記事に「ロールオーバー時、サブメニューを下では無く上に出したい際はどうすれば良いですか?」というコメントが付き、「これっ!」という対策がなかったので、Flashで作ることをおすすめしましたが、web creators 2008 9月号の「表現の制約を乗り越えるWEBデザインの技」という特集に載っていたサンプルを使えば、なんとか作れそうなので紹介してみます。

「Andrew Sellick - Fancy Sliding Tab Menu V2」というページからライブラリがダウンロードできます。
デモ画面は以下のURLでも見るコトができます。
www.andrewsellick.com/examples/tabslideV2/

プルアップメニューというよりは、ブロック要素をスライドして表示させる仕組みなので、「sexy sliding menu」に近いと思います。

兎にも角にも、サンプルです。

続きを読む "JavaScriptでプルアップメニューっぽくスライド表示"

| | コメント (0) | トラックバック (1)

2008.12.19

ロールオーバー時に動きを与えるJavaScript

jQuery - BackgroundPosition plugin

今回もまたweb creators 2009年1月号の「Web Design Style-UP Tips」からのテクニックの紹介です。
jQueryの「BackgroundPosition plugin」というプラグインを使うと、メニューボタンにロールオーバーした際にFlashのような滑らかなアニメーションを施してくれます。
ちなみにサンプルは下記のページ。
→jQuery Background Test

仕組みとしては、メニューボタンの下に配置する変化のある背景画像を用意し、その背景画像をJavaScriptで移動させるコトによって、ロールオーバー時にアニメーションさせる…というモノです。

下記のサイトからJavaScriptをダウンロードして読み込ませます。
→Downloading jQuery - jQuery JavaScript Library
→Plugins | jQuery Plugins

とりあえず、サンプルはこちら。

続きを読む "ロールオーバー時に動きを与えるJavaScript"

| | コメント (0) | トラックバック (0)

2008.12.11

プルダウンメニューに動きを与えるJavaScript

Flashのような滑らかなアニメーション|MenuMatic

このブログでも何回かプルダウンメニューのサンプルを紹介しましたが、web creators 2009年1月号の「Web Design Style-UP Tips」に載っていた「MenuMatic」というライブラリが面白かったので、紹介してみます。

ちなみにサンプルは下記のページ。
→horizontal(水平)のサンプル
→vertical(垂直)のサンプル

メニューの仕組みは単純です。Spryを使ったプルダウンメニューと同じようにul要素を入れ子にするコトで多重階層が実現できます。
…で、このライブラリが面白のは、Flashのような滑らかなアニメーションが加わるトコロ!JavaScriptだけでこれだけの動きが付くのなら、Flashで作る必要はなくなりますね。

サンプルはこちら。

続きを読む "プルダウンメニューに動きを与えるJavaScript"

| | コメント (12) | トラックバック (2)

2008.12.10

写真を簡単に加工するJavaScript

透き通ったボールのようなアイコン|Sohere.js

このブログでも何度となく紹介している「www.netzgesta.de」というサイトがあります。このサイト、画像にいろんな効果を与えてくれるJavaScriptを紹介しています。
今回は、web creators 2009年1月号の「Web Design Style-UP Tips」にも載っていた、Sohere.jsを紹介してみます。Sohereという名前だけあって、画像ソフトを使わなくても、かなりキレイにガラス玉のような加工を施してくれます。パラメータを変更するコトで、いろいろと微調整もできて便利です。

サンプルはこちら。

続きを読む "写真を簡単に加工するJavaScript"

| | コメント (0) | トラックバック (0)

2008.12.05

Lightboxのクローン、SexyLightBox

Lightboxではつまらないという方に|web creators 1月

AjaxといえばLightboxというくらいメジャーなJavascriptライブラリですが、普及しすぎているが故、単純なLightboxでは、つまらないと思っている方も多いかも知れません。
巷にはLightboxクローンのライブラリというモノが色々とあり、今回紹介する「SexyLightBox」もその1つで、Lightboxに少し変化を加えたい人にはうってつけです。

web creators 2009年1月号には、「JavaScript入門&徹底活用バイブル」という小冊子が付いてきます。デザイナーにとっては大変便利な特集になっていると思います。「SexyLightBox」もそこに紹介されています。
「» Sexy Lightbox v1」というページのDescargarから、ライブラリとサンプルがダウンロードできます。ちなみにサンプルはこのページです。

↓早速、自分のサイトでも使ってみました。

続きを読む "Lightboxのクローン、SexyLightBox"

| | コメント (2) | トラックバック (0)

より以前の記事一覧