【連載】研究EasyUI系統— Resizable元件

阿新 • • 發佈：2019-01-20

　　resizable元件提供了一種可拉伸、縮小放大的功能，很多桌面應用程式，比如圖片檢視器、word文件等，使用者可以通過滑鼠將程式拉大拉小，resizable元件則在web頁面上為各類元素提供了類似的功能，我們先通過一個縮放圖片的例子瞭解一下resizable元件。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" type="text/css" href 
="easyui/themes/default/easyui.css" />
        <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" />
        <script type="text/javascript" src="easyui/jquery.min.js"></script>
        <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
        <title 
>resizableDemo</title>
        <style>
            .resizableContainer {
                width:520px; /*原圖寬度*/
                height: 245px; /*原圖高度*/
                border: 1px solid lightblue;
            }
            .imgDemo {
                width:100%;
                height:100%;
            } 

            .resizableInfo {
                width:200px;
                height: 30px;
                border: 1px solid lightblue;
                margin-bottom: 20px;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <div id="showInfo" class="resizableInfo"></div>
            <div id="resizable" class="easyui-resizable resizableContainer">
                <img src="images/demo.jpg" id="imgResizable" class="imgDemo">
            </div>
        </div>
        <script>
            $("#resizable").resizable({
                handles:'all',
                maxWidth:520,
                maxHeight:245,
                edge:5,
                onResize:function(e) {
                    /* 在onResize事件中實時顯示當前圖片高度和寬度 */
                    $("#showInfo").html("");
                    $("#showInfo").html("寬度：" + $("#resizable").width() + "   " + "高度：" + $("#resizable").height());
                }
            });
        </script>
    </body>
</html>

效果圖如下：
resizable元件效果圖

resizable元件屬性：

屬性名稱	屬性值型別	屬性預設值	描述
handles	字串	“all”	指定縮放方向。
disabled	布林值	false	是否禁用元件。
minWidth	數值	10	縮放的最小寬度。
minHeight	數值	10	縮放的最小高度。
maxWidth	數值	10000	縮放的最大寬度。
maxHeight	數值	10000	縮放的最大高度。
edge	數值	5	元件可用於縮放的邊緣寬度。

　　handles屬性指定了縮放的方向，我們在開發各類應用中，不一定所有的邊都是可拉伸的，例如左邊導航選單等，只需拉伸右邊框即可，其他方向無需拉動。該屬性提供的值有“e”、“s”、“w”、“n”、“ne”、“se”、“nw”、“sw”、“all”,分別代表可縮放的方向為東、南、西、北、東北、東南、西北、西南、全方位。
　　minWidth和minHeight表示縮放的最小寬度和最大寬度，即收縮時，寬度或高度不能小於這兩個值，預設為10，也就是寬度或高度縮小到10時就停止了，無法再縮小了。
　　maxWidth和maxHeight也是類似，拉伸的範圍不能超過這兩個值。
　　edge指可縮放區域的寬度，如果將其設為10畫素，看下圖：
edge屬性說明

resizable元件方法：

方法名稱	引數	描述
options	無	返回所有屬性。
enable	無	啟用元件。
disable	無	禁用元件。

　　方法很簡單，不贅述。
　　
resizable元件事件：

事件名稱	引數	描述
onStartResize	e	元件開始縮放時觸發。
onResize	e	在整個縮放過程中觸發。如果返回false,最終將不會實現縮放效果。
onStopResize	e	元件停止縮放時觸發。

　　事件中的引數e是js中的Event物件。onStartResize和onStopResize很簡單，不多說。onResize事件在整個縮放過程中都會持續觸發。如果在事件最終返回false，即便使用者拖動邊框做了縮放動作，一旦放開滑鼠後，元件還是會回到原來的狀態，並不實際完成縮放。例子程式碼中，我們便是通過onResize事件的不斷觸發，實現實時顯示圖片的大小。

【連載】研究EasyUI系統— Resizable元件

【連載】研究EasyUI系統— Resizable元件

【連載】研究EasyUI系統— Window元件

【連載】研究EasyUI系統—Panel元件（方法和事件）

【連載】研究EasyUI系統— Layout元件

【連載】研究EasyUI系統—Tree元件（方法）

【連載】研究EasyUI系統—Easyloader元件

【連載】研究EasyUI系統—ProgressBar元件

【連載】研究EasyUI系統—Panel元件（屬性）

【連載】研究EasyUI系統—Panel元件（概述）

【原創】.NET平臺機器學習元件-Infer.NET連載(一)介紹

【原創】.NET平臺機器學習元件-Infer.NET連載(二)貝葉斯分類器

【連載】計算機組成原理 --- 第四章指令系統

【Linux】Linux操作系統學習路線

【轉】以操作系統的角度述說線程與進程

【Java】得到當前系統時間，精確到毫秒

【CCF】模板生成系統

【CQOI2015】任務查詢系統（主席樹）

【Linux】Linux操作系統期末復習筆記

【北京】高級系統實施工程師 10—30w/年

【Hadoop】在Ubuntu系統下安裝Hadoop單機/偽分布式安裝

【連載】研究EasyUI系統— Resizable元件

相關推薦