تقييم الموضوع :
  • 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
            {
                width437px;
            }
        </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 ByAbu Omar
    
</div>
</
div>
    </center>
 
 
</body>
           
</html

اعتمدت كثيرا على الموقع التالي
W3
يللاه بما اني خالي شغل هذي الايام نبعد شوي من قواعد البيانات
بالتوفيق
سبحان الله والحمدلله ولا إله إلا الله والله أكبر
 اللهم اغْفِرْ لِلمؤمنين والمؤمنات والمسلمين والمسلمات الأحياء منهم والأموات
الرد }}}
تم الشكر بواسطة: ابو ليلى , أشرف كريم 2
#2
مشكور أخي
بارك الله فيك
الرد }}}
تم الشكر بواسطة: أبو عمر
#3
مشكور اخي.
الرد }}}
تم الشكر بواسطة: elgokr , elgokr
#4
مشكور أخي
بارك الله فيك Speed Test
الرد }}}
تم الشكر بواسطة: Rami Gufail , Rami Gufail


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


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