1. сделать возможным перетаксивание файлов на элемент web страницы.
2. анализировать перенесенные файлы с помошью JavaScript.
3. загружать и парсить файлы со стороны клиента.
4. асинхронно загружать файлы на сервер используя XMLHttpRequest2
5. показать прогресс бар пока идет загрузка файлов

В этой статье расмотрим первые три пункта. В итоге получим примерно такую форму:

Поддержка браузеров

Прежде чем начать, нужно отметить что поддержка перетаскивания файлов браузерами будет неравномерной. Код работает в современных браузерах, но вполне возможно API будет меняться.

• Последние версии Firefox и Chrome поддерживают все функции и превосходно работают с перетаскиванием.
• Опера может парсить файлы в JavaScript, но не поддерживает перетаскивание файлов и загрузку с помощю XMLHttpRequuest2
• IE и десктоповые версии Safari не поддерживают ничего из нужного API.

HTML и CSS

Далее идет код стандартной формы с инпутом типа файл. Единственное HTML5 нововведение в форме это атрибут “multiple” который позволяет пользователю выбирать любое количество файлов.

Со стороны сервера загрузка файлов будет проводиться средствани PHP, но независимо от того какую технологию вы используете на сервере JavaScript код останется тем же. Скрытое поле MAX_FILE_SIZE определяет 300,000 байт, размер будем проверять и на стороне клиента и на стороне сервера, чтобы предотвротить загрузку огромного размера файлов.

<form id="upload" action="upload.php" method="POST" enctype="multipart/form-data">
	<fieldset>
		<legend>HTML Загрузка Файлов</legend>
		<input type="hidden" id="MAX_FILE_SIZE" name="MAX_FILE_SIZE" value="300000" />
		<div>
			<label for="fileselect">Выберите файлы для загрузки:</label>
			<input type="file" id="fileselect" name="fileselect[]" multiple="multiple" />
			<div id="filedrag" >Или перетащите их сюда</div>
		</div>
		<div id="submitbutton">
			<button type="submit">Загрузить файлы</button>
		</div>
	</fieldset>
</form>

Элемент #filedrag будет использоваться как облясть в которую необходимо пренести файлы. Элемент в CSS стилях скрыт, но он будет отображаться средствами JavaScript если перетаскивание поддерживается браузером:

*{
     margin: 0px;
}
body{
     background: none repeat scroll 0% 0% #EFEFEF;
}
.wrapper{
     background: none repeat scroll 0% 0% #FFFFFF;
     margin: 150px auto;
     border: 2px solid #3DA8BA;
     padding: 10px;
     width: 500px;
}
fieldset{
	border:2px solid #efefef;
}
#filedrag{
	border-radius: 7px 7px 7px 7px;
	border: 2px dashed #3DA8BA;
	color: #555555;
	cursor: default;
	display: none;
	margin: 1em 0pt;
	padding: 1em 0pt;
	text-align: center;
	background:#f9f9f9;
}
#filedrag.hover {
	border-style: solid;
	box-shadow: 0pt 3px 4px #dbdbdb inset;
}
#messages{
	margin-top:10px;
	padding:5px;
	font-size:14px;
}
#messages p{
	border-bottom:1px solid #efefef;
	margin-bottom:5px;
}

Для элемента также определенн класс .hover который меняет стили когдо пользователь перетаксивает файлы на элемент. Браузеры не поддерживают стили :hover в этой ситуации, но мы можем добовлять класс спомощю Javascript когда происходит нужное событие.

File API

W3C File API предостовляет несколько объектов которые мы будем использовать:

• FileList: предостовляет массив выбранных файлов.
• File: предстовляет единственный файл.
• FileReader: интерфейс который позволяет нам считать информацию о файле со стороны клиента и использовать в JavaScript.

JavaScript события

Пришло время писать JavaScript код. Мы не будем использовать JavaScript фреймфроков, поэтому напишем пару фуннкций для сохронения нашего времени. Это функция которая достает нужный элемент по ид и функция выводящая сообщения

/* getElementById */
function $id(id) {
	return document.getElementById(id);
}

/* вывод сообщений */
function Output(msg) {
	var m       = $id("messages");
	m.innerHTML = msg + m.innerHTML;
}

Далее проверим поддержку File API и вызовем функцию инициализации Init():

/* проверка поддержки API */
if (window.File && window.FileList && window.FileReader){
	Init();
}
/* инициализация */
function Init(){

	var fileselect   = $id("fileselect"),
		filedrag     = $id("filedrag"),
		submitbutton = $id("submitbutton");

	/* выбор файла */
	fileselect.addEventListener("change", FileSelectHandler, false);

	/* проверка поддержки XHR2 */
	var xhr = new XMLHttpRequest();
	if (xhr.upload){

		/* сброс файла */
		filedrag.addEventListener("dragover", FileDragHover, false);
		filedrag.addEventListener("dragleave", FileDragHover, false);
		filedrag.addEventListener("drop", FileSelectHandler, false);
		filedrag.style.display = "block";

		/* удаление кнопки сабмитта */
		submitbutton.style.display = "none";
	}

}

Функция Init():

1. Устонавливает обработчик события к изменению инпута типа файл.
2. Отоброжает элемент #filedrag.
3. Устанавливает обработчики событий “dragover” и “dragleave” для динамического изменения стилей элемента #filedrag.
4. Устанавливает обработчик события “drop” для элемента #filedrag.
5. Скрывает кнопку сабмитта формы – он пока не требуется, так как мы будем просто анализировать файлы.

Также вы можете скрыть инпут типа файл, если перетаскивание поддерживается. Но я не буду этого делать чтобы пользователь мог воспользоваться удобным ему вариантом.

Проверка поддержки метода XMLHttpRequest.upload предотврощает проблемы с Оперой. Браузер поддерживает объекты File, FileList и FileReader, но не поддерживает перетаскивание файлов или XMLHttpRequest2. Поэтому мы отоброжаем информацию о файле, но оставляем скрытым элемент #filedrag.

Изменение стилей при переносе

Мало кто испытал перетаскивание файлов в браузер. На самом деле, многие опытные интернет пользователи считают это невозможным. Поэтому написали внутри элемента “перетащите сюда файлы”. А следующая функция будет добвлять класс к элементу, когда файл уже будет находится непосредственно над элементом, тем самым будут меняться стили.

// Файл над нужной областью
function FileDragHover(e){
	e.stopPropagation();
	e.preventDefault();
	e.target.className = (e.type == "dragover" ? "hover" : "");
}

Анализирование перетащенных или выбранных файлов

Будем использовать функцию FileSelectHandler() не зависимо от того обин или несколько файлов были выбранны или перетащенны на элемент #filedrag:

// выбор файла
function FileSelectHandler(e){

	FileDragHover(e);

	// проходимся по объекту FileList
	var files = e.target.files || e.dataTransfer.files;

	// парсим все объекты типа File
	for (var i = 0, f; f = files[i]; i++){
		ParseFile(f);
	}

}

Функция:

1. Вызываем функцию FileDragHover() чтобы убрать стиля при hover и предотвратить выполнение событий браузера. Это очень важно, так как браузер может попытаться отобразить файл
2. Проходимся по объекту FileList.
3. Наконец функция проходит по всем объектам типа File в объекте FileList и передает их как аргумент в функцию ParseFile()

function ParseFile(file) {
	Output(
		"<p>File information: <strong>" + file.name +
		"</strong> type: <strong>" + file.type +
		"</strong> size: <strong>" + file.size +
		"</strong> bytes</p>"
	);
}

Функция выводит информация используя три основные свойства представленные объектом File только для чтения.

• .name: имя файла (не включая путь к файлу)
• .type: MIME тип, например: image/jpeg, text/plain, и т.д.
• .size: размер файла в байтах

Плагин позволяет строить только одного типа графики, зато имеет большое количество настроек позволяющие подстраивать под дизайн своего сайта. Также есть возможность построения нескольких графиков одновременно.

Конечно 5Graph уступает другим подобным плагинам по функционалу построению диаграмм и все такое. Это все в дальнейшем будет нарабатываться, сейчас пока хотелось сделать его гибким при настройке дизайна. Ведь все остальные пдагины встречающиеся мне в основном не позволяют этого делать.

На этом пока все. Пожалуйста остовляйте свои комментарии, высказывайте свое мнение о 5Graph мне очень интересно. Сайт плагина размещен по адресу graph.prootime.ru

function workjscript(){
     $brows = get_browser();
     if($brows[javascript]){
         return true;  //то есть выводим форму
     }
     retunr false; //javascript не включен форму не выводим
}

Но а если get_browser() не поддерживается вашм хостингом также как и у меня, можно сделать попроще, просто выводить одно из обязательных полей через Javascritpt. В итоге без Javascript‘a пользователь, спам бот или кто еще пофигу будет получать форму без одного обязательного поля и не сможет отправить форму. Ну на примере wordpress для комментариев можно передать в качестве поля имени автора следующее:

'author' => '<div class="first_inputs">
	<span id="authorplace"></span>
	<script type="text/javascript">
		$(document).ready(function(){
			$("#authorplace").html("\
				<input class=\"cm_name\" placeholder=\"Имя\" id=\"author\" name=\"author\" type=\"text\" value=\"'.esc_attr( $commenter['comment_author'] ) . '\"' . $aria_req . ' />\
			");
		});
	</script>',

Хороший ресурс для тестирования сайта

Сейчас я особо не занимаюсь этим сайтом так как готовлюсь к ЕГЭ, чтоб его. Так вот, все думаю когда то писали шпоры, а я решил написать прогу, скорее web приложение которое поможет мне при сдаче ЕГЭ.

Готовясь к информатике заметил что почти во всех заданиях B8 встречается одна и та же по типу задача, в которой обычно требуется найти последовательность букв с какой то позиции по какую то. Пример задания:

Строки (цепочки символов латинских букв) создаются по следующему правилу: первая строка состоит из одного символа – латинской буквы “A”. Каждая из последующих цепочек создается такими действиями: в очередную строку сначала дважды записывается предыдущая строка, затем справа приписывается буква, чей порядковый номер в алфавите соответствует номеру строки (на i – м шаге пишется “i” – я буква алфавита).
Вот первые 4 строки созданные по этому правилу:
1) A
2) AAB
3) AABAABC
3) AABAABCAABAABCD
Латинский алфавит (для справки):
ABCDEFGHIJKLMNOPQRSTUVWXYZ
Запишите шесть символов подряд, стоящие в восьмой строке с 100-го по 105-место (считая слева направо).

Встречаются разные варианты этой задачи в некоторых требуется найти количество определенных букв в какой то строке, встречаются еще и с русским алфавитом.

Итак цель написать web приложение которое смогло бы решить все варианты этой задачи и была бы удобна для использования с телефона. Не знаю о чем подумали вы, но я подумал о jQuery Mobile. Почитав немного документации написал разметку. Приложение будет состоять из одной страницы в которой будет выводиться форма состоящая из 4х полей это: поле для выбора алфавита, количества строк, начальной позиции и конечной позиции. Стилей писать не придется так как jQuery Mobile так устроен, остается написать разметку

Получилась она вот такой:

   <div data-role="page" data-theme="c">
       <div data-role="header">
           <h1>Информатика B8</h1>
       </div>
       <div data-role="content">
           <form action="" method="get">
               <div data-role="fieldcontain">
                   <label for="select-choice-1" class="select">Выберите алфавит:</label>
                   <select name="lang" id="select-choice-1">
					   <option value="lt">Латинский</option>
					   <option value="ru">Русский</option>
                   </select>
               </div>
               <div data-role="fieldcontain">
                   <label for="line">Количество строк:</label>
                   <input type="number" name="line" id="line">
               </div>
               <div data-role="fieldcontain">
                   <label for="beg_pos">Начальная позиция:</label>
                   <input type="number" name="beg_pos" id="beg_pos">
               </div>
               <div data-role="fieldcontain">
                   <label for="end_pos">Конечная позиция:</label>
                   <input type="number" name="end_pos" id="end_pos">
               </div>
               <button type="submit" data-theme="b" name="calc" value="calc">Посчитать</button>
           </form>
       </div>
       <div data-role="footer">
           <h4><a href="http:\\prootime.ru">prootime.ru</a></h4>
       </div>
   </div>

В header’е нужно подключить вот эти скрипты:

stylesheet - http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css
script - http://code.jquery.com/jquery-1.4.3.min.js
script - http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js

На вид примерно что то вроде этого:

Осталось написать PHP код. Он будет очень даже простой, просто поставим на сабмит формы PHP код и будем выполнять алгоритм который был дан в задании:

if(!empty($_REQUEST['calc'])){

   //язык
   $language = $_REQUEST['lang'];

   if($language == 'lt'){

       $arr = range('A','Z');

   }
   else{

       $arr = array('А','Б','В','Г','Д','Е','Ё','Ж','З','И','Й','К','Л','М','Н','О','П','Р','С','Т','У','Ф','Х','Ц','Ч','Ш','Щ','Ъ','Ы','Ь','Э','Ю','Я');

   }

   //номер строки
   $str_num = $_REQUEST['line'];

   //начальная и конечная позицим
   $beg_pos = $_REQUEST['beg_pos'];
   $end_pos = $_REQUEST['end_pos'];

   if($beg_pos > $end_pos){

       echo 'Ошибка! Значения начала отреза больше конеца.';

   }
   else{

       //конечная строка
       $end_str = '';

       for($i = 0; $i <= $str_num-1; $i++){

           $end_str = $end_str.$end_str.$arr[$i];

       }

       echo mb_substr($end_str, $beg_pos-1, $end_pos - $beg_pos + 1, 'utf8');
       echo '
Всего букв - '.strlen($end_str);

       for($i = 0; $i <= $str_num-1; $i++){

           echo '
'.$arr[$i].' - '.mb_substr_count($end_str,$arr[$i], 'utf8');

       }

   }

}

Единственное на что бы хотел обратить внимание это на функции начинающиеся с mb_ это нестандартные функции и требуют модуль mbstring если он не подключен то они конечно не сработают. А вообще выполняют то же самое что эти же функции без mb_. Почему я их использовал, потому что этим функциям можно передать третьим параметром кодировку в которой функция должна работать. А так как нам нужно работать еще и с кирилицей это то что нам нужно.

В демке представлено 4 селекта смотрим.

Вконтакте извините я спер у вас оформление и цвета селекта .

Возьмем обычный select с несколькими option примерно вот:

<select id="ourselect1">
           <option value="eee">Значение 19</option>
           <option value="222">Значение 18</option>
           <option value="444">Значение 17</option>
           <option value="123">Значение 16</option>
           <option value="122">Значение 15</option>
           <option value="113">Значение 14</option>
           <option value="124">Значение 13</option>
</select>

Обернем его в div с классом “sel_wrap”, в начале которого выстроим структуру нашего селекта дивами. Если представить это все дело на картинке то получится следующая картина:

А код получится следующим:

<div class="sel_wrap">
    <div class="sel_imul">
        <div class="sel_selected">
            <div class="selected-text">Значение 19</div><div class="sel_arraw"></div>
        </div>
        <div class="sel_options">
            <div class="sel_option" value="eee">Значение 19</div>
            <div class="sel_option" value="222">Значение 18</div>
            <div class="sel_option" value="444">Значение 17</div>
            <div class="sel_option" value="123">Значение 16</div>
            <div class="sel_option" value="122">Значение 15</div>
            <div class="sel_option" value="113">Значение 14</div>
            <div class="sel_option" value="124">Значение 13</div>
        </div>
    </div>
    <select id="ourselect1">
        <option value="eee">Значение 19</option>
        <option value="222">Значение 18</option>
        <option value="444">Значение 17</option>
        <option value="123">Значение 16</option>
        <option value="122">Значение 15</option>
        <option value="113">Значение 14</option>
        <option value="124">Значение 13</option>
    </select>
</div>

Далее приступим к стилям. Естественно скрываем наш обычный селект, а структуру эмилирующую селект стилизуем как нам хочется:

.sel_wrap{
    background:#efefef;
    margin-bottom:5px;
    padding:7px;
}
.sel_wrap select{
    display:none;
}
.sel_imul{
    width:300px;
}
.sel_imul .sel_selected{
    background:#fff;
    border:1px solid #bbb;
    padding:3px 6px;
    font-size:14px;
    font-family:Times;
    cursor:pointer;
    position:relative;
}
.sel_imul.act .sel_selected{
    background:#efefef;
}
.sel_selected .sel_arraw{
    height:100%;
    width:20px;
    background:url('http://bit.ly/gudLNa') 50% 50% no-repeat;
    position:absolute;
    top:0px;
    right:0px;
}
.sel_imul:hover .sel_selected .sel_arraw{
    background-color:#e0e0e0;
    border-left:1px solid #bbb;
}
.sel_imul.act .sel_selected .sel_arraw{
    background-color:#e0e0e0;
    border-left:1px solid #bbb;
}
.sel_imul .sel_options{
    background:#fff;
    border:1px solid #dbdbdb;
    border-top:none;
    overflow:auto;
    position:absolute;
    width:298px;
    display:none;
    z-index:10;
}
.sel_options .sel_option{
    padding:3px 4px;
    font-size:14px;
    font-family:Times;
    border:1px solid #fff;
    border-right:none;
    border-left:none;
}
.sel_options .sel_option:hover{
    border-color:#dbdbdb;
    cursor:pointer;
}
.sel_options .sel_option.sel_ed{
    background:#dbdbdb;
    border-color:#dbdbdb;
}

/*second variant*/
.sec .sel_imul{
    width:200px;
}
.sec .sel_imul .sel_selected{
    border:1px solid #C0CAD5;
}
.sel_imul.act .sel_selected{
    background:#fff;
}
.sec .sel_imul:hover .sel_selected .sel_arraw{
    background-color:#e1e8ed;
    border-left:1px solid #d2dbe0;
}
.sec .sel_imul.act .sel_selected .sel_arraw{
    background-color:#e1e8ed;
    border-left:1px solid #d2dbe0;
}
.sec .sel_imul .sel_options{
    background:#fff;
    border:1px solid #d2dbe0;
    width:198px;
}
.sec.overf .sel_imul .sel_options{
    height:100px;
}
.sec .sel_options .sel_option:hover, .sec .sel_options .sel_option.sel_ed{
    background:#587da1;
    border:1px solid #2a5883;
    color:#fff;
    cursor:pointer;
}
.sec .sel_imul .sel_selected .sel_arraw{
    background-image:url('http://vkontakte.ru/images/darr_dd_out.gif');
}

.sec.round .sel_imul .sel_selected{
    -webkit-border-radius:5px;
}
.sec.round .sel_imul .sel_selected .sel_arraw{
    -webkit-border-radius:0 5px 5px 0;
}
.sec.round .sel_imul .sel_options{
    -webkit-border-radius:0 0 5px 5px;
}
/*green*/
.sec.green .sel_imul .sel_selected{
    border-color:#FFAD99;
}
.sec.green .sel_imul:hover .sel_selected .sel_arraw,
.sec.green .sel_imul.act .sel_selected .sel_arraw{
    background-color:#FFD6CC;
    border-left:1px solid #FFAD99;
}
.sec.green .sel_options .sel_option:hover,
.sec.green .sel_options .sel_option.sel_ed{
    background:#FF9980;
    border:1px solid #FF704D;
    color:#fff;
    cursor:pointer;
}

Здесь уже стили предусматривающие работу javascript’а, и несколько типов селектов.

Дальше приступим к javascript‘у. Во первых сделаем так чтобы при клике на див эмулирующий select, открывался или закрывался список option’ов:

$('.sel_imul').live('click', function() {

    $('.sel_imul').removeClass('act');
    $(this).addClass('act');

    if ($(this).children('.sel_options').is(':visible')) {

        $('.sel_options').hide();

    }
    else {

        $('.sel_options').hide();
        $(this).children('.sel_options').show();

    }

});

Теперь пишем событие которое будт менять значение обычного, скрытого, селекта и значение у эмулирующего селекта:

$('.sel_option').live('click', function() {

    //меняем значение на выбранное
    var tektext = $(this).html();
    $(this).parent('.sel_options').parent('.sel_imul').children('.sel_selected').children('.selected-text').html(tektext);

    //активируем текущий
    $(this).parent('.sel_options').children('.sel_option').removeClass('sel_ed');
    $(this).addClass('sel_ed');

    //устанавливаем значение для селекта
    var tekval = $(this).attr('value');
    tekval = typeof(tekval) != 'undefined' ? tekval : tektext;
    $(this).parent('.sel_options').parent('.sel_imul').parent('.sel_wrap').children('select').children('option').removeAttr('selected').each(function() {
        if ($(this).val() == tekval) {
            $(this).attr('selected', 'select');
        }
    });
});

Ну еще напишем меленький код который будет закрывать селект при холостом клике, blur так зказать:

var selenter = false;
$('.sel_imul').live('mouseenter', function() {
    selenter = true;
});
$('.sel_imul').live('mouseleave', function() {
    selenter = false;
});
$(document).click(function() {
    if (!selenter) {
        $('.sel_options').hide();
        $('.sel_imul').removeClass('act');
    }
});

Напишем функцию которая будет превращать из обычного селекта такой т.е. писать за нас код, назовем его reselect():

function reselect(select, addclass) {

    addclass = typeof(addclass) != 'undefined' ? addclass : '';

    $(select).wrap('<div class="sel_wrap ' + addclass + '"/>');

    var sel_options = '';
    $(select).children('option').each(function() {
        sel_options = sel_options + '<div class="sel_option" value="' + $(this).val() + '">' + $(this).html() + '</div>';

    });

    var sel_imul = '<div class="sel_imul">\
                <div class="sel_selected">\
                    <div class="selected-text">' + $(select).children('option').first().html() + '</div>\
                    <div class="sel_arraw"></div>\
                </div>\
                <div class="sel_options">' + sel_options + '</div>\
            </div>';

    $(select).before(sel_imul);

}

Здесь что то нормально не удается показать функцию, можете посмотреть ее в демке

<div class="f_imulation_wrap">
    <div class="im_input">
        <input type="text"/>
    </div>
    <div class="im_button">
        <span class="inptext">Обзор</span>
        <input type="file" id="imulated" size="30"/>
    </div>
</div>

Теперь нужно как то расположить это правильно как я уже говорил “CSS”:

.im_input{
    float:left;
}
.im_input input{
    border:1px solid #9f9f9f;
    padding:2px;
    font-size:12px;
    width:250px;
    margin-right:4px;
}
.im_button{
    width:60px;
    height:19px;
    overflow:hidden;
    background:#aeaeae;
    border:1px solid #949494;
    position:relative;
}
.im_button.act{
    background:#bfbfbf;
}
.inptext{
    font-size:13px;
    line-height:19px;
    margin-left:12px;
    position:absolute;
}
#imulated{
    width:60px;
    border:none;
    opacity:0;
    filter: alpha(opacity=0);
    padding:0px;
    margin:0px;
    position:absolute;
}

Сейчас наша штука выглядит так:

$('#imulated').change(function(){

    $('.im_input input').val($(this).val());

});

Сделаем еще эффект при наведении для кнопки обзор, будем добавлять ему класс:

$('#imulated').mouseover(function(){

    $('.im_button').addClass('act');
    $(this).css('cursor','pointer');

});

$('#imulated').mouseout(function(){

    $('.im_button').removeClass('act');

});

Простым Css это к сожалению не получиться потому что :hover для имулирующей кнопки не срабатывает так как над ним находится прозрачный input.
Ну и последнее будем пробовать нажимать на инпут при нажатии на текстовое поле:

$('.im_input input').click(function(){

    $('#imulated').trigger('click');

});

К сожалению работать эта функция будет только в хроме и в сафари так как при онклик в других браузерах на инпут типа файл не срабатывает диалоговое окно.

Если вам нужно обменять валюту вам сюда ->обмен валюты

Ну и напоследок несколько видов того как он может выглядеть ото че то сероватый получился

HTML

Для начала создадим простой неупорядоченный список с пару элементами:

<ul class="mylist">
	<li>1. Element1</li>
	<li>2. Element2</li>
	<li>3. Element3</li>
</ul>

Теперь нам надо как то структурировать наши элементы для для удобного обращения к ним через javascript, также создадим три кнопки вверх, вниз и кнопку удаления. После преобразований код элемента выглядит следующим образом:

<li>
	<span class="num">1.</span>
	<span class="subj">Element1</span>

	<div class="top"></div>
	<div class="bottom"></div>
	<div class="delete"></div>
</li>

Далее нужно проделать тоже самое со всеми элементами. Теперь наши элементы имеют следующую структуру:

CSS

Зададим списку какую нибудь ширину и расположим посередине, еще уберем отступы зададим фон в общем вот:

.mylist{
    background:#eee;
    padding:0px;
    list-style:none;
    margin:0px;
    width:250px;
    margin:0px auto;
    border:1px solid #aaa;
    border-top:none;
  }

Дальше приступим к самим элементам списка, установим отступы (pdding), ну и какой нибудь эффект при наведении:

.mylist li{
    border-top:1px solid #aaa;
    padding:4px 7px;
    overflow:hidden;
  }
.mylist li:hover{
    background:#bbb;
  }

Теперь уже приступим к содержимому самих элементов это два span’a и три div’a начнем со span’ов:

.mylist .num{
    color:#000;
    width:30px;
    float:left;
  }
.mylist .subj{
    color:#444;
    width:150px;
    float:left;
  }

Цвет текста, ширины и float’a думаю достаточно, все таки это пост не о том как красивее оформить список . Дальше приступим к div’ам , кнопкам, скроем их и будем показывать только при наведении на элемент списка, ну еще разукрасим в разные цвета чтоб они отличались, допустим кнопка вверх будет зеленым цветом, вниз – оранжевым, кнопка удаления – красным:

.mylist div{
    visibility:hidden;
    cursor:pointer;
  }
.mylist li:hover div{
    visibility:visible;
  }
.mylist .top{
    height:17px;
    width:17px;
    float:left;
    background:green;
  }
.mylist .bottom{
    height:17px;
    width:17px;
    float:left;
    background:orange;
  }
.mylist .delete{
    height:17px;
    width:17px;
    float:left;
    background:red;
  }

Теперь мы имеем готовый стилизованный кое как список выглядящий вот так:

Javascript

Начнем раздел javascript чуть чуть не с javascript’a , я решил все таки вынести этот пункт сюда. Нашим кнопка следует прописать onclck равным функциям которые будут вызываться по нажатию на определенный тип кнопки. Вот список того кому че нужно прописывать:

• top – onclick=”move_top([здесь порядковый номер элемента в списке])”
• bottom – onclick=”move_bottom([здесь порядковый номер элемента в списке])”
• delete – onclick=”delete([здесь порядковый номер элемента в списке])”

В итоге элемент, допустим второй будет выглядеть так:

<li class="li2">

  <span class="num">2.</span>
  <span class="subj"> Elemen2</span>

  <div class="top" onclick="move_top(2)"></div>
  <div class="bottom" onclick="move_bottom(2)"></div>
  <div class="delete" onclick="delete_li(2)"></div>

</li>

И наконец приступим к javascript’у для начала создадим функцию создания элемента входным параметрами которого будут порядковый номер элемента в списке и текст создаваемого элемента:

function create_new_li(el_id,el_text){

    return '<li class="li'+el_id+'">\
      \
      <span class="num">'+el_id+'.</span>\
      <span class="subj"> '+el_text+'</span>\
      \
      <div class="top" onclick="move_top('+el_id+')"></div>\
      <div class="bottom" onclick="move_bottom('+el_id+')"></div>\
      <div class="delete" onclick="delete_li('+el_id+')"></div>\
      \
      \
    </li>';  

}//end of the function create_new_li

Функция как вы заметили не создает а просто возвращает строку содержащую разметку нового элемента. Начнем написание функция которые мы прописывали для кнопок. Итак функция move_top:

function move_top(el_id){

  if(el_id!=1){

    //узнаем ид верхнего li
    var top_li_id = el_id-1;

    //узнаем текст верхнего li
    var top_li_text = $('li.li'+top_li_id+' .subj').html();

    //удаляем верхний li
    $('li.li'+top_li_id).remove();

    //узнаем текст перемещаемого элемента
    var per_li_text = $('li.li'+el_id+' .subj').html();

    //создаем копию перемещаемого вверх элемента над ни же с другим ид
    var newli = create_new_li(top_li_id,per_li_text);
    $('li.li'+el_id).before(newli);

    //удаляем перемещаемый элемент
    $('li.li'+el_id).remove();

    //зодаем под до этого созданным элементом эелемент который был до этого над
    //перемещаемым вверх, создаем его с ид на 1 меньше
    var newli = create_new_li(el_id,top_li_text);
    $('li.li'+top_li_id).after(newli);

  }//end if

}//end of the function move_top

Вкратце как работает эта функция, она сперва удаляет элемент расположенный над перемещаемым, в данном случае вверх, и создает на его место копию своего элемента, но уже с другим порядковым номером и ид на один меньше, так как счет идет сверху вниз (ид и порядковый номер соводают точнее конец ид), затем она удаляет перемещаемый элемент и создает на его месте до этого удаленный элемент, опять же с другим ид (в этот раз на 1больше).
Тперь разберемся с другой функцией, которая перемещает наоборот вниз move_bottom:

function move_bottom(el_id){

   //узнаем количество элементов в списке
   var li_count = $('.mylist li').size();

   //проверяем не пытаемся ли мы сместить вниз последний элемент
   if(el_id!=li_count){

     //узнаем порядковый номер нижнего элемента
    var bot_li_id = el_id+1;

    //узнаем текст элемента расположенного под перемещаемым
    var bot_li_text = $('li.li'+bot_li_id+' .subj').html();

    //удаляем елемент расположенный под перемещаемым
    $('li.li'+bot_li_id).remove();

    //узнаем текст перемещаемого элемента
    var per_li_text = $('li.li'+el_id+' .subj').html();

    //создаем копию перемещаемого вниз элемента под ним же с другим ил +1
    var newli = create_new_li(bot_li_id,per_li_text);
    $('li.li'+el_id).after(newli);

    //удаляем перемещаемый элемент
    $('li.li'+el_id).remove();

    //создаем над созданным элементом копию элемнета котрый был расположен под
    //перемещаемым элементом
    var newli = create_new_li(el_id,bot_li_text);
    $('li.li'+bot_li_id).before(newli);

   }//end if

}//end function move_bottom

В принципе эта функция делает то же самое что и предыдущая только наоборот, даже описвать ниче не надо , комментариев тоже думаю достаточно.
Ну и последняя фукция для кнопки удаления элемента delete:

function delete_li(el_id){

  //узнаем количество элементов в списке
  var li_count = $('.mylist li').size();

  //если елемент не последний пересоздаем нижние элементы
  //с другими ид
  if(el_id!=li_count){

    //узнаем количество элементов после удаляемого
    var dif = li_count - el_id;

    //удаляем удаляемый элемент
    $('li.li'+el_id).remove();

    //копмруем порядковый номер удоля
    var count = el_id;

    //проходим циклом под элементам расположенныым под удаленным
    //и пересоздаем их
    for(i=1;i<=dif;i++){

      //узнаем порядковый номер следующего элемента
      var next_el = count*1 + 1;

      //узнаем текст следующего элемента
      var next_li_text = $('li.li'+next_el+' .subj').html();

      //пересоздаем элемент
      var newli = create_new_li(count,next_li_text);
      $('li.li'+next_el).before(newli);

      //удаляем элемент
      $('li.li'+next_el).remove();

      count++
    }

  }
  //если элемент последний просто удоляем его
  else{

    //удаляем элемент
    $('li.li'+el_id).remove();

  }//end else

}//end function delete_li

Функция сперва проверяет последний ли проверяемы элемент или нет, если последний просто удаляем его а если не последний удаляем элемент и пересоздаем нижние элементы с новыми порядковыми номерами.
Прогнозы на спорт
Вот и все вот и tutorial'у конец . Смотрим тестируем комментируем ->

HTML & CSS

Для начала создадим div который покроет все окно, нужно для того чтобы задняя часть лайтбокса была неактивной, также мы сможем сделать ее темнее, ну это уже по желанию. Создаем:

<div id="gogo_overly"></div>

Указываем для этого div’a следующие стили

height:100%;
width:100%;
opacity:0.5;
position:fixed;
top:0;
z-index:100;

Тоесть указываем диву 100% ширину и высоту, фиксированное позиционирование чтоб при скроллинге он не съезжал, и указываем 100ый z-index можно было поставить и поменьше но для надежности 100 z-index помогает делать все остальные элементы у которых z-index меньше 100 неактивными точнее они будут активными но будут расположены нашим дивом и не будут кликабельными, а активными будут только те элементы у которых z-index больше 100 , а это будут элементы нашего лайтбокса’.
Дальше собственно приступаем к созданию самого лайтбокса HTML будет примерно следующим- это четыре вложенных дива первые два для позиционирования по центру так удобней третий для эффекта прозрачных границ мы же хотим как в Facebook так как сами границы прозрачными не получиться седлать создаем этот третий див который будет больше последнего четвертого дива, и будет иметь прозрачный фон в итоге получиться такой эффект, ну и последний четвертый див в котором будет располагаться весь нужный контент. Естественно все дивы имеют разные ид:

<div id="gogo_wrap">
<div id="gogo_box" class="gogobox" style="top:125px; width:522px;">
		<div id="gogo_contant">
			<div id="gogo_last_cont">
				<h2 id="gogo_head">Загаовок лайтбокса</h2>
				<div id="gogo_must_change">
				Здесь будет контент
</div>
<div id="gogo_close_panel">
<button name="close-gogo_box" id="close-gogo_box" onclick="close_gogo_box();">Закрыть</button>
</div>
			</div>
		</div>
	</div>
</div>

Стили для дива с ид gogo_box вытащили наружу для того чтобы в дальнейшем нам было удобней управлять шириной и расположением лайтбокса через javascript, ну это все потом, а сейчас приступим к CSS. Ну для первых двух дивов которые мы как я говорил создали для позиционирования указываем следующие стили:

#gogo_wrap{
	height:0;
	left:0;
	overflow:visible;
	position:absolute;
	top:0;
	width:100%;
	z-index:101;
}
#gogo_box{
	height:0;
	margin:auto;
	overflow:visible;
	position:relative;
}

Далее стилизуем следующий див, а это див с id gogo_contant он должен иметь скругленные углы и прозрачный серый фон:

#gogo_contant{
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	-border-radius:8px;
	background:none repeat scroll 0 0 rgba(163, 163, 163, 0.7);
	padding:10px;
}

Как видно мы указали 8 пиксельное скругление углов, и сделали прозрачный фон, а padding нужен для того чтобы в дальнейшем он был больше следующего дива и получился эффект прозрачных границ в нашем случае границы будут шириной 10px. Далее преходим к стилизации остальных элементов нашего lightbox’а. Самое главное нужно указать для следующего дива непрозрачный, белый фон:

#gogo_last_cont{
	background:#fff;
}
h2#gogo_head{
	background:#829ACE;
	font-size:16px;
	font-weight:normal;
	padding:4px 6px;
	color:#fff;
	border-bottom:1px solid #333;
}
#gogo_close_panel{
	text-align:right;
	height:30px;
	border-top:1px solid #ccc;
	margin-top:4px;
}
button#close-gogo_box{
	border:1px solid #333;
	padding:3px;
	margin:3px 5px 3px 3px;
	background:#4B6EB9;
}
button#close-gogo_box:hover{
	color:#E6E6E6;
	cursor:pointer;
}

Вот и все со стилизацией мы закончили, в итоге у нас получилось то что показано снизу на картинке.

Javascript

Теперь давайте сделаем так чтобы эта вся штука появлялась по нажатию на что нибудь, допустим кнопку:

<button id="show_gogo_box">Открыть gogo_box</button>

Теперь давайте сделаем функцию которая будет создавать на нашей странице наш lightbox для этого будем использовать Jquery подключаем его, допустим с гугловсого архива:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js" type="text/javascript" language="javascript"></script>

Вот подключили, начинаем писать функцию сделаем ее чуточку гибкой так сказать, добавим возможность передавать функции заголовок и будущий контент содержащийся в лайтбоксе. Выглядит наша функция вот так:

function create_gogo_box(title,contant){
		$("body").append('<div id="gogo_wrap">\
			<div id="gogo_box" class="gogobox" style="top:125px; width:522px;">\
				<div id="gogo_contant">\
					<div id="gogo_last_cont">\
						<h2 id="gogo_head">'+title+'</h2>\
						<div id="gogo_must_change">\
						'+contant+'\
						</div>\
						<div id="gogo_close_panel">\
							<button name="close-gogo_box" id="close-gogo_box" onclick="close_gogo_box();">Закрыть</button>\
						</div>\
					</div>\
				</div>\
			</div>\
		</div>\
		<div id="gogo_overly"></div>');
	}

Далее делаем так чтоб при клике на кнопку которую мы создали до этого, а она была с ид show_gogo_box, вызывалась наша функция:

$('#show_gogo_box').click(function(){

	create_gogo_box('Здесь заголовок','Здесь контэнт')}

	);

Вот и все теперь осталось написать функцию для удаления лайтбокса со страницы, называться она должна close_gogo_box так как мы уже прописали ее для нашей кнопки, пишем:

function close_gogo_box(){
	$('#gogo_wrap').remove();
	$('#gogo_overly').remove();
	}

Ну а вот так он будет выглядеть с картинкой:

Посмотрели…что у нас получится) теперь приступим, создаем html документ с вот таким вот содержимым body:

<div class="slidshow">
  <img src="images/first.jpg">
  <img src="images/second.jpg">
  <img src="images/third.jpeg">
</div>

Ну здесь должно быть все понятно, див с тремя картинками находящимися от текущего html файла на расстоянии одной директории images, далее пишем css код:

.slidshow {
	position:relative;
}
.slidshow img {
	position:absolute;
	left:0;
	top:0;
	width:500px;
	height:375px;
}

Здесь мы ставим для картинок абсолютное позиционирование и ставим их левый верхний угол, ну и определяем для них одну ширину и высоту что бы при смене они не скакали ). Далее пишем Javascript код точнее jQuery )) но перед этим должны подключить его, лично я его всегда подключаю с гугла… примерно вот так вот:

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>

А теперь пишем такой вот код:

$(function(){
    $('.slidshow img:gt(0)').hide();//скрываем все картинки кроме 1го
      setInterval(function(){
      $('.slidshow :first-child').fadeOut()//анимированно скрываем 1ую картинку
         .next('img').fadeIn()//и показываем вторую
         .end().appendTo('.slidshow');},2000);//повторяем это каждые 2000 мс
});

Вот и все…

HTML

Наша Html разметка будет простенькой, создаем холст, то есть область в которой будут располагаться наши анимированные элементы иметь наш холст будет id=”content” располагаться он будет в div’e с id=”wrapper” для позиционирования, а внутри нашего так называемого холста будут располагаться картинки которые благодаря javascript’у будут двигаться или еще че нибудь. Вот код

<div id="wrapper">
   <div id="content">
      <div id="sun"><img src="images/sun.gif"/></div>
      <div id="cloud1"><img src="images/cloud1.png"></div>
      <div id="cloud2"><img src="images/cloud2.png"></div>
      <div id="cloud3"><img src="images/cloud3.png"></div>
      <div id="raft"><img src="images/raft.png"></div>
      <div id="raftripple"><img src="images/raftripple.gif"></div>
      <div id="greetings"><img src="images/greetings.png"></div>
      <div id="stamp"><img src="images/stamp.png"></div>
   </div>
</div>

CSS

Следующим шагом будет написание CSS кода, расположить наши картинки, указать размеры и т.д. Вот код, читаем комментарии:

*{ margin:0; padding:0; }
body { text-align: center; background: #111; }

/* Ширина должна совпадать с дочерним элементом #content */
#wrapper{ margin:0px auto; width:700px; }

/* На холст обязательно должен иметь следующие атрибуты position:relative/overflow:hidden */
#content{ position:relative; width:700px; height:300px; top:30px; overflow:hidden; border:5px solid #f5f5f5; background: url('images/scene_bg.jpg'); }
    /* распологаем наше солнце в нужном месте */
	#sun{ position:absolute; top:10px; left:30px; }

	/*отрицательные значения указываем для скрытия облаков, для последующего их выплывания */
	/* облака разбиты по слоям благодаря z-index чем он больше тем выше он будет находится */
	#cloud1{ position:absolute; top:60px; left: -150px; z-index:5; }
	#cloud2{ position:absolute; top:40px; left: -250px; z-index:4; }
	#cloud3{ position:absolute; top:25px; left: -100px; z-index:3; }

	#raft{ position:absolute; top:220px; left: 312px; z-index:20; }
	#raftripple{ position:absolute; top:220px; left: 309px; z-index:19; }

	/* наш текст #greeting скорее это не текст а изображение с текстом, имеют похожие на облака стили... */
	#greetings{ position:absolute; top:-51px; left: 200px; z-index:21; }
	#stamp{ position:absolute; top:5px; left: 801px; z-index: 21; }

После проделанных шагов у вас должно получится что то вроде этого:

Подготавливаем jQuery

Добавляем в наш header следующий код:

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
<script src="jquery.easing.1.3.js" type="text/javascript"></script>

Как вы заметили сам jQuery мы подключаем с самого сайта jQuery “http://jqueryjs.googlecode.com/files/jquery-1.3.2.js”, далее вам нужно скачать Easing Plugin и расположить его в той же директории что и ваша страница.

jQuery

Далее собственно начинаем писать сам javascript код для начала пишем следующий код который по истечению 300мс будет заново запускать определенную функцию в нашем случае это функция animation() которую мы затем создадим:

$(document).ready(function() {
	setTimeout("animation()",300);
});

Код означает то что после загрузки всех DOM элементов запуститься функция animation() и будет повторятся бесконечно каждые 300мс. Далее давайте напишем саму функцию animation(), выглядит она вот так:

function animation(){
	sun_raft();
	cloud1();
	cloud2();
	cloud3();
	$("#greetings").animate({top: '125px' }, {queue:false, duration:600, easing:'easeOutBounce'});
	$("#stamp").animate({left: '595px' }, {queue:false, duration:1200, easing:'easeOutBounce'});
}

Функция запускает 4 функции sun_raft(), cloud1(), cloud2(), cloud3() затем применяет анимацию к двум элементам #greetings и #stamp , где применяется наш подключенный плагин Easing plugin он увеличивает количество возможных вариантов атрибута easing он отвечает за равномерность анимации в нашем случае наши штамп и текст будут как бы подпрыгивать. Далее пишем 4 функции запускающиеся в функции animation() это sun_raft() для солнца и плота, cloud1() cloud2() cloud3() – анимации для трех облаков. Пишем:

		function sun_raft(){//анимации для солнца и плота
			$("#sun").animate({opacity:"0.7"},1000).animate({opacity:"1"},1000);//солнце будет менять прозрачность
			$("#raft").animate({top:"-=5px"},1000).animate({top:"+=5px"}, 1000);//плот будет двигаться вверх вниз
			$("#raftripple").animate({opacity:".1"},1000).animate({opacity:"1"},1000);//волны также будут менять прозрачность
			setTimeout("sun_raft()",2000);//функция будет запускаться каждые 200мс
		}
		function cloud1(){//функция для первого облака
			$("#cloud1").animate({left:"+=850px"},10000).animate({left:"-150px"}, 0);//будет двигаться от -150 лева до 850
			setTimeout("cloud1()",10000);//будет запускаться каждые 10000мс
		}
		function cloud2(){//аналогично для второго облака
			$("#cloud2").animate({left:"+=950px"},9000).animate({left:"-250px"}, 0)
			setTimeout("cloud2()",9000);
		}
		function cloud3(){//и для третьего
			$("#cloud3").animate({left:"+=800px"},6000).animate({left:"-100px"}, 0)
			setTimeout("cloud3()",6000);
		}

На рисунке показыны движения облаков: