Ответ 1

Обновление 13/11/2013 @12:09 GMT
Просто потому, что вы сделали полное редактирование на свой пост, я просто сделал то же самое! не нужны эти данные!
однако, я ответил на многие ваши вопросы, которые вы уже просите! ПОСЛЕДНИЕ: http://jsfiddle.net/sijav/pwv7u/1/

• Я сделал это просто: просто используйте код удара: (Он был уменьшен!)

  $("#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);}});
  

Также вам нужно установить идентификатор Next Class и Previous ID класса на правильный и удалить href!

• вам нужно удалить overflow: auto; из класса контейнера! а затем замените $( "# container" ) на $("body") прокруткой влево/вправо! так:

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

  и

  $("a.def").click(function () {
          $('body').animate({
              "scrollLeft": "-=204"
          }, 200);
  });
  
  $("a.abc").click(function () {
      $("body").animate({
              "scrollLeft": "+=204"
          }, 200);
  });
  

• Это потому, что вы просто положили это под нижний колонтитул1! вы приносите его вперед, он будет выглядеть правильно, а также почему бы не поставить полупрозрачный черный фон? background: rgba(0, 0, 0, 0.58);

• Я не вижу никаких проблем с этим после упомянутых выше изменений!

• Хорошая идея... посмотрим...:

• Снова я уже давал вам код, как ajax дважды! и снова вам не нужно помещать их в формат json! html-формат будет отличным для того, что вы хотите! просто сохраните их как class1.html, class2.html, class3.html и т.д. и получите правильный html и вставьте таблицу вместо текущего в контейнер! код будет выглядеть следующим образом:

  $.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
  });
  

Простенько? вы можете поместить http://fiddle.jshell.net/pwv7u/show/ в url для проверки и посмотреть, что произойдет?!

• почему бы не поставить эти параметры в html файл и получить его, как я упоминаю выше?!
• Хорошо, я сказал вам достаточно выше,
• $("#container").html(SomeHtmlString) изменит весь контейнер с текущим
• у вас может быть... (дождитесь его)... setInterval(functionThatIncludeAjaxName,milisecond) (я уже говорил вам раньше)
• вы можете получить все данные от них и добавить то, что хотите, с помощью "+", а затем $("container").html(TheAppendedHTMLString)
• у вас может быть что-то вроде этого = > http://jsfiddle.net/sijav/WJ8Js/
• Одна вещь, для мобильного просмотра, вы можете использовать некоторые api, которые масштабируют всю веб-страницу в соответствии с шириной тела! это очень полезно на планшетах и ​​мобильных устройствах.
  
  

Удачи и не стесняйтесь спрашивать, не можете ли вы правильно понять мой ответ или просто задать новые вопросы.

Ответ 2

Введение

В попытке охватить все ваши вопросы я попытался включить демоверсию во все ответы. К сожалению, я всего лишь один человек, и я не смог создать демоверсию для всех ответов. Если кто-то чувствует, что у ГЭС есть что-то, чтобы внести свой вклад, не стесняйтесь комментировать или редактировать это.

Обновление

В ответ на @DennisSylvian обновленный вопрос вот мои обновления.

Ответы

• • Чтобы прокрутить переполнение, вам было бы лучше использовать:

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

    DEMO здесь

  • Если вы хотите позиционировать элементы простым способом, используя css, вы можете определить родителя как position: relative;, а затем дать каждому элементу a position: absolute; "выбросить" их в каждый угол:

    .controller-wrapper {position: relative; } .top-left,.top-right,.bottom-left,.bottom-right {position: absolute; } .top-left {top: 0; left: 0; } .top-right {top: 0; право: 0; } //...

  Обновить: DEMO здесь

• • Вы можете добавить любое смещение, которое у вас есть к функции прокрутки:

    var offset = 80; // Or any other calculation
    $('html,body').animate({
        scrollTop: aTag.offset().top + offset
    }, 1);
    

  • Я не совсем уверен, что вы имеете в виду класс, как в css .class, или класс, как в классе школы, но если он последний, вы можете поместить идентификатор на каждый td, который вы хотели бы прокрутить до:

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

    Затем вы можете создать свой список из этого идентификатора, используя:

    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() );
    
      });
    

    Это потребует небольшого изменения вашей функции scrollToAnchor:

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

    DEMO здесь

• Это немного сложно, поскольку движок рендеринга браузеров не вычисляет значение столбцов на основе содержимого самой большой ячейки.

  Вам нужно будет либо использовать плагин (так как код для написания гораздо больше, чем может ответить этот ответ) или вручную установить ширину на основе логики данных столбца, т.е. если у вас есть столбец с именами в нем вы можете вручную установить первую ширину td для самого длинного имени в списке.

  Обновление: Другой вариант, предложенный @sijav, заключается в использовании:

  table td { white-space: nowrap; }
  

• Обновление

  Вы можете вытащить одну страницу с помощью раскрывающегося списка и $.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 );
    });
  });
  

  В приведенном выше примере ваш код на стороне сервера будет отображать html и отправить в таблицу, готовую к вставке в dom. Поскольку вся таблица создается "на лету", вам придется использовать пузырьки событий (привязка события к элементу, который не отображается из вызова ajax).

  Пример кнопки выделения строки должен быть записан следующим образом:

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

  ---

  Данные не обязательно должны входить в формат JSON (хотя это было бы более гибким, если в будущем вам нужно будет что-то сделать с данными).

  Вы можете выводить свои данные как html вместо JSON из вашего кода сервера.

  Чтобы проверить, обновлены ли данные или нет, вы можете опросить флаг, который должен выводить код сервера.

  // 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);
  

  Приведенный выше код является примером метода опроса для обновления вашего контента.

• Чтобы "запомнить" выбранную строку, вы можете использовать localStorage.

  Есть несколько способов сделать это, это один из них:

   // 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 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 здесь

Ответ 3

Давайте посмотрим (прокрутите вниз для обновления)

(demo at http://jsfiddle.net/u7UkS/2/)

• Слайдеры прокрутки влево и вправо (фиксация прокрутки?)
  Вам нужно анимировать scrollLeft вместо margin. Он автоматически позаботится о превышении значений, поскольку он не может прокручивать больше, чем разрешено.

  $("a.abc").click(function () {
      $('#container').animate({
          "scrollLeft": "-=204"
      }, 200);
  });
  
  $("a.def").click(function () {
      $("#container").animate({
          "scrollLeft": "+=204"
      }, 200);
  });
  

• Anchor Cycler/Dropdown List для перехода к каждому классу?
  Вы можете перебрать элементы a, получить их id и popuplate a select. Затем обработайте событие change и анимируйте выбранную позицию с помощью класса scrollToAnchor

  <select class="class-selector">
      <option value="">-select class-</option>
  </select>
  

  и

  // gather CLASS info
  var selector = $('.class-selector').on('change', function(){
      var id = this.value;
      if (id!==''){
          scrollToAnchor(id);
      }
  });
  $('a[id^="CLASS"]').each(function(){
      var id = this.id,
          option = $('<option>',{
              value: this.id,
              text:this.id
          });
      selector.append(option);
  });
  

• Автоматизация столбцов?
  Просто установите white-space:nowrap в элементы th/td

  td, th {
      white-space:nowrap;
  }
  

• Загрузка/обновление разделов классов из JSON.
  Вы не указали для этого код. Поэтому я просто опишу, как это сделать.
  Для повторения запроса AJAX используйте таймаут и после того, как вы обработаете его результат, пожар новый

  function handleData(data){
     //loop over data and edit the DOM
     $.each(data, function(index, item){
       // variable item refers to the current CLASS of the iteration
       // assuming that the JSON is an array of CLASS groups describing the rows..
  
       //find the DOM section with the current class info and update data..
     });
     setTimeout(checkData, 30000);
  }
  function checkData(){
      $.getJSON('the-url-to-your-json', handleData);
  }
  // initiate the first timeout
  setTimout(checkData, 30000); // 30000 ms is 30sec.
  

• Cookies? для запоминания и восстановления выбранных строк
  Нет необходимости использовать файлы cookie, только в шаге 4 не удаляйте всю строку и повторно вставляйте, а вместо этого редактируйте содержимое элементов td. Таким образом, tr будет поддерживать свой class, и стилизация будет сохраняться. Кроме того, перед перезаписыванием строки chack, если она имеет класс selected, и если так, добавьте ее в строку, которую вы собираетесь вставить.

Демо на http://jsfiddle.net/u7UkS/2/

Я также отредактировал ваш scrollToAnchor и удалил 80 из scrollTop для учетной записи для заголовка

function scrollToAnchor(aid) {
    var aTag = $("a[id='" + aid + "']");
    $('html,body').animate({
        scrollTop: aTag.offset().top - 80
    }, 1);
}

Обновление

Предполагая из вашего обновления вопрос, что вам не нужно постоянно показывать все классы и обновлять их все

вы можете показать/скрыть КЛАССЫ в зависимости от выбора в раскрывающемся меню с этим css и кодом

#container tbody, #container thead {
    display:none;
}
#container tbody.current {
    display:table-row-group;
}
#container thead.current {
    display:table-header-group;
}

и

    var classSelector = $('.class-selector');

    // gather CLASS info
    classSelector.on('change', function () {

        var id = this.value;
        $('#container').find('thead, tbody').removeClass('current');
        if (id !== '') {
            //scrollToAnchor(id);
            var group = $('#' + id).closest('thead');
            group.add(group.next('tbody'))
                .addClass('current');
        }

        // since we changed the current CLASS, initiate a checkdata() so that we can update as soon as possible.. 
        checkData();
    }).trigger('change');

Теперь, когда мы выполняем запрос AJAX, мы можем отправить ему некоторые данные на сервер, чтобы ограничить возвращаемую информацию. Итак, в checkData делаем

function checkData() {
        var currentId = classSelector.val();

        if (currentId !== ''){
            // Start AJAX request
            alert('starting ajax request for ' + currentId);
            // change /echo/json/ with the url to your json
            // delay should be removed, it just for jsfiddle..
            jsonRequest = $.getJSON('/echo/json/', {'delay':2,'class' : currentId}, handleData);        
        }
    }

и handleData

function handleData(data) {
    alert('handling data');
    //loop over data and edit the DOM        
    var classBody = $('#container').find('tbody.current');
    $.each(data, function (index, item) {
        // variable item refers to the current CLASS of the iteration
        // assuming that the JSON is an array of CLASS groups describing the rows..

        // populate classBody with the JSON data

    });
    jsonTimeout = setTimeout(checkData, 10000); // change the 10000 to whatever you want.. i set it to 10 seconds to see the repeating..
}

Вы увидите jsonTimeout = setTimeout(..) и jsonRequest = $.getJSON(..). Мы сохраняем их в переменной, чтобы мы могли прервать их, когда мы меняем текущий класс, чтобы избежать избыточной обработки

Это делается добавлением

    if (jsonTimeout) clearTimeout(jsonTimeout);
    if (jsonRequest) jsonRequest.abort();

обработчику change выпадающего списка.

Обновлено демо на http://jsfiddle.net/u7UkS/4/

Ответ 4

1) Вы должны понимать, что вы не прокручиваете страницу, как это было бы с вашим прокруткой на мыши. Вы на самом деле манипулируете маржами слева, и это приводит к тому, что вы даете ему очень большие значения. Тогда, похоже, вы сказали. Там огромное пространство между столом и концом вашего экрана. Чтобы решить эту проблему, вам нужно добавить оператор if, который будет проверять, слишком ли сильно увеличиваете значение margin-left.

 $("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) Вы можете использовать переменную localStorage, встроенную функцию JavaScript. Вы можете просто определить любую переменную и использовать ее за сеанс. Вот пример:

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