スポンサーサイト

--/--/-- スポンサー広告
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

スポンサードリンク

ツイッターっぽいコメントフォームに簡単カスタマイズ【FC2ブログでJquery】

2011/04/18 ブログデザイン

ツイッターっぽい仕様

  • フォーカスされるまではコンパクト表示
  • オンマウスで枠が明るくなる
  • 縦方向のみテキストエリアをリサイズできる
  • 入力されるまで、テキストエリアに文字を表示

◆プレビュー

非公開コメント

必要なもの


コード

JavaScriptCSS
<script type="text/javascript">
(function($){
$(function(){
	$("textarea.samplet").val("コメントを入力")
	   .css("color","#969696");
	$("textarea.samplet").focus(function(){
		if(this.value == "コメントを入力"){
			$(this).val("").css("color","#fff");
		}
	});
	$("textarea.samplet").blur(function(){
		if(this.value == ""){
			$(this).val("コメントを入力")
			     .css("color","#969696");
		}
		if(this.value != "コメントを入力"){
			$(this).css("color","#fff");
		}
	});
	$("textarea.samplet").focus( function () { $("div.samplef").addClass("selected"); } );
});
	
});
})(jQuery);
</script>
<style type="text/css" media="all">
.samplef{
	width:420px;
	text-align:right;
}
textarea.samplet {
	resize: vertical;
    width:400px;
	height:30px;
	max-height:200px;
    min-height:30px;
	margin-bottom:10px;
    
	border-radius: 5px;         /* CSS3 */
	-moz-border-radius: 5px;    /* Firefox */
	-webkit-border-radius: 5px; /* Safari,Chrome */
	border:1px solid #333;
	background:#000;
	color:#fff;
}
textarea.samplet:hover {
	border:1px solid #777;
}
input.sampleb{
    border-radius: 4px 4px 4px 4px;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 1px 0 #F8F8F8;
    color: #777 !important;
    cursor: pointer;
    display: inline-block;
	padding:0 5px;
    font-size: 14px;
    margin: 0;
    overflow: hidden;
	
/display:inline;
/zoom:1;
}
input.samplec{
	margin-right:5px;
}

.samplef .show{
	display:none;
}
.selected textarea.samplet{
	height:100px;
}
.selected .show{
	display:block;
}
</style>

スポンサードリンク

-2コメント

  • 9
  • 2012-01-09(11:12)

うっす
  • 14
  • 2012-04-30(11:23)

てすと
非公開コメント(
トラックバック :

ブログのコメントフォームをコンパクトに隠す手法。

今回はコメントフォームをコンパクトにするカスタマイズハック。通常はコメントフォームを隠しておき、コメントする時だけ表示する方法を2種類紹介します。記事が短かったり長かったりという場合に全体のバ...

スポンサーリンク

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。