Quick.Cart 1.4 RUS
Скрипт магазина работающей без БД, на текстовых файлах...
Скрипт магазина работающей без БД, на текстовых файлах...
Для формирования правильного отображения сайта и его корректного отображения, используется CSS. Вся адаптация совершается с помощью определенных параметров, о которых знает каждый верстальщик, останавливаться на которых мы не будем. При верстке, часто используются скрипты, для определенных анимацией, эффектов, появления или исчезновения элементов и тд. бывает так, что применение чего-то подобного, очень красиво смотрится в полноценной версии сайта, но на мобильном отвлекает или вообще мешает. Стилями CSS, можно скрыть много элементов, но иногда простое скрытие не помогает, нужно именно отменить действие скрипта.
Именно для этого существует скрипт, который и помогает решить подобные задачи. Носит название он - Current Device. Суть данного скрипта в том, что он добавляет на страницу классы, в зависимости от того, на каком устройстве просматривается сайт.
В примере можете протестировать страницу файрбагом. Выбрать разные устройства. Чтобы добавлялся соответственный класс, нужно перезагружать страницу. Как видно на странице примера список классов, что могут быть добавлены. Соответствующий класс присваивается тегу <html>. Скачать архив с скриптом.
На странице примера указаны следующие параметры и классы к ним, давайте их разберем.
Тип устройства - классы данной категории присваиваются в зависимости от устройства на котором открыт сайт:
.mobile - класс что присваивается, если страница открыта на мобильном устройстве.
.tablet - класс что присваивается, если страница открыта на планшете.
.desktop - класс что присваивается, если страница открыта на персональном компьютере.
Положение устройства - классы этой категории присваиваются в зависимости от положения, ориентации устройства. То есть, экран устройства в горизонтальном или вертикальном положении.
.portrait - класс что присваивается, если устройство имеет вертикальную ориентацию.
.landscape - класс что присваивается, если устройство имеет горизонтальную ориентацию.
Операционная система - классы данной категории присваиваются в зависимости от того какая операционная система установлена на устройстве. Данные классы пригодятся если важно отображать разные элементы для устройств с разной ОС.
.ios, .iphone, .ipad, .ipod, .android, .blackberry, .macos, .windows, .fxos, .meego, .television - классы с названием операционных систем, что и будут присвоены.
В моей практике, данный скрипт выручал меня несколько раз ,в основном благодаря классам .mobile и .desktop. Скорее всего и вам именно они и понадобятся. Как и говорил в начале статьи, данные классы не для CSS, хотя и там можно их использовать. Эти классы скорее для скриптов, когда нужно заставить работать скрипт, только при наличии класса на странице. Примерная функция выглядит так:
$('.mobile .block').click(function(){ //СЮДА КОД ФУНКЦИИ ДЛЯ МОБИЛЬНОГО УСТРОЙСТВА });
$('.desktop .block').click(function(){ //СЮДА КОД ФУНКЦИИ ДЛЯ КОМПЬЮТЕРА });
В принципе, данная инструкция может быть актуальной и для других форм и плагинов, для которых нужен бот в Телеграм. Суть у всех одна, боты создаются одинаково. Главное что нужно после создания это Токен вашего бота и ID чата куда он добавлен или чата самого бота.
Если подключить к форме отправку на Телеграм или вы используете один из моих плагинов, то вы будете получать оповещения прям в мессенджер.
Как создать бота
1. Первым делом, у вас должен быть установлен мессенджер Telegram. На телефоне или ПК, а желательно и там и там. Я буду показывать на примере ПК, но на телефоне все то же самое.
2. Далее нужно найти через поиск в мессенджере главного бота, что создает других. Это BotFather - единственный бот, который управляет ими всеми. Используйте его для создания новых учетных записей ботов и управления существующими ботами. Найдите и нажмите на него, чтобы открылся его чат.
3. Теперь нужно запустить BotFather. Для этого нужно нажать кнопку ЗАПУСТИТЬ внизу чата или написать в чат /start, если вместо кнопки у вас поле для ввода.
4. После запуска появится список команд, переместитесь в начало сообщения и нажмите на команду /newbot или просто пропишите эту команду через поле сообщения.
5. Теперь BotFather предложит вам назвать своего бота. Это название вы будете видеть в списке контактов. В примере бот назван как testmailbot. Можете называть как угодно, например: Бот для формы контактов, Бот какого-то плагина, Мой бот с сайта и тд. Без разницы, лишь бы вы понимали что это за бот и если у вас их будет много, вы их не путали.
6. Далее BotFather предложит вам указать имя бота. Вот тут нужно быть внимательным. Имя бота вводится только латиницей и в конце должно заканчиваться на bot. В примере это testmailbot_bot. Задавайте что хотите, если имя будет существовать, BotFather вас предупредит. Так что придумайте что-то уникальное.
7. Если вы задали правильное имя, то BotFather напишет вам, что все готово и вашему боту присвоен Токен, который понадобится для доступа через HTTP API. Этот токен нам и нужен для того, чтобы формы отправляли свои данные в Телеграм.
8. Теперь найдем и запустим нашего бота. Для этого в поиске контактов в Telegram найдите бота и нажмите на него.
9. Так же нужно запустить бота. Внизу есть кнопка ЗАПУСТИТЬ или напишите в чат /start, если вместо кнопки у вас поле для ввода.
Это еще не конец. Если вы не хотите создавать групповой чат для многих ботов, если у вас одна форма или один плагин или вы хотите чтобы данные со всех форм приходили только к одному боту, что вполне нормально, то можно пропустить следующие 4 шага и перейти к пункту - 12.
8. Чтобы добавить бота в групповой чат, если вы захотите иметь несколько ботов для нескольких форм, то вам нужно перейти в настройки Telegram и выбрать пункт - Создать группу.
9. Далее нужно ввести название для группы. Вводите какое вам нравится.
10. Теперь нужно добавить участников в группу, то бишь нашего бота. Есть 2 способа. Можно просто на странице самого бота нажать на его настройки и там выбрать пункт Добавить в группу. После чего вам предложит ваши собственные группы. Выберите ту что создали только что для ботов и все. Второй вариант - нажмите на настройки группы и выберите пункт - Добавить участников.
11. Перед вами появится окно поиска, введите в поле имя своего бота, то что вводили в пункте 6. Возможно, найдется несколько ботов, но только у одного будет точное название, в нашем примере это @testmailbot_bot. Когда найдете своего бота, выделите и нажмите кнопку - Добавить.
12. Последнее что нужно сделать чтобы передавать данные с форм которые поддерживают передачу на Телеграм, это получить ID чата. Тут два варианта. Если вы используете только чат бота, то ID один, если чат группы с ботами, то ID другой. Чтобы узнать нужный ID, нужно в адресной строке браузера перейти по ссылке, которую нужно сформировать.
https://api.telegram.org/botХХХХХХХХХХХХХХХХХХХХХХХХХХХХХХХ/getUpdates
Вместо ХХХХХХХХХХХХХХХХХХХХХХХХХХХХХХХ нужно вставить тот токен, который вам дал BotFather в пункте 7, этой инструкции.
Если вы используете мой плагин с возможностью отправки оповещений на телеграмм, то можете прям в настройках плагина перейти по готовой ссылке, главное сначала добавьте в нужное поле токен и сохраните, после ссылка станет рабочей.
Рекомендую открывать ссылку в браузере Mozilla Firefox. В нем данные отображаются сгруппировано и очень легко понять где нужный ID. Где чат бота, где чат группы, если вы в нее добавили бота.
Все преобразование мы совершим с помощью стилей CSS и jQuery. Когда вы изучите материал, то увидите, что можно обойтись только CSS, но тогда не будет видно какой файл выбран. как раз для динамики и будет использоваться jQuery. Когда все будет закончится, результат будет примерно следующим:
И так не будем втягивать и приступим к нашей задаче.
Для начала нужна разметка HTML. У меня будет свой код, у вашей формы свой. Главное, вы должны заменить свое поле выбора файла на мое или подогнать свое под основные параметры моего. Обычное поле добавления файла выглядит примерно так:
<input type="file" name="file">
<div class="fl_upld"> <label><input id="fl_inp" type="file" name="file">Выберите файл</label> <div id="fl_nm">Файл не выбран</div> </div>
.fl_upld{width:300px;} #fl_inp{display:none;} .fl_upld label{ cursor:pointer; background:#36c; border-radius:3px; padding:10px 25px; color:#fff; font-weight:bold; text-align: center; } .fl_upld label:hover{background:#fc0;} #fl_nm{ margin-top:20px; color:#f00;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <p>Далее уже сам скрипт.</p> <script> $(document).ready( function() { $("#fl_inp").change(function(){ var filename = $(this).val().replace(/.*\\/, ""); $("#fl_nm").html(filename); }); }); </script>
Суть данного способа в том, что с помощью Произвольных полей, в которые записывается количество нажатий на кнопку Нравится к статье. У каждой записи WordPress есть свои уникальные произвольные поля. Их может быть бесконечное количество, все зависит от того, что вы в них записываете.
И так, приступим к системе лайков на WordPress. Для начала надо добавить код функции и не одной, которые будут выполнять подсчет лайков и запись их в базу данных. Открываете файл пользовательских функций function.php и добавляете код в самый конец перед закрывающим тегом PHP ?>. Если его нет, то просто в самый конец.
Перед изменением function.php, обязательно сохраните его копию, чтобы в дальнейшем, в случаи ошибки, вернуть все как было. Так же, можете использовать дочернюю тему.
wp_enqueue_script('like_post', get_template_directory_uri().'/js/post-like.js', array('jquery'), '1.0', true ); wp_localize_script('like_post', 'ajax_var', array( 'url' => admin_url('admin-ajax.php'), 'nonce' => wp_create_nonce('ajax-nonce') ));
add_action('wp_ajax_nopriv_post-like', 'post_like'); add_action('wp_ajax_post-like', 'post_like');
function post_like(){ $nonce = $_POST['nonce']; if ( ! wp_verify_nonce( $nonce, 'ajax-nonce' ) ) die ( 'Busted!'); if(isset($_POST['post_like'])){ $ip = $_SERVER['REMOTE_ADDR']; $post_id = $_POST['post_id']; $meta_IP = get_post_meta($post_id, "voted_IP"); $voted_IP = $meta_IP[0]; if(!is_array($voted_IP)) $voted_IP = array(); $meta_count = get_post_meta($post_id, "votes_count", true); if(!hasAlreadyVoted($post_id)){ $voted_IP[$ip] = time(); update_post_meta($post_id, "voted_IP", $voted_IP); update_post_meta($post_id, "votes_count", ++$meta_count); echo $meta_count;} else echo "already";} exit;}
function hasAlreadyVoted($post_id){ global $timebeforerevote; $timebeforerevote = 120; $meta_IP = get_post_meta($post_id, "voted_IP"); $voted_IP = $meta_IP[0]; if(!is_array($voted_IP)) $voted_IP = array(); $ip = $_SERVER['REMOTE_ADDR']; if(in_array($ip, array_keys($voted_IP))){ $time = $voted_IP[$ip]; $now = time(); if(round(($now - $time) / 60) > $timebeforerevote) return false; return true;} return false;}
function getPostLikeLink($post_id){ $vote_count = get_post_meta($post_id, "votes_count", true); $output = ''; if(hasAlreadyVoted($post_id)){ $output .= '<div class="svg_bottom_ico"><div class="like_ico is-active">Нравится </div></div>'; $output .= '<span class="likecount"> '.$vote_count.'</span>'; }else{ $output .= '<div class="svg_bottom_ico"><div class="like_ico noactive_svg" data-post_id="'.$post_id.'">Нравится </div></div>'; $output .= '<span class="likecount"> '.$vote_count.'</span>'; } return $output; }
jQuery(document).ready(function($){ $(".noactive_svg").click(function(event){ heart = $(this); post_id = heart.data("post_id"); $.ajax({ type: "post", url: ajax_var.url, data: "action=post-like&nonce="+ajax_var.nonce+"&post_like=&post_id="+post_id, success: function(count){ if(count != "already"){ heart.addClass("is-active"); heart.parent().next(".likecount").text(count); } } }); return false; }); });
if (have_posts()) : while (have_posts()) : the_post(); //ТУТ КОД ДЛЯ ЗАПИСЕЙ, ВЫВОД ЗАГОЛОВКОВ, МИНИАТЮР, ТЕКСТА И ТД. endwhile;endif;
// В СРЕДУ PHP echo getPostLikeLink(get_the_ID()); // В СРЕДУ HTML <?php echo getPostLikeLink(get_the_ID()); ?>
Вывод картинки, текста и описания для сайта, осуществляется благодаря разметке Open Graph. Она как раз и создана для того, чтобы вы видели картинку, название и краткое описание для ссылки, вместо обычного УРЛ. Ведь так же красивее, понятнее и намного эффективнее. Но от куда берется эта разметка Open Graph, если вы ее не добавляли на сайт?
Если вы используете какую-то систему для управления сайтом, в народе "Движок", то скорее всего вы устанавливаете плагины, модули, дополнения и тд. У каждого движка свои названия этих дополнительных опций. Суть в том, что некоторые из них, что рассчитаны на работу в СЕО области и там или автоматически определяются параметры для вывода Open Graph или же вы прописываете, даже не задумываясь для чего. Например, у WordPress, в этом вопросе самый популярный плагин - SEO by Yoast. Так же, часто все формируется автоматически, даже если нет ни плагинов ни разметки. Соцсети и мессенджеры просто берут первую попавшуюся картинку с сайта, тайтл и какой-то текст или описание страницы. Хорошо, если картинку угадает или хотя бы лого поставит, но иногда так бывает, что ставит что попало. Например, иконку какую-то или вообще фон сайта. Согласитесь, это не всегда может понравится.
Чтобы все отображалось корректно, советую на своих системах установить соответствующие плагины, с помощью которых будет произведена настройка разметки Open Graph. Если у вас самописный сайт или лендинг, то можете установить стандартные настройки для главной страницы. Чтобы это сделать, можете добавить некоторые теги в шапку страницы.
<meta property="og:title" content=""> <meta property="og:site_name" content=""> <meta property="og:url" content=""> <meta property="og:description" content=""> <meta property="og:image" content="">
<meta property="og:title" content="Как задать картинку для сайта при публикации в соцсетях или мессенджерах. "> <meta property="og:site_name" content="Дизайн и разработка сайтов"> <meta property="og:url" content="https://gnatkovsky.com.ua/kak-zadat-kartinku-dlya-sajta-pri-publikacii-v-socsetyax-ili-messendzherax.html"> <meta property="og:description" content="Сегодня речь пойдет о том, как сделать, чтобы при публикации ссылки на сайт в соцсетях, там выводилась нужная картинка, текст и описание."> <meta property="og:image" content="https://gnatkovsky.com.ua/wp-content/uploads/2017/08/01092017001.jpg">
В последние годы популярность git демонстрирует взрывной рост. Эта система контроля версий используется различными проектами с открытым исходным кодом.
Новичков часто пугает большое количество замысловатых команд и сложных аргументов. Но для начала все они и не нужны. Можно начать с изучения наиболее часто используемых команд, и после этого постепенно расширять свои знания. Именно так мы и поступим в этой статье. Поехали!
Основы
Git — это набор консольных утилит, которые отслеживают и фиксируют изменения в файлах (чаще всего речь идет об исходном коде программ, но вы можете использовать его для любых файлов на ваш вкус). С его помощью вы можете откатиться на более старую версию вашего проекта, сравнивать, анализировать, сливать изменения и многое другое. Этот процесс называется контролем версий. Существуют различные системы для контроля версий. Вы, возможно, о них слышали: SVN, Mercurial, Perforce, CVS, Bitkeeper и другие.
Git является распределенным, то есть не зависит от одного центрального сервера, на котором хранятся файлы. Вместо этого он работает полностью локально, сохраняя данные в папках на жестком диске, которые называются репозиторием. Тем не менее, вы можете хранить копию репозитория онлайн, это сильно облегчает работу над одним проектом для нескольких людей. Для этого используются сайты вроде github и bitbucket.
Установка
Установить git на свою машину очень просто:
Linux — нужно просто открыть терминал и установить приложение при помощи пакетного менеджера вашего дистрибутива. Для Ubuntu команда будет выглядеть следующим образом:
sudo apt-get install git
brew install git
git config --global user.name "My Name" git config --global user.email myEmail@example.com
$ mkdir Desktop/git_exercise/ $ cd Desktop/git_exercise/ $ git init
Initialized empty Git repository in /home/user/Desktop/git_exercise/.git/
$ git status On branch master Initial commit Untracked files: (use "git add ..." to include in what will be committed) hello.txt
$ git add hello.txt
$ git add -A
$ git status On branch master Initial commit Changes to be committed: (use "git rm --cached ..." to unstage) new file: hello.txt
$ git commit -m "Initial commit."
# This is only an example. Replace the URI with your own repository address. $ git remote add origin https://github.com/tutorialzine/awesome-project.git
$ git push origin master Counting objects: 3, done. Writing objects: 100% (3/3), 212 bytes | 0 bytes/s, done. Total 3 (delta 0), reused 0 (delta 0) To https://github.com/tutorialzine/awesome-project.git * [new branch] master -> master
$ git clone https://github.com/tutorialzine/awesome-project.git
$ git pull origin master From https://github.com/tutorialzine/awesome-project * branch master -> FETCH_HEAD Already up-to-date.
$ git branch amazing_new_feature
$ git branch amazing_new_feature * master
$ git checkout amazing_new_feature
$ git add feature.txt $ git commit -m "New feature complete.”
$ git checkout master
$ git merge amazing_new_feature
$ git branch -d awesome_new_feature
[spoiler title='Вывод git log'] $ git log commit ba25c0ff30e1b2f0259157b42b9f8f5d174d80d7 Author: Tutorialzine Date: Mon May 30 17:15:28 2016 +0300 New feature complete commit b10cc1238e355c02a044ef9f9860811ff605c9b4 Author: Tutorialzine Date: Mon May 30 16:30:04 2016 +0300 Added content to hello.txt commit 09bd8cc171d7084e78e4d118a2346b7487dca059 Author: Tutorialzine Date: Sat May 28 17:52:14 2016 +0300 Initial commit[/PLAIN]
[PLAIN][spoiler title='Вывод git show'] $ git show b10cc123 commit b10cc1238e355c02a044ef9f9860811ff605c9b4 Author: Tutorialzine Date: Mon May 30 16:30:04 2016 +0300 Added content to hello.txt diff --git a/hello.txt b/hello.txt index e69de29..b546a21 100644 --- a/hello.txt +++ b/hello.txt @@ -0,0 +1 @@ +Nice weather today, isn't it?[/PLAIN]
[spoiler title='Вывод git diff'] $ git diff 09bd8cc..ba25c0ff diff --git a/feature.txt b/feature.txt new file mode 100644 index 0000000..e69de29 diff --git a/hello.txt b/hello.txt index e69de29..b546a21 100644 --- a/hello.txt +++ b/hello.txt @@ -0,0 +1 @@ +Nice weather today, isn't it?[/PLAIN]
$ git checkout 09bd8cc1 hello.txt
$ git revert HEAD
$ git revert b10cc123
// Use a for loop to console.log contents. for(var i=0; i<arr.length; i++) { console.log(arr[i]); } Тим предпочитает forEach: // Use forEach to console.log contents. arr.forEach(function(item) { console.log(item); });
$ git merge tim_branch Auto-merging print_array.js CONFLICT (content): Merge conflict in print_array.js Automatic merge failed; fix conflicts and then commit the result.
[spoiler title='Вывод'] <<<<<<< HEAD // Use a for loop to console.log contents. for(var i=0; i<arr.length; i++) { console.log(arr[i]); } ======= // Use forEach to console.log contents. arr.forEach(function(item) { console.log(item); }); >>>>>>> Tim's commit.[/PLAIN]
// Not using for loop or forEach. // Use Array.toString() to console.log contents. console.log(arr.toString()); Когда все готово, нужно закоммитить изменения, чтобы закончить процесс: $ git add -A $ git commit -m "Array printing conflict resolved."
*.log build/ node_modules/ .idea/ my_notes.txt
Landing Page
Landing Page - он же одностраничный сайт или посадочная страница. Чаще всего используют для продвижения одного конкретного товара или рекламы чего-то. Все видели эти сайты, большинство из них имеют одинаковую структуру, которая очень знакома вам. На таком сайте, странице размещается вся информация и сразу и схожесть структуры у всех не спроста.
Если вы знакомы с продвижением в интернете, то слышали слово - Конверсия.
Конверсия - это соотношение общего числа посетителей сайта или страницы к тем посетителям, что выполнили на этом же сайте/странице какие-либо целевые действия.
Есть разные варианты, я расскажу об одном, что понравился мне. Он немного тяжелее простенького скрипта, зато можно настроить как угодно. Ниже можете перейти на страницу с примером, а потом переключится на вкладку с другим сайтом и увидите как работает то. о чем я рассказываю.
В статье я покажу один из вариантов как осуществить подобное. Более подробнее о возможностях скрипта о котором мы будем говорить, можете посмотреть на сайте разработчика - mFancyTitle.
Для начала, мы должны убедится что к сайту уже подключена библиотека jQuery. Если нет, то это нужно сделать.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
!function(i){function e(i){return i.timeInterval=setInterval(function(){i.callbackFunction(i)},i.blinkInterval),i.timeInterval}function t(t,n,l,o){if(t.mftTitleBlink[o]){var r,a,c,s={},d=(new Date).getTime();switch(t.mftTitleAltText[o]){case"none":s=n.mftTitleAltText[o];break;case"":s=n.mftTitleAltText[o];break;default:s=t.mftTitleAltText[o]}c=function(e){i(document).prop("title")==e.oldTitle?i(document).prop("title",e.newTitle):i(document).prop("title",e.oldTitle)},l[o]={oldTitle:i(document).prop("title"),newTitle:s,blinkInterval:t.mftTitleBlinkInterval[o],timeInterval:0,now:a,then:d,delta:r,callbackFunction:c},l[o].timeInterval=e(l[o])}}function n(i,e,t){i.mftTitleBlink[t]&&void 0!==e[t]&&e[t].timeInterval>0&&clearInterval(e[t].timeInterval)}function l(t,n,l,o){if(t.mftFaviconBlink[o]){var r,a,c,s={},d={"apple-touch-icon-precomposed":i('link[rel="apple-touch-icon-precomposed"]').attr("href"),icon:i('link[rel="icon"]').attr("href"),"shortcut icon":i('link[rel="shortcut icon"]').attr("href")},f=(new Date).getTime();switch(t.mftFaviconAltIcon[o]){case"none":s=n.mftFaviconAltIcon[o];break;case"":s=n.mftFaviconAltIcon[o];break;default:s=t.mftFaviconAltIcon[o]}c=function(e){if(Object.keys(e.oldFavicon).length>0)for(var t in e.oldFavicon)e.oldFavicon.hasOwnProperty(t)&&(i('link[rel="'+t+'"]').attr("href")==e.oldFavicon[t]?i('link[rel="'+t+'"]').attr("href",e.newFavicon[t]):i('link[rel="'+t+'"]').attr("href")==e.newFavicon[t]&&i('link[rel="'+t+'"]').attr("href",e.oldFavicon[t]))},l[o]={oldFavicon:d,newFavicon:s,blinkInterval:t.mftFaviconBlinkInterval[o],timeInterval:0,now:a,then:f,delta:r,callbackFunction:c},l[o].timeInterval=e(l[o])}}function o(i,e,t){i.mftFaviconBlink[t]&&void 0!==e[t]&&e[t].timeInterval>0&&clearInterval(e[t].timeInterval)}function r(t,n,l,o){if(t.mftTitleMarquee[o]){var r,a,c,s,d=(new Date).getTime(),f=i(document).prop("title").split("");switch(f.push(" "),t.mftTitleMarqueeDir[o]){case"left":r=function(i){i.push(i.shift())};break;case"right":r=function(i){i.unshift(i.pop())}}s=function(e){e.shifted(e.myText),i(document).prop("title",e.myText.join(""))},l[o]={shifted:r,blinkInterval:t.mftTitleMarqueeDelay[o],timeInterval:0,myText:f,now:c,then:d,delta:a,callbackFunction:s},l[o].timeInterval=e(l[o])}}function a(i,e,t){i.mftTitleMarquee[t]&&void 0!==e[t]&&e[t].timeInterval>0&&clearInterval(e[t].timeInterval)}var c=[],s={init:function(e){var s={mftMissYou:!0,mftMissYouTitle:"Hey! I miss you!",mftMissYouFavicon:{"apple-touch-icon-precomposed":"",icon:"","shortcut icon":""},mftTitleBlink:{visible:!1,hidden:!1},mftTitleBlinkInterval:{visible:1e3,hidden:1e3},mftTitleAltText:{visible:"\ufeff",hidden:"\ufeff"},mftFaviconBlink:{visible:!1,hidden:!1},mftFaviconBlinkInterval:{visible:1e3,hidden:1e3},mftFaviconAltIcon:{visible:{"apple-touch-icon-precomposed":"",icon:"","shortcut icon":""},hidden:{"apple-touch-icon-precomposed":"",icon:"","shortcut icon":""}},mftTitleMarquee:{visible:!1,hidden:!1},mftTitleMarqueeDir:{visible:"left",hidden:"left"},mftTitleMarqueeDelay:{visible:200,hidden:500}},d=i.extend({},s,e),f=i(document).prop("title"),v={"apple-touch-icon-precomposed":i('link[rel="apple-touch-icon-precomposed"]').attr("href"),icon:i('link[rel="icon"]').attr("href"),"shortcut icon":i('link[rel="shortcut icon"]').attr("href")},m={visible:{},hidden:{}},u={visible:{},hidden:{}},h={visible:{},hidden:{}};for(var p in d)d.hasOwnProperty(p)&&"mftMissYou"!=p&&"mftMissYouTitle"!=p&&("string"==typeof d[p]||"number"==typeof d[p]?d[p]={visible:d[p],hidden:d[p]}:i.isArray(d[p])&&(d[p]={visible:d[p][0],hidden:d[p][1]}));return d.mftTitleMarquee.visible?r(d,s,h.visible,"visible"):d.mftTitleBlink.visible&&t(d,s,m.visible,"visible"),l(d,s,u.visible,"visible"),i(document).on("visibilitychange",function(){if(i(document).prop("hidden")){if(d.mftMissYou&&(""!==d.mftMissYouTitle?i(document).prop("title",d.mftMissYouTitle):i(document).prop("title",s.mftMissYouTitle),Object.keys(d.mftMissYouFavicon).length>0))for(var e in d.mftMissYouFavicon)d.mftMissYouFavicon.hasOwnProperty(e)&&i('link[rel="'+e+'"]').attr("href",d.mftMissYouFavicon[e]);n(d,m.visible,"visible"),o(d,u.visible,"visible"),a(d,h.visible,"visible"),d.mftTitleMarquee.hidden?r(d,s,h.hidden,"hidden"):d.mftTitleBlink.hidden&&t(d,s,m.hidden,"hidden"),l(d,s,u.hidden,"hidden")}else{if(i(document).prop("title",f),Object.keys(v).length>0)for(var c in v)v.hasOwnProperty(c)&&i('link[rel="'+c+'"]').attr("href",v);n(d,m.hidden,"hidden"),o(d,u.hidden,"hidden"),a(d,h.hidden,"hidden"),d.mftTitleMarquee.visible?r(d,s,h.visible,"visible"):d.mftTitleBlink.visible&&t(d,s,m.visible,"visible"),l(d,s,u.visible,"visible")}}),i(document).data("mfancytitle",{settings:d,origTitle:f,origFavicon:v,titleBlinkOptions:m,faviconBlinkOptions:u,titleMarqueeOptions:h}),c=i(document).data("mfancytitle")},update:function(e){var t=i.extend({},c.settings,e);i.mFancyTitle("destroy"),i.mFancyTitle("init",t)},destroy:function(){n(c.settings,c.titleBlinkOptions.visible,"visible"),o(c.settings,c.titleBlinkOptions.visible,"visible"),a(c.settings,c.titleBlinkOptions.visible,"visible"),n(c.settings,c.titleBlinkOptions.hidden,"hidden"),o(c.settings,c.titleBlinkOptions.hidden,"hidden"),a(c.settings,c.titleBlinkOptions.hidden,"hidden"),i.removeData(c,"mfancytitle"),this.unbind(),this.element=null}};i.mFancyTitle=function(e){return s[e]?s[e].apply(i(document),Array.prototype.slice.call(arguments,1)):"object"!=typeof e&&e?void i.error("Method "+e+" does not exist on jQuery.mFancyTitle "):s.init.apply(i(document),arguments)}}(jQuery);
jQuery(document).ready(function($){ var title = document.title; $.mFancyTitle({ mftMissYou: true, mftMissYouTitle: 'Вернись, тут весело', mftMissYouFavicon: {'apple-touch-icon-precomposed': 'site.com/fico.png','icon': 'site.com/fico.png','shortcut icon': 'site.com/fico.png'}, mftTitleBlink: [false, true], mftTitleBlinkInterval: [1000,1000], mftTitleAltText: [title,title], mftFaviconBlink: [false, true], mftFaviconBlinkInterval: 1000, mftFaviconAltIcon: { 'visible': {'apple-touch-icon-precomposed': 'site.com/favicon.ico','icon': 'site.com/favicon.ico','shortcut icon': 'site.com/favicon.ico'}, 'hidden': {'apple-touch-icon-precomposed': 'site.com/favicon.ico','icon': 'site.com/favicon.ico','shortcut icon': 'site.com/favicon.ico'} }, mftTitleMarquee: [true, false], mftTitleMarqueeDir: ['left', 'right'], mftTitleMarqueeDelay: [200, 200] }); });
Важный момент!
У сайта должен быть указан в HEAD такие же ссылки на стандартный favicon.ico
<link rel="shortcut icon" href="site.com/favicon.ico" type="image/x-icon"> <link rel="icon" href="site.com/favicon.ico" type="image/x-icon">
Скрипт
Работа кнопки копирования текущей ссылки зависит от файла - clipboard.js. Это такая библиотека, которая и будет совершать весь процесс. Данный файл можно подключить указав на него ссылку на сторонний источник или скопировать его содержимое в свой файл и подключить из своего хостинга. Вот собственно сам файл, можно его таким подключить:
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.10/clipboard.min.js"></script>
jQuery(document).ready(function($){ var url = document.location.href; new Clipboard('.copy_link', {text: function(){ return url;}}); });
jQuery(document).ready(function($){ var url = document.location.href; new Clipboard('.copy_link', {text: function(){ return url;}}); $('.copy_link').click(function(){alert('Cсылка успешно скопирована в буфер обмена.');}); });
<span class="copy_link">Копировать ссылку</span>
.copy_link{cursor:pointer;display:inline-block;padding:0 10px;line-height:25px;background:#fc0;color:#000;}
Здесь представлен список возможных значений, которые участвуют при задании формата даты в плагинах UI:
1. d — число в месяце (в один или два символа: 1, 2, 3,... 10, 11,... 31).
2. dd — число в месяце (всегда в два символа: 01, 02, 03,... 10, 11,... 31).
3. o — число в году (в один два или три символа: 1, 2, 3,... 365).
4. oo — число в году (всегда в три символа: 001, 002, 003,... 010, 011,... 365).
5. D — сокращенное названия дня недели.
6. DD — полное названия дня недели.
7. m — номер месяца в году (в один или два символа: 1, 2, 3,... 11, 12).
8. mm — номер месяца в году (всегда в два символа: 01, 02, 03,... 11, 12).
9. M — сокращенное названия месяца.
10. MM — полное названия месяца.
11. y — номер года в две цифры.
12. yy — номер года в четыре цифры.
13. @ — Unix timestamp (количество миллисекунд начиная с 01/01/1970)
14. ! — Windows ticks (количество наносекунд*100, начиная с 01/01/0001).
15. " — одинарная кавычка.
16. все остальное будет отображаться без изменений.
Например, формат даты, вида "31-12-2010" задается строкой "dd-mm-yy".
Стандарты указания дат, доступные в плагине Datepicker:
1. ATOM - 'yy-mm-dd' (соответствует стандартам RFC 3339/ISO 8601)
2. COOKIE - 'D, dd M yy'
3. ISO_8601 - 'yy-mm-dd'
4. RFC_822 - 'D, d M y'
5. RFC_850 - 'DD, dd-M-y'
6. RFC_1036 - 'D, d M y'
7. RFC_1123 - 'D, d M yy'
8. RFC_2822 - 'D, d M yy'
9. RSS - 'D, d M y'
10. TICKS - '!'
11. TIMESTAMP - '@'
12. W3C - 'yy-mm-dd'
Google Docs предоставляет возможность встраивать свой вьювер на любые страницы, с помощью iframe:
Пример просмотра файла http://example.com/file.pdf:
<iframe src="http://docs.google.com/gview?url=http://example.com/file.pdf&embedded=true" style="width:600px; height:500px;" frameborder="0" ></iframe>
У каждого видео, залитого на YouTube, есть 4 скриншота хранящихся на серверах самого YouTube. Один скриншот имеет размер 480x360, а три других — 120x90. Скриншоты доступны по адресу:
http://img.youtube.com/vi/[VIDEO_ID]/[0-3].jpg
Например для http://www.youtube.com/watch?v=rF1X12PE6PY это:
http://img.youtube.com/vi/rF1X12PE6PY/0.jpg
http://img.youtube.com/vi/rF1X12PE6PY/1.jpg
http://img.youtube.com/vi/rF1X12PE6PY/2.jpg
http://img.youtube.com/vi/rF1X12PE6PY/3.jpg
Второй день знакомлюсь с Git. Читаю книжку Pro Git, попутно загоняя буковки в консоль =)
Расскажу, как организовал процесс разработки на своём компьютере. Если что-то не правильно или есть лучшие способы, то смело пишите в комментах!
Более опытные коллеги подсказали, что ставить на локальный компьютер "Git сервер" не очень разумно, лучше обойтись одной папкой в которой будут размещаться голые (bare) репозитории и которая будет служить центральным хранилищем.
Итак. Создаём папку под голые репозитории, например C:\GitRepos (да да, я сижу на Windows):
$ mkdir /c/GitRepos
$ cd /c/GitRepos $ mkdir myproject.git $ cd myproject.git $ git init --bare
$ git init
$ git remote add origin /c/GitRepos/myproject.git
$ git add . $ git commit -a -m 'First commit'
$ git push origin master
$ git clone /c/GitRepos/myproject.git
$ git push
$ git pull
Задача
Вы хотите присвоить ранги набору значений.
Решение
Выберите метод ранжирования, расположите элементы в нужном порядке и примените к ним выбранный метод.
Обсуждение
Для некоторых типов статистических проверок требуется присваивание рангов. Я опишу три метода ранжирования и покажу, как можно реализовать каждый из них при помощи переменных SQL. В примерах предполагается, что таблица t содержит следующие результаты, которые должны быть ранжированы по убыванию значений:
mysql> SELECT score FROM t ORDER BY score DESC;
mysql> SET @rownum := 0; mysql> SELECT @rownum := @rownum + 1 AS rank, score -> FROM t ORDER BY score DESC;
mysql> SET @rank = 0, @prev_val = NULL; mysql> SELECT @rank := IF(@prev_val=score,@rank,@rank+1) AS rank, -> @prev_val := score AS score -> FROM t ORDER BY score DESC;
mysql> SET @rownum = 0, @rank = 0, @prev_val = NULL; mysql> SELECT @rownum := @rownum + 1 AS row, -> @rank := IF(@prev_val!=score,@rownum,@rank) AS rank, -> @prev_val := score AS score -> FROM t ORDER BY score DESC;
$result_id = mysql_query ("SELECT score FROM t ORDER BY score DESC", $conn_id) or die ("Cannot select scores\n"); $rownum = 0; $rank = 0; unset ($prev_score); print ("Row\tRank\tScore\n"); while (list ($score) = mysql_fetch_row ($result_id)) { ++$rownum; if ($rownum == 1 || $prev_score != $score) $rank = $rownum; print ("$rownum\t$rank\t$score\n"); $prev_score = $score; } mysql_free_result ($result_id);
mysql> SELECT name, wins FROM al_winner ORDER BY wins DESC, name;
mysql> SET @rownum = 0, @rank = 0, @prev_val = NULL; mysql> SELECT @rownum := @rownum + 1 AS row, -> @rank := IF(@prev_val!=wins,@rownum,@rank) AS rank, -> name, -> @prev_val := wins AS wins -> FROM al_winner ORDER BY wins DESC;