ロックを解除しないと送信不可能にするJavaScript「slideLock」

近年スパム防止のためフォームにCAPTCHA(キャプチャ)と呼ばれる仕組みを導入しているケースが多く見られます。
これ読みにくい英数字なので、本当に読めない場合がありイラッとすることもあります。
JavaScriptライブラリの大御所jQueryのプラグインslideLockを利用するとロックを解除するだけなので、ユーザーフレンドリーになります。
ロックを解除しないと送信不可能にするJavaScript「slideLock」サンプル

使用方法
slideLock Demoのファイルダウンロードが404なので、jslideLock.zipからダウンロードして下さい。
またjQuery UIの1.7+slider pluginが必要となります。
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.js"></script>
<script type="text/javascript" src="jquery.slideLock.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#id名").slideLock({
labelText: "ラベルテキスト",
noteText: "注意書きテキスト",
lockText: "ロック中のテキスト",
unlockText: "ロック解除時のテキスト",
iconURL: "arrow_right.png",
onCSS: "#333", //ロックにマウスオーバーしている時の色
offCSS: "#aaa",//ロックにマウスアウトしている時の色
inputValue: 1,
saltValue: 9,
checkValue: 10,
submitID: "#submit" //submitボタンのid名
});
}); </script>

次にform部分を記述していきます。
<form action="" method="post" id="id名">
<p><label for="name">名前:</label>
<input type="text" name="name" id="name" value="" /></p>
<p><label for="email">E-mail:</label>
<input type="text" name="email" id="email" value="" /></p>
<p><label for="comments">Comments:</label>
<textarea name="comments" id="comments"></textarea></p>
<input type="submit" name="submit" id="submit" value="送信" />
</form>

最後にCSSを記述します。
<style type="text/css">
.ui-slider { position: relative; text-align: left; display: block; margin: 10px 0 10px 0px; width: 155px; }
.ui-slider-handle { position: absolute; z-index: 2; width: 16px; height: 16px; cursor: pointer; background: #333; top: -4px; margin-left: -8px; border: 1px solid #784807; }
.ui-slider-horizontal { height: 10px; background: #ddd; border: 1px solid #ccc; }
.ui-slider-handle:hover, .ui-state-hover, .ui-state-focus, .ui-state-active { background: #aaa; }

/* CSS3 ---------------------------------------------------- */
.ui-slider-handle {
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
background: -moz-linear-gradient(top, #f60, #930);
background: -webkit-gradient(linear, left top, left bottom, from(#f60), to(#930));
}
.ui-slider-horizontal {
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
background: -moz-linear-gradient(left, #fff, #ddd);
background: -webkit-gradient(linear, left top, right top, from(#fff), to(#ddd));
}
a.ui-state-hover, a.ui-state-focus {
background: -moz-linear-gradient(top, #666, #333);
background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#333));
box-shadow: 0px 0px 10px #f60;
-moz-box-shadow: 0px 0px 10px #f60;
-webkit-box-shadow: 0px 0px 10px #f60;
}
a.ui-state-active {
background: -moz-linear-gradient(top, #ddd, #aaa);
background: -webkit-gradient(linear, left top, left bottom, from(#ddd), to(#aaa));
}
</style>

CSS3便利ですね。

ロックを解除しないと送信不可能にするJavaScript「slideLock」サンプル

sponsors

「ロックを解除しないと送信不可能にするJavaScript「slideLock」」をシェアする

記事作成:
記事URL:

TOP > > > ロックを解除しないと送信不可能にするJavaScript「slideLock」