简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
ホームページ > ウェブフロントエンド > jsチュートリアル > 本文

jQueryのソートcomponent_jqueryの詳細な分析

WBOY
リリース： 2016-05-16 17:31:53
オリジナル
967 人が閲覧しました
1: Sortable コンポーネントは、ページ上の一連の要素を並べ替え可能な に変換できます。次に、マウスをドラッグして要素のリストを調整します。リスト内の要素の位置
$('.selector').sortable(options);
簡単な例:
コードをコピーします コードは次のとおりです:





並べ替え可能なコンポーネント< / title><br><script language="javascript" src="js/jquery-1.4.2.min.js"></script><br><script type="text/javascript" src = "js/jquery.ui.core.js"></script><br><script type="text/javascript" src="js/jquery.ui.widget.js"></ script> ;<BR><script type="text/javascript" src="js/jquery.ui.mouse.js"></script><br><script type="text/javascript" src= " js/jquery.ui.sortable.js"></script><br><link href="CSS/base/jquery.ui.all.css" rel="stylesheet" type="text/css " /><br><style type="text/css"><br>body {<br> text-align:center;<br> margin:0 auto;<br>padding:0;<br> }<br>#wrap {<br> マージン: 10px auto 10px auto;<br> パディング: 5px;<br> 幅: 450px;<br> 高さ: 300px;<br> 背景: #fff;<br>ボーダー : 5px ソリッド #000;<br>}<br>h1 {<br> color:#006;<br> font-size:24px;<br> font-weight:bold;<br> margin-bottom:2px ; <br> text-align:center;<br>}<br>#sortable {<br> list-style-type: none;<br> margin: 0;<br> パディング: 0;<br> width: 100 %;<br>}<br>#sortable li {<br> margin: 3px;<br> パディング: 0.4em;<br> font-size: 16px;<br> height: 18px;<br>}<br>#sortable li span {<br> 位置: 絶対;<br> マージン左: -1.3em;<br>}<br></style><br><script type="text/javascript" > ;<br> $(document).ready(function(){<br> $("#sortable").sortable(); // ソート可能をソート可能に変える <br> $("#sortable"). disableSelection( ); //テキストを選択不可にする<br> });<br></script><br></head><br><body><br><div id="wrap "><br> <h1>マウスをドラッグして次のオプションの順序を調整します</h1><br> <ul id="sortable"><br> <li class="ui-widget-content "> ;月曜日</li><br> <li class="ui-widget-content">火曜日</li><br> <li class="ui-widget-content">水曜日</li> <br> <li class="ui-widget-content">木曜日</li><br> <li class="ui-widget-content">金曜日</ li><br> <li class="ui-widget-content">土曜日</li><br> <li class="ui-widget-content">土曜日</li><br> </ul><br>< ;/div><br></body><br></html><br> </div> <br><strong>レンダリング: <br></strong> <img alt="" src="http://files.jb51.net/file_images/article/201306/2013061916300628.png"><br><strong><font style="max-width:90%">2: 関連ソートリスト <br></font></strong>通常、2 つ以上のリストを同時にソートすることは関連ソートリストと呼ばれ、属性 connectWidth を使用して 1 つのセレクターを設定し、順序を指定できるようにします。要素が異なるリスト間で移動される <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="75215" class="copybut" id="copybut75215" onclick="doCopy('code75215')"><u>コードをコピーします</u></a></span> コードは次のとおりです:</div> <div class="codebody" id="code75215"> <br><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br><html xmlns="http://www.w3.org/1999/xhtml"><br><head><br><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br><title>sortable组件











 

   

     
休闲类小游戏

      ×

   

         
  • 菠萝蛋糕

    •      
  • 人品计算器

    •      
  • 我的恐怖小屋

    •      
  • 品茗闻香话茶道

    •      
  • 暴打火柴人中文版

    •    

 



 

   

     
动作类小游戏


;グランドスラムファイナル＆lt;/li＆gt;
＆lt;/ul＆gt;
＆lt;/div＆gt;
＆lt;/div＆gt;＆lt; div id = "message_box1" class="message_box" >



< ;ul id="sortable3">








レンダリング:




3: コンポーネントを並べ替えるメソッド
3.1 シリアル化メソッド: このメソッドは、並べ替え可能な要素の id 属性をシリアル化して、送信できるフォームまたは Ajax 文字列の構文は次のとおりです:

$("#sortable").sortable(serialize", [options]);
3.2 toArray メソッド: このメソッドは、並べ替え可能な要素の ID を文字列にシリアル化します。構文形式は次のとおりです:
$("#sortable").sortable("toArray");
3.3 更新メソッド: メソッドが使用されます。ソート可能なリストを更新します
$("#sortable").sortable("refresh");
3.4 freshPositons メソッド :このメソッドはキャッシュを更新するために使用されますソート可能な要素の位置。構文形式は次のとおりです:
$("#sortable").sortable("refreshPositions");
 3.5 cancel: メソッド現在の並べ替え可能なオブジェクト内の要素の順序変更をキャンセルするために使用されます
$("#sortable").sortable("cancel");
コードをコピー
 コードは次のとおりです:





sortable组件


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








调整以下の手順の整理順序



  • 1.1 链接外部.JS 文件

  • 1.2 Microsoft 脚本编辑器を使用

  • 1.3 循環しながら使用する

  • 1.4 循環に使用する



  • 2句1 スイッチ语の使用

  • 2.2 Array对プロパティの使用

  • 2.3 String オブジェクトを使用するメソッド

  • 2.4 Date オブジェクトを使用するメソッド




< ;input type="button" name="button" id="btn" value="确认修正" />






レンダリング:

ここでは att がキーとして使用され、値はレイアウト内で att で定義された文字列です。
4: ソート時のコールバック関数
コールバック関数を定義することで、ソート動作をより柔軟に制御できます
4.1 start: イベントタイプはsortstart、並べ替え開始時にトリガーされます
4.2 sort: イベント タイプはsort、並べ替えプロセス中にトリガーされます
4.3 変更: イベント タイプはsortchange、並べ替えプロセス中にトリガーされます 、要素の位置が変更されるとトリガーされます
4.4 beforestop: イベント タイプは sortbeforestop で、並べ替えが停止したがプレースホルダーまたは補助要素がまだ使用可能な場合にトリガーされます
4.5 stop: イベント タイプは sortstop で、並べ替えプロセスが停止したときにトリガーされます。
4.6 update: イベント タイプは sortupdate で、並べ替えプロセスが停止し、要素の位置が変更されたときにトリガーされます。
4.7 accept: イベント タイプは sortreceive、接続されたソート リストが別のリストから要素を受け取ったときにトリガーされます。
4.8 Remove: イベント タイプは sortremove、次のときにトリガーされます。要素がリストから削除されます 要素を並べ替えて別のリストに配置するとトリガーされます
4.9 以上: イベント タイプはソートオーバーで、並べ替え可能な要素が別の接続されたリストに移動されたときにトリガーされます
4.10 out: イベント タイプは sortout で、並べ替え可能な要素が接続されたリストから削除されたときにトリガーされます。
4.11 activate: イベント タイプは sortactivate で、接続されたソートリストが使用されます。各接続リストは、ドラッグの開始時にこのイベントを受け取ります。
4.12 deactivate: イベントのタイプはsortdeactivateで、ソート操作が停止されたときにトリガーされます。可能なすべての接続リスト

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

$("#droppable ").droppable({
eventName: function (event, ui) {
}
});

ui は追加の要素を含む jQuery オブジェクトですjQuery オブジェクトには次のプロパティがあります。
helper: 並べ替えられる現在の要素を表す jQuery オブジェクト
position: top 属性と left 属性を含むオブジェクト元のオブジェクトを基準とした現在の要素の位置を示す属性
offset: ページを基準とした現在の要素の絶対位置を示す、top 属性と left 属性を含むオブジェクト
item: 現在ドラッグされている jQuery オブジェクトを表します
placeholder: 定義されたプレースホルダーを表します
sender: 現在ドラッグされている要素が属する並べ替えられたリストのみ2 つのリスト間の移動に適用可能
コードをコピー コードは次のとおりです:





sortable组件


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







< h1>変更下面列の順序、イベント触発結果を見る

  • K22次開始発行局：桂林 -> 终点站：北京西

  • K180次始播站：郑州 -> 终点站：北京西

  • K1038次 郑州 -> 终点站：深圳

  • K236次 石家庄 -> 终点站：上海

  • T182次汉口 -> 终点站：哈尔滨

  • K926次 郑州 -> 终点站：哈尔滨



< /div>



関連ラベル：
jquery
ソース：php.cn
前の記事：親ウィンドウリンクの取得getParentメソッドとjs解析でウィンドウを開く各種メソッド_基礎知識 次の記事：Jsのコード文字化け問題の解決策、alert_javascriptスキル
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
Javascript/Jqueryを使用してボタンなしでフォームを送信する JavaScript 関数を呼び出し、JQUERY/PHP を使用してフォームを実行することにより、ボタンのないフォームを送信しようとしています。ページを再読み込みせずに、バックエ...
から 2024-04-06 14:54:03
0
2
421
jqueryを使用してHTMLデータテーブルの選択されていない行の値を取得する方法 ボタンがクリックされなかったすべての行の値を取得しようとしています。たとえば、最初の行のボタンをクリックしたときに、クリックされなかった行の値を取得したいとします。 vartabl...
から 2024-04-05 09:26:49
0
1
1418
エンドユーザーの現在の選択に基づいて選択ボックスから選択したオプションを移動するには、jquery スクリプトが必要です エンドユーザーが選択ボックス要素を介してアイテムをランク付けできる HTML ページがあります。簡単なデモを確認するには、フィドルを参照してください: https://jsfidd...
から 2024-04-04 18:40:04
0
1
3528
ブックマークを介して純粋な CSS で要素を作成しました。作成されたが表示されない 私のコードは次のとおりです: g=document.createElement('div');g.setAttribute("id","divcont...
から 2024-04-04 17:27:27
0
1
417
Safari/Firefox iOS でフォ​​ームデータを送信できない これは、iOS 上の Safari/Firefox を除くすべてのプラットフォームで動作します: jQuery("#gform_1").one('submit'...
から 2024-04-04 12:53:48
0
1
303
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！