Share
We hebben allemaal de schitterende functionaliteit op Mashable gezien, waarbij nieuwsberichten en interessante artikelen kunnen worden gedeeld met sociale netwerksites; de functionaliteit wordt aangedreven door de afbeeldingen bij de artikelen; u klikt op een afbeelding en houdt deze ingedrukt en kunt hem vervolgens naar een werkbalk slepen om deze te delen. Het is briljant en intuïtief, en in dit artikel laat ik je zien hoe we dit gedrag kunnen repliceren met jQuery en jQuery UI.
De volgende schermafbeelding toont wat we aan het einde van de tutorial zullen hebben:
De nieuwste versie van jQuery wordt geleverd met de gebruikersinterface van jQuery en in dit voorbeeld hebben we alleen de kern-, draggable en droppbare componenten nodig, dus zorg ervoor dat alleen deze in de downloadbuilder zijn geselecteerd. Zodra het jQuery UI-archief is gedownload, pakt u de js-map uit het archief (we hebben de ontwikkelingsbundel of het CSS-raamwerk in dit voorbeeld niet nodig) in een werkmap.
Laten we nu een basispagina maken, met wat tekst en een afbeelding erop, om het gedrag te demonstreren; maak de volgende nieuwe pagina aan in uw code-editor:
Sleep om voorbeeld te delen Lorem ipsum dolor ...
Lorem ipsum dolor ...
Sla dit op als dragToShare.html in de map met daarin de js-map. Hier hebben we onze lay-out / voorbeeldtekst en een afbeelding toegevoegd, beide in een container. We linken naar de bronbestanden van jQuery en jQuery UI onderaan de
en een aangepast stijlblad in de . We hebben op dit moment niet veel stijlen nodig, omdat er niet veel op de pagina staat om te stijlen, maar laten we het sowieso als volgt toevoegen met enkele basisstijlen voor de pagina-elementen erin; in een nieuw bestand in je code-editor voeg je het volgende toe:#content width: 440px; #content img float: right; margin-left: 20px;
Bewaar dit kleine bestand als dragToShare.css in dezelfde map als onze HTML-pagina. Maak je geen zorgen, we zullen binnenkort wat meer stijlen toevoegen aan de stylesheet. Onze voorbeeldpagina zou er op dit moment zo uit moeten zien:
We moeten de afbeelding versleepbaar maken, wat we kunnen doen met jQuery UI, en het volgende toevoegen
Dat is alles wat we moeten doen! We cachen de selector alleen in voor de elementen die we versleepbaar willen maken en noemen de methode draggable () voor de resulterende verzameling elementen. Door nu de muisknop ingedrukt te houden, kan de afbeelding in ons voorbeeld over de pagina worden gesleept. De afbeelding wordt versleept zodra het document wordt geladen, omdat onze code is ingepakt in de snelkoppeling $ (function () ).
Naast het cachen van de selector die onze afbeeldingen retourneert, plaatsen we ook een selector in de cache die de titel van de pagina opslaat. IE retourneert een lege tekenreeks wanneer jQuery wordt gebruikt om de paginatitel op te halen, zodat we in dit geval terugkeren naar document.title.
We moeten nog veel doen voordat we klaar zijn; wat we eerst moeten doen is de bezoeker laten weten dat het slepen van de afbeelding iets doet. Ten eerste kunnen we een beetje CSS gebruiken om de muisaanwijzer 'verplaatsen' in te stellen wanneer we over de afbeelding zweven; voeg de volgende regel toe aan het einde van dragToShare.css:
.ui-draggable cursor: verplaatsen;
We targeten de klasse .ui-draggable die door jQuery UI is toegevoegd met deze stijl, zodat de afbeelding alleen de verplaatsingcursor overneemt als de afbeelding versleepbaar is gemaakt, wat niet gebeurt als JavaScript is uitgeschakeld of anders niet beschikbaar. Het gebruik van de klassenaam in plaats van de: hover pseudo-klasse is ook veel beter voor compatibiliteit tussen browsers.
Om echt duidelijk te maken dat het slepen van de afbeelding iets is, kunnen we ook een tooltip toevoegen om de bezoeker expliciet te vertellen wat hij moet doen; na de methode draggable () de volgende nieuwe code toevoegen:
Accentsconagua
var createTip = function (e) // maak tooltip als deze niet bestaat ($ ("# tip"). length === 0)? $ ("") .Html ("Sleep deze afbeelding om de pagina te delen<\/span><\/span>") .attr (" id "," tip "). css (links: e.pageX + 30, boven: e.pageY - 16). appendTo (" body "). fadeIn (2000): null; ; images.bind ("mouseenter", createTip); images.mousemove (functie (e) // tooltip verplaatsen $ ("# tip"). css (links: e.pageX + 30, boven: e.pageY - 16);); images.mouseleave (function () // tooltip $ verwijderen ("# tip"). Remove ();); We hebben in feite drie nieuwe gebeurtenishandlers toegevoegd aan onze code; de eerste gebeurtenishandler is de createTip-functie, die wordt gedefinieerd als een variabele en wordt doorgegeven aan de methode bind () van jQuery, samen met de tekenreeksmouseenter die de gebeurtenis aangeeft. De volgende twee functies zijn anoniem en worden inline doorgegeven aan de mousemove () en mouseleave () hulpmethoden van jQuery.
In de createTip-functie controleren we eerst of de knopinfo al bestaat door te kijken of een selector hiervoor een lengte van 0 heeft. Als dat het geval is (een lengte van 0 hebben), weten we dat die knop niet bestaat en deze dan kan maken. We stellen de innerHTML van de tooltip zo in dat deze een reeks bevat die het bericht voor de bezoeker bevat, en een tweede lege reeks die we zullen gebruiken voor een kleine decoratie wanneer we de extra CSS in een moment toevoegen.
We geven de tooltip een id, zodat we deze later efficiënt kunnen selecteren en de linker en bovenste CSS-eigenschappen kunnen instellen met behulp van de eigenschappen pageX en pageY van het gebeurtenisobject (e) die automatisch aan onze functie worden doorgegeven. Vervolgens voegen we de tooltip toe aan de hoofdtekst van de pagina en vervagen deze langzaam. Om HTML-fouten te voorkomen, moeten we ontsnappen aan de forward-slashes in de onbewerkte HTML die we toevoegen aan de tooltip.
De mousemove-functie wordt gebruikt om de tooltip-track met de aanwijzer te maken, dus wanneer de aanwijzer beweegt, verplaatst de tooltip zich mee. We gebruiken de CSS-methode opnieuw en ook de eigenschappen pageX en pageY. Ten slotte verwijdert de functie Mouseleave eenvoudig de tooltip van de pagina.
De tooltip stylen
Nu kunnen we wat CSS toevoegen voor onze tooltip; in het belang van progressieve verbetering zullen we de sexy CSS3 rgba-stijl gebruiken om tooltip semi-transparant te maken in geschikte browsers; onder aan dragToShare.css voeg de volgende nieuwe selectors en regels toe:
#tip positie: absoluut; Geen weergeven; hoogte: 25 pixels; opvulling: 9px 9px 0px; color: # fff; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; font-weight: bold; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; achtergrond: # 000; achtergrond: RGBA (0,0,0, 0,5); #tip .arrow width: 0; Hoogte: 0; line-height: 0; border-right: 8px solid # 000; border-right: 8px solid rgba (0,0,0, .5); border-top: 8px solide transparant; border-bottom: 8px solid transparant; positie: absoluut; left: -8px; top: 9px;
Dat is alles wat we nodig hebben. De meeste stijlen zijn vrij eenvoudig, maar we gebruiken de randradius-stijlen om de tooltip afgeronde hoeken in gecko en webkit-browsers te geven, en zoals ik al eerder zei gebruiken we rgba om de tooltip semi-transparant te maken. Dit is een geweldig effect en hoewel het alleen wordt ondersteund in enkele veelgebruikte browsers, is het veel efficiënter dan het gebruik van een alfa-transparante PNG.
De lege reeks die we aan de knopinfo hebben toegevoegd, is zodanig gestyled dat het eruit ziet als een tekstballonkijl die naar de muisaanwijzer wijst. Dit is gemaakt met behulp van de CSS-shapes-techniek en aangezien het geen CSS3 is, wordt het in de meeste browsers ondersteund. Het wordt zelfs ondersteund in IE6, hoewel de grenstransparantie die we eraan geven niet wordt ondersteund. We zouden dit gemakkelijk genoeg kunnen oplossen als we dat echt zouden willen, maar voor de doeleinden van deze tutorial ga ik niet afwijken van dit onderwerp.
Merk op dat we ook rgba gebruiken voor de border-kleur van onze overspanning, zodat deze aansluit op de rest van de tooltip. Nu, IE (elke versie) zal deze rgba-stijlen niet ondersteunen, maar omdat we normale kleuren voor de rgba-verklaringen hebben gegeven, in zowel de tip als de overspanning, zal de tooltip in IE gewoon effen zwart verschijnen. Hier is hoe onze tooltip er op zijn mooist uit zal zien, mooi is het niet?
Toevoegen van de Drop Targets
Ok, dus onze bezoekers weten nu dat ze de afbeelding ergens naartoe kunnen slepen om de pagina te delen, maar waar slepen ze die naartoe? En waar kunnen ze het delen? We moeten nu reageren op de afbeelding die wordt gesleept en de doelen voor neerzetten weergeven, die zullen bestaan uit een reeks koppelingen naar sociale netwerksites. We hebben verschillende dingen die we hier moeten doen; we moeten een overlay toevoegen aan de pagina en eerst de drop-doelen maken.
We konden de drop-doelen helemaal van nul creëren, on-the-fly, met jQuery zoals we deden met de tooltip, maar in het wild zou dit waarschijnlijk resulteren in een onaanvaardbare vertraging voor sommige bezoekers. We kunnen dit minimaliseren door de onderliggende mark-up voor de dropdoelen aan de pagina toe te voegen en deze alleen te laten zien wanneer dat nodig is. Direct voor dee
