Возможность выбора пользовательского интерфейса jQuery как в виде сетки, так и в виде списка в таблице

ProgramBox

Возможность выбора пользовательского интерфейса jQuery как в виде сетки, так и в виде списка в таблице

Post author:admin
Запись опубликована:6 марта, 2023
Post category:Вопросы по программированию

#jquery #css #jquery-ui #overflow #jquery-ui-selectable

#jquery #css #jquery-ui #переполнение #jquery-выбираемый пользовательский интерфейс

Вопрос:

Я подготовил jsFiddle для моего вопроса —

Я пытаюсь выбрать пользовательский интерфейс jQuery в таблице с желтыми строками верхнего и нижнего колонтитулов. Один раз в виде сетки чисел в левой ячейке, а затем в виде списка букв в правой ячейке.

Также я пытаюсь, чтобы таблица занимала как 100% ширины, так и высоты браузера.

Вот почему я назначил CSS-properties width: 100% и height: 100vh таблице, и overflow-y: scroll обоим выбираемым.

Однако по какой-то причине прокрутка вправо не работает, т. Е. Отображается весь список букв и, таким образом, увеличивается высота таблицы.

TLDR:

Списки чисел / букв должны иметь одинаковую высоту и быть прокручиваемыми
Желтый верхний / нижний колонтитул должен быть виден в верхней / нижней части окна браузера

Вот мой код —

Javascript:

   $(function() {
    $("#selectable1").selectable();
    $("#selectable2").selectable();
  });

CSS:

 <table>
  <tr>
    <td colspan=2 bgcolor="yellow">Header1</td>
  </tr>
  <tr>
    <td>
      <ol id="selectable1">
        <li class="ui-state-default">1</li>
        <li class="ui-state-default">2</li>
        <li class="ui-state-default">3</li>
        <li class="ui-state-default">4</li>
        <li class="ui-state-default">5</li>
        <li class="ui-state-default">6</li>
        <li class="ui-state-default">7</li>
        <li class="ui-state-default">8</li>
        <li class="ui-state-default">9</li>
        <li class="ui-state-default">10</li>
        <li class="ui-state-default">11</li>
        <li class="ui-state-default">12</li>
      </ol>
    </td>
    <td>
      <ol id="selectable2">
        <li class="ui-state-default">A</li>
        <li class="ui-state-default">B</li>
        <li class="ui-state-default">C</li>
        <li class="ui-state-default">D</li>
        <li class="ui-state-default">E</li>
        <li class="ui-state-default">F</li>
        <li class="ui-state-default">G</li>
        <li class="ui-state-default">H</li>
        <li class="ui-state-default">I</li>
        <li class="ui-state-default">J</li>
      </ol>
    </td>
  </tr>
  <tr>
    <td colspan=2 bgcolor="yellow">Footer1</td>
  </tr>
</table>

CSS:

 table {
  width: 100%;
  height: 100vh;
}

#selectable1 {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow-y: scroll;
}

#selectable2 {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 100px;
  overflow-y: scroll; /* WHY IS THIS NOT WORKING? */
}

#selectable1 li,
#selectable2 li {
  margin: 3px;
  padding: 1px;
  float: left;
  width: 100px;
  height: 80px;
  font-size: 4em;
  text-align: center;
}

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

1. Неясно, с чем вам нужна помощь. Выбираемый или CSS?

2. CSS, есть ли, пожалуйста, способ установить для ячеек цифр и букв одинаковую (и максимальную) высоту?

3. Вам нужно сохранить структуру таблицы? Если нет, я бы переместил каждый из них в DIV, и тогда вам будет легче решить проблемы с CSS.

4. Я хотел бы отойти от ТАБЛИЦЫ html, но я не понимаю, как отобразить на экране как заголовки, так и нижние колонтитулы, а затем область букв / цифр. Я просто не уверен, как это сделать с помощью DIVs

5. Я бы хотел, чтобы верхний / нижний колонтитулы занимали как можно меньше места (но все равно были видны). А буквы / цифры TR занимают как можно больше места и прокручиваются

Ответ №1:

Обновить:

Для поддержки IE 11 вы можете обновить свой CSS, включив -ms-grid в него определенные стили, и он должен работать, но опять же вам, возможно, придется тщательно его протестировать:

 $(function() {
  $("#selectable1").selectable();
  $("#selectable2").selectable();
});

 body {
  margin: 0;
  padding: 0;
}

.header {
  background: yellow;
  -ms-grid-row: 1; /* for IE */
}

.footer {
  background: yellow;
  -ms-grid-row: 3; /* for IE */
}

div.table {
  display: grid;
  width: 100vw;
  height: 100vh;
  
  /* for IE */
  display: -ms-grid;
  -ms-grid-columns: 1fr;
  -ms-grid-rows: 20px 1fr 20px;
}

div.container {
  display: grid;
  grid-template-columns: auto 140px;
  grid-column-gap: 10px;
  overflow: hidden;
  
  /* for IE */
  display: -ms-grid;
  -ms-grid-columns: 1fr 140px;
  -ms-grid-rows: 1fr;
  -ms-grid-row: 2;
}

div.container div {
  overflow: auto;
}

div.container div.column1 {
    -ms-grid-column: 1; /* for IE */
}

div.container div.column2 {
    -ms-grid-column: 2; /* for IE */
}

#selectable1 {
  list-style-type: none;
  margin: 0;
  padding: 0;
  flex: 1;
}

#selectable2 {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#selectable1 li,
#selectable2 li {
  margin: 3px;
  padding: 1px;
  float: left;
  width: 100px;
  height: 80px;
  font-size: 4em;
  text-align: center;
}

 <link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="table">
  <div class="header">Header1</div>
  <div class="container">
    <div class="column1">
      <ol id="selectable1">
        <li class="ui-state-default">1</li>
        <li class="ui-state-default">2</li>
        <li class="ui-state-default">3</li>
        <li class="ui-state-default">4</li>
        <li class="ui-state-default">5</li>
        <li class="ui-state-default">6</li>
        <li class="ui-state-default">7</li>
        <li class="ui-state-default">8</li>
        <li class="ui-state-default">9</li>
        <li class="ui-state-default">10</li>
        <li class="ui-state-default">11</li>
        <li class="ui-state-default">12</li>
      </ol>
    </div>
    <div class="column2">
      <ol id="selectable2">
        <li class="ui-state-default">A</li>
        <li class="ui-state-default">B</li>
        <li class="ui-state-default">C</li>
        <li class="ui-state-default">D</li>
        <li class="ui-state-default">E</li>
        <li class="ui-state-default">F</li>
        <li class="ui-state-default">G</li>
        <li class="ui-state-default">H</li>
        <li class="ui-state-default">I</li>
        <li class="ui-state-default">J</li>
      </ol>
    </div>
  </div>
  <div class="footer">Footer1</div>
</div>

Вы должны иметь возможность использовать CSS Grid для достижения желаемого, если вы готовы заменить ими таблицу:

 $(function() {
  $("#selectable1").selectable();
  $("#selectable2").selectable();
});

 body {
  margin: 0;
  padding: 0;
}

.header,
.footer {
  background: yellow;
}

div.table {
  display: grid;
  width: 100vw;
  height: 100vh;
}

div.container {
  display: grid;
  grid-template-columns: auto 140px;
  grid-column-gap: 10px;
  overflow: auto;
}

div.container div {
  overflow-y: auto;
  height: 100%;
}

#selectable1 {
  list-style-type: none;
  margin: 0;
  padding: 0;
  flex: 1;
}

#selectable2 {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#selectable1 li,
#selectable2 li {
  margin: 3px;
  padding: 1px;
  float: left;
  width: 100px;
  height: 80px;
  font-size: 4em;
  text-align: center;
}

 <link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="table">
  <div class="header">Header1</div>
  <div class="container">
    <div>
      <ol id="selectable1">
        <li class="ui-state-default">1</li>
        <li class="ui-state-default">2</li>
        <li class="ui-state-default">3</li>
        <li class="ui-state-default">4</li>
        <li class="ui-state-default">5</li>
        <li class="ui-state-default">6</li>
        <li class="ui-state-default">7</li>
        <li class="ui-state-default">8</li>
        <li class="ui-state-default">9</li>
        <li class="ui-state-default">10</li>
        <li class="ui-state-default">11</li>
        <li class="ui-state-default">12</li>
      </ol>
    </div>
    <div>
      <ol id="selectable2">
        <li class="ui-state-default">A</li>
        <li class="ui-state-default">B</li>
        <li class="ui-state-default">C</li>
        <li class="ui-state-default">D</li>
        <li class="ui-state-default">E</li>
        <li class="ui-state-default">F</li>
        <li class="ui-state-default">G</li>
        <li class="ui-state-default">H</li>
        <li class="ui-state-default">I</li>
        <li class="ui-state-default">J</li>
      </ol>
    </div>
  </div>
  <div class="footer">Footer1</div>
</div>

1. Это работает просто отлично, за исключением браузера IE (о котором, я знаю, я не упоминал). Пожалуйста, позвольте мне подождать несколько дней и принять ответ. Зачем это overflow: auto; нужно?

2. overflow: auto необходимо для обеспечения того, чтобы контейнер div не расширялся полностью и отображал полосы прокрутки, когда высота / ширина содержимого превышает ширину / высоту его контейнера. Что касается IE, вы имеете в виду edge или IE 11? CSS3 Grid не поддерживаются в IE, но поддерживаются в edge. Я обновил ответ, включив css для IE 11.

3. Да, теперь он работает с IE 11 просто отлично, спасибо. Мне все еще приходится поддерживать IE, потому что моя карточная игра предназначена для российских пользователей, некоторые из которых все еще используют Win 7.

Ответ №2:

Рассмотрим следующее: https://jsfiddle.net/Twisty/uro3b2ps/17 /

HTML

 <div class="page">
  <div class="header">Header1</div>
  <div class="content">
    <ol id="selectable1">
      <li class="ui-state-default">1</li>
      <li class="ui-state-default">2</li>
      <li class="ui-state-default">3</li>
      <li class="ui-state-default">4</li>
      <li class="ui-state-default">5</li>
      <li class="ui-state-default">6</li>
      <li class="ui-state-default">7</li>
      <li class="ui-state-default">8</li>
      <li class="ui-state-default">9</li>
      <li class="ui-state-default">10</li>
      <li class="ui-state-default">11</li>
      <li class="ui-state-default">12</li>
    </ol>
    <ol id="selectable2">
      <li class="ui-state-default">A</li>
      <li class="ui-state-default">B</li>
      <li class="ui-state-default">C</li>
      <li class="ui-state-default">D</li>
      <li class="ui-state-default">E</li>
      <li class="ui-state-default">F</li>
      <li class="ui-state-default">G</li>
      <li class="ui-state-default">H</li>
      <li class="ui-state-default">I</li>
      <li class="ui-state-default">J</li>
    </ol>
  </div>
  <div class="footer">
    <td colspan=2 bgcolor="yellow">Footer1</td>
  </div>
</div>

CSS

 .header,
.footer {
  width: 100%;
  background-color: yellow;
}

.content {
  height: 100vh;
  overflow: hidden;
}

#selectable1 {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  width: calc(100% - 150px);
  float: left;
}

#selectable2 {
  list-style-type: none;
  margin: 0;
  padding: 10px;
  width: 100px;
  height: 100vh;
  overflow-y: scroll;
}

#selectable1 li,
#selectable2 li {
  margin: 3px;
  padding: 1px;
  float: left;
  width: 100px;
  height: 80px;
  font-size: 4em;
  text-align: center;
}

Есть много других способов сделать это. inline-block это еще один из многих способов заблокировать что-либо, но оставить место после него для других элементов. float также есть другой способ.

По сути, вам нужно установить высоту для элемента списка, и это создаст полосу прокрутки при переполнении.

Обновлено

https://jsfiddle.net/Twisty/uro3b2ps/21/

 #selectable2 {
  list-style-type: none;
  margin: 0;
  padding: 10px;
  width: 110px;
  height: 200px;
  overflow-y: scroll;
}

Обновление 2

https://jsfiddle.net/Twisty/uro3b2ps/25/

Это использует jQuery для динамической установки высоты на основе окна.

1. Спасибо за ваше предложение, но, к сожалению, желтый нижний колонтитул не виден, #selectable2, похоже, толкает его вниз. Сначала я подумал, может быть, проблема с jsfiddle, но после сохранения вашего кода в отдельный HTML-файл проблема сохраняется: нижний колонтитул не виден.

2. Вы обновили свой ответ, установив фиксированное height: 200px; значение для #selectabled2 , но это не решение, нижний колонтитул должен быть внизу экрана (вот почему я пытаюсь использовать height: 100vh; для родительской таблицы). В вашем обновленном jsfiddle желтый нижний колонтитул находится ближе к середине экрана

3. @AlexanderFarber это было неясно из вашего сообщения. Обновленный ответ.