slideLock Demo

iPhoneのロックみたいなUIでフォーム送信にロックをかけられるjQueryプラグイン「slideLock」。
UIとしては次のような感じで、スライダーを右にドラッグ＆ドロップするとsubmitボタンがactiveになってフォームの送信が可能になります。

フォームの送信を厳重にしたい場合と、隠しパラメータを受け取って照合することでスパムの防止に使えるっぽいです。



ロック解除しないと送信できないので、送信前に確認の意味を込めたUIとして使うと実用的に利用できそうですね。

初期化は次のように行います。

$("#contact").slideLock({
    labelText: "Slide to Unlock:", // ラベルのテキスト
    noteText: "Proves you're human :)", // ノート（上画像参照）
    lockText: "Locked", // ロック時のテキスト
    unlockText: "Unlocked", // アンロック時のテキスト
    iconURL: "images/chrome/arrow_right.png", // アイコン画像指定
    inputID: "sliderInput", 
    onCSS: "#333", 
    offCSS: "#aaa", 
    inputValue: 1, 
    saltValue: 9, 
    checkValue: 10,  // inputValue, saltValueの合計値を入れます
    submitID: "#submit" // submitボタンのID
});

関連エントリ

• パスワード強度を表示するインタフェースやスクリプト色々
• フォーム要素にうっすらデフォルト値を入れてヒント表示できる「jQuery Form Tips」
• ドロップダウンメニューにテーブルやフォーム等何でも埋め込んでしまえるjQueryプラグイン「MegaMenu」
• ブラウザが落ちてもフォーム内容が消えないようにするjQueryプラグイン「jQuery autosave」