iRead: логин через вКонтакте (16)
Основная документация на http://vk.com/pages.php?o=-1&p=Open%20API /index.html <script src="http://vkontakte.ru/js/api/openapi.js" type="text/javascript"></script> <script type="text/javascript" src="js/login.js"></script> <div class="login" id="vk_login"></div> /css/style.css .login { float: right; margin: 45px 0; padding: 0; } /js/main.js var uid = 0; $(document).ready( function() { make_VK_login(); read_AJAX_books(); read_AJAX_quotes(); make_tabs(); // Закладки make_sortable(); // Сортировка make_dialogs(); // Окошки } ); /js/login.js var baseURL = window.location.protocol + '//' + [...]
iRead: график в Raphael (15)
В php формирую строку для отчета (месяц, год…), Диаграмму (график по месяцам за год) делаю с помощью Raphael.js. При наведении на столбик, отображаются книги за этот период (показывать сколько в этом месяце закончено книг, сколько в этом месяце начато книг, сколько в этом месяце начато и закончено (прочитано) книг). Использую в этот раз JSON. Вдохновляюсь [...]
iRead: AJAX для статистики через JSON (14)
Делаю загрузку статистики по прочтенным книгам через аякс запрос, разбирая данные через json. Сначала прописываю в /index.html окошко <div id="dialog-modal" title="Стастика"></div> Теперь добавляю отображение этой статистики в /js/effects.js $( "#stats" ).click(function() { $( "#dialog-modal" ) .dialog( "open" ) .html('<p><b>Статистика прочитанных книг</b></p>\ <p align="center">\ идет загрузка данных…<br /><br />\ <img alt="warning" src="css/images/ajax-loader.gif" />\ </p>'); $.ajax({ url: [...]
Резюме (3)
Добавляю всплывающие подсказки для иконок социалок. Понравился туториал на http://www.queness.com/post/92/create-a-simple-cssjavascript-tooltip-with-jquery. И хороший плагин есть на http://file.urin.take-uma.net/jquery.balloon.js-Demo.html. Добавил стили #tooltip { position: absolute; z-index: 9999; top: 0; left: 0; padding: 5px; font-size: 0.8em; font-weight: normal; width:160px; display: none; box-shadow: rgb(120, 120, 120) 4px 4px 4px; } В конце добавляю тень к всплывающей подсказке. Добавил в индексный [...]
iRead: Делаю кнопку восстановления записей (13)
Делаю кнопку для восстановления начального набора книг. В индексный файл прописываю новую кнопку рядом с кнопкой добавления новой книги <li><img class="buttons" id="restore" alt="restore defautl" src="css/images/restore.png" /></li> И ниже добавляю окно диалога <div id="dialog-restore-default" title="Вернуть базовые книги?"> <div> <div style="float: left;"> <img alt="warning" src="css/images/warning.png" /> </div> <div style="text-align: center; padding-top: 5px;"> Действительно надо вернуть как было? [...]
iRead: Добавление книг (12)
Сейчас делаю добавление новых книг. В индексном файле /index.html создаю окошко с формой для новой книги <div id="dialog-add-book" title="Добавить книгу"> <div> <div style="float: left;"> <img alt="add_new" src="css/images/add_new.png" /> </div> <div style="text-align: center; padding-top: 5px;"> Добавить новую книгу </div> </div> <div> <form> <fieldset> <div> <label for="title">Название</label> <input type="text" name="title" id="title" maxlength="50" value="" class="text ui-widget-content ui-corner-all" /> [...]
Резюме (2)
Захотелось добавить в резюме возможность просмотра по скиллам, а то как-то совсем грустно и скучно. В индексный файл добавляю окошко со скиллами <div class="skills_box ui-corner-bl"> <div id="full_button" class="skills ui-state-error ui-corner-all">Full CV</div> <div id="webdev_button" class="skills ui-state-error ui-corner-all">WebDev</div> <div id="frontend_button" class="skills ui-state-error ui-corner-all">FrontEnd</div> <div id="admin_button" class="skills ui-state-error ui-corner-all">Admin</div> <div id="other_button" class="skills ui-state-error ui-corner-all">Other</div> </div> А сами силы [...]
Резюме
Решил сделать себе онлайн резюме, шоб було як у всих. Делаю заготовку хтмл <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>e1r0nd</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link type="text/css" href="css/ui-lightness/jquery-ui-1.8.17.custom.css" rel="stylesheet" /> <link type="text/css" href="css/style.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="js/jquery-ui-1.8.17.custom.min.js"></script> <script type="text/javascript" src="js/script.js"></script> </head> <body> <div class="cv ui-widget ui-widget-content ui-corner-all "> [...]
iRead: Удаление книг (11)
Первым делом сделаю удаление книг. Для этого правлю строки с книгами, чтобы у каждой пиктограммы был свой идентификатор. Т.е. в /js/book.js меняю строку на result += '\ <tr id="book_'+$("id", book).text()+'">\ <td>\ <div class="edit">\ <img id="id_edit_'+$("id", book).text()+'" alt="edit" src="css/images/edit.png" />\ <img id="id_delete_'+$("id", book).text()+'" alt="delete" src="css/images/delete.png" />\ </div>\ <div class="book_content">\ <strong>«'+$("title", book).text()+'»</strong> <em>'+$("author", book).text()+'</em><br />\ <small>'+$("started_at", book).text()+' [...]
iRead: загрузка книг через AJAX – Клиент (10)
Поскольку проект немного разросся, изменяю структуру файлов. Из индексного файла все из блока выкидываю в файл /js/effects.js и создаю файл /js/books.js, в котором будет работа с книгами. Еще я создаю файл /js/main.js, в котором буду работать с функцией $(document).ready. И поэтому и содержимое файла эффектов будет не точная копия, а все раскидано по именованным функция [...]