Зачем открывать локальные файлы через JavaScript?

Загрузка файлов через обычные HTML формы очень неудобна. Люди часто используют его допустим при передаче нескольких мегобайт фотографий со своей камеры на сервер. Если предположить что они знают местоположение фотографий, то загрузка может занять несколько минут, но это только если все будет хорошо и форматы и разамеры будут подходящими, а что если нет? До сих пор разработчикам приходилось пологаться на Flash или другие плагины для обеспечение удобства. Предварительная обработка с помощю Javascript‘a имеет ряд преимуществ:

• Локальная обработка файлов происходит на много быстрей.
• Файлы могут быть проанализированны, чтобы убедиться, что они в правильном формате и ниже, орпеделенного размера.
• Такие файлы как картинки могут быть просмотренны перед загрузкой.
• Можно обрезать или изменить размер изображения перед загрузкой с помощю canvas.

Объект FileReader.

FileReader является частью W3C File API и предостовляет четыре метода для асинхронной загрузки данных из ссылки к объекту File.

• .readAsText(File f, [кодировка]) – считывает файл как строку. По умолчанию в кодировке UTF-8, но можно передать и другой формат.
• .readAsDataURL(File f) – как закодированный URL.
• .readAsBinaryString(File f) – как двоичный код.
• .readAsArrayBuffer(File f) – как объект ArrayBuffer.

В следующем коде будем использовать превые два метода для загрузки и отображения текста и картинок.

Асинхронное открытие файлов с помощю Javascipt.

Вот наша исхлдная функция ParseFile() в который предаются выбранные или перетащенные на элемент #filedrag файлы.

function ParseFile(file) {

	Output(
		"<p>Информация о файле: <strong>" + file.name +
		"</strong> тип: <strong>" + file.type +
		"</strong> размер: <strong>" + file.size +
		"</strong> байт</p>"
	);

}

После обновления статуса, мы проверяем является ли переданный файл текстовым (text/plain, text/html, text/css, и т.д.), загружаем его используя метод FileReader.readAsText() и выводим результат:

// выводим текст
if (file.type.indexOf("text") == 0) {
	var reader = new FileReader();
	reader.onload = function(e) {
		Output(
			"<p><strong>" + file.name + ":</strong></p><pre>" +
			e.target.result.replace(/</g, "<").replace(/>/g, ">") +
			"</pre>"
		);
	}
	reader.readAsText(file);
}

Точно также мы можем проверить, если у нас файл является картинкой (image/jpeg, image/gif, image/png и т.д.) загрузить его как data URL используя метод FileReader.readAsDataURL() и передать это все дело как src атрибут для элемента img:

// выводим картинку
if (file.type.indexOf("image") == 0) {
	var reader = new FileReader();
	reader.onload = function(e) {
		Output(
			"<p><strong>" + file.name + ":</strong><br />" +
			'<img src="' + e.target.result + '" /></p>'
		);
	}
	reader.readAsDataURL(file);
}

Продажа фирм

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

Сейчас я особо не занимаюсь этим сайтом так как готовлюсь к ЕГЭ, чтоб его. Так вот, все думаю когда то писали шпоры, а я решил написать прогу, скорее 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'у конец . Смотрим тестируем комментируем ->

Условные комментарии

Условные комментарии работают только на IE под Windows для других браузеров это обычные HTML комментарии и они их игнорируют. Структура условных комментариев следующая:

<!--[if условие]> HTML <![endif]-->

Условие в комментариях можно поставить довольно токи гибкое. Вот список операторов которые можно использовать в условии:

• ! – отрицание
• lt – меньше
• gt – больше
• lte – меньше или равно
• gte – больше или равно

Примерно так их надо использовать:

<!--[if gte IE 6]>
	HTML код расположенный здесь будет работать только для браузеров IE6 и выше соответственно IE7, IE8
<![endif]-->

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

<!--[if IE 6]>
	HTML код расположенный здесь будет виден только для IE 6
<![endif]-->

Чаще всего условные комментарии используют для подключения стилей для определенного браузера, вот)). С условными комментариями вроде все. Далее рассмотрим хаки которые пишутся внутри самих стилей путем добавления звездочек и все такое.

Хаки для IE6

Первый способ это добавление знака подчеркивания(_) перед свойством тем самым это свойство будет восприниматься только IE6. Например так:

body{
    _background:#ooo;
}

Второй способ добавление следующего кода вот этого *html перед селекторами тем самым теперь уже все свойства становятся видны для IE6 и ниже. Примерно так:

*html body{
    background:#000;
}

Хаки для IE7

Для IE7 существует большое количество хаков все даже наверное не получиться рассмотреть, потому что я их все и не знаю Ну начнем с хака который похож на последний рассмотренный хак для IE6, полоучается он путем добавления *+html перед селектором. Пример:

*+html body{
    background:#000;
}

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

html>/**/body {
    background:#000;
}

Следующий хак опять же добавляется перед селектором после чего свойства работают только для IE7, но на мой взгляд он немножко громоздкий *:first-child+html вот собственно что нужно добавить перед селектором. Пример:

*:first-child+html body{
    background:#000;
}

Хак который рассмотрим далее будет работать в IE7 и во всех современных браузерах, наверное такое тоже иногда бывает нужно . Пример:

html>body {
    background:#000;
}

Ну и последний хак для ie7, добавляем перед свойством звездочку и все чики пуки:

body {
    *background:#000;
}

Хак для IE8

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

body {
 background: #000\0/;
}
/*свойство следует добавлять в последнюю очередь*/

Вот и все вроде как, если кто знаком еще с какими то хаками пишем в комментарии

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();
	}

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

// проверяем передали ли нам месяц и год
if(isset($_GET["ym"])){

	$year  = (int)substr($_GET["ym"], 0, 4);
	$month = (int)substr($_GET["ym"], 4, 2);

}
else{ // иначе выводить текущие месяц и год

	$month = date("m", mktime(0,0,0,date('m'),1,date('Y')));
	$year  = date("Y", mktime(0,0,0,date('m'),1,date('Y')));

}

$skip          = date("w", mktime(0,0,0,$month,1,$year)) - 1; // узнаем номер дня недели
if($skip < 0){
	$skip = 6;
}
$daysInMonth   = date("t", mktime(0,0,0,$month,1,$year));	// узнаем число дней в месяце
$calendar_head = '';	// обнуляем calendar head
$calendar_body = '';	// обнуляем calendar boday
$day = 1;	// для цикла далее будем увеличивать значение

for($i = 0; $i < 6; $i++){ // Внешний цикл для недель 6 с неполыми

	$calendar_body .= '<tr>';	// открываем тэг строки
	for($j = 0; $j < 7; $j++){	// Внутренний цикл для дней недели

		if(($skip > 0)or($day > $daysInMonth)){ // выводим пустые ячейки до 1 го дня ип после полного количства дней

			$calendar_body .= '<td class="none"> </td>';
			$skip--;

		}
		else{

			if($j == 0)	// если воскресенье то омечаем выходной
				$calendar_body .= '<td class="holiday">'.$day.'</td>';
			else{	// в противном случае просто выводим день в ячейке
				if ((date(j)==$day)&&(date(m)==$month)&&(date(Y)==$year)){//проверяем на текущий день
					$calendar_body .= '<td class="today">'.$day.'</td>';
				}
				else{
					$calendar_body .= '<td class="day">'.$day.'</td>';
				   }
				 }
			$day++; // увеличиваем $day
		}

	}
	$calendar_body .= '</tr>'; // закрываем тэг строки
}

// заголовок календаря
$calendar_head = '
  <tr>
	<th colspan="2"><a href="?ym='.date("Ym", mktime(0,0,0,$month-1,1,$year)).'">« Пред</a></th>
  	<th colspan="3">'.date("F, Y", mktime(0,0,0,$month,1,$year)).'</th>
  	<th colspan="2"><a href="?ym='.date("Ym", mktime(0,0,0,$month+1,1,$year)).'">След »</a></th>
  </tr>
  <tr>
    <th>Понедельник</th>
    <th>Вторник</th>
    <th>Среда</th>
    <th>Четверг</th>
    <th>Пятница</th>
    <th>Суббота</th>
    <th>Воскресенье</th>
  </tr>';

Я думаю здесь уже нечего объяснять комментариев кажется достаточно, единственно я бы хотел пояснить почему 6 строк ведь недель в месяце всего четыре так вот, так как мы месяц начинаем выводить не с понедельника, то есть месяц не всегда начинается с понедельника, у нас появляются неполные недели и посчитав максимальное количество неполных и полных недель вы получите шесть недель вот поэтому и шесть). Но так как 6 недель встречаются не очень часто, то последняя строка в таблице чаще всего будет пустой.
Далее осталось написать HTML код и вывести в нужных местах $calendar_head и $calendar_body, ну и прописать CSS стили. Рассмотрим содержание тега <body>:

<!-- таблица для вывода календаря -->
<table id="calendar" width="710" border="1" cellspacing="0" cellpadding="5">
	<thead>
		<?php echo $calendar_head; ?>
	</thead>
	<tbody>
		<?php echo $calendar_body; ?>
	</tbody>
</table>
<!-- таблица для вывода календаря -->

Как видим календарь состоит полностью из таблицы заголовка и тела. Теперь наш календарь выглядит примерно аот так:

body{
	margin:0 auto;
	width:800px;
	padding:10px;
}
#calendar{
	border:0px;
}
#calendar tbody tr{
	height:40px;
}
#calendar td{
	width:80px;
	border:0px;
	border:solid 1px #99FF99;
	font-size:22px;
	text-align:center;
}
#calendar th{
	background-color:#4DDBFF;
	border:solid 1px #00CCFF;
	color:#ffffff;
}
#calendar td.none{
	border:0px;
}
#calendar td.holiday{
	background-color:#FF6633;
	border-color:#FF531A;
	color:#94E4FF;
}
.day{
	background-color:#CCFFCC;
	color:#00B32D;
}
#calendar td.today{
	background-color:#FFFF99;
	border-color:#FF531A;
}

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