Есть ли шанс, что этот код Как проанализировать значение из popover to textbox? будет ли работать также с бета-версией Bootstrap 4? Я пытался изменить этот код, но не могу понять. Кто-нибудь может помочь? Спасибо.
Передать всплывающее окно со значением для ввода
14.12.2017
Ответы:
1
Идея, лежащая в основе ответа на упомянутый вариант Bootstrap 3, остается в силе, и она работает и в Bootstrap 4. Я создал свою версию этого в среде Bootstrap 4 во фрагменте ниже.
Смотрите некоторые пояснения в комментариях.
$(function() {
var popover = $('[data-toggle="popover"]');
// Popover init
popover.popover({
'content' : $('#popover-content').html(),
'html' : true,
'placement' : 'auto',
});
// Listen to delegated 'change' events, filtered to `.popover select`
$(document).on('change', '.popover select', function() {
// `this` is the <select> now
// No need to find :selected, use $select.val()
var selected = $(this).val();
$('#input').val(selected);
popover.popover('hide');
});
});<input id="input" type="text" class="form-control" data-toggle="popover" placeholder="placeholder"/>
<div id="popover-content" style="display:none;">
<select>
<option>Please select</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>ОБНОВЛЕНИЕ: для устранения события клика и поддержки нескольких полей ввода.
Первый фрагмент ниже следует логике предыдущего кода с событием change, но теперь прослушивает событие click дополнительной кнопки «отправить». Чтобы это работало, пришлось изменить селектор делегированного прослушивателя событий и соответствующим образом скорректировать обработчик кода.
$(function() {
var popover = $('[data-toggle="popover"]');
// Popover init
popover.popover({
'content' : $('#popover-content').html(),
'html' : true,
'placement' : 'auto',
});
// Listen to delegated 'click' events, filtered to `.popover`
$(document).on('click', '.popover', function(event) {
// `this` is the '.popover' now
// `event.target` is the clicked element
// If clicked element was not a `.btn` then return
if (!$(this).find('.btn').filter(event.target).length) {
return;
}
// Finding <select> in popover and grab its selected value
var selected = $(this).find('select').val();
$('#input').val(selected);
popover.popover('hide');
});
});<input id="input" type="text" class="form-control" data-toggle="popover" placeholder="placeholder"/>
<div id="popover-content" style="display:none;">
<select>
<option>Please select</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
<a href="#" class="btn btn-primary">OK</a>
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>Хотя это все еще просто с парой строк кода, его трудно расширить для использования более чем с одним полем ввода, поскольку $('#input') жестко запрограммировано в обработчике. Так было и в первом примере.
Итак, наконец, я придумал другой подход, который связывает событие click с методом .one() jQuery с самим всплывающим окном. При этом можно относительно ссылаться на несколько полей ввода и соответствующие всплывающие окна.
$(function() {
var inputs = $('[data-toggle="popover"]');
// Popover init
inputs.popover({
'content' : $('#popover-content').html(),
'html' : true,
'placement' : 'auto',
});
inputs.on('shown.bs.popover', function() {
// 'aria-describedby' is an attribute set by Bootstrap indicationg the #id of popover
var popover = $('#' + $(this).attr('aria-describedby'));
// jQuery.one(events [, selector ] [, data ], handler);
// Passing references to <select> and <input> with `data` to `handler`
popover.one('click', '.btn', {
'$select' : popover.find('select'),
'$input' : $(this),
}, function(event) {
// `event.data.$select` === `popover.find('select')`, the <select> in the popover
var selected = event.data.$select.val();
event.data.$input
.val(selected)// set the value of <input>
.popover('hide');// hide the popover
});
});
});<input type="text" class="form-control" data-toggle="popover" placeholder="placeholder 1"/>
<input type="text" class="form-control" data-toggle="popover" placeholder="placeholder 2"/>
<input type="text" class="form-control" data-toggle="popover" placeholder="placeholder 3"/>
<div id="popover-content" style="display:none;">
<select>
<option>Please select</option>
<option value="yes">Yes</option>
<option value="no">No</option>
<option value="maybe">Maybe</option>
</select>
<a href="#" class="btn btn-primary">OK</a>
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
15.12.2017
Новые материалы
Объяснение документов 02: BERT
BERT представил двухступенчатую структуру обучения: предварительное обучение и тонкая настройка.
Во время предварительного обучения модель обучается на неразмеченных данных с помощью..
Как проанализировать работу вашего классификатора?
Не всегда просто знать, какие показатели использовать
С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..
Работа с цепями Маркова, часть 4 (Машинное обучение)
Нелинейные цепи Маркова с агрегатором и их приложения (arXiv)
Автор : Бар Лайт
Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..
Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
Как вы сегодня, ребята?
В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..
Использование машинного обучения и Python для классификации 1000 сезонов новичков MLB Hitter
Чему может научиться машина, глядя на сезоны новичков 1000 игроков MLB? Это то, что исследует это приложение.
В этом процессе мы будем использовать неконтролируемое обучение, чтобы..
Учебные заметки: создание моего первого пакета Node.js
Это мои обучающие заметки, когда я научился создавать свой самый первый пакет Node.js, распространяемый через npm.
Оглавление
Глоссарий
I. Новый пакет
1.1 советы по инициализации..
Забудьте о Matplotlib: улучшите визуализацию данных с помощью умопомрачительных функций Seaborn!
Примечание. Эта запись в блоге предполагает базовое знакомство с Python и концепциями анализа данных.
Привет, энтузиасты данных! Добро пожаловать в мой блог, где я расскажу о невероятных..
clickи предлагается новый подход, который также работает с несколькими входными данными. 16.12.2017