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 - 移動効果(移動効果)

カテゴリ

特殊効果(エフェクト)

使用法

説明:別の要素への輪郭要素。

transfer

参数 类型 描述
className String 转移的元素将接收的参数化的 class 名称。
to String jQuery 选择器,要转移到的元素。

2つの要素間の相互作用を可視化しようとすることは非常に便利です。

、それ自体でクラス要素を転送ui-effects-transfer 、他のスタイルは、背景や枠線を追加し、例えば、ユーザーが定義する必要があります。

緑の要素をクリックして別の要素に転送します。

<!DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
  <メタ文字セット= "UTF-8">
  <タイトル>移動効果(移動効果)デモ</タイトル>
  <リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <スタイル>
  div.green {
    幅:100ピクセル;
    高さ:80px;
    背景:緑;
    国境:1pxの黒一色。
    位置:相対;
  }
  div.red {
    マージントップ:10pxの;
    幅:は50px;
    高さ:30px;
    背景:赤;
    国境:1pxの黒一色。
    位置:相対;
  }
  .ui-効果転送{
    国境:1pxの破線の黒。
  }
  </スタイル>
  <SCRIPT SRC = "// code.jquery.com/jquery-1.10.2.js"> </スクリプト>
  <SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
</ HEAD>
<ボディ>
 
<DIVクラス= "緑"> </ div>の
<DIVクラス= "赤"> </ div>の
 
<スクリプト>
$( "本部").click(関数(){
  VAR I = 1  -  $( "div要素」).INDEX(この);
  $(この).effect(「転送」、{へ:$( "div要素」).EQ(I)}、1000);
});
</スクリプト>
 
</ BODY>
</ HTML>