jQuery插件-輕量彈出層-UIDialog

本文轉載自查看原文 2012-03-19 15:14 4428 Jquery

參數解釋：

id         : null,   // 需要賦值的ID
callOnOpen : null,   // 彈出后調用方法
callOnClose: null,   // 關閉后調用方法
eventType  : null,   // 事件類型 click, blur, change, dblclick, error, focus, load, mousedown, mouseout, mouseup
idContent  : null,   // 需要添加的id
width      :'auto', // 寬
height     :'auto', // 高
title      :'消息',   // 標題
content    :'測試內容'   // 內容

直接上代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
    <title>test</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <style type="text/css">
        *{ margin:0; padding:0;}
        body{font:12px/2 arial; background:#ccc;}
        a{color:#0029c4;text-decoration:none;}
        a:hover{color:#c00;}
        .wrap{ border:2px solid #aaa; background:#fff; padding:20px;}
        /* uidialog */
        .ui-dialog{position:fixed;min-width:150px;background:#fff;overflow:hidden;z-index:99999;border:5px solid #767576;}
        .ui-dialog h1{*margin-top:-3px;position:relative;text-indent:1em;padding:3px 0;font-size:14px;font-weight:normal;background:#efefef;border-bottom:1px solid #ccc;-moz-user-select:none;/* FF禁止選擇文字 */-webkit-user-select:none;/* Chrome禁止選擇文字 */}
        .ui-dialog h1 .ui-close{position:absolute;right:10px;cursor:pointer;text-indent:0;}
        .ui-dialog-body{ padding:10px;}
        .ui-title{ border-bottom:1px solid #ccc; background:#f0f0f0;}
        .ui-mask{position:absolute;left:0;top:0;z-index:77777;background:#000;filter:alpha(opacity=50);opacity:0.5;}
        /* 模擬IE6 position:fix的效果 From: http://www.blueidea.com/tech/web/2010/7665.asp */
        *html{background:url(*) fixed;}
        *html body{margin:0;height:100%;}
        .wrap{ width:500px; margin:40px auto;}
    </style>

</head>
<body>
<div class="wrap">
    <h2>特點：接口豐富、輕便、彈出層上層、單擊遮罩層關閉。</h2>
    <ol>
        <li>
            <h1>測試 $.fn.UIDialog 調用，並彈出層上層</h1>
            <a href="javascript:void(0)">測試a鏈接1</a>
            <table class="tab" style="display:none;">
                <tr>
                    <th>用戶名：</th>
                    <td><input type="text" name="" id="useranme"></td>
                </tr>
                <tr>
                    <th></th>
                    <td><input id="mybtn" type="submit" value="又是一個新的"></td>
                </tr>
            </table>
        </li>
        <li>
            <h1>測試彈出 next() 的內容</h1>
            <a href="javascript:void(0)">測試a鏈接2</a>
            <div>
                <p>扯面是一種陝西和山西的傳統面食小吃，已有3000年。主要原料：上白面粉、雞蛋、菠菜、紅蘿卜、調味品。</p>
                <p>做扯面，和面的技術是最關鍵的。和面過程中有幾個關鍵點：首先水和面的比例是一個關鍵，做扯面要求和的面最軟，揪片次之，手擀面、刀削面最硬，做扯面一般是一斤面六兩多水。和面的過程也比較重要，先把面打成面穗(水一點一點的加)，再揉成面團，兌水扎軟(一般反復扎幾次)，然后用濕布蒙住。醒面也是必需的，和好的面醒半小時后才好用。 </p>
            </div>
        </li>
        <li>
            <h1>多種方式調用</h1>
            <a href="javascript:void(0)">測試a鏈接3</a>
            <p>扯面是一種陝西和山西的傳統面食小吃，已有3000年。</p>
            <input id="btn" type="button" value="test-$.UIDialog" />
            <div>熱乎乎的扯面，澆上自己喜歡的調和(調料)，或番茄醬、或肉炸醬、或燉菜，配上香噴噴的老陳醋，油汪汪的紅辣子，挑一根放到嘴里一吸一嘬之下，扯面特有的筋道和綿軟，你只有試過才知道哦。 </div>
            <input id="btn2" type="button" value="test-$.fn.UIDialog">

</li>
    </ol>

<br>

</div>
<script type="text/javascript">
    (function($){
        $.fn.UIDialog = function(options){
            var defaults = {
                IE         :$.browser.msie,
                IE6        :$.browser.version == 6,
                FIREFOX    :$.browser.mozilla,
                window     :$(window),
                document   :$(document),
                body       :$(document.body),
                id         :null,  // 需要賦值的ID
                callOnOpen :null,  // 彈出后調用
                callOnClose:null,  // 關閉后調用
                eventType  :null,  // 事件類型 click, blur, change, dblclick, error, focus, load, mousedown, mouseout, mouseup
                idContent  :null,  // 需要添加的id
                width      :'auto', // 寬
                height     :'auto', // 高
                title      :'消息',  // 標題
                content    :'測試內容'  // 內容
            };
            var opts = $.extend({}, defaults, options);

})(jQuery);

$('a').click(function(){
        $.UIDialog({
            content: $(this).next().html(),
            id: 'testtab',
            width: 500
        });
        $('#testtab #mybtn').click(function(){
            console.log($('#testtab').find('#useranme').val());
        });
    });
    $('#mybtn').live('click', function(){
        $.UIDialog({
            content: '我是一個兵'
        })
    });

$('#btn').click(function(){
        $.UIDialog({
            content: $(this).next().html()
        });
    })
    $('#btn2').UIDialog({
        eventType: 'click',
        content: '我是一個彈出層！'
    })
</script>

</body>
</html>

免責聲明！

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

猜您在找 jQuery插件-輕量圖片輪換-UISlide jQuery彈出層插件popbox Unslider – 輕量的響應式 jQuery 內容輪播插件 Unslider – 輕量的響應式 jQuery 內容滑塊插件 Skippr – 輕量、快速的 jQuery 幻燈片插件 layer (jQuery彈出層插件)使用 layer —— 一個簡單的jQuery彈出層插件【jquery】fancybox 是一款優秀的 jquery 彈出層展示插件 jQuery Unveil – 另一款非常輕量的延遲加載插件 jQuery Dialog彈出層對話框插件