Heim > Web-Frontend > H5-Tutorial > Zusammenfassung des HTML5- und CSS3-Tutorials (empfohlen)

Zusammenfassung des HTML5- und CSS3-Tutorials (empfohlen)

黄舟
Freigeben: 2017-02-20 13:33:37
Original
1553 Leute haben es durchsucht

Über die Trennung von Onclick-Verhalten und Inhalt

1. Popup-Fenster über Links auslösen (diese Methode wird nicht empfohlen!!!)


<a href=&#39;#&#39;    

        onclcik = "window.open(&#39;holiday_pay.html&#39;,WinName,&#39;width=300, height = 300&#39;);">  

    Holiday Pay    

    </a>
Nach dem Login kopieren



Wenn JS deaktiviert ist und der Link den Benutzer nicht zur entsprechenden Seite führen kann, weisen Sie dem href-Attribut kein „#“ und ähnliche Werte zu

2. Normale Situation

<a href=&#39;holiday_pay.html&#39;    

        onclcik = "window.open(this.href,WinName,&#39;width=300, height = 300&#39;);">  

    Holiday Pay    

    </a>
Nach dem Login kopieren



3.0 Eine große Anzahl doppelter Links weist einen identifizierbaren Klassennamen zu zu jedem Link hinzufügen und mit jQuery jedem Klick einen eindeutigen Klassennamen zuweisen. Listener zu den jeweiligen Ereignissen hinzufügen

<a href="holiday_pay" class="popup">Holiday pay</a>  

      

    var links = $("a.popup");   

      

    links.clcik(function(event){   

       event.preventDefault();   

       window.open($(this).attr(&#39;href&#39;));      

    });
Nach dem Login kopieren



3.1 Legen Sie die Größe des Popup-Fensters über mehrere benutzerdefinierte Datentypen fest

<a href ="holiday_pay.html"  

        data-width="600"  

        data-heigth = "400"  

        title = "Holiday Pay"  

        class = "popup"> Holiday pay </a>
Nach dem Login kopieren



$(function(){   

       $(".popup").click(function(event){   

           event.preventDefault();   

           var href=$(this).attr("href");   

           var width = $(this).attr("data-width");   

           var height = $(this).attr("data-height");   

           var popup = window.open(href,"popup","height="+height+",width="+width+"");   

    }) ;   

    });
Nach dem Login kopieren



Die obige Zusammenfassung (empfohlen) der HTML5- und CSS3-Beispiel-Tutorials ist das, was der Herausgeber mit allen Inhalten geteilt hat. Ich hoffe, sie kann Ihnen eine Referenz geben. Weitere verwandte Inhalte finden Sie auf der PHP-Chinese-Website (www .php.cn)!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage