izmir escort escort izmir porno porno izle
jquery sanal klavye yapımı - IRCForumları - IRC ve mIRC Yardım ve Destek Platformu
User Tag List

Arrow jquery sanal klavye yapımı #1
Üyelik Tarihi: 10 Eylül 2012
Mesajlar: 3.858
Aldığı Beğeni: 1
Beğendikleri: 0
20 Ekim 2012 , 23:39
Alıntı ile Cevapla
Web sitelerinde sanal klavye kullanmak isteyenler için jquery ile sanal klavye yapımını ve kaynak dosyalarını paylaşmak istiyorum belki yapımını arayan ve öğrenmek isteyen arkadaşlar vardır

öncelikle
index.html dosyamızı oluşturuyoruz ve içine aşağıdaki kodları ekliyoruz

Kod:
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9">
    <title>Sanal Klavye</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <style type="text/css"><!--
.style1 {
    color: #990033;
    font-weight: bold;
}
--></style>
 
 
<div id="container">
    <div align="center">
      <textarea id="write" rows="6" cols="60" style="display:compact"></textarea>
    </div>
    <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">&</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">[</span><span class="on">{</span></li>
        <li class="symbol"><span class="off">]</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">"</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"><</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="right-shift lastitem">shift</li>
        <li class="space lastitem"> </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>


daha sonra keyboard.js dosyasını oluşturyoruz ve içerisine aşağıdaki kodları ekliyoruz

Kod:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
$(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 = "\t";
        if ($this.hasClass('return')) character = "\n";
         
        // 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);
    });
});

ve son olarakta style.css dosyamızı oluşturup içerisine aşağıdaki kodları ekliyoruz


Kod:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
* {
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 #999999;
    -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;
    cursor: pointer;
    border-top-color: #990033;
    border-right-color: #990033;
    border-bottom-color: #990033;
    border-left-color: #990033;
        }

ve işlemlerimiz bu kadar arkadaşlar klavyemiz artık hazır güle güle kullanın
__________________

To view links or images in signatures your post count must be 10 or greater. You currently have 0 posts.


« Önceki Konu Sonraki Konu »

Şu an bu konuyu okuyan kişi sayısı: 1 (0 üye ve 1 misafir)