Latest web development tutorials
×

jQuery UI コース

jQuery UI コース jQuery UI 簡単な紹介 jQuery UI ダウンロード jQuery UI 使用 jQuery UI カスタマイズ jQuery UI ワークス

jQuery UI テーマ

jQuery UI テーマ jQuery UI ThemeRoller jQuery UI CSS フレーム API jQuery UI デザインテーマ

jQuery UI コンポーネントライブラリ

jQuery UI コンポーネントライブラリ jQuery UI 拡張ウィジェット jQuery UI メソッド呼び出しウィジェット jQuery UI なぜウィジェットライブラリを使用 jQuery UI ウィジェットライブラリを使用する方法

jQuery UI リファレンスマニュアル

jQuery UI API ファイル API カテゴリ - 特別に良い効果 API カテゴリ - エフェクトコア API カテゴリ - 交互に API カテゴリ - メソッドのオーバーロード API カテゴリ - ウェイ API カテゴリ - セレクタ API カテゴリ - テーマ API カテゴリ - UI コア API カテゴリ - ユーティリティ API カテゴリ - ウィジェット

jQuery UI 例

jQuery UI 例 ドラッグ 場所 スケーリング 選択します シーケンス 折りたたみパネル オートコンプリート プッシュボタン 日付ピッカー ダイアログ メニュー プログレスバー スライダー 回転子 タブ ツールチップボックス 特別に良い効果 ディスプレイ 隠します 切り替え .addClass() .removeClass() .toggleClass() .switchClass() カラーアニメーション 検索します コンポーネントライブラリ

jQueryのUIのAPI - スケーリング効果(寸法効果)

カテゴリ

特殊効果(エフェクト)

使用法

説明:パーセンテージスケール要素応じ

scale

参数 类型 描述 默认值
direction String 特效的方向。可能的值:"both"、"vertical" 或 "horizontal"。 "both"
origin Array 消失点。 [ "middle", "center" ]
percent Number 要缩放到的百分比。
scale String 元素的哪个区域将被调整尺寸:"both"、"box"、"content"。当值为 "box" 时,调整元素的边框(border)和内边距(padding)的尺寸。当值为 "content" 时,调整元素内的所有内容的尺寸。 "both"

実施例1:

div要素を切り替えるズーム効果(寸法効果)を使用します。

<!DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
  <メタ文字セット= "UTF-8">
  <タイトル>ズーム効果(寸法効果)デモ</タイトル>
  <リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <スタイル>
  #toggle {
    幅:100ピクセル;
    高さ:100pxに。
    背景:#CCC;
  }
  </スタイル>
  <SCRIPT SRC = "// code.jquery.com/jquery-1.10.2.js"> </スクリプト>
  <SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
</ HEAD>
<ボディ>
 
<P>切り替えるには任意の場所をクリックします。 </ P>
<DIVのID = "トグル"> </ div>の
 
<スクリプト>
$(ドキュメント).click(関数(){
  $( "#toggle」).toggle(「スケール」)。
});
</スクリプト>
 
</ BODY>
</ HTML>

例2:

唯一のdiv要素を切り替えるために、1つの方向にズーム効果(寸法効果)を使用します。

<!DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
  <メタ文字セット= "UTF-8">
  <タイトル>>ズーム効果(寸法効果)デモ</タイトル>
  <リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <スタイル>
  #toggle {
    幅:100ピクセル;
    高さ:100pxに。
    背景:#CCC;
  }
  </スタイル>
  <SCRIPT SRC = "// code.jquery.com/jquery-1.10.2.js"> </スクリプト>
  <SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
</ HEAD>
<ボディ>
 
<P>切り替えるには任意の場所をクリックします。 </ P>
<DIVのID = "トグル"> </ div>の
 
<スクリプト>
$(ドキュメント).click(関数(){
  $( "#toggle」).toggle({効果:"規模 "、方向:「水平」});
});
</スクリプト>
 
</ BODY>
</ HTML>