Ich möchte die Beschreibungsposition eines HTML-Elements mit der Gerätebreite (Fensterbreite) ändern.
In Medienabfragen (CSS3) kann die Anzeige entsprechend dem Haltepunkt durch Anpassen von Float, Position, Anzeige usw. geändert werden, die Beschreibungsposition des Elements in HTML kann jedoch nicht geändert werden.
Wenn es schwierig ist, damit umzugehen, ohne die Beschreibungsposition des Elements im HTML-Code zu ändern, kann es möglicherweise einfach mit Javascript (in diesem Fall JQuery) gelöst werden.
Beispiel: Die Anzeige von „Informationen“ wird in der linken Spalte (Seite) der Beispielseite unten angezeigt. Wenn jedoch die Breite des Geräts (Fensters) verringert wird, wird sie in HTML in die linke Spalte (Seite) geschrieben, also in die linke Spalte (Seite) ist Natürlich, wenn es unter die Hauptspalte kommt, folgt „Informationen“.
Hier möchte ich die Anzeigeposition von „Informationen“ ändern, indem ich die Beschreibungsposition (*1) des Elements im HTML ändere, ohne der linken Spalte (Seite) mit Javascript (jQuery) zu folgen.
*1 Die Beschreibung des Elements im HTML wird nicht wirklich neu geschrieben, sondern im Browser durch Javascript geändert.
Laden Sie jQuery.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
Führen Sie jQuery aus.
<script> $(function(){ //ここにコード}); </script>
Ermitteln Sie die Gerätebreite (Fensterbreite) mit jQuery.
$(window).width();
Mit jQuery nach Gerätebreite (Fensterbreite) verarbeiten. (für Haltepunkt 768px)
var _width = $(window).width(); if(_width <= 768){ //デバイス（ウィンドウ）幅が768px以下の時の処理}else{ //『デバイス（ウィンドウ）幅が768px以下』以外のときの時の処理}
Ändern Sie die Beschreibungsposition des Elements in HTML mit jQuery.
Dieses Mal wird insertBefore(content)* von jQuery verwendet, um ein Element vor einem anderen angegebenen Element einzufügen.
//『Information』を『main』記事の前に挿入する。 $('#box_info01').insertBefore('#box_main01 .box_article01'); //『Information』を元の位置に挿入する。 $('#box_info01').insertBefore('#h3_side01');
*Zusätzlich zu insertBefore(content) bietet jQuery verschiedene APIs wie insertAfter(content), before(content), after(content) und clone().
Nachfolgend finden Sie eine Zusammenfassung des bisherigen Prozesses.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> <script> $(function(){ var _width = $(window).width();//デバイス（ウィンドウ）幅を取得 if(_width <= 768){ //デバイス（ウィンドウ）幅が768px以下の時の処理 //『Information』を『main』記事の前に挿入する。 $('#box_info01').insertBefore('#box_main01 .box_article01'); }else{ //『デバイス（ウィンドウ）幅が768px以下』以外のときの時の処理 //『Information』を元の位置に挿入する。 $('#box_info01').insertBefore('#h3_side01'); } }); </script>
* Wenn das Obige unverändert bleibt, wird der Vorgang auch bei Änderung der Fenstergröße nicht angezeigt, es sei denn, er wird neu geladen.
Ich muss mit jQuerys bind(type, [data], fn) umgehen, wenn sich die Fenstergröße ändert.
Beispiel) $(window).bind("load resize", init);
Im obigen Beispiel wird die Funktion „init“ ausgeführt, wenn das Fenster „$(window)“ geladen und in der Größe geändert wird.
Zusammenfassend lautet der Code wie folgt.
$('#box_info01').insertBefore('#box_main01.box_article01'); }anders{ // Verarbeitung, wenn die Breite des Geräts (Fensters) nicht 768 Pixel beträgt // „Information“ an der ursprünglichen Position einfügen. $('#box_info01').insertBefore('#h3_side01'); } } //drin }); </script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> <script> $(function(){ $(window).bind("load resize", init);//ウィンドウが『読込み』もしくは『ウィンドウサイズ変更』された時、関数『init』を実行 function init(){//下記の処理を関数『init』として定義する var _width = $(window).width();//デバイス（ウィンドウ）幅を取得 if(_width <= 768){ //デバイス（ウィンドウ）幅が768px以下の時の処理 //『Information』を『main』記事の前に挿入する。
Die obige jQuery wurde zu sample02 hinzugefügt.
Ich möchte einen Animationseffekt hinzufügen.
Wenn in Beispiel 01 die Breite des Geräts (Fensters) 320 Pixel oder weniger beträgt, wird das globale Menü ausgeblendet und angezeigt, indem Sie mit der Maus über „MENU“ (#gnav) fahren, aber mit jQuery und Animationseffekten (nach unten schieben, nach oben schieben).
Simulieren Sie die Bewegung des Mauszeigers mit jQuery.
// Verarbeitung beim Bewegen des Mauszeigers über „MENU“ (#gnav) }, Funktion(){ // Verarbeitung, wenn der Hover ausgeschaltet ist, auf „MENU“ (#gnav) } );
$('#gnav').hover( function(){
Fügen Sie mit jQuery einen Animationseffekt zur Anzeige hinzu.
Dieses Mal verwende ich jQuerys slideDown() und slideUp().
//表示するときにスライドダウンさせる。 $('#gnav').children('ul').slideDown(); //非表示するときにスライドアップさせる。 $('#gnav').children('ul').slideUp();
Kombinieren Sie das oben Gesagte.
$('#gnav').hover( function(){ //『MENU』(#gnav)にホバーしてる時の処理 //表示するときにスライドダウンさせる。 $(this).children('ul').slideDown(); }, function(){ //『MENU』(#gnav)にホバーがはずれた時の処理 //非表示するときにスライドアップさせる。 $(this).children('ul').slideUp(); } );
Darüber hinaus kombiniert jQuery die Verarbeitung für jede Gerätebreite (Fensterbreite). (für Haltepunkt 320px)
if(_width <= 320){ // Verarbeitung, wenn die Breite des Geräts (Fensters) weniger als 320 Pixel beträgt $('#gnav').children('ul').css({'display':'none'});//Anfänglich ausgeblendet. $('#gnav').hover( Funktion(){ // Verarbeitung beim Bewegen des Mauszeigers über „MENU“ (#gnav) // Beim Anzeigen nach unten schieben. $(this).children('ul').slideDown(); }, Funktion(){ // Verarbeitung, wenn der Hover ausgeschaltet ist, auf „MENU“ (#gnav) //Nach oben schieben, wenn es ausgeblendet ist. $(this).children('ul').slideUp(); } ); }anders{ // Verarbeitung, wenn die Breite des Geräts (Fensters) nicht 320 Pixel beträgt $('#gnav').children('ul').css({'display':'block'});//Immer anzeigen. }
Vorsichtsmaßnahmen bei der gemeinsamen Verwendung von CSS und Javascript (jQuery).
Vor dem Codieren in HTML prüfen wir die Spezifikationen und Wünsche des Kunden. Wenn es zum Design kommt, wenn es keinen Plan für jeden Haltepunkt gibt oder unklar ist, werden wir immer um Bestätigung bitten.
Wenn Sie von Anfang an leichtfertig mit Javascript programmieren, ist es später oft schwierig, mit Änderungen in Spezifikationen und Designs umzugehen.
Grundsätzlich ist es besser, mit CSS und HTML zu erstellen und so wenig Javascript wie möglich zu verwenden, damit Browser und verschiedene Geräte weniger kompatibel sind.
Beim nächsten Mal werde ich Tools vorstellen, die im responsiven Webdesign eingesetzt werden können.
