linkedin facebook linkedin facebook nod32

Sayt uchun kalendar

Muallif: Mengliyev SH.

Qo`shilgan sana: 2014-10-07

Sayt uchun kalendar

Index.html fayl hosil qiling uning kodi quyidagicha

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Как создать календарик-органайзер?</title>

<script src="js/jquery-1.3.min.js" type="text/javascript"> </script>
<script src="js/coda.js" type="text/javascript"> </script>
<link rel="stylesheet" href="css/master.css" type="text/css" media="screen" charset="utf-8" />

</head>

<body>
<h1>Календарь-Органайзер</h1>
<table cellspacing="0">
<thead>
<tr>

<th>Пн</th><th>Вт</th><th>Ср</th>
<th>Чт</th><th>Пт</th><th>Суб</th>
<th>Вс</th>
</tr>
</thead>
<tbody>
<tr>
<td class="padding" colspan="3"></td>
<td> 1</td>

<td> 2</td>
<td> 3</td>
<td> 4</td>
</tr>
<tr>
<td> 5</td>

<td> 6</td>
<td class="today"> 7</td>
<td> 8</td>
<td> 9</td>
<td>10</td>

<td>11</td>
</tr>
<tr>
<td>12</td>
<td class="date_has_event">
13
<div class="events">
<ul>

<li>
<span class="title">Событие 1</span>
<span class="desc">Содержание события 1</span>
</li>
<li>
<span class="title">Событие 2</span>
<span class="desc">Содержание события 2</span>

</li>
</ul>
</div>
</td>
<td>14</td>
<td>15</td>
<td>16</td>

<td class="date_has_event">17
<div class="events">
<ul>

<li>
<span class="title">Событие 1</span>
<span class="desc">Содержание события 1</span>
</li>
</ul>
</div>

</td>
<td>18</td>
</tr>
<tr>
<td>19</td>
<td>20</td>
<td>21</td>

<td class="date_has_event">
22
<div class="events">
<ul>

<li>
<span class="title">Событие 1</span>
<span class="desc">Содержание события 1</span>
</li>
<li>
<span class="title">Событие 2</span>
<span class="desc">Содержание события 2</span>

</li>
</ul>
</div>
</td>
<td>23</td>

<td>24</td>
<td>25</td>
</tr>
<tr>
<td>26</td>
<td>27</td>
<td>28</td>

<td>29</td>
<td>30</td>
<td>31</td>
<td class="padding"></td>
</tr>
</tbody>
<tfoot>

<th>Пн</th><th>Вт</th><th>Ср</th>
<th>Чт</th><th>Пт</th><th>Суб</th>
<th>Вс</th>
</tfoot>
</table>

</body>

</html>

coda.js fayl hosil qiling quyida javascript kodi keltirilgan

$(function () {
$('.date_has_event').each(function () {
// options
var distance = 10;
var time = 250;
var hideDelay = 500;

var hideDelayTimer = null;

// tracker
var beingShown = false;
var shown = false;

var trigger = $(this);
var popup = $('.events ul', this).css('opacity', 0);

// set the mouseover and mouseout on both element
$([trigger.get(0), popup.get(0)]).mouseover(function () {
// stops the hide event if we move from the trigger to the popup element
if (hideDelayTimer) clearTimeout(hideDelayTimer);

// don't trigger the animation again if we're being shown, or already visible
if (beingShown || shown) {
return;
} else {
beingShown = true;

// reset position of popup box
popup.css({
bottom: 20,
left: -76,
display: 'block' // brings the popup back in to view
})

// (we're using chaining on the popup) now animate it's opacity and position
.animate({
bottom: '+=' + distance + 'px',
opacity: 1
}, time, 'swing', function() {
// once the animation is complete, set the tracker variables
beingShown = false;
shown = true;
});
}
}).mouseout(function () {
// reset the timer if we get fired again - avoids double animations
if (hideDelayTimer) clearTimeout(hideDelayTimer);

// store the timer so that it can be cleared in the mouseover if required
hideDelayTimer = setTimeout(function () {
hideDelayTimer = null;
popup.animate({
bottom: '-=' + distance + 'px',
opacity: 0
}, time, 'swing', function () {
// once the animate is complete, set the tracker variables
shown = false;
// hide the popup entirely after the effect (opacity alone doesn't do the job)
popup.css('display', 'none');
});
}, hideDelay);
});
});
});

master.css fayl quyida keltirilgan

* {
border: 0px;
padding: 0px;
}
body {
font-family: Helvetica, "Lucida Grande", "Lucida Sans Unicode", sans-serif;
background: white;
text-align: center;
}
body h1 {
padding-top: 20px;
font-size: 26px;
color: #000;
}
table {
border-collapse: separate;
border: 1px solid #9DABCE;
border-width: 0px 0px 1px 1px;
margin: 10px auto;
font-size: 20px;
}
td, th {
width: 81px;
height: 81px;
text-align: center;
vertical-align: middle;
background: url(../img/cells.png);
color: #000;
position: relative;
}
th {
height: 30px;
font-weight: bold;
font-size: 14px;
}
td:hover, th:hover {
background-position: 0px -81px;
color: #000;
}
td.date_has_event {
background-position: 162px 0px;
color: white;
}
td.date_has_event:hover {
background-position: 162px -81px;
}
td.padding {
background: url(../img/calpad.jpg);
}
td.today {
background-position: 81px 0px;
color: white;
}
td.today:hover {
background-position: 81px -81px;
}
.events {
position: relative;
}
.events ul {
text-align: left;
position: absolute;
display: none;
z-index: 1000;
padding: 15px;
background: #E7ECF2 url(../img/popup.png) no-repeat;
color: white;
border: 1px solid white;
font-size: 15px;
width: 200px;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
-border-radius: 3px;
list-style: none;
color: #444444;
-webkit-box-shadow: 0px 8px 8px #333;
}
.events li {
padding-bottom: 5px;
}
.events li span {
display: block;
font-size: 12px;
text-align: justify;
color: #555;
}
.events li span.title {
font-weight: bold;
color: #000;
}

jquery-1.3.min.js faylni Internetdan yuklab oling kalendar ko'rinishi quyidagicha


2144 marta o`qildi.

Parol:
Eslab qolish.


Ro`yhatdan o`tish

testing

+998915878681

Siz o`z maxsulotingizni 3D reklama ko`rinishda bo`lishini xohlaysizmi? Unda xamkorlik qilamiz.

3D Reklama


Рейтинг@Mail.ru
Рейтинг@Mail.ru

Besucherzahler
счетчик посещений