Pytanie Anchor Cycler / Dropdown do okresowego importowania danych z klasy szkolnej


WIĘC,

Ostatnio pracowałem nad plikiem html / javascript / css, aby utworzyć tabelę online dla moich uczniów, aby wyświetlić szczegóły, wyniki i różne informacje, ale uderzyłem w mur i nie jestem pewien, jak to zrobić. do zrobienia.

Powód, dla którego publikuję wszystkie te informacje w jednym wątku, jest taki, że niektóre z nich mogą powodować konflikt i powodować, że poprzednie edycje nie działają ...

Zdaję sobie sprawę, że jest tu wiele pytań i nie oczekuję, że ktoś zakoduje to wszystko, szukam tylko pomocy / drobiazgów / pomysłów i będę bardzo wdzięczny, szczególnie tym, którzy mają komentarze / opisy, żebym mógł kontynuuj naukę i ulepszaj :)


Aktualizacja 13.11.2013 @ 02:43 GMT

NAJNOWSZY: http://jsfiddle.net/pwv7u/

  • Próbuję dostać Next Class | Previous Class byc cyklicznymi przyciskami do przechodzenia do iz klas tak samo jak rozwijanie działa.
  • Pasek przewijania znajdujący się na dole strony zniknął, ponieważ szerokość została zmieniona ...
  • Stopka u dołu nie wyświetla się prawidłowo na urządzeniach mobilnych, a przyciski Przewiń w lewo i Przewiń nie pojawiają się w ogóle na urządzeniach mobilnych.
  • Lewego przycisku przewijania nie można kliknąć
  • Odświeżanie strony resetuje poziome położenie przewijania do lewej strony (jestem pewien, że odnosi się to do paska przewijania)

  • Jeśli chodzi o ładowanie / odświeżanie, myślę, że będę musiał napisać kolejny wpis, ponieważ obecne opcje są prawie na miejscu, ale nie całkiem, będę przykład poniżej sposobu (ów), który idealnie chcę, aby działał.

    • main.html nie będzie zawierał żadnych szczegółów klasowych: http://pastebin.com/raw.php?i=HwXM67up
    • "Opcja" (dropdown) będzie jakoś sondować plik json, aby zebrać listę dostępnych klas
    • "Opcja" (rozwijana) będzie zawierała opcje dla każdej klasy szkolnej oraz "Wszystkie aktualizacje" i "Wszystkie niepobieralne"
    • Wybranie indywidualnej klasy szkolnej będzie importować TYLKO tę konkretną klasę szkolną na stronę.
    • Wybranie innej indywidualnej klasy szkolnej zniszczy klasę oldschoolową i zaimportuje nowo wybraną klasę szkolną.
    • Poszczególne klasy szkolne będą okresowo odpytywały plik json, aby sprawdzić aktualizacje / zmiany w tych danych klas szkolnych oraz zmiany / aktualizacji, które będą ponownie rysowane / ponownie importowane.
    • Wybranie opcji "Wszystkie aktualizacje" spowoduje zaimportowanie WSZYSTKICH klas szkolnych i okresowe odpytywanie pliku json w celu sprawdzenia aktualizacji / zmian w dowolnej klasie szkolnej (jeśli to możliwe, tylko aktualizowanie klasy szkolnej, co zostało zmienione / zaktualizowane), ale we wszystkich klasach widocznych na stronie.
    • Wybranie "Wszystkie niepobieralne" spowoduje to samo, co powyżej, ale nie będzie konieczne odpytywanie pliku json w celu aktualizacji.
  • Mogę podzielić dane na bloki takie jak: http://pastebin.com/raw.php?i=MRpjvJp0 (pierwszy przykład bloku) dość łatwo i daje im poprawne tytuły (tytuły, które będą używane w menu opcji), nie wiesz, jak je umieścić w formacie json

14
2017-11-07 20:05


pochodzenie


Myślę, że mądrze byłoby umieścić na pojemniku stałą szerokość i używać overflow-x:scroll do obsługi przewijania w tabeli - Danny
@Danny Jest już w kontenerze i ma pasek przewijania, ale staram się, aby niektóre przyciski działały poprawnie, przewijają w tej chwili, ale za daleko (jak pokazano: i.imgur.com/4YBHXgs.png) - Dennis Sylvian
@DennisSylvian Zobacz moją zaktualizowaną odpowiedź - Sijav
Czy zastanawiałeś się nad użyciem "numeracji stronicowania / stron" zamiast wyświetlania całej rzeczy na 1 stronie? Ułatwiłoby ci to życie - evilReiko
To pytanie wydaje się być nie na temat, ponieważ, jak to teraz wygląda, nie ma jednego konkretnego pytania, które będzie miało szerokie zainteresowanie dla przyszłych czytelników - jest to bardziej sesja debugowania. Zadowolony, że to rozwiązałeś! - halfer


Odpowiedzi:


Aktualizacja 13.11.2013 @ 12:09 GMT
Tylko dlatego, że wykonałeś całą edycję swojego posta, po prostu zrobiłem to samo! nie potrzebujesz tych danych!
jednak odpowiedziałem na wiele twoich pytań, o które już prosisz!
NAJNOWSZY: http://jsfiddle.net/sijav/pwv7u/1/

  • Zrobiłem to po prostu, Wystarczy użyć kodu blow: (Jest minified!)

    $("#PreviousClass").click(function(){if(currentClass>1){currentClass--;$('.class-selector').val("CLASS"+currentClass);scrollToAnchor("CLASS"+currentClass);}});
    $("#NextClass").click(function(){if(currentClass<6){currentClass++;$('.class-selector').val("CLASS"+currentClass);scrollToAnchor("CLASS"+currentClass);}});
    

Musisz również ustawić Next Class i Previous class ID na właściwy i usunąć href!

  • musisz usunąć overflow: auto; z klasy kontenerowej! a następnie zamień $ ("# container") na $("body") przewiń w lewo / w prawo! więc:

    #container {
    margin: 0 auto;
    /*overflow: auto;*/
    padding: 80px 0;
    width: 100%;
    }
    

    i:

    $("a.def").click(function () {
            $('body').animate({
                "scrollLeft": "-=204"
            }, 200);
    });
    
    $("a.abc").click(function () {
        $("body").animate({
                "scrollLeft": "+=204"
            }, 200);
    });
    
  • To dlatego, że po prostu umieszczasz to pod stopką1! z ciebie przynieść do przodu, to będzie wyglądać poprawnie, także dlaczego nie umieścić semy przezroczystego czarnego tła? background: rgba(0, 0, 0, 0.58);

  • Po tych zmianach, o których mowa powyżej, nie widzę żadnego problemu!

  • Dobry pomysł ... Zobaczmy ...:

  • Znowu dam wam dwa razy kod do ajax'a! i znowu nie ma potrzeby umieszczania ich w formacie json! format html będzie całkiem niezły w tym, co chcesz zrobić! po prostu zapisz je jako class1.html, class2.html, class3.html, itp. i pobierz odpowiedni html i wstaw tabelę zamiast aktualnego w kontenerze! kod byłby:

    $.ajax({
    url: "class1.html", //this can be anything! better to use a variable like "class"+currentClass
    dataType: "HTML",
    error: function(){alert("Error on communicate to server"}, //what to do on error
    success: function(html){$("#container").html(html)}, //replace the container on success
    });
    

Proste, prawda? możesz włożyć http://fiddle.jshell.net/pwv7u/show/ w adresie URL, aby przetestować i zobaczyć, co się stanie ?!

  • dlaczego nie umieścić tych opcji w pliku html i uzyskać to jak wspomnę powyżej?!
  • Cóż, powiedziałem ci wystarczająco dużo na górze,
  • $("#container").html(SomeHtmlString) zmieni cały pojemnik na obecny
  • możesz ... (zaczekać) ... setInterval(functionThatIncludeAjaxName,milisecond) (Mówiłem ci wcześniej)
  • możesz pobrać z nich wszystkie dane i dopisać to, co chcesz, za pomocą znaku "+", a następnie $("container").html(TheAppendedHTMLString)
  • możesz mieć coś takiego => http://jsfiddle.net/sijav/WJ8Js/
  • Jedna rzecz, w przypadku mobilnego widoku, możesz użyć api, który skaluje całą stronę zgodnie z szerokością ciała! jest bardzo przydatny na tabletach i urządzeniach mobilnych.

Życzymy powodzenia i zapytaj, czy nie potrafisz dobrze zrozumieć mojej odpowiedzi lub po prostu mam nowe pytania.


8
2017-11-10 14:40



Kilka świetnych odpowiedzi, proszę zobaczyć mój oryginalny wpis (na dole), aby odpowiedzieć na twoje pytania (bardzo trudno jest ułożyć w komentarzach) - Dennis Sylvian
Dodałem kolejną aktualizację dla Ciebie, między Twoimi cudownymi ludźmi, odpowiadającymi, Dużo się uczę, patrząc na twoje zmiany i porównując je z poprzednim. - Dennis Sylvian
Nadal przechodzę przez wszystkie posty, które najlepiej mi odpowiadają, a potem zaktualizuję główny post, ale nie będę w stanie w pełni działać. Dwa problemy, które mam w tej chwili, to to, że pliki cookie nie usuwają / nie usuwają usunięcia następnego dnia, kasują / kasują po 24 godzinach (muszę znaleźć sposób, aby data ciasteczka nie była aktualna następnie powinien usunąć plik cookie), a także po wybraniu wiersza dodaje plik cookie, ale wybierając go ponownie nie mogę edytować pliku cookie (nigdy nie robiłem nic z ciasteczkami przed innymi niż je jeść): S - Dennis Sylvian
Nagrodziłem cię swoimi dobrze zdobytymi punktami, napisałem nowy post o nowych błędach, które zrobiłem (wszystkie oparte na Css, myślę). Muszę jeszcze raz podziękować za wspaniałą pomoc. Nauczyłem się wielu rzeczy :) Dzięki - Dennis Sylvian
@DennisSylvian zapraszamy i dziękujemy;) cieszę się, że mogłem pomóc. - Sijav


Zobaczmy (przewiń w dół, aby zaktualizować)

(wersja demonstracyjna na  http://jsfiddle.net/u7UkS/2/


6
2017-11-10 13:17



Zobacz mój zaktualizowany oryginalny post, dodałem tam kilka komentarzy na dole, ponieważ niemożliwe jest ustrukturyzowanie odpowiedzi w komentarzach> _ <Dziękuję bardzo wiele :) - Dennis Sylvian
@DennisSylvian i zaktualizowałem moją odpowiedź (zaktualizowana część znajduje się na końcu odpowiedzi) - Gabriele Petrioli
Dodałem kolejną aktualizację, muszę powiedzieć, że Twój kod jest naprawdę imponujący. Uczę się mnóstwa drobiazgów: P - Dennis Sylvian


Przedmowa

Próbując objąć wszystkie twoje pytania, starałem się uwzględnić dema we wszystkich odpowiedziach. Niestety jestem tylko jednym mężczyzną i nie mogłem stworzyć prezentacji dla wszystkich odpowiedzi. Jeśli ktoś czuje, że ma coś do przekazania, prosimy o komentarz lub edycję.

Aktualizacje

W odpowiedzi na zaktualizowane pytanie @ DennisSylvian tutaj są moje aktualizacje.

Odpowiedzi

    1. Aby przewinąć przepełnienie, lepiej byłoby użyć:

      $('.table-wrapper')[0].scrollLeft += 50;
      

      DEMO tutaj

    2. Jeśli chcesz pozycjonować elementy w prosty sposób, używając css, możesz zdefiniować rodzica jako position: relative; a następnie podaj każdy element a position: absolute; "wyrzucać" je do każdego rogu:

      .controller-wrapper {position: relative; } .top-left, .top-right, .bottom-left, .bottom-right {position: absolute; } .top-left {top: 0; lewo: 0; } .top-right {top: 0; prawe: 0; } // ...

    Aktualizacja: DEMO tutaj

    1. Możesz dodać przesunięcie, które masz do funkcji przewijania:

      var offset = 80; // Or any other calculation
      $('html,body').animate({
          scrollTop: aTag.offset().top + offset
      }, 1);
      
    2. Nie jestem do końca pewien, czy masz na myśli klasę jak w css .class lub klasa jak w klasie szkolnej, ale jeśli jest to druga klasa, możesz umieścić identyfikator na każdym z nich td chcesz przewinąć do:

      <td id="class1" class="scrollto">Title</td>
      <!-- ... -->
      <td id="class2" class="scrollto">Title</td>
      

      Następnie możesz zbudować swoją listę z tych identyfikatorów za pomocą:

      var anchorList = [];
      
      $('.scrollto').each(function(){
      
        anchorList.push( '<option value="'+ this.id +'">'+ this.id +'</option>' );
      
      });
      
      // This is an empty select menu
      $('#anchor-list')
        .append( anchorList.join('') )
        .change(function(){
      
          scrollToAnchor( $(this).val() );
      
        });
      

      To wymagałoby niewielkiej zmiany w twoim scrollToAnchor funkcjonować:

      // Put this line
      var aTag = $('#' + aid);
      
      // Instead of this one:
      var aTag = $("a[id='" + aid + "']");
      

      DEMO tutaj

  1. Jest to nieco skomplikowane, ponieważ silnik renderujący przeglądarki nie oblicza wartości kolumn na podstawie zawartości największej komórki.

    Musiałbyś użyć wtyczki (ponieważ kod do napisania jest znacznie większy niż ta odpowiedź może obejmować) lub ręcznie ustawić szerokość w oparciu o logikę danych kolumny, tzn. Jeśli masz kolumnę, która ma w niej nazwy można ręcznie ustawić pierwszy td szerokość do najdłuższej nazwy na liście.

    Aktualizacja: Inną opcją sugerowaną przez @sijav jest użycie:

    table td { white-space: nowrap; }
    
  2. Aktualizacja:

    Możesz przeciągnąć pojedynczą stronę przy użyciu menu rozwijanego i $.get():

    <select id="class-list">
      <option value="1">Class 1</option>
    </select>
    

    $('#class-list').change(function(){
      $.get('/server/data/class', { class: $(this).val() }, function(data){
        $('#container').html( data );
      });
    });
    

    W powyższym przykładzie twój kod po stronie serwera renderowałby html i wysłać w tabeli gotowy do wstawienia do dom. Ponieważ cały stół jest tworzony w locie, musisz użyć propagacji zdarzeń (wiążąc zdarzenie z elementem, który nie jest renderowany z wywołania ajax).

    Przykład przycisku wiersza wyróżniającego musiałby być zapisany w następujący sposób:

     $('#container').on('click', 'tr', function(){
       var $this = $(this);
    
       $this
         .addClass('highlight')
         .siblings('tr')
         .removeClass('highlight');
     });
    

    Dane niekoniecznie muszą wejść JSON format (choć byłoby to bardziej zwinne, gdyby w przyszłości trzeba było zrobić coś innego z danymi).

    Możesz wysyłać swoje dane jako HTML zamiast JSON z twojego kodu serwera.

    Aby sprawdzić, czy dane zostały zaktualizowane, można sondować flagę, którą powinien wydrukować kod serwera.

    // Poll every minute
    setTimeout(function(){
    
      // Check for changed content
      $.get('/server/data/changed', function( data ){
    
        // Server indicates content has changed get the content and update
        if ( data.flag ){
    
          $.get('/server/data/get', function( data ){
            updateHtml( data );
          });
    
        }
    
      });
    }, 1000 * 60);
    

    Powyższy kod jest przykładem a technika głosowania do aktualizacji twoich treści.

  3. Aby "zapamiętać" wiersz, który został kliknięty, możesz go użyć localStorage.

    Istnieje kilka sposobów, aby to zrobić, to jeden z nich:

     // On page ready
     jQuery(function( $ ){
    
       var rowIndex = localStorage.getItem('rowIndex');
    
       if ( rowIndex ) {
    
         $( 'table tr' ).eq( rowIndex ).addClass('highlight');
    
       }
    
       // Save the row to localstorage based on it's index in the table
       var saveRow = function ( index ) {
    
         localStorage.setItem( 'rowIndex', index );
    
       };
    
       // Highlight the row and save it
       $( 'table tr' ).click(function(){
    
         var $this = $(this);
    
         $this
           .addClass('highlight')
           .siblings('tr')
           .removeClass('highlight');
    
         saveRow( $this.index() );
    
       });
    
       // On page exit/reload/change check for highlighted row and "save" it to localstorage
       $(window).on('beforeunload', function(){
    
         saveRow( $('.highlight').index() );
    
       });
    
     });
    

    DEMO tutaj


6
2017-11-08 18:43



Kilka bardzo miłych odpowiedzi, proszę zobaczyć mój oryginalny post (na dole), aby odpowiedzieć na twoje pytania (bardzo trudno jest ułożyć w komentarzach) - Dennis Sylvian
@DennisSylvian Odpowiedź została zaktualizowana zgodnie z Twoim komentarzem ... - hitautodestruct
WIELKOŚCI doceniam czas, wysiłek i jakość twojego posta, tak jak to robię z pozostałymi dwoma osobami, które odpowiedziały. W idealnym świecie, gdyby stackoverflow miał zdolność podziału punktów nagrody, zrobiłbym to. Twój post wcale nie ma znaczenia, niektóre rzeczy w twoim poście wciąż działają, niektóre nigdy nie działały nawet na starcie. Ostatecznie inni faceci odpowiadają na moje potrzeby, pracowali lepiej. System poprawek oznacza, że ​​Twoja odpowiedź jest nadal ważna w wersji "Moje oryginalne wersje". W tym wpisie jest mnóstwo funkcji i metod, które będą pasować do ludzi w inny sposób. Przykro mi, że czujesz się taki zgorzkniały :( Dzięki - Dennis Sylvian
@hitautodestruct Gdy pytania mają nagrodę w wysokości 250 punktów, często otrzymujesz wiele odpowiedzi, które zasługują na "wygraną" w nagrodę. Były 3 przyzwoite odpowiedzi na to pytanie, które prawdopodobnie zasługiwały na nagrodę. Osobiście raczej wnieś skargę do OP, który był wyraźnie wdzięczny za twoją odpowiedź, powinieneś wziąć ją do meta zamiast tego i poprosić o możliwość podzielenia kwot do wprowadzenia. - AEA
@DennisSylvian Szczerze nie dbam o nagrodę. Chodzi mi o to, że teraz nie ma trafności w mojej odpowiedzi, że pytanie zostało zmienione. Mówienie, że ktoś przyjrzy się rewizji jest jak powiedzenie, że ktoś spojrzy na zmienioną treść wpisu wikipedia, co oznacza, że ​​to się nie wydarzy. Jeśli któreś z moich rozwiązań nie działa, proszę je wskazać i poprawię je. Wydaje się również, że komentarz, na który odpowiedziano, został usunięty. Dlaczego? - hitautodestruct


1) Musisz sobie uświadomić, że nie przewijasz strony tak, jak robiłeśby to przy pomocy przewijania na myszy. W rzeczywistości manipulujesz lewym marginesem, a to zachowanie powoduje, że dajesz mu bardzo duże wartości. Wygląda na to, że powiedziałeś. Jest ogromna przestrzeń między stołem a końcem ekranu. Aby go rozwiązać, musisz dodać instrukcję if, która będzie sprawdzać, czy próbujesz zwiększyć margines - zostawiłeś za dużo.

 $("a.def").click(function() {
    $("#gradient-style").each(function(){
        var margin =$(this).css("margin-left");

        if(margin > -204)
             $(this).animate({"margin-left":"+=204px"},200);
        else
             $(this).animate({"margin-left":"+=" +(-margin)},200);
    });
});

5) Możesz użyć Lokalny magazyn zmienna, która jest wbudowaną funkcją JavaScript. Możesz po prostu zdefiniować dowolną zmienną i użyć jej podczas sesji. Oto przykład:

 localStorage.numberOfRow =1;
 console.log(localStorage.numberOfRow);     //1

3



Próbowałem Twojego przykładu dla pierwszej opcji, ale nadal nie mogę go uruchomić, z jakiegoś powodu nie przewija się wcale, gdy próbuję dodać instrukcję sprawdzania. Jeśli chodzi o odpowiedź na punkt 5, nigdy nie wiedziałem, że "localStorage" istniało i wygląda całkiem nieźle, ale wczoraj spędziłem kilka godzin wczoraj. - Dennis Sylvian
To działało na pierwszą kopię twojego kodu. Teraz zmieniłeś go na ScrollLeft i jest to lepszy pomysł. O localStorage, powinien działać na twojej stronie, ale może jest jakiś problem z powodu obsługi przeglądarek. Powinieneś spróbować przeczytać referencję. - Nonemoticoner