تقييم الموضوع :
  • 0 أصوات - بمعدل 0
  • 1
  • 2
  • 3
  • 4
  • 5
مثال متعدد الوظائف JQuery
#1
السلام عليكم
اعتذر اذا كان موضع الموضوع غير مناسب فلقد احتست كثراً "احتست بالفعل"  Smile
لكن JQuery بنت الجافا .
صفحة بسيطة عملها فقط الانتقال الى اي رابط يضعه المتسخدم ويختار كيفية فتح الرابط الجديد
اما في نفس الصفحة أو في نافذة جديدة مع القليل من البهارات مثلا hide show toggle animate disabled checked




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

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="http://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> 

اعتمدت كثيرا على الموقع التالي
W3
يللاه بما اني خالي شغل هذي الايام نبعد شوي من قواعد البيانات
بالتوفيق
سبحان الله والحمدلله ولا إله إلا الله والله أكبر
 رَبِّ اغْفِرْ لِي وَلِوَالِدَيَّ
Heart
الرد }}}}
تم الشكر بواسطة: ابو ليلى


التنقل السريع :


يقوم بقرائة الموضوع: بالاضافة الى ( 1 ) ضيف كريم