jQuery pluginTwitter風のレイアウトを実装するためのjQueryプラグイン
- How to create a Twitter-style alert with jQuery, CSS, and PHP〔Twitter風のアラート表示（PHP+jQuery使用）〕
- jMaxInput: jQuery Twitter-Like Textarea〔Twitter風のテキストエリア（入力可能文字数を超過した場合は投稿ボタンを無効化）〕
- jQuery plugin: Simplest Twitter-like dynamic character count for textareas and input fields〔Twitterのようにテキストフィールドや入力フォームに入力された文字数を動的にカウント〕
- Notify Bar plugin〔Twitter風の通知バー〕
- Perfect signin dropdown box likes Twitter with jQuery〔Twitterのドロップダウン形式のログインフォーム〕
- Twitter Like Flash Message with jQuery〔Twitter風のフラッシュメッセージを表示（PHP＋jQuery）〕
- Twitter like Login with Jquery and CSS〔Twitterのドロップダウン形式のログインフォーム〕
How to create a Twitter-style alert with jQuery, CSS, and PHP
Twitter風のアラート表示（PHP+jQuery使用）
2009/12/13
How to create a Twitter-style alert with jQuery, CSS, and PHP
［JS］jquery.js／［PHP］index.php、submit.php
Twitter風のアラート表示をPHPとjQueryを使用して実装する方法が掲載されています。 入力したテキストをPHPでPOST送信し、POSTした文字列をページ側で受け取り、jQueryでフェード効果を付けています。 表示されたアラートは一定時間後に自動消去されます。
設置イメージindex.php
<?php ini_set('session.save_handler', 'files'); session_start(); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>設置サンプル</title>
<style type="text/css">
#alert {
overflow: hidden;
width:100%; height:0;
text-align: center;
position: absolute;
top:0; left:0;
background-color:#fff;
color: #000;
font-size:20px;
line-height:2em;
opacity:0.9;
}
</style>
</head>
<body>
<?php
if(!empty($_SESSION['display'])){
echo '<div id="alert">' . $_SESSION['display'] . '</div>';
unset($_SESSION['display']);
}
?>
<h1>設置サンプル</h1>
<p>参照：<a href='http://briancray.com/2009/05/06/twitter-style-alert-jquery-cs-php/'>How to create a Twitter-style alert with jQuery, CSS, and PHP | Brian Cray</a></p>
<p>フォームに入力したメッセージをTwitter風にアラート表示します。</p>
<!-- CODE -->
<form method="post" action="submit.php">
<label for="message">メッセージを入力してください</label>
<input type="text" name="message" id="message" />
<input type="submit" value="アラート表示" />
</form>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var $alert = $('#alert');
if($alert.length){
var alerttimer = window.setTimeout(
function(){
$alert.trigger('click');
},
3000
);
$alert.animate(
{height: $alert.css('line-height') || '50px'},200)
.click(function(){
window.clearTimeout(alerttimer);
$alert.animate({height: '0'},200);
});
}
});
</script>
<!-- / CODE -->
</body>
</html>
submit.php
<?php
ini_set('session.save_handler', 'files');
session_start();
$themessage = get_magic_quotes_gpc() ?
stripslashes(trim($_POST['message'])) :
trim($_POST['message']);
$_SESSION['display'] = $themessage;
header('Location: ' . $_SERVER['HTTP_REFERER']);
exit;
?>
jMaxInput: jQuery Twitter-Like Textarea
Twitter風のテキストエリア（入力可能文字数を超過した場合は投稿ボタンを無効化）
2010/1/23
jMaxInput: jQuery Twitter-Like Textarea
Twitterのようにテキストフィールドや入力フォームに入力された文字数を動的にカウントしてリアルタイム表示するする方法が紹介されています。
オプションで入力可能文字数の表示位置や表示するメッセージ内容をカスタマイズすることができます。
設置イメージ設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>設置サンプル</title>
<link rel="stylesheet" href="/content/lib/global.css" type="text/css" />
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="/content/lib/jquery/jquery.MaxInput.js"></script>
<script type="text/javascript">
$(function() {
$("#demo1").maxinput({
position : 'topleft',
showtext : true,
limit : 130
});
$("#demo2").maxinput({
position : 'bottomleft',
limit : 10
});
$("#demo3").maxinput({
limit : 20
});
$("#demo4").maxinput({
limit : 5,
showtext : true,
message : 'left'
});
});
</script>
<!-- CSS -->
<style type="text/css">
.demo{
width:800px;
height:220px;
padding-top:10px;
}
.demo h1{
float:left;
margin:5px 30px 0px 0px;
}
/* iMaxInput */
.jMax{
width:530px;
height:150px;
float:left;
}
.jMax textarea{
border:1px solid #ccc;
-moz-border-radius:20px;
-webkit-border-radius:20px;
-khtml-border-radius:20px;
background-color:#fff;
font-family:Arial;
color:#999;
width:100%;
height:100px;
font-size:24px;
padding:10px;
resize:none;
overflow:auto;
}
.jMax textarea:focus{
outline:none;
background-color:#F3FFCF;
}
.jMax-text{
margin:5px 5px 5px 10px;
color: red;
font-weight:bold;
font-size:px;
}
.jMax-submit{
margin:5px 5px 5px 10px;
height:25px;
}
.jMax-submit input[type="submit"]{
background: #222 url(/content/img/ajax/jquery/alert-overlay.png) repeat-x;
height:35px;
float:left;
width:100px;
color: #596F14;
text-decoration: none;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
border:none;
cursor: pointer;
background-color: #DFDFDF;
font-size:16px;
border:1px solid #ccc;
}
.jMax-submit input[type="submit"].disabled{
cursor:default;
color:#999;
text-shadow: 0 -1px 1px #fff;
}
.jMax-submit input[type="submit"].enabled:hover{
background-color: #ccc;
color: #fff;
}
</style>
</head>
<body>
<div id="wrap">
<h1>設置サンプル</h1>
<p>参照：<a href='http://tympanus.net/codrops/2009/11/08/jmaxinput-twitter-like-textarea/'>jMaxInput: jQuery Twitter-Like Textarea</a></p>
<p>
Twitterのようにテキストフィールドや入力フォームに入力された文字数を動的にカウントしてリアルタイム表示するする方法が紹介されています。
</p>
<!-- CODE -->
<div class="demo">
<h1>Demo 1：デフォルトメッセージを表示。</h1>
<div id="demo1" class="jMax"></div>
</div>
<div class="demo">
<h1>Demo 2：入力可能文字数を左下に表示。</h1>
<div id="demo2" class="jMax"></div>
</div>
<div class="demo">
<h1>Demo 3：入力可能文字数を右上に表示。</h1>
<div id="demo3" class="jMax"></div>
</div>
<div class="demo">
<h1>Demo 4：カスタマイズメッセージを表示。</h1>
<div id="demo4" class="jMax"></div>
</div>
<!-- CODE / -->
</div>
</body>
</html>
jQuery plugin: Simplest Twitter-like dynamic character count for textareas and input fields
Twitterのようにテキストフィールドや入力フォームに入力された文字数を動的にカウント
2010/1/23
jQuery plugin: Simplest Twitter-like dynamic character count for textareas and input fields
Twitterのようにテキストフィールドや入力フォームに入力された文字数を動的にカウントしてリアルタイム表示するする方法が紹介されています。
入力可能文字数やスタイル制御などを細かくカスタマイズできるオプションが用意されています。
| オプションとデフォルト値 | 説明 |
|---|---|
| limit: 140 | 最大入力文字数を数値で指定。 |
| warning: 25 | 入力文字数がwarningに指定した数に達した時にCSSのwarningクラスを適用。 |
| counterElement: 'span' | カウンター要素に使用する要素名を指定。 |
| css: 'counter' | カウンター要素に追加するクラス名を指定。 |
| cssWarning: 'warning | 入力文字数が「warning」数に達した時にカウンター要素に適用する警告表示用のクラス名を指定。 |
| cssExceeded: 'exceeded' | 入力可能な文字数が0に達した時にカウンター要素に適用する警告表示用のクラス名を指定。 |
| counterText: '' | カウント数の前に任意のテキストを表示したい場合に指定。 |
設置イメージ設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>設置サンプル</title>
<link rel="stylesheet" href="/content/lib/global.css" type="text/css" />
<!-- JS -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="/content/lib/jquery/charCount.js"></script>
<script type="text/javascript">
$(function() {
//default usage
$("#message1").charCount();
//custom usage
$("#message2").charCount({
allowed: 50,
warning: 20,
counterText: '入力可能な文字数：'
});
});
</script>
<!-- CSS -->
<style type="text/css">
/* Character Count styles */
form {
width:500px;
}
label{
display:block;
font-size:12px;
}
textarea{
margin:5px 0;
width:490px;
height:60px;
border:2px solid #ccc;
padding:3px;
color:#555;
}
form div {
position:relative;
margin:1em 0;
}
form .counter{
position:absolute;
right:0;
top:0;
font-size:16px;
font-weight:bold;
color:#ccc;
}
form .warning {
color:#600;
}
form .exceeded {
color:#e00;
}
</style>
</head>
<body>
<div id="wrap">
<h1>設置サンプル</h1>
<p>参照：<a href='http://cssglobe.com/post/7161/jquery-plugin-simplest-twitterlike-dynamic-character-count-for-textareas'>jQuery plugin: Simplest Twitter-like dynamic character count for textareas and input fields</a></p>
<p>
Twitterのようにテキストフィールドや入力フォームに入力された文字数を動的にカウントしてリアルタイム表示するする方法が紹介されています。
</p>
<!-- CODE -->
<form id="form" method="post" action="">
<h2>デフォルト</h2>
<div>
<label for="message">Type your message</label>
<textarea id="message1" name="message1"></textarea>
</div>
<h2>オプションを使用したカスタマイズ例</h2>
<div>
<label for="message">Another message (limited to 50, warning at 20)</label>
<textarea id="message2" name="message2"></textarea>
</div>
</form>
<!-- CODE / -->
</div>
</body>
</html>
Notify Bar plugin
Twitter風の通知バー
2009/7/11
jQuery notify bar
jquery.js、jquery.notifyBar.js
Twitterのように通知バーを表示するシンプルなプラグイン。
$.notifyBar({
/* メッセージ内容（HTML文可） */
html: 'OKです！',
/* バーの表示時間 */
delay: 1500,
/* アニメーション速度 */
animationSpeed: 'normal',
/* 通知バー用のjQueryオブジェクト */
jqObject: $('#greenDiv')
});
設置イメージ設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="/content/lib/jquery/jquery.notifyBar.js"></script>
<script type="text/javascript">
$(function() {
$("#callGreen").click(function(){
$.notifyBar({
html: "<img src='/content/img/icon/color/action_check.gif' alt='' />OKです！",
delay: 1500,
animationSpeed: "normal",
jqObject: $("#greenDiv")
});
});
$("#common").click(function(){
$.notifyBar();
});
$("#callError").click(function(){
$.notifyBar({
html: "<img src='/content/img/icon/color/attention.gif' alt='' />エラーです！",
delay: 1500,
animationSpeed: "normal",
jqObject: $("#errorDiv")
});
});
});
</script>
<!-- CSS -->
<style type="text/css">
#greenDiv {
width:100%;
background-color:#cfc;
color:#051;
z-index:300;
text-align:center;
position:fixed;
top:0; left:0;
padding:30px 0px;
font-size:18px;
display:none;
}
#errorDiv {
width:100%;
background-color:yellow;
color:maroon;
z-index:300;
text-align:center;
position:fixed;
top:0; left:0;
padding:30px 0px;
font-size:18px;
display:none;
}
#greenDiv img,
#errorDiv img {
vertical-align:middle;
padding-right:10px;
}
</style>
</head>
<body>
<div id="wrap">
<h1>設置サンプル</h1>
<p>参照：<a href='http://www.dmitri.me/misc/notify/'>jQuery notify bar</a></p>
<!-- CODE -->
<div id="greenDiv"></div>
<div id="errorDiv"></div>
<button id="callGreen">OKメッセージバーを表示</button>
<button id="callError">エラーメッセージバーを表示</button>
<button id="common">デフォルトのバーを表示</button>
<!-- / CODE -->
</div>
</body>
</html>
Perfect signin dropdown box likes Twitter with jQuery
Twitterのドロップダウン形式のログインフォーム
2010/1/23
Perfect signin dropdown box likes Twitter with jQuery
jquery.js、jquery.pop.js、jquery.tipsy.js
Twitterのドロップダウン形式のログインフォームをjQueryを使用して実装する方法が紹介されています。 下記のサンプルは日本語バージョンにしたものです。 ログインフォームはサイドバーに固定表示したり、ログインページを別途作るのもいいですが、コンパクトにしたい時のレイアウトとして参考になります。
ログインボタンをクリックすると、その下にログインフォームがドロップダウン表示されます。 吹き出しは、吹き出しの方向を指定できるjQueryプラグイン「TIPSY」が使われています。
設置イメージ設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>設置サンプル</title>
<link rel="stylesheet" href="/content/lib/global.css" type="text/css" />
<!-- JS -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="/content/lib/jquery/jquery.pop.js"></script>
<script type="text/javascript" src="/content/lib/jquery/jquery.tipsy.js"></script>
<script type="text/javascript">
$(function() {
$(".signin").click(function(e) {
e.preventDefault();
$("fieldset#signin_menu").toggle();
$(".signin").toggleClass("menu-open");
});
$("fieldset#signin_menu").mouseup(function() {
return false
});
$(document).mouseup(function(e) {
if($(e.target).parent("a.signin").length==0) {
$(".signin").removeClass("menu-open");
$("fieldset#signin_menu").hide();
}
});
$('#forgot_username_link').tipsy({gravity: 'w'});
});
</script>
<!-- CSS -->
<style type="text/css">
#warp {
position:relative;
}
#topnav {
position:absolute;
top:0; right:0;
padding:10px 0px 12px;
font-size:11px;
line-height:23px;
text-align:right;
}
#topnav a.signin {
-webkit-border-radius:4px;
-moz-border-radius:4px;
padding:4px 6px 6px;
*padding:4px 12px 6px;
border-radius:4px;
background:#88bbd4;
*background:transparent url(/content/img/ajax/jquery/tipsy/signin-nav-bg-ie.png) no-repeat 0 0;
color:#fff;
font-weight:bold;
text-decoration:none;
}
#topnav a.signin:hover {
background:#59B;
*background:transparent url(/content/img/ajax/jquery/tipsy/signin-nav-bg-hover-ie.png) no-repeat 0 0;
*padding:4px 12px 6px;
}
#topnav a.signin, #topnav a.signin:hover {
*background-position:0 3px!important;
}
a.signin {
position:relative;
margin-left:3px;
}
a.signin span {
padding:4px 16px 6px 0;
background-image:url(/content/img/ajax/jquery/tipsy/toggle_down_light.png);
background-repeat:no-repeat;
background-position:100% 50%;
}
#topnav a.menu-open {
background:#ddeef6!important;
color:#666!important;
outline:none;
}
#small_signup {
display:inline;
float:none;
width:170px;
margin:25px 0 0;
line-height:23px;
}
a.signin.menu-open span {
background-image:url(/content/img/ajax/jquery/tipsy/toggle_up_dark.png);
color:#789;
}
#signin_menu {
-moz-border-radius-topleft:5px;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-webkit-border-top-left-radius:5px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
display:none;
z-index:100;
position:absolute;
top:24.5px;
right:0px;
width:210px;
margin-top:5px;
margin-right:0px;
*margin-right:-1px;
padding:12px;
border:1px transparent;
background-color:#ddeef6;
color:#789;
font-size:11px;
line-height:1;
text-align:left;
}
#signin_menu input[type=text], #signin_menu input[type=password] {
-moz-border-radius:4px;
-webkit-border-radius:4px;
display:block;
width:203px;
margin:0 0 5px;
padding:5px;
border:1px solid #ACE;
font-size:13px;
}
#signin_menu p {
margin:0;
}
#signin_menu a {
color:#6AC;
}
#signin_menu label {
font-weight:normal;
}
#signin_menu p.remember {
padding:10px 0;
}
#signin_menu p.forgot, #signin_menu p.complete {
clear:both;
margin:5px 0;
}
#signin_menu p a {
color:#27B!important;
}
#signin_submit {
-moz-border-radius:4px;
-webkit-border-radius:4px;
margin:0 5px 0 0;
padding:4px 10px 5px;
border:1px solid #39D;
background:#39d url(/content/img/ajax/jquery/tipsy/bg-btn-blue.png) repeat-x scroll 0 0;
color:#fff;
font-size:11px;
font-weight:bold;
text-shadow:0 -1px 0 #39d;
}
#signin_submit::-moz-focus-inner {
padding:0;
border:0;
}
#signin_submit:hover, #signin_submit:focus {
background-position:0 -5px;
cursor:pointer;
}
.tipsy {
padding:5px;
opacity:.8;
filter:alpha(opacity=80);
background-repeat:no-repeat;
font-size:10px;
}
.tipsy-inner {
padding:8px 8px;
max-width:200px;
-moz-border-radius:4px;
-khtml-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
background-color:#000;
color:white;
font:11px 'Lucida Grande', sans-serif;
font-weight:bold;
line-height:1.5em;
text-align:left;
}
.tipsy-north {
background-image:url(/content/img/ajax/jquery/tipsy/tipsy-north.gif);
background-position:top center;
}
.tipsy-south {
background-image:url(/content/img/ajax/jquery/tipsy/tipsy-south.gif);
background-position:bottom center;
}
.tipsy-east {
background-image:url(/content/img/ajax/jquery/tipsy/tipsy-east.gif);
background-position:right center;
}
.tipsy-west {
background-image:url(/content/img/ajax/jquery/tipsy/tipsy-west.gif);
background-position:left center;
}
</style>
</head>
<body>
<div id="wrap">
<!-- CODE -->
<div id="topnav" class="topnav">もうついったーに登録していますか？ <a href="login" class="signin"><span>ログイン</span></a> </div>
<fieldset id="signin_menu">
<form method="post" id="signin" action="#">
<p>
<label for="username">ユーザー名かメールアドレス</label>
<input id="username" name="username" value="" title="username" tabindex="4" type="text" />
</p>
<p>
<label for="password">パスワード</label>
<input id="password" name="password" value="" title="password" tabindex="5" type="password" />
</p>
<p class="remember">
<input id="signin_submit" value="ログイン" tabindex="6" type="submit" />
<input id="remember" name="remember_me" value="1" tabindex="7" type="checkbox" />
<label for="remember">次回から入力を省略</label>
</p>
<p class="forgot"><a href="#" id="resend_password_link">パスワードを忘れた？</a> </p>
<p class="forgot-username"> <A id="forgot_username_link" title="パスワードを覚えている場合は、メールアドレスでログインしてみてください" href="#">ユーザー名を忘れた？</A> </p>
</form>
</fieldset>
<!-- CODE / -->
<h1>設置サンプル</h1>
<p>参照：<a href='http://aext.net/2009/08/perfect-sign-in-dropdown-box-likes-twitter-with-jquery/'>Perfect signin dropdown box likes Twitter with jQuery</a></p>
<p>
Twitterのドロップダウン形式のログインフォームをjQueryを使用して実装する方法が紹介されています。
</p>
</div>
</body>
</html>
Twitter Like Flash Message with jQuery
Twitter風のフラッシュメッセージを表示（PHP＋jQuery）
2010/1/24
Twitter Like Flash Message with jQuery
jquery.js
Twitterのメッセージ表示のように、一定時間後に自動消去するフラッシュメッセージをjQueryとPHPを使用して表示する方法が掲載されています。
フォームにメッセージを入力し、POST送信すると、PHP側で動的に入力値を受け取ってメッセージを表示します。 メッセージ表示時のフェードアウト効果と自動消去までの時間をタイマーで制御するのにjQueryが使用されています。
設置イメージ設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>設置サンプル</title>
<link rel="stylesheet" href="/content/lib/global.css" type="text/css" />
<!-- JS -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="/content/lib/jquery/jquery.MaxInput.js"></script>
<script type="text/javascript">
$(function(){
setTimeout(function(){
$(".flash").fadeOut("slow",
function(){
$(this).remove();
}
);
},2000);
});
</script>
<!-- CSS -->
<style type="text/css">
body {
background:#ddeef6;
}
#wrap {
position:relative;
}
.flash {
position:absolute;
top:0; left:0;
margin:5px;
padding-top:8px;
padding-bottom:8px;
width:100%;
background-color:#fff;
font-weight:bold;
font-size:20px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
text-align:center;
}
.txt {
border:#000 solid 1px;
width:300px;
font-size:16px;
height:25px;
}
.btn {
background-color:#0060a1;
border:solid 1px #003399;
font-size:16px;
font-weight:bold;
color:#fff;
-moz-border-radius:6px;
-webkit-border-radius:6px;
padding-left:10px;
padding-right:10px;
}
</style>
</head>
<body>
<!-- CODE -->
<?php
if($_SERVER["REQUEST_METHOD"] == "POST" && $_POST["message"]){
$txt=htmlspecialchars($_POST['message']);
if($txt!="") echo "<div class='flash'>".$txt."</div>";
}
?>
<div id="wrap">
<h1>設置サンプル</h1>
<p><a href='http://www.9lessons.info/2009/03/flash-message-with-jquery.html'>Twitter Like Flash Message with jQuery</a></p>
<p>
フォームにメッセージを入力し、POST送信すると、PHP側で動的に入力値を受け取ってメッセージを表示します。
</p>
<form action="#" method="post">
<label>メッセージを入力してください：</label>
<input type="text" name="message" class="txt" /> <input type="submit" value="送信" class="btn" />
</form>
<!-- CODE / -->
</div>
</body>
</html>
Twitter like Login with Jquery and CSS
Twitterのドロップダウン形式のログインフォーム
unknown
Twitter like Login with Jquery and CSS
Twitterのドロップダウン形式のログインフォームをjQueryを使用して実装する方法が紹介されています。 Perfect signin dropdown box likes Twitter with jQueryに比べるとプレーンなもので、ログインフォームの表示・非表示部分のイベント処理が簡易的なものになっています。
［Sign In］をクリックすると、その下にログインフォームがドロップダウン表示されます。 フォーム送信後は、別ページのThankYouページに遷移するようになっています。
設置イメージ設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>設置サンプル</title>
<link rel="stylesheet" href="/content/lib/global.css" type="text/css" />
<!-- JS -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$(".sign_in").click(function(){
$("#sign_box").show();
return false;
});
$("#btn_close").click(function(){
$("#sign_box").hide();
return false;
});
});
</script>
<!-- CSS -->
<style type="text/css">
body {
background:#ddeef6;
}
#warp {
position:relative;
}
#sign_box {
width:170px;
background-color:#fff;
border:solid 1px #5ea0c1;
padding:8px;
position:absolute;
display:none;
-moz-border-radius-topright:6px;
-moz-border-radius-bottomleft:6px;
-moz-border-radius-bottomright:6px;
-webkit-border-top-right-radius:6px;
-webkit-border-bottom-left-radius:6px;
-webkit-border-bottom-right-radius:6px;
}
#btn_close {
position:absolute;
top:0; right:0;
font-size:13px;
width:13px; height:13px;
display:block;
margin:5px;
}
.sign_in {
background-color:#fff;
border:solid 1px #5ea0c1;
padding:6px;
}
</style>
</head>
<body>
<div id="wrap">
<h1>設置サンプル</h1>
<div id="container">
<p>参照：<a href='http://www.9lessons.info/2009/12/twitter-like-login-with-jquery-and-css.html'>Twitter like Login with Jquery and CSS</a></p>
<p>
Twitterのドロップダウン形式のログインフォームをjQueryを使用して実装する方法が紹介されています。
</p>
</div>
<!-- CODE -->
<div><a href="#" class="sign_in">Sign In</a></div>
<div id="sign_box">
<form method="post" action="<?=MYURL;?>example6.php?f=include/ajax/jquery_plugin_twitterlikes/thankyou.inc">
<label>UserName <input type="text" name="usr"/></label>
<label>Password <input type='password' name="pwd"/></label>
<p style="margin:5px 0 0 0;">
<input type="submit" value=" Sing In "/>
</p>
<a href="#" id="btn_close">×</a>
</form>
</div>
<!-- CODE / -->
</div>
</body>
</html>