欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

基于bootstrap風(fēng)格的彈框插件

 更新時間:2016年12月28日 15:57:43   作者:有點懶惰的小青年  
這篇文章主要為大家詳細(xì)介紹了基于bootstrap風(fēng)格的彈框插件,適用于確認(rèn)框、提示框,具有一定的參考價值,感興趣的小伙伴們可以參考一下

自己寫的一款基于bootstrap風(fēng)格的彈框插件,暫時只有確認(rèn)框、提示框。后續(xù)功能擴展、bug修改再更新。

;(function($){
 //默認(rèn)參數(shù)
 var PARAMS;
 var DEFAULTPARAMS = 
     {
      width: 500,
      title: '提示消息',
      content: '',
      okbtn: '確定',
      cancelbtn: '取消',
      headerBackground: 'info',
      vbackdrop: 'static',  //默認(rèn)點擊遮罩不會關(guān)閉modal
      vkeyboard: true,   //按esc關(guān)閉modal
      confirmFn: new Object,
      cancelFn: new Object
     };
 $.dialog = {
  confirm: function(params){
   $.dialog.initParmas(params);
   $.dialog.Show('confirm', function(e){
    if($.isFunction(PARAMS.confirmFn)){
     PARAMS.confirmFn(e);
    }
   }, 
   function(f){
    if($.isFunction(PARAMS.cancelFn)){
     PARAMS.cancelFn(f);
    }
   });
  },
  alert: function(params){
   $.dialog.initParmas(params);
   $.dialog.Show('alert', function(e){
    if($.isFunction(PARAMS.confirmFn)){
     PARAMS.confirmFn(e);
    }
   }, null);
  },
  Show: function(type, confirmCaller, cancelCaller){
   var html = '<div class="modal fade" id="tipModal">'
      + '<div class="modal-dialog" style="width:'+PARAMS.width+'px"><div class="modal-content">'
      + '<div class="modal-header header_'+PARAMS.headerBackground+'">'
      + '<a class="close" data-dismiss="modal">&times;</a>'
      + '<h4 class="modal-title text-center">'+PARAMS.title+'</h4></div>'
      + '<div class="modal-body text-center body_content">'+PARAMS.content+'</div>'
      + '<div class="modal-footer">';
   if(type=='confirm'){
    html += '<button class="btn btn-default" id="btnCancel">'+PARAMS.cancelbtn+'</button>';
   }
   html += '<button class="btn btn-primary" id="btnOk">'+PARAMS.okbtn+'</button>';
   html += '</div></div></div></div>';
   $('body').append(html);
   $('#tipModal').modal({backdrop:PARAMS.vbackdrop,keyboard:PARAMS.vkeyboard});
   $.dialog.setDialogEvent(type, confirmCaller, cancelCaller);
  },
  initParmas: function(params){
   if(params!= undefined && params!= null){
    PARAMS = $.extend({}, DEFAULTPARAMS, params);
   }
  },
  setDialogEvent: function(type, confirmCaller, cancelCaller){
   switch(type){
    case 'confirm':
     $("#btnOk").click(function(){
      $('#tipModal').modal('hide');
      $('#tipModal').on('hidden.bs.modal', function(){
       $('#tipModal').remove();    //要先remove modal
       if($.isFunction(confirmCaller)){
        confirmCaller(true);
       }
       
      });
     });
     $("#btnCancel").click(function(){
      $('#tipModal').modal('hide');
      $('#tipModal').on('hidden.bs.modal', function(){
       $('#tipModal').remove();
       if($.isFunction(cancelCaller)){
        cancelCaller(false);
       }
       
      });
     });
     break;
    case 'alert':
     $("#btnOk").click(function(){
      $('#tipModal').modal('hide');
      $('#tipModal').on('hidden.bs.modal', function(){
       $('#tipModal').remove();
       if($.isFunction(confirmCaller)){
        confirmCaller(true);
       }
      });
     });
     break;
   };
   $('#tipModal').on('hidden.bs.modal', function(){
    $('#tipModal').remove();
   });
   $("#tipModal .close").click(function(){
    $('#tipModal').on('hidden.bs.modal', function(){
     $('#tipModal').remove();
    });
   });
   //設(shè)置窗口可拖動
   $('#tipModal .modal-header').Draggable($('#tipModal .modal-dialog'));
  }
 };

 dialogConfirm = function(params){
  $.dialog.confirm(params);
 };

 dialogAlert = function(params){
  $.dialog.alert(params);
 };
})(jQuery);

//拖動層
;(function($){
 $.fn.extend({
  Draggable: function(objMoved){
   return this.each(function(){
    //鼠標(biāo)按下時的位置
    var mouseDownPosiX, mouseDownPosiY;
    //obj的初始位置
    var objPosiX, objPosiY;
    //鼠標(biāo)移動的距離
    var tempX, tempY;
    //移動的對象
    var obj = $(objMoved)==undefined ? $(this): $(objMoved);

    //是否處于移動狀態(tài)
    var status = false;

    $(this).mousedown(function(e){
     status = true;
     mouseDownPosiX = e.pageX;
     mouseDownPosiY = e.pageY;
     objPosiX = obj.css("left").replace("px", "");
     objPosiY = obj.css("top").replace("px", "");
    }).mouseup(function(){
     status = false;
    }); 
    $(document).mousemove(function(e){
     if(status){
      tempX = parseInt(e.pageX) - parseInt(mouseDownPosiX) + parseInt(objPosiX);
      tempY = parseInt(e.pageY) - parseInt(mouseDownPosiY) + parseInt(objPosiY);
      obj.css({ "left": tempX + "px", "top": tempY + "px" }); 
     }
     //判斷是否超出窗體
     //計算出彈出層距離右邊的位置
     var dialogRight = parseInt($(window).width())-(parseInt(obj.css("left"))+parseInt(obj.width()));
     var dialogBottom = parseInt($(window).height())-(parseInt(obj.css("top"))+parseInt(obj.height()));
     var maxLeft = $(window).width()-obj.width();
     var maxTop = $(window).height()-obj.height();
     if(parseInt(obj.css("left"))<=0){
       obj.css("left","0px"); 
     }
     if(parseInt(obj.css("top"))<=0){
      obj.css("top","0px"); 
     }
     if(dialogRight<=0){
      obj.css("left",maxLeft+'px'); 
     }
     if(dialogBottom<=0){
      obj.css("top", maxTop+'px');
     }
    }).mouseup(function(){
     status = false;
    }).mouseleave(function(){
     status = false;
    });
   });
  }
 });
})(jQuery)

html頁面中調(diào)用:

<body>
<div class="box">
 <button class="btn btn-default" id="btn_confirm">確認(rèn)框</button>
 <button class="btn btn-default" id="btn_cancel">提示框</button>
</div>
</body>
<script src="jquery/jquery.min.js"></script>
<script src="bootstrap/bootstrap.min.js"></script>
<script src="js/dialog.js"></script>
<script type="text/javascript">
$(function(){
 $("#btn_confirm").click(function(){
  dialogConfirm({
   width: 500,
   content: '確定要刪除嗎?',
   headerBackground: 'info',
   vbackdrop: true,  //默認(rèn)點擊遮罩不會關(guān)閉modal
   vkeyboard: true,   //按esc關(guān)閉modal
   confirmFn: function(e){
    dialogAlert({
     width: 300,
     content: 'true',
     headerBackground: 'success',
     vbackdrop: 'static',  //默認(rèn)點擊遮罩不會關(guān)閉modal
     vkeyboard: true   //按esc關(guān)閉modal
    });
   },
   cancelFn: function(f){
    alert(f);
   }
  })
 });

 $('#btn_cancel').click(function(){
  dialogAlert({
   width: 300,
   content: '刪除成功!',
   headerBackground: 'error',
   vbackdrop: 'static',  //默認(rèn)點擊遮罩不會關(guān)閉modal
   vkeyboard: true,   //按esc關(guān)閉modal
  });
 });
});
</script>

感覺寫的不是很好,后面修改了或者擴展了功能再更新。源碼會上傳到文件。

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • JS加密插件CryptoJS實現(xiàn)的Base64加密示例

    JS加密插件CryptoJS實現(xiàn)的Base64加密示例

    這篇文章主要介紹了JS加密插件CryptoJS實現(xiàn)的Base64加密,結(jié)合實例形式分析了CryptoJS進行base64加密的簡單實現(xiàn)技巧,需要的朋友可以參考下
    2018-08-08
  • 封裝好的一個萬能檢測表單的方法

    封裝好的一個萬能檢測表單的方法

    這篇文章主要介紹了一個封裝好的萬能檢測表單的方法,非常的好用,使用也很方便,這里推薦給小伙伴們。
    2015-01-01
  • Bootstrap的基本應(yīng)用要點淺析

    Bootstrap的基本應(yīng)用要點淺析

    BootStrap是基于HTML、CSS和JavaScript的框架,使你只需要寫簡單的代碼就可以很快的搭建一個還不錯的前端框架,他是后端程序員的福音,使他們只需要專注業(yè)務(wù)邏輯,而無須浪費太多的精力在界面設(shè)計上
    2016-12-12
  • 詳解js的延遲對象、跨域、模板引擎、彈出層、AJAX【附實例下載】

    詳解js的延遲對象、跨域、模板引擎、彈出層、AJAX【附實例下載】

    本篇文章主要介紹了JavaScript的延遲對象、跨域、模板引擎、彈出層、AJAX,對其進行示例解析,具有很好的參考價值,需要的朋友一起來看下吧
    2016-12-12
  • 微信小程序scroll-view組件實現(xiàn)滾動動畫

    微信小程序scroll-view組件實現(xiàn)滾動動畫

    這篇文章主要為大家詳細(xì)介紹了微信小程序scroll-view組件實現(xiàn)滾動動畫,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2018-01-01
  • 基于javascript實現(xiàn)最簡單的選項卡切換效果

    基于javascript實現(xiàn)最簡單的選項卡切換效果

    這篇文章主要介紹了基于javascript實現(xiàn)最簡單的選項卡切換效果的相關(guān)資料,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2016-05-05
  • 原生JavaScript寫出Tabs標(biāo)簽頁的實例代碼

    原生JavaScript寫出Tabs標(biāo)簽頁的實例代碼

    這篇文章主要介紹了原生JavaScript寫出Tabs標(biāo)簽頁的實例代碼,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2020-07-07
  • vscode工具函數(shù)idGenerator使用深度解析

    vscode工具函數(shù)idGenerator使用深度解析

    這篇文章主要為大家介紹了vscode工具函數(shù)idGenerator使用深度解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-03-03
  • JavaScript中this指向的最全總結(jié)

    JavaScript中this指向的最全總結(jié)

    前端的初學(xué)者在學(xué)習(xí)Javascript中this指向的時候經(jīng)常都會一頭霧水,尤其是在ES6箭頭函數(shù)出現(xiàn)之前,所以本篇文章主要是介紹和總結(jié)了各種情況下的this指向,希望對大家有所幫助
    2023-12-12
  • webpack中使用Eslint的實現(xiàn)

    webpack中使用Eslint的實現(xiàn)

    本文主要介紹了webpack中使用Eslint的實現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-07-07

最新評論