TopJavaScript > 2007年2月
2007年2月19日

コメント投稿時にフォームボタンをグレーアウトする for Movable Type

本サイトで適用している、コメントを投稿時にフォームボタンをグレーアウトするためのカスタマイズです。カスタマイズ方法については以前よりリクエストを頂いておりました。公開が遅くなって申し訳ありません。

コメント投稿時にフォームボタンをグレーアウトする

ここでは Movable Type でのカスタマイズ方法を紹介致します。他のブログツールについては順次公開していきたいと思います。
カスタマイズ元記事は下記です。ありがとうございました。

1.本カスタマイズの機能

  • コメントフォームの「投稿」ボタンクリック時にフォームボタンをグレーアウトにする
  • コメントフォームの「確認」ボタンクリック時はグレーアウトにしない

「確認」ボタンクリック時にグレーアウトしないのは、下記の理由のようにユーザビリティ上好ましくないと思ったためです。

  • 「確認」でグレーアウトした場合、ブラウザの「戻る」でグレーアウトのままになる(投稿不能になる)
  • 「確認」ボタンをクリックした時に「投稿」ボタンを押してしまったと錯覚する可能性がある

以下、カスタマイズ方法です。動作は Windows XP + IE6.0 / IE7.0 / Firefox2 / Opera9 で確認しています。テンプレートは Movable Type デフォルトテンプレートで確認していますが、当サイトの公開テンプレートでも動作します。
またカスタマイズにあたってはテンプレートにできるだけ手を加えないようにしています。

2.JavaScript 外部ファイルの作成

下記の内容を disabledButton.js という名前で保存し、メインページと同じディレクトリにアップロードしてください。

var disabledFlag = 0;
var isIE = (document.documentElement.getAttribute("style") ==
               document.documentElement.style);
function addFormAttribute(form) {
  isIE ? form.setAttribute("onsubmit", new Function("if (this.bakecookie.checked) rememberMe(this);disableSubmit(this);")) :
         form.setAttribute('onsubmit','if (this.bakecookie.checked) rememberMe(this);disableSubmit(this);');
  var elements = form.elements;
  for (var i = 0; i < elements.length; i++) {
    if (elements[i].type == 'submit' && elements[i].getAttribute('name') == 'post') {
      isIE ? elements[i].setAttribute("onclick", new Function("setHiddenValue(this);")) :
             elements[i].setAttribute('onclick','setHiddenValue(this)');
    }
  }
}
function disableSubmit(form) {
  if(!disabledFlag){
    return;
  }
  var elements = form.elements;
  for (var i = 0; i < elements.length; i++) {
    if (elements[i].type == 'submit' || elements[i].type == 'button') {
      elements[i].disabled = true;
    }
  }
}
function setHiddenValue(button) {
  if (button.name) {
    var q = document.createElement('input');
    q.type = 'hidden';
    q.name = button.name;
    q.value = button.value;
    button.form.appendChild(q);
    disabledFlag = 1;
  }
}

3.テンプレート修正

エントリー・アーカイブ/コメント・プレビューの </head> の直前に下記を追加します。

<script type="text/javascript" src="<$MTBlogURL$>disabledButton.js"></script>

また、同じテンプレートの body 要素に下記の青色部分を追加します。

<body class="layout-two-column-right individual-entry-archive" onload="individualArchivesOnLoad(commenter_name);addFormAttribute(document.comments_form);">

addFormAttribute の直前のセミコロン ";" もお忘れなく。

4.注意事項

コメント・プレビュー画面に本カスタマイズを適用する場合、コメント・プレビュー・テンプレートに必ず下記のタグ(青色部分)をフォームに追加してください。これを追加しないとグレーアウトしません。

  :
<p>
   <label for="comment-url">URL:</label>
   <input id="comment-url" name="url" size="30" value="<$MTCommentPreviewURL$>" />
</p>
<p>
   <label for="comment-bake-cookie"><input type="checkbox"
      id="comment-bake-cookie" name="bakecookie" onclick="if (!this.checked) forgetMe(document.comments_form)" value="1" />
      この情報を登録しますか?</label>
</p>
<p id="comments-open-text">
  :

5.補足

グレーアウトする仕組み
「投稿」ボタンのクリックにより onclick イベントハンドラを起動します。ハンドラから起動された setHiddenValue でクリックされたボタンを hidden 型の input 要素として追加します。続いて onsubmitイベントハンドラが起動され、ハンドラから起動された disableSubmit でフォームボタンを disabled にします。
「確認」ボタンクリック時にグレーアウトしない仕組み
setHiddenValue の中で、変数 disabledFlag に 1 を設定し、disableSubmit の処理で、disabledFlag フラグが 1 の場合のみ button 要素を disabled にします(もっと良い実装があると思いますが)。
onsubmit 属性の再書き込み
form 要素の onsubmit 属性を用いて disableSubmit 関数を起動していますが、属性値には "if (this.bakecookie.checked) rememberMe(this)" が元から設定されているため、追加スクリプトで元関数と新たに加えた関数の両方を起動するように上書きしています。
IE の不具合対処
IE では、JavaScript の getAttribute / setAttribute で class ・style・イベント属性などを操作できないというバグがあり、その対処を施しています。IE 不具合対処の参考サイトは下記です。ありがとうございました。
Comments [6] | Trackbacks [0]
2007年2月 6日

Slider の利用方法

February 6,2007 12:50 AM
Tag:[, ]
Permalink

Ajax ライブラリとしてスライダーの API が色々と公開されていますが、それとは関係なく、1年近く前にみつけてエントリーしていなかったWebFXSlider を紹介したいと思います。

Value:

Slider は Mozzila 系ブラウザで動作しなかった、同サイトで公開されていた slidebar を新しく作り直したものです。
なお、WebFX は、国内ではグラフ描画の Chart Usage がブログ等で紹介されています。

1.機能

Slider は下記の機能があります。

  • スライダーを操作することにより、予め設定した最小値?最大値の値を取得
  • 予め設定したデフォルト値の位置にスライダーハンドルを固定
  • 値の途中変更が可能
  • スライド方向(縦・横)を指定可能

また

  • マウスサポート(ドラッグだけでなくクリックによる操作も可能)
  • キーボード操作のサポート(矢印キーやPageUp/PageDown による操作が可能)
  • ホイール操作のサポート(IEのみ)
  • CSSによるスキン変更(Demoのページでサンプルを見ることができます)

と、スライダーとしては結構良い仕上がりです。

2.ダウンロード・インストール

Slider の一番下にある「Download」をクリック。ダウンロードしたアーカイブを解凍し、中にある slider というフォルダを index.html のディレクトリに丸ごとアップロードします。
動作に必要なのは下記です。

slider/css/bluecurve/*
slider/css/luna/*
slider/css/swing/*
slider/js/range.js
slider/js/slider.js
slider/js/timer.js

css ディレクトリは使用するスキン別に分けられています。例えば bluecurve を使用するのであれば luna / swing ディレクトリはアップロード不要です。

3.スライダーの表示

</head> の直前に下記を追加します。

<link type="text/css" rel="stylesheet" href="slider/css/bluecurve/bluecurve.css" />
<script type="text/javascript" src="slider/js/range.js"></script>
<script type="text/javascript" src="slider/js/timer.js"></script>
<script type="text/javascript" src="slider/js/slider.js"></script>

1行目はサンプルで用意されているスキンから「bluecurve」を利用した場合です。他に「winclassic」「luna」「swing」がありますのでお好きなデザインを選んでください(winclassic は winclassic.css ファイルのみ)。

スライダーを表示させたい位置に下記のタグを追加します。tabIndex 属性は TAB キーによる選択を可能にします。

<div class="slider" id="slider-1" tabIndex="1">
<input class="slider-input" id="slider-input-1" name="slider-input-1" />
</div>

上記タグのすぐ下に、下記のデバグ用タグ(青色)を表示させておくと良いでしょう(不要になったら削除します)。

<div class="slider" id="slider-1" tabIndex="1">
<input class="slider-input" id="slider-input-1" name="slider-input-1" />
</div>
<p>
Value: <input id="h-value" onchange="s.setValue(parseInt(this.value))"/>
Minimum: <input id="h-min" onchange="s.setMinimum(parseInt(this.value))"/>
Maximum: <input id="h-max" onchange="s.setMaximum(parseInt(this.value))"/>
</p>

4.script タグの追加

4.1 Horizontal (水平方向にスライド)の場合

2項で設定した位置より後方に下記の script タグを追加します。ここでは上記のデバグ用 input タグにスライダーの値を表示するだけのサンプルを示します。

<script type="text/javascript">
var s = new Slider(document.getElementById("slider-1"), document.getElementById("slider-input-1"));
s.onchange = function () {
 
    // デバグ用
    document.getElementById("h-value").value = s.getValue();
    document.getElementById("h-min").value = s.getMinimum();
    document.getElementById("h-max").value = s.getMaximum();
};
window.onresize = function () {
    s.recalculate();
};
</script>

4.2 vertical (垂直方向にスライド)の場合

4.1項のコンストラクタ(new ?の行)の第3パラメータに下記を追加します。

<script type="text/javascript">
var s = new Slider(document.getElementById("slider-1"), document.getElementById("slider-input-1"), "vertical");
    :

または次のように setOrientation を追加します。

<script type="text/javascript">
var s = new Slider(document.getElementById("slider-1"), document.getElementById("slider-input-1"));
s.setOrientation("vertical");
    :

5.各値の変更

下記の API を利用して値を変更します。

  • デフォルト値:setValue
  • 最大値:setMaximum
  • 最小値:setMinimum

以下、設定例です。

<script type="text/javascript">
var s = new Slider(document.getElementById("slider-1"), document.getElementById("slider-input-1"));
s.setValue(10);
s.setMaximum(100);
s.setMinimum(0);
    :

6.API

Slider で提供されている各 API です(間違っていたらご指摘ください)。

Timer

setTimeout のオブジェクト指向カプセル化

getPauseTime:ポーズ時間(ms)取得
isStarted:タイマー開始可否を返却
setPauseTime:ポーズ時間(ms)設定
start:タイマー開始
stop:タイマー終了

Range

スライダー・スクロールバー・プログレスバーの動作で使用されるデータのモデル化。 Sun Java によって定義された javax.swing.BoundedRangeModel インタフェースの考えに基づいています

getMaximum:最大値を取得
getMinimum:最小値を取得
getValue:スライダーの値を取得
setMaximum:最大値を設定
setMinimum:最小値を設定
setValue:スライダーの値を設定

Slider

最大値?最小値の値を変えるためにハンドルをドラッグずるスライダーコントロール

getBlockIncrement:PageUp/PageDownキーの増減値を取得
getMaximum:最大値を取得
getMinimum:最小値を取得
getOrientation:スライダーの縦・横を取得
getUnitIncrement:矢印キーの増減値を取得
getValue:スライダーの値を取得
ontimer:タイマー設定
recalculate:*スライダーがリサイズされた後にこのAPIを使用
setBlockIncrement:PageUp/PageDownキーの増減値を設定
setMaximum:最大値を設定
setMinimum:最小値を設定
setOrientation:スライダーの縦・横を設定
setUnitIncrement:矢印キーの増減値を指定
setValue:スライダーの値を設定

7.スキン用 CSS

スキンは下記のセレクタで設定されています。

/* スライダー全体 */
.dynamic-slider-control {}
 
/* スライダー外側(horzontal用) */
.horizontal {}
 
/* スライダー外側(vertical用) */
.vertical {}
 
/* スライダー内側 */
.dynamic-slider-control input {}
 
/* ハンドル */
.dynamic-slider-control .handle {}
 
/* ハンドルの画像(horizontal用) */
.dynamic-slider-control.horizontal .handle {}
.dynamic-slider-control.horizontal .handle div {}
.dynamic-slider-control.horizontal .handle.hover {}
 
/* ハンドルの画像(vertical用) */
.dynamic-slider-control.vertical .handle {}
.dynamic-slider-control.vertical .handle.hover {}
 
/* スライダーバー */
.dynamic-slider-control .line {}
 
/* スライダーバー幅(vertical用) */
.dynamic-slider-control.vertical .line {}
 
/* スライダーバー幅(horizontal用) */
.dynamic-slider-control.horizontal .line {}
 
/* スライダーバーのドロップシャドウ */
.dynamic-slider-control .line div {}

2008.04.21
サンプルのマークアップを変更(IE6で表示できなかったため)

Comments [0] | Trackbacks [2]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3