ط§طµظ†ط¹ ظƒظٹط¨ظˆط±ط¯ ط¨ظ€ css ظˆ jQuery


بسم الله الرحمن الرحيم
اليوم سوف نصنع كيبورد إنترنتي بنفسنا!!
الاول الملفات اللي راح نسويها:

ملف css عشان الإستايل style
و ملف index.html عشان عرض الكيبورد
و ملف جافا سكربت
keyboard.js
لوضع أكواد جافا لإدارة الكيبورد
لنبدا بصفحة الإتش تي إم إل
 رمز PHP:
<code style="white-space:nowrap"> <code> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>كيبورد </title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>

<div id="container">
<textarea id="write" rows="6" cols="60"></textarea>
<ul id="keyboard">
<li class="symbol"><span class="off">`</span><span class="on">~</span></li>
<li class="symbol"><span class="off">1</span><span class="on">!</span></li>
<li class="symbol"><span class="off">2</span><span class="on">@</span></li>
<li class="symbol"><span class="off">3</span><span class="on">#</span></li>
<li class="symbol"><span class="off">4</span><span class="on">$</span></li>
<li class="symbol"><span class="off">5</span><span class="on">%</span></li>
<li class="symbol"><span class="off">6</span><span class="on">^</span></li>
<li class="symbol"><span class="off">7</span><span class="on">&amp;</span></li>
<li class="symbol"><span class="off">8</span><span class="on">*</span></li>
<li class="symbol"><span class="off">9</span><span class="on">(</span></li>
<li class="symbol"><span class="off">0</span><span class="on">)</span></li>
<li class="symbol"><span class="off">-</span><span class="on">_</span></li>
<li class="symbol"><span class="off">=</span><span class="on">+</span></li>
<li class="delete lastitem">delete</li>



<li class="tab">tab</li>
<li class="letter">q</li>
<li class="letter">w</li>
<li class="letter">e</li>
<li class="letter">r</li>
<li class="letter">t</li>
<li class="letter">y</li>
<li class="letter">u</li>
<li class="letter">i</li>
<li class="letter">o</li>
<li class="letter">p</li>
<li class="symbol"><span class="off">&#91;</span><span class="on">{</span></li>
<li class="symbol"><span class="off">&#93;</span><span class="on">}</span></li>
<li class="symbol lastitem"><span class="off">\</span><span class="on">|</span></li>
<li class="capslock">caps lock</li>
<li class="letter">a</li>
<li class="letter">s</li>
<li class="letter">d</li>
<li class="letter">f</li>
<li class="letter">g</li>
<li class="letter">h</li>
<li class="letter">j</li>
<li class="letter">k</li>
<li class="letter">l</li>
<li class="symbol"><span class="off">;</span><span class="on">:</span></li>
<li class="symbol"><span class="off">'</span><span class="on">&quot;</span></li>
<li class="return lastitem">return</li>
<li class="left-shift">shift</li>
<li class="letter">z</li>
<li class="letter">x</li>
<li class="letter">c</li>
<li class="letter">v</li>
<li class="letter">b</li>
<li class="letter">n</li>
<li class="letter">m</li>
<li class="symbol"><span class="off">,</span><span class="on">&lt;</span></li>
<li class="symbol"><span class="off">.</span><span class="on">&gt;</span></li>
<li class="symbol"><span class="off">/</span><span class="on">?</span></li>
<li class="right-shift lastitem">shift</li>
<li class="space lastitem">&nbsp;</li>
</ul>
</div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/keyboard.js"></script>
</body>
</html>
</code> </code>

كده عملنا الكيبورد واللي عايز يزود اي شئ في الكيبورد حروف رموز إلخ
يعدل يزود براحته
.. ثم ننتقل للمرحلة الهامة
تكوين الإستايل style
عشان يظهر الكيبورد كالحقيقي
رمز Code:
* { margin: 0; padding: 0; } body { font: 71%/1.5 Verdana, Sans-Serif; background: #eee; } #container { margin: 100px auto; width: 688px; } #write { margin: 0 0 5px; padding: 5px; width: 671px; height: 200px; font: 1em/1.5 Verdana, Sans-Serif; background: #fff; border: 1px solid #f9f9f9; -moz-border-radius: 5px; -webkit-border-radius: 5px; } #keyboard { margin: 0; padding: 0; list-style: none; } #keyboard li { float: left; margin: 0 5px 5px 0; width: 40px; height: 40px; line-height: 40px; text-align: center; background: #fff; border: 1px solid #f9f9f9; -moz-border-radius: 5px; -webkit-border-radius: 5px; } .capslock, .tab, .left-shift { clear: left; } #keyboard .tab, #keyboard .delete { width: 70px; } #keyboard .capslock { width: 80px; } #keyboard .return { width: 77px; } #keyboard .left-shift { width: 95px; } #keyboard .right-shift { width: 109px; } .lastitem { margin-right: 0; } .uppercase { text-transform: uppercase; } #keyboard .space { clear: left; width: 681px; } .on { display: none; } #keyboard li:hover { position: relative; top: 1px; left: 1px; border-color: #e5e5e5; cursor: pointer; }
عملنا CSS للكيبورد
بما فيه الأزرار
شكل الصفحة
اوكيه؟
تمام نيجي لخطوة ملف الجافا
رمز Code:
$(function(){ var $write = $('#write'), shift = false, capslock = false; $('#keyboard li').click(function(){ var $this = $(this), character = $this.html(); // If it's a lowercase letter, nothing happens to this variable // Shift keys if ($this.hasClass('left-shift') || $this.hasClass('right-shift')) { $('.letter').toggleClass('uppercase'); $('.symbol span').toggle(); shift = (shift === true) ? false : true; capslock = false; return false; } // Caps lock if ($this.hasClass('capslock')) { $('.letter').toggleClass('uppercase'); capslock = true; return false; } // Delete if ($this.hasClass('delete')) { var html = $write.html(); $write.html(html.substr(0, html.length - 1)); return false; } // Special characters if ($this.hasClass('symbol')) character = $('span:visible', $this).html(); if ($this.hasClass('space')) character = ' '; if ($this.hasClass('tab')) character = &quot;\t&quot;; if ($this.hasClass('return')) character = &quot;\n&quot;; // Uppercase letter if ($this.hasClass('uppercase')) character = character.toUpperCase(); // Remove shift once a key is clicked. if (shift === true) { $('.symbol span').toggle(); if (capslock === false) $('.letter').toggleClass('uppercase'); shift = false; } // Add the character $write.html($write.html() + character); }); });
عشان يكتب ويمسح ويعمل مسافة وهكذا
تم الدرس مفصل بحمد الله تعالى










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