#javascript #jquery #jquery-mobile #jquery-ui-selectmenu
#javascript #jquery #jquery-мобильный #jquery-ui-selectmenu
Вопрос:
У меня есть виджет selectmenu с множеством опций. Я хотел бы добавить кнопку «показать больше» в качестве последней опции, которая затем либо загрузит дополнительные параметры и обновит виджет, либо просто переключит их видимость, чтобы показать их, если они уже были загружены, но не были видны (любой метод был бы в порядке, я не возражаю).).
Проблема в том, что щелчок по опции «показать еще» закрывает само меню выбора! Для этого должен быть обходной путь, поскольку разрешение выбора нескольких параметров не закрывает виджет при нажатии на него.
Есть идеи?
Комментарии:
1. Может быть, я могу включить тег-заполнитель данных или отключенный тег. Это достигло бы моей цели, и я мог бы придать ему одинаковый вид. Запускают ли они событие при нажатии? Если да, то как я могу это вызвать?
Ответ №1:
да, отключенная опция может быть полезной
Но сначала дайте ему идентификатор, что-то вроде:
<option id="other" disabled style="color: black; text-align: center;">Other choices</option>
затем часть js (с jQuery):
function goToOther(){
var url = "http://qwant.com";
window.location = url;
}
$( document ).ready(function() {
$('#other').on('click', function(){
goToOther();
});
});
Комментарии:
1. Это не сработало, потому что disabled делает его не кликабельным… Есть еще идеи?
2. Это интерактивно, если это виджет Selectmenu для jquery-mobile.
3. Спасибо @piem, но, к сожалению, я все еще не могу заставить его работать, взгляните на эту скрипку .
4. Если вы установите для data-native-menu значение «true», это сработает. После этого все становится css
5. Хорошо, но мне нужно, чтобы это был объект в стиле jQuery mobile. Есть ли способ заставить его работать с data-native-menu=false?
Ответ №2:
Установите для data-native-menu значение true и улучшите стиль jqm меню с помощью css, что-то вроде:
.fakeList{background-clip: padding-box;
background-color: rgb(246, 246, 246);
border-bottom-color: rgb(221, 221, 221);
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom-style: solid;
border-bottom-width: 1px;
border-left-color: rgb(221, 221, 221);
border-left-style: solid;
border-left-width: 1px;
border-right-color: rgb(221, 221, 221);
border-right-style: solid;
border-right-width: 1px;
border-top-color: rgb(221, 221, 221);
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-top-style: solid;
border-top-width: 1px;
box-shadow: rgba(0, 0, 0, 0.15) 0px 1px 3px 0px;
color: rgb(51, 51, 51);
cursor: pointer;
display: block;
font-family: sans-serif;
font-size: 16px;
font-weight: 700;
line-height: 20.8px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
opacity: 1;
overflow: hidden;
overflow-x: hidden;
overflow-y: hidden;
padding-bottom: 11.2px;
padding-left: 16px;
padding-right: 40px;
padding-top: 11.2px;
position: relative;
text-align: center;
text-decoration: none;
text-decoration-color: rgb(51, 51, 51);
text-decoration-line: none;
text-decoration-style: solid;
text-overflow: ellipsis;
text-shadow: rgb(243, 243, 243) 0px 1px 0px;
white-space: nowrap;
-moz-user-select: none;
} затем в js :
$( document ).ready(function() {
$('option').addClass('fakeList');
$('#showMore').on('click', function(){
alert("do show more");
});
}); Комментарии:
1. Спасибо @piem, у меня это все еще не работает, хотя, возможно, это связано с совместимостью с браузером. Я тестирую Safari на Mac, хотя на самом деле мне это нужно только для работы с Safari на iOS. Это для веб-приложения, которое я создаю для своей компании, и они выпускают нам iPhone, поэтому я даже не утруждаю себя тестированием на других платформах на данном этапе. Если я установлю data-native-menu=true, то я получу колесо прокрутки, созданное iOS, которое даже не позволит мне выбрать опцию «отключено». Не уверен, что эта стратегия сработает. Возможно, мне нужно будет создать собственное всплывающее окно и сделать все это вручную…