天天看點
傳回

EasyUI基礎入門之Resiable(可縮放)

        easyui的base插件學習已經進行到Resizable(可縮放)了。照舊看看easyui官網的API。

Resiable

      正如其字面意思一樣(可伸縮),resiable主要是将一些html元素擴充為可伸縮的，panel、window等,不信的話查閱easyui加載器源碼就可以知道啦!(window是依賴于resizable的)還是以官網的描述來說。

      覆寫預設$.fn.resizable.defaults.

屬性

名稱 類型 描述資訊 預設值
disabled boolean 如果為true則表示可以伸縮 false
handles string 暗示了伸縮的方向,'n'表明向北方伸縮,'e'則表示向東邊 n,e,s,w,ne,se,sw,nw,all
minWidth number 伸縮之後的最小寬度 10
minHeight number 縮放之後的最小高度 10
maxWidth number 縮放之後的最大寬度 10000    
maxHeight number 縮放之後的最小寬度 10000
edge number 縮放的寬度,距離邊緣多少可以縮放 5

事件

名稱 參數 描述資訊
onStartResize e 當開始縮放的時候會被觸發                                                 
onResize e 調整大小的期間觸發,當傳回false,DOM元素不會起到實際的縮放作用
onStopResize e 停止縮放的時候觸發的操作

方法

名稱 參數 描述資訊
options none 傳回resiable參數對象
enable none 可以調整大小
disable none 不能調整大小

使用方式

        1、通過html标記建立:

<div class="easyui-resizable" style="width:100px;height:100px;border:1px solid #ccc;"
        data-options="maxWidth:800,maxHeight:600">
</div>

         2、使用js腳本建立:

<div id="rr" style="width:100px;height:100px;border:1px solid #ccc;"></div>
$('#rr').resizable({
    maxWidth:800,
    maxHeight:600
});

Demo

        同樣官方網站的Demo,一看就懂!

<!DOCTYPE html>
<html> <head>
    <meta charset="UTF-8">
    <title>Basic Draggable - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.6/themes/metro/easyui.css" target="_blank" rel="external nofollow" >
    <link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.6/themes/icon.css" target="_blank" rel="external nofollow" >
    <link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.6/demo/demo.css" target="_blank" rel="external nofollow" >
    <script type="text/javascript" src="jquery-easyui-1.3.6/jquery.min.js"></script>
    <script type="text/javascript" src="jquery-easyui-1.3.6/jquery.easyui.min.js"></script>
</head>
<body>
    <center>

        <div class="easyui-resizable" data-options="minWidth:50,minHeight:50" style="border: 2px solid #C0C0C0;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        border-radius: 10px;
        position: relative;
        padding: 5px;
        background: #FFF;
        height:300px;
        width:300px;                                                                           
        z-index: 2;">
            <div style="padding:20px">Resize Me</div>
        </div>
    </center>
    <script>
    </script>
</body>
</html>

          好了,就這樣了,我也懶得去貼網址了!

          獨立站點:liangtao.sinaapp.com/?p=200

【JQuery EasyUI】 easyui resiable
上一篇: easyui源碼分析（parser.js）（3）
下一篇: Image Processing and Analysis_21_Scale Space

繼續閱讀