Архивы bootstrap

Диалоговые окна на boostrap5 + jquery

08.06.2022 Павел Грибов WEB

Лень двигатель прогресса (с). В одной из задач, используется довольно большое количество однотипных окон с вопросами и кнопками -Да, Нет, Ок и т.д. Чтобы не рисовать каждый раз эти окна руками в коде html, можно поступить лучше: оформить создание диалогового окна «на лету» с вызовом пользовательской функции по нажатию какой-то из кнопок.

Решение:

function UUID_V4() {
    var S4 = function() {
       return (((1+Math.random())*0x10000)|0).toString(16).substring(1);
    };
    return (S4()+S4()+"-"+S4()+"-"+S4()+"-"+S4()+"-"+S4()+S4()+S4());
}

function Dialog(title,message,buttons=Array(),callback=function(){}){
  var uuid=UUID_V4();  
       html='<div class="modal fade" id="'+uuid+'" tabindex="-1" role="dialog" aria-labelledby="'+uuid+'Label" aria-hidden="true">';
  html=html+' <div class="modal-dialog modal-lg">';
  html=html+'  <div class="modal-content">';
  html=html+'    <div class="modal-header">';
  html=html+'      <h5 class="modal-title" id=""'+uuid+'Label">'+title+'</h5>';
  html=html+'      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>';
  html=html+'    </div>';
  html=html+'    <div class="modal-body">';
  html=html+'        <p>'+message+'</p>';
  html=html+'    </div>';
  html=html+'    <div class="modal-footer">';
  buttons.forEach(function(bt, index, array) {
    if (index==0){
      html=html+'<button type="button" onclick="'+callback.name+'(\''+bt+'\')" class="btn btn-secondary" data-bs-dismiss="modal">'+bt+'</button>';  
    } else {
      html=html+'<button type="button" onclick="'+callback.name+'(\''+bt+'\')" class="btn btn-primary" data-bs-dismiss="modal">'+bt+'</button>';  
    };    
  });
  html=html+'    </div>';
  html=html+'  </div>';
  html=html+' </div>';
  html=html+'</div>';
  $("body").append(html);
  $("#"+uuid).modal("show");
  $("#"+uuid).on("hidden.bs.modal", function () {
    console.log("--закрыли окно");
    $("#"+uuid).remove();
  });
};
Dialog("Привет","Тут какой-то текст",["Ок","Отмена"],ResultTestDialog);

function ResultTestDialog(result){
    console.log("!",result);
}

function UUID_V4() {

var S4 = function() {

return (((1+Math.random())*0x10000)|0).toString(16).substring(1);

};

return (S4()+S4()+"-"+S4()+"-"+S4()+"-"+S4()+"-"+S4()+S4()+S4());

}

function Dialog(title,message,buttons=Array(),callback=function(){}){

var uuid=UUID_V4();

html='<div class="modal fade" id="'+uuid+'" tabindex="-1" role="dialog" aria-labelledby="'+uuid+'Label" aria-hidden="true">';

html=html+' <div class="modal-dialog modal-lg">';

html=html+' <div class="modal-content">';

html=html+' <div class="modal-header">';

html=html+' <h5 class="modal-title" id=""'+uuid+'Label">'+title+'</h5>';

html=html+' <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>';

html=html+' </div>';

html=html+' <div class="modal-body">';

html=html+' <p>'+message+'</p>';

html=html+' </div>';

html=html+' <div class="modal-footer">';

buttons.forEach(function(bt, index, array) {

if (index==0){

html=html+'<button type="button" onclick="'+callback.name+'(\''+bt+'\')" class="btn btn-secondary" data-bs-dismiss="modal">'+bt+'</button>';

} else {

html=html+'<button type="button" onclick="'+callback.name+'(\''+bt+'\')" class="btn btn-primary" data-bs-dismiss="modal">'+bt+'</button>';

};

});

html=html+' </div>';

html=html+'</div>';

$("body").append(html);

$("#"+uuid).modal("show");

$("#"+uuid).on("hidden.bs.modal", function () {

console.log("--закрыли окно");

$("#"+uuid).remove();

});

};

Dialog("Привет","Тут какой-то текст",["Ок","Отмена"],ResultTestDialog);

function ResultTestDialog(result){

console.log("!",result);

}

Оставить комментарий bootstrap, dialogs, javascript

Bootstrap 5: отслеживание переключения вкладок (табов)

22.02.2022 Павел Грибов WEB

Задача: отследить переключение вкладок пользователем

Решение:

var tabEl = document.querySelector('#myTab')
    tabEl.addEventListener('shown.bs.tab', function (e) {       
      atab=$(e.target).attr("id");
      console.log("--щелкнули по табу"+atab);        
    })

var tabEl = document.querySelector('#myTab')

tabEl.addEventListener('shown.bs.tab', function (e) {

atab=$(e.target).attr("id");

console.log("--щелкнули по табу"+atab);

})

Оставить комментарий bootstrap, click, tabs

Как узнать версии скриптов используемых на сайте.

21.09.2018 Павел Грибов WEB

А именно Jquery, Bootstrap, JqGrid и т.п. Ну например так:

console.log(jQuery.fn.jquery);
console.log($.ui.version);
console.log($.jgrid.version);
console.log(jQuery.mmenu.version);
console.log($.fn.tooltip.Constructor.VERSION);

console.log(jQuery.fn.jquery);

console.log($.ui.version);

console.log($.jgrid.version);

console.log(jQuery.mmenu.version);

console.log($.fn.tooltip.Constructor.VERSION);

Оставить комментарий bootstrap, jqgrid, jQuerUI, Jquery, mmenu, version, версия

bootstrap-editable и пароли

24.01.2017 Павел Грибов WEB, Из жизни

Задача: необходимо обеспечить скрытие пароля для пользователя.

Решение:

    $("#password").filter(function() {  
    return true;
        }).each(function() {
    $(this).text("******");
    });
    $('#password').editable({
    type: 'password',
    success: function(data) {if (data!="") $().toastmessage('showWarningToast', data);}
    });

$("#password").filter(function() {

return true;

}).each(function() {

$(this).text("******");

});

$('#password').editable({

type: 'password',

success: function(data) {if (data!="") $().toastmessage('showWarningToast', data);}

});

Пн	Вт	Ср	Чт	Пт	Сб	Вс
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

Диалоговые окна на boostrap5 + jquery

Bootstrap 5: отслеживание переключения вкладок (табов)

Bootstrap: модальное окно в модальном

Как узнать версии скриптов используемых на сайте.

bootstrap-editable и пароли