自製jQuery Plugin - 6. popPanel

1. 功能: 於指定物件位置開啟小視窗

2. 風格: jQuery UI CSS Framework

3. 依賴:jquery.random.js,jquery.GUID.js,jquery.getPostion.js

4. 用途: 在觸發事件元件開啟小視窗，在自行設計挑選資料(如:日期、時間、人員),在此僅提供空白div提供再加工.

5. 函式:

    5.1 popPanel,參數{

        width:指定視窗寬度,預設300

        height:指定視窗高度,預設400

        offset{x,y}:指定開啟時與該物件位移量{x,y}座標,預設{10,10}

        class:popPanel額外套用class,預設null

        title: popPanel標題,預設Pop Panel Window

        show:是否顯示,預設true(開啟)

        smartLocation:啟動自動偵測超過目前視窗時,往左或上顯示,預設true(開啟)

        closehide:關閉是否僅隱藏,預設true(開啟),否則關閉則刪除

        center:是否置中

        url:內嵌iframe之url

        urlclass:iframe class

        resizeable:是否允許縮放視窗

        postback:回傳資料呼叫之function

        onclose:關閉時,呼叫之function

    }

   5.2 popPanelReturnData(data): 傳遞參數給postback method.

6. 範例:

JQuery:

<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="js/jquery.random.js"></script>
<script type="text/javascript" src="js/jquery.GUID.js"></script>
<script type="text/javascript" src="js/jquery.getPosition.js"></script>
<script type="text/javascript" src="js/jquery.ui.getPosition.js"></script>
<script type="text/javascript" src="js/jquery.ui.popPanel.js"></script>
<script type="text/javascript">
    $(function () {
        $('#button').click(function () {
            var panel = $(this).popPanel({'closehide':false,'resizeable':false});
        });
    });
</script>

7. 後續改善: 無,除非有bug

8. 下載

Demo - 產生GUID