PHP & JavaScript Room :: 設置サンプル

実行結果

エフェクト操作：スライディング：slideDown()+slideUp()の使用例 | jQuery

参照：Creating a Slide-In jQuery Contact Form

画面右上にある【Contact US】ボタンをクリックすると、お問合せフォームがスライドダウンします。

メッセージの送信に成功しました！

設置サンプルのソース

<!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>エフェクト操作：スライディング：slideDown()+slideUp()の使用例 | jQuery</title>
      <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
      <script type="text/javascript">
         $(function(){
                $("#contactLink").click(function(){
                    if ($("#contactForm").is(":hidden")){
                        $("#contactForm").slideDown("slow");
                    }
                    else{
                        $("#contactForm").slideUp("slow");
                    }
                });
         });
            function closeForm(){
                $("#messageSent").show("slow");
                setTimeout('$("#messageSent").hide();$("#contactForm").slideUp("slow")', 2000);
           }
      </script>
      <style type="text/css">
.box {
   margin:0auto;
   width:351px;
   text-align:left;
   position: absolute;
   top:0; right:0;
}
#contactFormContainer {
   margin:0; padding:0;
   width:351px; height:277px;
}
#contactForm {
   background:transparent  url("/content/img/ajax/bkg.jpg") repeat 0 0;
   width:351px; height:277px;
   display:none;
   overflow:hidden;
}
#contactForm fieldset {
   background:transparent  url("/content/img/ajax/bkg.jpg") repeat 0 0;
   padding:15px 30px 45px 15px;
   border:none;
}
#contactForm label {
   display:block;
   color:#ffc400;
}
#contactForm input.txt {
   display:block;
   border:solid 1px #4d3a24;
   width:100%;
   margin-bottom:10px;
}
#contactForm textarea {
   display:block;
   border:solid 1px #4d3a24;
   width:100%; height:60px;
}
#contactForm input.btn_submit {
   margin-top:10px;
   background-color:#4d3a24;
   border:solid 1px #23150c;
   color:#fecd28;
   padding:2px 5px;
}
#contactLink {
   width:351px; height:40px;
   background:transparent url('/content/img/ajax/slidein_button.png') no-repeat 0 0;
   display:block;
   cursor:pointer;
}
#messageSent {
   color:#ff9933;
   display:none;
}
      </style>
   <link rel="stylesheet" type="text/css" href="/common/css/example.css"></head>
   <body id='example3' class='example'><div class="ads" style="margin:32px auto;text-align:center;"></div><h1 class='h'><a href='/'>PHP &amp; JavaScript Room</a> :: 設置サンプル</h1>
<h3 class='h'>実行結果</h3>
      <div id="wrap">
         <h1>エフェクト操作：スライディング：slideDown()+slideUp()の使用例 | jQuery</h1>
         <h2>参照：<a href='http://www.designshack.co.uk/tutorials/creating-a-slide-in-jquery-contact-form'>Creating a Slide-In jQuery Contact Form</a></h2>
         <p>画面右上にある【Contact US】ボタンをクリックすると、お問合せフォームがスライドダウンします。</p>
<!-- CODE -->
        <div class="box">
            <div id="contactFormContainer">
                <div id="contactForm">
                    <fieldset>
                        <label for="Name">名前 *</label><input id="name" type="text" class="txt" />
                        <label for="Email">メールアドレス *</label><input id="Email" type="text" class="txt" />
                        <label for="Message">メッセージ *</label>
                        <textarea id="Message" rows="3" cols="20"></textarea>
                        <input id="sendMail" type="submit" name="submit" class="btn_submit" onclick="closeForm()" value="メール送信" />
                        <div id="messageSent">メッセージの送信に成功しました！</div>
                   </fieldset>
                </div>
                <div id="contactLink"></div>
            </div>
<!-- / CODE -->
      </div>
   </body>
</html>