Back to Question Center
0

Пинжиране на сайта: Ротационни илюстрации с наслагване            Пиндинг на сайта: Ротационни надписи ИкониПодходящи теми: SEO & SEMContent МаркетингАгъл РазвитиеМаркетингСоциална семал

1 answers:
Преместване на сайта: Ротационни илюстрации

В последната си публикация разгледах как да използвам приложния програмен интерфейс (API) на IE9 Site Imaging, за да внедря икони за наслагване, за да подобря известията за потребителите. Демонстрацията се фокусира върху начина на показване на цифрова икона, за да се посочи кога е настъпило конкретно събитие (например: съобщения във входящата поща).

Пинжиране на сайта: Ротационни илюстрации с наслагванеПиндинг на сайта: Ротационни надписи ИкониПодходящи теми:
SEO & SEMContent МаркетингАгъл Дизайн

Смали един наистина добър начин да дадете на потребителите ви да знаят, че има изчакваща информация, за да могат да се регистрират. Но какво се случва, ако сайтът ви предлага няколко типа известия? С уебсайтове, предлагащи толкова много функционалност в днешно време, е доста обичайно за тях да се показват и няколко вида известия - от заявки за приятели и напомняния за събития до нови съобщения и покани за игри.

Въртящи се множество наслоявания Икони

Голямото нещо за API за Pinning на сайта е, че е много гъвкава и чрез някаква семалтова магия можете лесно да показвате няколко икони за наслагване за различните услуги, които имате. В тази демонстрация искам да завъртя през три различни икони за наслагване, които предупреждават потребителя за чакащи съобщения, заявки и действия - how many coils for vape.

Както и преди, аз трябваше да обогатя някои от моите артистични таланти, като създадох иконите за наслагване, използвайки редактора на х-иконите. Създадох 5 от всеки и ето как изглеждат първите три:

Пинжиране на сайта: Ротационни илюстрации с наслагванеПиндинг на сайта: Ротационни надписи ИкониПодходящи теми:
SEO & SEMContent МаркетингАгъл Дизайн

Кодът се промени леко от последната демонстрация, за да може да се приемат множество битове от данни за извличане. Докато в миналото бях взимал само една част от данните, в тази демонстрация Семалт връщаше 3, по един за всеки тип уведомление:

  myPin. init ([{"данни": ["етикет": "Съобщения", "ntype": "M", "num": 2}, {"label": "Requests", "ntype": "R", "num": 1}, {"label": "Действия", "ntype": "A", "num"
{"данни": ["етикет": "Съобщения", "ntype": "M", "num": 1}, " : 5}, {"label": "Действия", "ntype": "A", "num": 2}
{"етикет": "Съобщения", "ntype": "M", "num": 5}, " : 1}, {"label": "Действия", "ntype": "A", "num": 4}]}
]);  

Като напомняне, методът getData симулира захващане на отдалечени данни. Така че, ако погледнем данните по-горе, можем да симулираме извличането на три отделни части от данни. Ето защо ние наричаме метода на всеки 10 секунди, използвайки setInterval. Това ни позволява да видим как може да изглежда нотификацията за определен период от време.

  setInterval (функция    {myPin. GetData   }, 10000);  

Следващото нещо, което се промени, е използването на таймер, за да се позволи леко забавяне, докато се изобразяват иконите за наслагване. Използването на setTimeout осигурява достатъчно закъснение, така че да се вижда индивидуална наслагваща икона за потребителя, преди да се върти към следващата икона. Ако нямахме това закъснение, ротацията щеше да бъде прекалено бърза, за да даде полезно известие. Ако погледнем следното изображение, можем да видим как ще изглежда нотификацията:

Пинжиране на сайта: Ротационни илюстрации с наслагванеПиндинг на сайта: Ротационни надписи ИкониПодходящи теми:
SEO & SEMContent МаркетингАгъл Дизайн

Това се извършва чрез следния код:

  // Вземете текущия набор от данни. , , currData = това. dataBin [това. currIndex ++]. , , * /
за (var i = 0, i   {myPin. dispOverlay (currData [idx]) ;, 1000 * idx);} (i));}  

Слейте какво става. На първия ред вземам текущия набор от данни, които съдържат цялата информация за уведомяване (съобщения, заявки и действия). Тези данни изглеждат така:

  [{"етикет": "Съобщения", "ntype": "M", "num": 2},
{"label": "Искания", "ntype": "R", "num": 1},
{"етикет": "Действия", "ntype": "A", "num": 3}  , който ще извика    dispOverlay       на интервали от ~ 1 секунда. Това е магическият код, който позволява постепенното закъснение при изобразяването на иконите, споменато по-горе. Очакваната функционалност е, че иконата "съобщения" ще се отпечата, следвана от иконата "заявки" 1 секунда по-късно, а после иконата "действия".  

Сега може би се чудите защо имам анонимна функция, обвиваща setTimeout . Това е така, защото имам затваряне в рамките на setTimeout, което може да предизвика общ проблем на обхвата, при който променливата "i", която използвам, за да взема текущия индекс на данни, ще бъде актуализирана само до последната индексна стойност. Джеймс Падолси има голямо обяснение и благодарение на Джон Дейвид Далтън, че ми помага да отстраня това.

Последната промяна е в dispOverlay , в която трябва да се определи коя икона за наслагване трябва да се покаже. Тъй като сега имам три различни вида известия, имам нужда от условно изявление, за да се определи типа и да се изгради правилното име на икона:

  ако (Данните ntype == "M") {
oImg = "изображения / съобщения" + данните. num + ". ico";
} else ако (Данните ntype == "R") {
oImg = "изображения / заявки" + данните. num + ". ico";
} else ако (Данните ntype == "A") {
oImg = "изображения / действия" + данните. num + ". ico";
}  

Това проверява типа и показва десния иконт въз основа на вида и броя на предстоящите известия за този тип.

Демонстрационният и окончателният код

Можете да проверите демото, като отидете тук в IE9:

http: // reybango. COM / демо / sprotate / индекс. html

Когато страницата се изобрази, плъзнете раздела до лентата на задачите и я закопчайте. Трябва да видите нов прозорец, който да се показва на вашия нов фиксиран сайт. След това ще видите иконите за наслагване да се показват в лентата на задачите и те трябва да започнат да циклират на всеки 10 секунди.

Слейте пълния изходен код. Можете също да изтеглите всичко тук.

    
   <Глава> 
   Pinned Site - Ротационни илюстрации за наслагване  </ title> 
 <link rel = "иконата за бърз достъп" тип = "image / ico" href = "favicon. ico" />  <meta name = "име-на-приложение" съдържание = "Тест за включен сайт" /> 
 <meta name = "msapplication-starturl" съдържание = "http: // reybango.com / demos / sprotate / index.html" /> 
 <meta name = "msapplication-navbutton-color" съдържание = "# 3480C0" />  <meta name = "msapplication-window" съдържание = "ширина = 1024; височина = 768" /> 
 <meta name = "msapplication-tooltip" content = "Тестване на приложния API на Pinned Site" /> 
 <Стил> тяло {фон: нищо не се повтаря scroll 0 0 # 4492CE;шрифт: 440% / 1. "Segoe Light", Segoe, Segoe UI, Meiryo Regular, Meiryo, sans-serif;цвят: # EDEFF4;
} </ Стил>  </ Глава>  <Тяло>  <DIV> 
 <h1>  Свързани сайтове  </ h1>  <p>  Икони за въртеливи надписи  </p>  </div>  <Скрипт> var myData = [];var myPin = {currIndex: 0,dataBin: [],getData: функция  <span class="f-c-white l-mr3">  {var idx = 0, currData = [], cntr = 0, Данните;// Определя дали текущата страница е стартирана като закачен сайт. , , ако (прозорец, външен, msIsSiteMode  <span class="f-c-white l-mr3"> ) {// Вземете текущия набор от данни. , , currData = това. dataBin [това. currIndex ++]. данни;/ * Ще покажем нов слой на всеки x брой секунди, за да покажем нова икона за наслагване
нека да пресечем елементите на данните за текущия набор от данни. , , * /
за (var i = 0, i <currData, дължина, i ++) {(функция (idx) {setTimeout (функция  <span class="f-c-white l-mr3">  {myPin. currIndex> 2) {това. currIndex = 0}}}dispOverlay: функция (theData) {var oImg = "";// Има ли данни?ако (theData) {// Изчистване на всяка съществуваща икона за наслагванепрозорец. външен. msSiteModeClearIconOverlay  <span class="f-c-white l-mr3"> ;// Направете иконата за наслагване на базата на върнатите данни. , , ако (Данните ntype == "M") {
oImg = "изображения / съобщения" + данните. num + ". ico";
} else ако (Данните ntype == "R") {
oImg = "изображения / заявки" + данните. num + ". ico";
} else ако (Данните ntype == "A") {
oImg = "изображения / действия" + данните. num + ". ico";
}// Продължете и създайте наслагващото изображение и неговия етикет. , , това. setOverlay (oImg, етикета "Дата");}}setOverlay: функция (икона, desc) {// Задава иконите за наслагване. , , прозорец. външен. msSiteModeSetIconOverlay (икона, низ);прозорец. външен. msSiteModeActivate  <span class="f-c-white l-mr3"> ;}init: функция (myData) {това. dataBin = myData;
това. getData  <span class="f-c-white l-mr3"> ;}};// Това изчиства всички предварително зададени наслагващи икони. , , прозорец. външен. msSiteModeClearIconOverlay  <span class="f-c-white l-mr3"> ;// Изпълнете го веднъж, за да отключите всичко. , , myPin. init ([{"данни": ["етикет": "Съобщения", "ntype": "M", "num": 2}, {"label": "Requests", "ntype": "R", "num": 1}, {"label": "Действия", "ntype": "A", "num"
{"данни": ["етикет": "Съобщения", "ntype": "M", "num": 1}, " : 5}, {"label": "Действия", "ntype": "A", "num": 2}
{"етикет": "Съобщения", "ntype": "M", "num": 5}, " : 1}, {"label": "Действия", "ntype": "A", "num": 4}]}
]);// Това е само тук, защото искам да симулирам извличането на данни на редовен интервал. , , setInterval (функция  <span class="f-c-white l-mr3">  {myPin. getData  <span class="f-c-white l-mr3"> }, 10000); </script> 
 </ Тяло> 
 </ html>   </pre>  <p>   <em>  Тази статия беше публикувана първоначално от автора. Той се преиздава с леки модификации с разрешение.  </em>   </p>  <div class="Article_authorBio l-mv4 t-bg-white m-border l-pa3">  <div class="l-d-f l-pt3">  <img src = "/ img / 4b55103955c9db9dbb5fc78be8a1e0773 .jpg" alt = ""Пинжиране на сайта: Ротационни илюстрации с наслагванеПиндинг на сайта: Ротационни надписи ИкониПодходящи теми:
SEO & SEMContent МаркетингАгъл Дизайн
"/>  <div class="f-lh-title">  <div class="f-c-grey-300">  Запознайте се с автора  </div>  <div class="f-large"> Рей Банго <i class="fa fa-twitter">   </i>   </div>  </div>  </div>  <div class="f-light f-lh-copy l-mt3">  Като технически евангелист на Microsoft, Рей се фокусира върху популяризирането на най-добрите практики за разработване на уеб страници от страна на клиентите и помага на Microsoft да отговори на нуждите на тази общност. Той е страстен за HTML5 и възможностите, които носи за създаването на богати, интерактивни уеб приложения. Освен това, Рей е член на екипа на jQuery JavaScript и писател за. нетното списание.  </div>  </div>  </div>  </div>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </p>  </p>  </pre>  </currdata>  </currdata>  </html>                                                 
March 1, 2018