مثال متعدد الوظائف JQuery - نسخة قابلة للطباعة

PHP كود :
<html>
 <head>
 <title>My Page</title>
                       <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
             <script>
             //when our doc be ready then use function inside it
                 $(document).ready(function () {
                     // footer animations div with id b
                     $("#b").animate({ left: "+=500" }, 3000);
                     $("#b").animate({ left: "-=500" }, 3000);

                     // here when image logo get hover

                     $("#img").hover(function () {
                         $("#b").animate({ left: "+=500" }, 2000);
                         $("#b").animate({ left: "-=500" }, 2000);

                     });
                     // we will hide div with name divs and all elemts inside it
                     $("#divs").hide(0);


                     // when button log in click
                     $("#button1").click(function () {
                         // we display on our div here we use toggle
                         // click-click
                         $("#divs").toggle(500);

                     });
                     // end button event
                     // disable button here
                     $('#Button2').prop('disabled', true);
                     // check when text keyup
                     $('#Text1').keyup(function () {
                         if ($(this).val() != "") {
                             // if text="" then our button will be dislpayed
                             $('#Button2').prop('disabled', false);
                         }
                         else {
                             $('#Button2').prop('disabled', true);
                         }
                     });
                     // hover event
                     $('#Text1').hover(function () {
                         if ($(this).val() != "") {
                             $('#Button2').prop('disabled', false);
                         }
                         else {
                             $('#Button2').prop('disabled', true);
                         }
                     });
                     //end hover event
                     $("#Button2").click(function () {
                         // here we will get text1 value 
                         var ss = $("#Text1").val();
                         if (ss == "") {
                             alert("Type Password");
                             return;
                         }
                         if (ss != "") {
         // whe have choices if open in same window or in new one
                             if ($('#chk1').is(':checked') ) {
                                 // for open in same page
                                  window.location = (ss);       

                             }
                              else {
             // for open in new winddow
                              window.open(ss);
                             }
                         }
                         else {

                             alert(" Password: " + ss + " is error ");
                             $('#Text1').val('');
                         }
                     });


                 });

        // here some button events
                function button1_onclick() {
                    $('#Text1').val('');  
                    if (button1.value == "Cancel") {
                        button1.value = "Log in";

                     
                    }
                    else {
                        button1.value = "Cancel"
                    }
                }

                // end script
             </script>
           
        
       
    <style type="text/css">
        
            #button1
            {
                color: #FF0000;
            }
             
            #divs
            {
                background-color: #95CAFF;
            }
            #Text1
            {
                width: 437px;
            }
        </style>
           
        
       
 </head>
 <body>
    <center >
    <img id="img" alt="fdsfds" src="https://www.vb4arb.com/logo1.png" 
            style="-webkit-user-select: none; width: 264px;" />
            <hr />
 <div id="divs">
        Open in Same window?<input id="chk1" type="checkbox" /><br />
        <input  id="Text1" type="text" />
        <input id="Button2" type="button" value="Go" onclick="return Button2_onclick()" />
        <div id="weather-temp" 
            style="color: #CC0000; width: 473px; background-color: #FFFF66">
            <b>Please paste your URL and click Go</b></div>
        <hr />
        </div>
   <input type ="button"  id="button1" value ="Log in" 
            onclick="return button1_onclick()" /> 
     <div style="position:relative; background-color: #FF00FF;" align="center">
    <div id="b" style="position:absolute;" align="center">
        Powered By: Abu Omar
    </div>
</div>
    </center>
 
 </body>
           
</html>