jQuery彈出層插件popbox


  都什么年代了,還自己寫彈出層插件!是的,①自己寫的自己好控制②可定制性高③兼容低版本IE

  本插件有以下特性:

  1. 樣式分離,可定制,純凈無圖片
  2. 可自定義按鈕及按鈕的樣式、點擊事件
  3. 可指定選擇器選擇頁面元素的內容作為彈出層的內容,也可以指定url來異步加載單獨頁面
  4. 可配置遮罩層、關閉按鈕、按鈕欄
  5. 可配置拖動、自動關閉、失焦關閉
  6. 可配置打開、關閉和確定、取消時的動作

  先上一張截圖看看樣子:

      

使用方法:

1. 引入相關文件

<link rel="stylesheet" href="jquery.popbox.css" />
<script src="jquery.min.js"></script>
<script src="jquery.popbox.js"></script>

2. 調用$.popbox();默認配置參數如下:

var defaults = {
            width : '666px', 
            maxHeight : '500px',  //body區域的最大高度
            padding : '20px',   //body區域的padding值
            title : '溫馨提示',  //標題
            content : '',  //主體內容,支持HTML標簽
            contentSelector : '',  //加載選擇器指定的元素的內容
            contentUrl : '',  //通過ajax加載單獨的頁面
            foot : '',  //底部內容
            showMask : true,  //是否顯示遮罩層
            showCloseBtn : true,  //是否顯示關閉按鈕
            btns : [
                {
                    type : 'ok',
                    text : '確定',
                    click : null
                },
                {
                    type : 'cancel',
                    text : '取消',
                    click : null
                }

            ], //默認顯示的按鈕,
            draggable : true,  //是否可拖動
            autoClose : 0, //是否自動關閉,否則設為0,是則設為大於0的數字,表示關閉時間,單位ms
            blurClose : false,  //點擊窗口外部是否關閉窗口
            onOpen : null, //窗口加載完畢時的動作
            onClose : null,  //窗口關閉前的動作,返回false可組織窗口關閉
            onOk : null,  //點擊確定按鈕
            onCancel : null,//點擊取消按鈕
            showBtn : true,
            customPos : '' //自定義位置
        };

  最后,附上下載地址:http://files.cnblogs.com/lvdabao/jquery.popbox-1.1.1.zip


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM