مثال متعدد الوظائف JQuery

Thu, 01 Sep 2016 19:27:36 +0000

السلام عليكم
اعتذر اذا كان موضع الموضوع غير مناسب فلقد احتست كثراً "احتست بالفعل"
لكن JQuery بنت الجافا .
صفحة بسيطة عملها فقط الانتقال الى اي رابط يضعه المتسخدم ويختار كيفية فتح الرابط الجديد
اما في نفس الصفحة أو في نافذة جديدة مع القليل من البهارات مثلا hide show toggle animate disabled checked

كود الصفحة في الاسفل انسخة لملف نصي مثلا
واحفظه وغير امتداده الى
html

PHP كود :
<html>
 <head>
 <title>My Pagetitle>
                       <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 Gob>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> 

اعتمدت كثيرا على الموقع التالي
W3
يللاه بما اني خالي شغل هذي الايام نبعد شوي من قواعد البيانات
بالتوفيق

منتدى فيجوال بيسك لكل العرب | منتدى المبرمجين العرب - قسم أمثلة ومشاريع Java

مثال متعدد الوظائف JQuery