検索

ホームページ  >  記事  >  ウェブフロントエンド  >  jQueryのサイズ調整の詳細な分析component_jquery

jQueryのサイズ調整の詳細な分析component_jquery

WBOY
WBOYオリジナル
2016-05-16 17:31:511397ブラウズ
1: Resizable コンポーネントは、選択した DOM 要素をサイズ変更可能なオブジェクト に変えることができます。つまり、調整ハンドルをドラッグすることでそのサイズを変更できます。
$(".selector").resizeable(options);
簡単な例:
コピーコード コードは次のとおりです。



< ;head>

サイズ変更可能なコンポーネント
< スクリプト言語="javascript" src="js/jquery-1.4.2.min.js">
<スクリプトタイプ="text/javascript" src="js/jquery. ui.core.js">

< ;script type="text/javascript" src="js/jquery.ui.mouse.js">






< ;img src="images/happy.gif" id="car" />



レンダリング:

実際、resizable() メソッドを呼び出した後、div 要素がターゲット オブジェクトの右枠、下枠、右下隅に追加され、ui-resizable-e、ui-resizable-s が追加されます。 ui-resizable-se クラスに順番に追加され、ドラッグ ハンドル

が形成されます。

2: 遅延調整

コードをコピー コードは次のとおりです:





サイズ変更可能なコンポーネント


< script type="text/javascript" src="js/jquery.ui.widget.js">










延迟调整

×

拖動最外边查看効果，パラメータ如下

時間延長：500

距離延長：20







3：動态调整效果
 必要補助尺寸调整組片の下のプロパティ来实现：
* はヘルパープロパティ設定の CSS ですパターン型。この型は調整中に要素のサイズを表示し、操作終了後に元の要素のサイズを調整します
* ゴースト プロパティを true に設定し、調整中に半透明の補助要素を表示します
* 為animate プロパティ設定は true、元素の調整過程追加アニメーション画效果
* animateDuration プロパティ指定一值、アニメート設定アニメーション画过程持続的時間
复制代码代码如下:





サイズ変更可能なコンポーネント


< script type="text/javascript" src="js/jquery.ui.widget.js">








魔兽争霸


来源：知识宝库网 | 浏览次数：431052次 | 作成期間：2010-10-23


魔争霸は一款非常に有名な即時略語です。制作公司はアメリカの暴雪公司です。最新版は「魔兽争霸3：冰封王座」です。


現在は単一マシン游戏の中で非常に歓迎されている游戏、これを除いて、魔兽です





效果图：

4：尺寸调整組品の方法
尺寸调整組品の方法は4つあり、他们都是拖動構成要素と投射構成要素で共有されている、つまり無効化メソッド、有効化メソッド、破棄メソッドおよびオプション メソッド复制代码
代码如下:


// 禁止调整尺寸功能
$(".selector").resizable('disable');
// 重新激活对象の可调整尺寸功能
$( ".selector").resizable('enable');
//移除可调整尺寸功能
$('.selector').resizable('destroy');
//在初化後maxHeight プロパティの設定値は 480
$('.selector').resizable('option', 'maxHeight', 480);
// 初期化後に获取 maxHeight プロパティの値
$(' .selector').resizable('option', "maxHeight");

5:调整イベント回调関数

start: イベント类型sizestart, 开始開始拖アニメーション改变大時間触発
resize: イベント型resize, 拖動过中，鼠标每移動一像素就触開始一次
stop: イベント型resizestop, 停止拖動時間触発行复制代
代码如下:


$("#droppable").droppable({
eventName: function (event, ui) {
// 特定の処理代，this 表示可调整尺寸的对象
}
});
ui は追加情報を含む jQuery オブジェクトです。 jQuery オブジェクトには次のプロパティがあります。
helper: ドラッグ可能なヘルパー要素を表す jQuery オブジェクト
originalPosition:調整を開始する前の元のオブジェクトに対する要素の位置を示す、top 属性と left 属性を含むオブジェクト
originalSize: 調整を開始する前の要素のサイズを示す、width 属性と height 属性を含むオブジェクト
Position : 元のオブジェクトに対する現在の要素の位置を示す、top 属性と left 属性を含むオブジェクト
size: 現在の要素のサイズを示す、width 属性と height 属性を含むオブジェクト
簡単な例:
コードをコピー コードは次のとおりです:







< ;script type=" text/javascript" src="js/jquery.ui.core.js">


< script type="text /javascript" src="js/jquery.ui.resizable.js">







span>×









声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：jquery中国語文字化けのさまざまな解決策_jquery次の記事：jquery中国語文字化けのさまざまな解決策_jquery

関連記事

続きを見る