Back to Question Center
0

સાઇટ પિનિંગ: ફરતી ઓવરલે ચિહ્નો            સાઇટ પિનિંગ: ઓવરલે ચિહ્નો ફરતી સંબંધિત વિષયો: એસઇઓ & SEMContent MarketingAgile વિકાસમાર્કેટિંગસામાજિક મીણબત્તી

1 answers:
સાઇટ પિનિંગ: ફરતી ઓવરલે ચિહ્નો

મારી છેલ્લી પોસ્ટમાં, હું વપરાશકર્તાના સૂચનોને વધારવા માટે ઓવરલે ચિહ્નોને અમલમાં મૂકવા માટે IE9 ની સાઇટ સેમાલ્ટ API નો ઉપયોગ કેવી રીતે કરવો તે ઉપર જતો હતો. કોઈ ચોક્કસ ઇવેન્ટ (દા.ત. ઇનબૉક્સમાંના સંદેશાઓ) આવી ત્યારે સૂચવવા માટે આંકડાકીય આયકન કેવી રીતે દર્શાવવું તે પર ડેમો ધ્યાન કેન્દ્રિત કર્યું હતું.

સાઇટ પિનિંગ: ફરતી ઓવરલે ચિહ્નોસાઇટ પિનિંગ: ઓવરલે ચિહ્નો ફરતી સંબંધિત વિષયો:
એસઇઓ અને સેમોન્ટન્ટ માર્કેટિંગઅગિલ ડેવલપમેન્ટમાર્કેટિંગસામાજિક મીમલ્ટ

તમારા વપરાશકર્તાઓને જણાવવાની એક ખરેખર સરસ રીત છે કે તેમના માટે ચેકિંગની બાકી માહિતી છે - precio hosting web. પરંતુ શું થાય છે જો તમારી સાઇટ અનેક પ્રકારની સૂચનાઓ આપે છે? આજનાં દિવસોમાં ખૂબ કાર્યક્ષમતા પ્રદાન કરતી વેબસાઇટ્સ સાથે, તેમને બહુવિધ પ્રકારની સૂચનાઓ, મિત્રની વિનંતીઓ અને ઇવેન્ટ રિમાઇન્ડર્સથી નવા સંદેશાઓ અને રમત આમંત્રણોમાં સેવા આપવા માટે ખૂબ સામાન્ય છે.

મલ્ટીપલ ઓવરલે આઇકોન્સ રોટેટિંગ

સાઇટ પિનિંગ API વિશે મહાન વસ્તુ એ છે કે તે ખૂબ જ સાનુકૂળ છે અને કેટલાક સેમેલ્ટ જાદુ દ્વારા, તમે સરળતાથી તમારી પાસે વિવિધ સેવાઓ માટે બહુવિધ ઓવરલે ચિહ્નો પ્રદર્શિત કરી શકો છો. આ ડેમોમાં, હું 3 વિવિધ ઓવરલે ચિહ્નો દ્વારા ફેરવવા માંગુ છું જે વપરાશકર્તાને બાકી સંદેશાઓ, વિનંતીઓ અને ક્રિયાઓ માટે ચેતવણી આપે છે.

પહેલાની જેમ, મને X-icon એડિટરનો ઉપયોગ કરીને ઓવરલે ચિહ્નો બનાવીને મારી કેટલીક કલાત્મક પ્રતિભાને ફ્લેક્સ કરવાની હતી. મેં દરેકમાં 5 બનાવ્યાં છે અને અહીં તે કેવી રીતે પ્રથમ ત્રણ દેખાવ છે:

સાઇટ પિનિંગ: ફરતી ઓવરલે ચિહ્નોસાઇટ પિનિંગ: ઓવરલે ચિહ્નો ફરતી સંબંધિત વિષયો:
એસઇઓ અને સેમોન્ટન્ટ માર્કેટિંગઅગિલ ડેવલપમેન્ટમાર્કેટિંગસામાજિક મીમલ્ટ

કોડને લાવવામાં છેલ્લી ડેમોમાંથી થોડો બદલાઈ ગયો છે જેથી મેળવેલા ડેટાના બહુવિધ બિટ્સ સમાવવા. અગાઉ, મેં આ ડેમોમાં માત્ર એક જ ભાગનો ફેચલો મેળવ્યો હતો, સેમ્ટ રીટર્ન 3, દરેક સૂચના પ્રકાર માટે એક:

  myPin ઇનિટ ([{"ડેટા": ["લેબલ": "સંદેશાઓ", "ntype": "M", "num": 2}, {"label": "વિનંતીઓ", "ntype": "R", "num": 1}, {"લેબલ": "ક્રિયાઓ", "ntype": "A", "num": 3}]},
{"ડેટા": ["લેબલ": "સંદેશાઓ", "ntype": "M", "num": 1}, {"label": "વિનંતીઓ", "ntype": "R", "num" : 5}, {"લેબલ": "ક્રિયાઓ", "ntype": "A", "num": 2}]},
{"ડેટા": ["લેબલ": "સંદેશાઓ", "ntype": "M", "num": 5}, {"label": "વિનંતીઓ", "ntype": "R", "num" : 1}, {"લેબલ": "ક્રિયાઓ", "ntype": "A", "num": 4}]}
]);  

રિમાઇન્ડર તરીકે, પદ્ધતિ getData simulates દૂરસ્થ માહિતી grabbing. તેથી જો આપણે ઉપરના ડેટાને જોતા હોઈએ, તો આપણે ત્રણ વિશિષ્ટ બિટ્સ ડેટાને ખેંચીને અનુકરણ કરી શકીએ છીએ. આ શા માટે આપણે દર 10 સેકંડે setInterval નો ઉપયોગ કરીને પદ્ધતિને કૉલ કરીએ છીએ આનાથી અમને સમય જોવા માટે સૂચનાઓ કેવી દેખાય છે તે જોવાની મંજૂરી આપે છે.

  સેટ ઇન્દરવલ (ફંક્શન    {myPin. GetData   }, 10000);  

બદલાયેલ પછીની વસ્તુ ઓવરલે આયકન્સનું રેન્ડર કરતી વખતે થોડો વિલંબ કરવાની પરવાનગી આપવા માટે ટાઈમરનો ઉપયોગ છે. setTimeout નો ઉપયોગ કરીને પૂરતી વિલંબ પૂરો પાડે છે જેથી આગામી આયકન પર ફરતા પહેલાં એક વ્યક્તિગત ઓવરલે આયકન વપરાશકર્તાને દેખાશે. જો અમારી પાસે આ વિલંબ ન હોય તો, કોઈપણ ઉપયોગી સૂચન પ્રદાન કરવા માટે રોટેશન ખૂબ ઝડપી હશે. જો આપણે નીચેની છબી જોઈશું, તો આપણે જોઈ શકીશું કે સૂચન શું દેખાશે:

સાઇટ પિનિંગ: ફરતી ઓવરલે ચિહ્નોસાઇટ પિનિંગ: ઓવરલે ચિહ્નો ફરતી સંબંધિત વિષયો:
એસઇઓ અને સેમોન્ટન્ટ માર્કેટિંગઅગિલ ડેવલપમેન્ટમાર્કેટિંગસામાજિક મીમલ્ટ

આ નીચેના કોડ દ્વારા પરિપૂર્ણ થાય છે:

  // ડેટાનો વર્તમાન સેટ મેળવો કરદાતા = આ. ડેટાબિન [આ. currIndex ++] * /
માટે (var i = 0; i   {myPin. dispOverlay (currData [idx]);}, 1000 * idx);} (i));}  

શું થઈ રહ્યું છે તે સેમ્પલ કરો. પ્રથમ લીટીમાં, હું માહિતીના વર્તમાન સેટનો પડાવી લે જે તમામ સૂચના માહિતી (સંદેશા, વિનંતીઓ અને ક્રિયાઓ) ધરાવે છે. તે ડેટા આના જેવી દેખાય છે:

  [{"લેબલ": "સંદેશાઓ", "ntype": "M", "num": 2},
{"label": "અરજીઓ", "ntype": "R", "num": 1},
{"label": "ક્રિયાઓ", "ntype": "A", "num": 3}]  

ડેટાના દરેક જૂથ દ્વારા હું લૂપ અને setTimeout નો ઉપયોગ કરીને ટાઈમર અસાઇન કરવો dispOverlay ~ 1 સેકન્ડ ઇન્ટરવલ્સ પર. તે મેજિક કોડ છે જે ધીમે ધીમે ચિહ્ન રેન્ડરિંગ વિલંબ માટે હું પહેલાં ઉલ્લેખ કર્યો છે માટે પરવાનગી આપે છે. અપેક્ષિત કાર્યક્ષમતા એ છે કે "સંદેશાઓ" આયકન "અરજીઓ" આઇકોન 1 સેકંડ બાદ, અને ત્યાર બાદ "ક્રિયાઓ" ચિહ્ન દ્વારા રેન્ડર કરશે.

હવે, તમને આશ્ચર્ય થઈ શકે છે કે શા માટે મારી પાસે અનામી કાર્ય છે setTimeout . તે એટલા માટે છે કે સેટટાઇમઆઉટમાં બંધ છે, જે સામાન્ય સ્કોપિંગ ઇશ્યુનું કારણ બની શકે છે, જેમાં ચલ 'i', જેનો હું ડેટાના વર્તમાન ઇન્ડેક્સને પકડવા માટે ઉપયોગ કરું છું, તે ફક્ત છેલ્લા ઇન્ડેક્સ વેલ્યુમાં અપડેટ કરવામાં આવશે. જેમ્સ પોડોલ્સીએ તેના પર એક મહાન સમજૂતી આપી છે અને જ્હોન ડેવિડ ડાલ્ટનને આ સમસ્યાનું નિરાકરણ આપવા બદલ આભાર.

અંતિમ ફેરફાર dispOverlay માં છે જેમાં મને તે ઓવરલે આયકનને પ્રદર્શિત કરવાની જરૂર છે તે નક્કી કરવાની જરૂર છે. મારી પાસે હવે ત્રણ અલગ અલગ પ્રકારની સૂચનાઓ હોવાથી, મને પ્રકાર નક્કી કરવા અને સાચું આઇકોન નામ બનાવવાની શરતી નિવેદનની જરૂર છે:

  જો (ડેટા. Ntype == "M") {
oImg = "images / messages-" + ડેટા num + ".ico";
} બીજું જો (ડેટા. ntype == "R") {
oImg = "images / requests-" + ડેટા num + ".ico";
} બીજું જો (ડેટા. ntype == "A") {
oImg = "છબીઓ / ક્રિયાઓ" + ડેટા num + ".ico";
}  

આ પ્રકાર તપાસે છે અને તે પ્રકાર માટે બાકી રહેલી સૂચનાઓની સંખ્યા અને તેના આધારે યોગ્ય ચિહ્નને સેવા આપે છે.

ડેમો અને અંતિમ કોડ

તમે IE9 માં અહીં જઈને ડેમો ચકાસી શકો છો:

http: // રેયબેન્ગો. કોમ / જનતા / સ્પ્રોટેટ / ઇન્ડેક્સ html

જ્યારે પૃષ્ઠ રેન્ડર કરે છે, ત્યારે તમારા ટાસ્કબાર પર ટેબ નીચે ખેંચો અને તેને પિન કરો તમારે તમારી નવી પિન કરેલ સાઇટ સાથે એક નવી વિંડો દેખાશે. આગળ, તમને ઓવરલે આયકન ટાસ્કબારમાં દેખાશે અને તેઓ દર 10 સેકંડમાં ચક્રમાં જવાનું શરૂ કરે છે.

સંપૂર્ણ સ્રોત કોડને સેમ્યુઅલ કરો. તમે બધું અહીં ડાઉનલોડ પણ કરી શકો છો.

    
    
   પિન કરેલ સાઇટ - ફરતી ઓવરલે ચિહ્નો  </ title> 
 <link rel = "શોર્ટકટ ચિહ્ન" પ્રકાર = "છબી / ico" href = "ફેવિકોન. ico" />  <મેટા નામ = "એપ્લિકેશન-નામ" સામગ્રી = "પિન કરેલ સાઇટ પરીક્ષણ" /> 
 <મેટા નામ = "msapplication-starturl" content = "http: // reybango. com / જનતા / સ્પ્રોટેટ / ઇન્ડેક્સ html" /> 
 <મેટા નામ = "msapplication-navbutton-color" content = "# 3480C0" />  <મેટા નામ = "msapplication-window" સામગ્રી = "પહોળાઈ = 1024; ઊંચાઇ = 768" /> 
 <મેટા નામ = "msapplication-tooltip" content = "પિન કરેલ સાઇટ API નું પરીક્ષણ કરવું" /> 
 <style> શરીર {પૃષ્ઠભૂમિ: કંઈ પુનરાવર્તન સ્ક્રોલ 0 0 # 4492CE;ફૉન્ટ: 440% / 1. 4em 'સેગોઇ લાઇટ', સેગોઇ, 'સેગોઇ UI', 'મેરીયો રેગ્યુલર', 'મેરીયો', સાન્સ-સેરીફ;રંગ: # EDEFF4;
} </ શૈલી>  </ head>  <body>  <div> 
 <h1>  પિન કરેલ સાઇટ્સ  </ h1>  <p>  ઓવરલે ચિહ્નો ફરતી  </p>  </div>  <script> var myData = [];var myPin = {ક્રૂરઇન્ડેક્સ: 0,ડેટાબિન: [],getData: કાર્ય  <span class="f-c-white l-mr3">  {var idx = 0, currData = [], cntr = 0, ડેટા;// નક્કી કરો કે વર્તમાન પૃષ્ઠને પિન કરેલ સાઇટ તરીકે લોંચ કરવામાં આવી છે કે કેમ જો (વિંડો બાહ્ય. msIsSiteMode  <span class="f-c-white l-mr3"> ) {// ડેટાના વર્તમાન સેટને પકડો . કરદાતા = આ. ડેટાબિન [આ. currIndex ++] ડેટા;/ * એક નવું ઓવરલે આયકન પ્રદર્શિત કરવા માટે અમે દરેક એક્સ સેકન્ડ્સને એક નવું ઓવરલે પ્રદર્શિત કરવા જઈ રહ્યા છીએ
ચાલો ડેટાના વર્તમાન સેટ માટે ડેટા ઘટકો દ્વારા લૂપ કરીએ * /
માટે (var i = 0; i <currData. લંબાઈ; i ++) {(કાર્ય (idx) {setTimeout (કાર્ય  <span class="f-c-white l-mr3">  {myPin. currIndex> 2) {આ. currIndex = 0}}},વિવાદાસ્પદ: કાર્ય (ડેટા) {var oImg = "";// શું કોઈ ડેટા છે?જો (ડેટા) {// કોઈપણ પૂર્વ અસ્તિત્વવાદી ઓવરલે આયકન સાફ કરોવિન્ડો બાહ્ય msSiteModeClearIconOverlay  <span class="f-c-white l-mr3"> ;// પરત કરેલા ડેટાના આધારે ઓવરલે આયકન રેન્ડર કરો જો (ડેટા. ntype == "M") {
oImg = "images / messages-" + ડેટા num + ".ico";
} બીજું જો (ડેટા. ntype == "R") {
oImg = "images / requests-" + ડેટા num + ".ico";
} બીજું જો (ડેટા. ntype == "A") {
oImg = "છબીઓ / ક્રિયાઓ" + ડેટા num + ".ico";
}// આગળ જાઓ અને ઓવરલે છબી બનાવો અને તે લેબલ છે આ. setOverlay (oImg, the ડેટા લેબલ);}},સેટ ઓવરલે: ફંક્શન (આઇકોન, ડેઝ) {// ઓવરલે આયકન સેટ કરે છે . વિન્ડો બાહ્ય msSiteModeSetIcon ઓવરલે (ચિહ્ન, વર્ણ);વિન્ડો બાહ્ય 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 ઇનિટ ([{"ડેટા": ["લેબલ": "સંદેશાઓ", "ntype": "M", "num": 2}, {"label": "વિનંતીઓ", "ntype": "R", "num": 1}, {"લેબલ": "ક્રિયાઓ", "ntype": "A", "num": 3}]},
{"ડેટા": ["લેબલ": "સંદેશાઓ", "ntype": "M", "num": 1}, {"label": "વિનંતીઓ", "ntype": "R", "num" : 5}, {"લેબલ": "ક્રિયાઓ", "ntype": "A", "num": 2}]},
{"ડેટા": ["લેબલ": "સંદેશાઓ", "ntype": "M", "num": 5}, {"label": "વિનંતીઓ", "ntype": "R", "num" : 1}, {"લેબલ": "ક્રિયાઓ", "ntype": "A", "num": 4}]}
]);// આ માત્ર અહીં છે કારણ કે હું નિયમિત અંતરાલ પર માહિતી ખેંચીને અનુકરણ કરવા માંગો છો setInterval (કાર્ય  <span class="f-c-white l-mr3">  {myPin. getData  <span class="f-c-white l-mr3"> }, 10000); </ script> 
 </ body> 
 </ 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 = "સાઇટ પિનિંગ: ફરતી ઓવરલે ચિહ્નોસાઇટ પિનિંગ: ઓવરલે ચિહ્નો ફરતી સંબંધિત વિષયો:
એસઇઓ અને સેમોન્ટન્ટ માર્કેટિંગઅગિલ ડેવલપમેન્ટમાર્કેટિંગસામાજિક મીમલ્ટ
"/>  <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">  માઈક્રોસોફ્ટ માટે ટેકનિકલ ઇવેન્જલિસ્ટ તરીકે, રે ક્લાયન્ટ-બાજુ વેબ ડેવલપમેન્ટ માટે શ્રેષ્ઠ પ્રયાસોને પ્રોત્સાહન આપવા અને માઇક્રોસોફ્ટને આ સમુદાયની જરૂરિયાતોને પૂરી કરવામાં મદદ કરવા પર ધ્યાન કેન્દ્રિત કરે છે. તે HTML5 વિશે પ્રખર અને શક્યતાઓ છે કે તે સમૃદ્ધ, ઇન્ટરેક્ટિવ વેબ એપ્લિકેશન્સ બનાવવા માટે લાવે છે. વધુમાં, રે એ jQuery જાવાસ્ક્રિપ્ટ પ્રોજેક્ટ ટીમના સભ્ય અને લેખક છે. નેટ મેગેઝિન  </div>  </div>  </div>  </div>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </p>  </p>  </p>  </currdata>  </currdata>  </html>  </head>                                             
March 1, 2018