ط¯ط±ط³ ط§ط³طھط®ط¯ط§ظ… طھظ‚ظ†ظٹط© JQ ظ„ظ…ط¹ط±ظپط© ظ…ظƒط§ظ† ط§ظ„ط²ط¢ط¦ط± .. !


بسم آلله الرحمن الرحيم ..
السلام عليكم ورحمة الله وبركاته ..
تدوينة جديدة في مدونتي دكتور ويب ، وموضوع في منتدى ديزاد باتنة الحبيب ..

جايب لكم درس مفصل اليوم بسيط وجميل وسهل ,, وهو عمل زر عندما يضغط عليه الشخص يتم معرفة مكانك مثلا ..
You are in Makkah, Saudi Arabia!
طبعا الكود code حق الجيكويري من مصطور اجنبي انا عدلت على css وضبطتها على الزر


نبدا بكود code ال html ..

رمز Code:
<html> <body dir=&quot;rtl&quot;> <h1>اين انا حاليا ؟</h1> <p> اهلا بك زائرنا الكريم موقعنا يقدم لك خدمة معرفة مكانك باستخدام تقنية الجيكويري والاجاكس </p> <input type='button' id='findme' value='اين انا ؟'/> <br /><br /> <div id='message'></div> </body> </html>
كود code css !

رمز Code:
body { background-color: #212121; color: #CCCCCC; padding: 1em; font-family:GE SS Two Light; } p { color:#F39; font-size:14px; font-style:italic; } #findme{ width:200px; padding:10px; font-family:GE SS Two Light; } </style>
كود code الجيكويري !
رمز Code:
<script src=&quot;http://code.jquery.com/jquery-1.10.1.min.js&quot;></script> <script> $(document).on('ready', function() { $('#findme').on('click', function() { $('#message').html('Loading...'); $.ajax( { url: &quot;https://api.mercadolibre.com/geolocation/whereami&quot;, success: function(data) { var city = data.city_name; var country = data.country_name; $('#message').text(&quot;You are in &quot; + city + &quot;, &quot; + country + '!'); } }); }); }); </script>
جميع الاكواد ، مدموجة وجاهزة للاستخدام .. !



رمز Code:
<!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;> <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;> <head> <meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /> <title>Untitled Document</title> <script src=&quot;http://code.jquery.com/jquery-1.10.1.min.js&quot;></script> <script> $(document).on('ready', function() { $('#findme').on('click', function() { $('#message').html('Loading...'); $.ajax( { url: &quot;https://api.mercadolibre.com/geolocation/whereami&quot;, success: function(data) { var city = data.city_name; var country = data.country_name; $('#message').text(&quot;You are in &quot; + city + &quot;, &quot; + country + '!'); } }); }); }); </script> <style> body { background-color: #212121; color: #CCCCCC; padding: 1em; font-family:GE SS Two Light; } p { color:#F39; font-size:14px; font-style:italic; } #findme{ width:200px; padding:10px; font-family:GE SS Two Light; } </style> </head> <body dir=&quot;rtl&quot;> <h1>اين انا حاليا ؟</h1> <p> اهلا بك زائرنا الكريم موقعنا يقدم لك خدمة معرفة مكانك باستخدام تقنية الجيكويري والاجاكس </p> <input type='button' id='findme' value='اين انا ؟'/> <br /><br /> <div id='message'></div> </body> </html>
شكرا لمتابعتكم اخوكم احمد ..

المصدر مدونتي ..
http://drweb7.blogspot.com/2014/07/jq.html



التعديل الأخير كان بواسطة Just Designer; 27 - 07 - 2014 الساعة 01:01




©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى©