0

Всем привет, что-то не пойму как лучше сверстать и сделать кликабельными кнопки сортировки, как на данном скриншоте.

Namе и Percentagе получаются связанными радио баттонами, то есть можно выбрать что-то одно - либо Name, либо Percentage.

введите сюда описание изображения

4
  • У Вас уже есть какой-нибудь код для наглядности? 20 окт 2016 в 16:04
  • мне б в целом идею подсказать я бы сам написал просто пока не очень понимаю как правильно сделать, я так понимаю это через радио батон делается при этом его стилизовать нужно и повесить событие которое будет срабатывать на onSelected - вроде так? 20 окт 2016 в 16:06
  • Не обязательно радио. Вам же нужно сортировать в обе стороны - по возрастанию и убыванию, а как Вы с радио это сделаете, если он УЖЕ selected? 20 окт 2016 в 16:08
  • 1
    например jsfiddle.net/gabrieleromanato/eJf55 (вместо ASk Desk поставить стрелочки), либо есть плагины tablesorter.com/docs , tinysort.sjeiti.com
    – SVE
    20 окт 2016 в 16:26

2 ответа 2

2

Треугольники можно сделать с помощью css. Хранить состояние с помощью checkbox (еще можно зарегистрировать для него событие, чтобы отлавливать нажатие). Для добавления стрелок использовать :before и :after псевдоклассы. Привязать нажатие на стрелочки можно, применив псевдоклассы к 'label', который ссылается на checkbox по id.

В этом варианте можно обойтись без скриптов для переключения состояния стрелочек, однако, мне потребовалось два дополнительных псевдокласса для переключения.

Возможно, вам подойдет этот вариант.

$('#stateInput').change(function() {
  console.log('This value is now: ' + $(this).prop('checked'));
})
div {
  font-size: 20px;
}
.arrows {
  position: relative;
  cursor: pointer;
}
#stateInput {
  display: none;
}
#stateInput + .arrows:after {
  content: ' ';
  position: absolute;
  left: 10px;
  bottom: -16px;
  border: 10px solid transparent;
  border-top: 10px solid green;
  border-width: 12px 7px;
}
#stateInput:checked + .arrows:after {
  content: ' ';
  position: absolute;
  left: 10px;
  bottom: -16px;
  border: 10px solid transparent;
  border-top: 10px solid gray;
  border-width: 12px 7px;
}
#stateInput + .arrows:before {
  content: ' ';
  position: absolute;
  left: 10px;
  bottom: 12px;
  border: 10px solid transparent;
  border-bottom: 10px solid gray;
  border-width: 12px 7px;
}
#stateInput:checked + .arrows:before {
  content: ' ';
  position: absolute;
  left: 10px;
  bottom: 12px;
  border: 10px solid transparent;
  border-bottom: 10px solid green;
  border-width: 12px 7px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  Some text
  <input type="checkbox" id="stateInput">
  <label for="stateInput" class="arrows"></label>
</div>

Добавлено
Cо стилизацией под кнопку

$('#stateInput').change(function() {
  console.log('This value is now: ' + $(this).prop('checked'));
})
.button {
  position: relative;
  font-size: 20px;
  text-decoration: none;
  display: inline-block;
  border: 1px solid green;
  color: green;
}
.button:active {
  color: gray;
  background: #eee;
}
.button > .arrows {
  position: relative;
  cursor: pointer;
  display: block;
  padding: 8px 10px;
  padding-right: 30px;
}
.button > input {
  display: none;
}
#stateInput + .arrows:after,
#stateInput + .arrows:before {
  content: ' ';
  position: absolute;
  right: 10px;
  border: 10px solid transparent;
}
#stateInput + .arrows:after {
  bottom: -6px;
  border-top: 10px solid green;
  border-width: 12px 7px;
}
#stateInput + .arrows:before {
  top: -6px;
  border-bottom: 10px solid gray;
  border-width: 12px 7px;
}
#stateInput:checked + .arrows:before {
  border-bottom-color: green;
}
#stateInput:checked + .arrows:after {
  border-top-color: gray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="button">
  <input type="checkbox" id="stateInput">
  <label for="stateInput" class="arrows">Some text</label>
</a>

1
  • Спасибо большое Andrew! очень круто вышло ! 21 окт 2016 в 11:41
1

$('button').on('click', function() {
  $(this).hasClass('desc') || $(this).hasClass('asc') ? 
    $(this).toggleClass('asc desc') : $(this).addClass('desc');
});
button {
  background: #fff;
  border: 1px solid #eee;
  cursor: pointer;
  overflow: hidden;
  padding: .75em 2.25em .75em 1em;
  position: relative;
}

button:before,
button:after {
  border-style: solid;
  border-width: 8px 5px;
  border-color: transparent;
  content: '';
  height: 0;
  position: absolute;
    right: 10px;
  width: 0;
}

button:before {
  border-bottom-color: #ccc;
  top: 0;
}

button:after {
  border-top-color: #ccc;
  bottom: 0;
}

.asc:before {
  border-bottom-color: #777;
}

.desc:after {
  border-top-color: #777;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="name">Name</button>
<button id="perc">Percentage</button>

1
  • Спасибо Zoltan , выглядит круто! 21 окт 2016 в 11:42

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.