dropload.jsの使い方について-jsチュートリアル-php.cn

例 3、複数のロード

例 4、固定レイアウト、上部と下部をロード

ホームページ

ウェブフロントエンド

jsチュートリアル

dropload.jsの使い方について

一个新手

Oct 20, 2017 am 11:15 AM

javascript 説明書

最初のステップは、dropload プラグインをダウンロードすることです。dropload プラグインのダウンロードアドレスの公式ドキュメントは、https://github.com/ximan/dropload です。
2 番目のステップは、dropload.css と Dropload をダウンロードすることです。ダウンロードした Dropload プラグイン内の .min.js ファイルは、note も導入されています。 2 つのうちの 1 つを選択してください。dropload は同時に引用しないでください。 jqueryに基づいて実装されています。 3 番目のステップは、次のコードをページに配置することです。一番下に注目してください。そうしないと、dropload プラグインは高さを取得できません

**基本代码结构**//#content为某个p的id  var dropload = $(&#39;#content&#39;).dropload({   
//scrollArea很关键，要不然加载更多不起作用  scrollArea : window,  
domUp : {  
    domClass   : &#39;dropload-up&#39;,  
    domRefresh : &#39;<p class="dropload-refresh">↓下拉刷新</p>&#39;,  
    domUpdate  : &#39;<p class="dropload-update">↑释放更新</p>&#39;,  
    domLoad    : &#39;<p class="dropload-load"><span class="loading"></span>加载中...</p>&#39;  },  
domDown : {  
    domClass   : &#39;dropload-down&#39;,  
    domRefresh : &#39;<p class="dropload-refresh">↑上拉加载更多</p>&#39;,  
    domLoad    : &#39;<p class="dropload-load"><span class="loading"></span>加载中...</p>&#39;,  
    domNoData  : &#39;<p class="dropload-noData">暂无数据</p>&#39;  
   },  
loadUpFn : function(me){  
        //下拉刷新需要调用的函数  
        alert("下拉刷新需要调用的函数");  
        //重置下拉刷新  
        me.resetload();      
},  
loadDownFn : function(me){  
        //上拉加载更多需要调用的函数  
        alert("上拉加载更多需要调用的函数");  
        //定时器函数,为了看出上拉加载更多效果  
            setTimeout(function(){  
                // 每次数据加载完，必须重置  
                    me.resetload();  
                },1000);  
           }  
});

ログイン後にコピー

完全な例をいくつかご覧ください。要求
例 1、下部をロード

<script>$(function(){
    // 页数
    var page = 0;    // 每页展示5个
    var size = 5;    // dropload调用
    $(&#39;.content&#39;).dropload({
        scrollArea : window,
        loadDownFn : function(me){
            page++;            // 拼接HTML
            var result = &#39;&#39;;
            $.ajax({
                type: &#39;GET&#39;,
                url: &#39;http://ons.me/tools/dropload/json.php?page=&#39;+page+&#39;&size=&#39;+size,//配合后台接口
                dataType: &#39;json&#39;,
                success: function(data){
                    var arrLen = data.length;                    
                        if(arrLen > 0){                        
                            for(var i=0; i<arrLen; i++){
                            result +=   &#39;<a class="item opacity" href="&#39;+data[i].link+&#39;">&#39;
                                            +&#39;<img src="&#39;+data[i].pic+&#39;" alt="">&#39;
                                            +&#39;<h3>&#39;+data[i].title+&#39;</h3>&#39;
                                            +&#39;<span class="date">&#39;+data[i].date+&#39;</span>&#39;
                                        +&#39;</a>&#39;;
                        }                    // 如果没有数据
                    }else{                        // 锁定
                        me.lock();                        // 无数据
                        me.noData();
                    }                    // 为了测试，延迟1秒加载
                    setTimeout(function(){
                        // 插入数据到页面，放到最后面
                        $(&#39;.lists&#39;).append(result);                        // 每次数据插入，必须重置
                        me.resetload();
                    },1000);
                },
                error: function(xhr, type){
                    alert(&#39;Ajax error!&#39;);                    // 即使加载出错，也得重置
                    me.resetload();
                }
            });
        }
    });
});</script>

ログイン後にコピー

例 2、上部と下部をロード

<script>
$(function(){
    // 页数
    var page = 0;    // 每页展示10个
    var size = 10;    // dropload
    $(&#39;.content&#39;).dropload({
        scrollArea : window,
        domUp : {
            domClass   : &#39;dropload-up&#39;,
            domRefresh : &#39;<p class="dropload-refresh">↓下拉刷新-自定义内容</p>&#39;,
            domUpdate  : &#39;<p class="dropload-update">↑释放更新-自定义内容</p>&#39;,
            domLoad    : &#39;<p class="dropload-load"><span class="loading"></span>加载中-自定义内容...</p>&#39;
        },
        domDown : {
            domClass   : &#39;dropload-down&#39;,
            domRefresh : &#39;<p class="dropload-refresh">↑上拉加载更多-自定义内容</p>&#39;,
            domLoad    : &#39;<p class="dropload-load"><span class="loading"></span>加载中-自定义内容...</p>&#39;,
            domNoData  : &#39;<p class="dropload-noData">暂无数据-自定义内容</p>&#39;
        },
        loadUpFn : function(me){
            $.ajax({
                type: &#39;GET&#39;,
                url: &#39;json/update.json&#39;,
                dataType: &#39;json&#39;,
                success: function(data){
                    var result = &#39;&#39;;                    
                    for(var i = 0; i < data.lists.length; i++){
                        result +=   &#39;<a class="item opacity" href="&#39;+data.lists[i].link+&#39;">&#39;
                                        +&#39;<img src="&#39;+data.lists[i].pic+&#39;" alt="">&#39;
                                        +&#39;<h3>&#39;+data.lists[i].title+&#39;</h3>&#39;
                                        +&#39;<span class="date">&#39;+data.lists[i].date+&#39;</span>&#39;
                                    +&#39;</a>&#39;;
                    }                    // 为了测试，延迟1秒加载
                    setTimeout(function(){
                        $(&#39;.lists&#39;).html(result);                        // 每次数据加载完，必须重置
                        me.resetload();                        // 重置页数，重新获取loadDownFn的数据
                        page = 0;                        // 解锁loadDownFn里锁定的情况
                        me.unlock();                        me.noData(false);
                    },1000);
                },
                error: function(xhr, type){
                    alert(&#39;Ajax error!&#39;);                    // 即使加载出错，也得重置
                    me.resetload();
                }
            });
        },
        loadDownFn : function(me){
            page++;            // 拼接HTML
            var result = &#39;&#39;;
            $.ajax({
                type: &#39;GET&#39;,
                url: &#39;http://ons.me/tools/dropload/json.php?page=&#39;+page+&#39;&size=&#39;+size,
                dataType: &#39;json&#39;,
                success: function(data){
                    var arrLen = data.length;                    
                    if(arrLen > 0){                        for(var i=0; i<arrLen; i++){
                            result +=   &#39;<a class="item opacity" href="&#39;+data[i].link+&#39;">&#39;
                                            +&#39;<img src="&#39;+data[i].pic+&#39;" alt="">&#39;
                                            +&#39;<h3>&#39;+data[i].title+&#39;</h3>&#39;
                                            +&#39;<span class="date">&#39;+data[i].date+&#39;</span>&#39;
                                        +&#39;</a>&#39;;
                        }                    // 如果没有数据
                    }else{                        // 锁定
                        me.lock();                        // 无数据
                        me.noData();
                    }                    // 为了测试，延迟1秒加载
                    setTimeout(function(){
                        // 插入数据到页面，放到最后面
                        $(&#39;.lists&#39;).append(result);                        // 每次数据插入，必须重置
                        me.resetload();
                    },1000);
                },
                error: function(xhr, type){
                    alert(&#39;Ajax error!&#39;);                    // 即使加载出错，也得重置
                    me.resetload();
                }
            });
        },
        threshold : 50
    });
});
</script>

ログイン後にコピー

例 3、複数のロード

$(function(){
        //利用此写法，可以限制多次加载的个数。
    var timer;

    $(&#39;.header .ipt&#39;).on(&#39;input&#39;,function(){
        var _length = $(this).val();        // 如果输入值不是数字或者是空，就跳出
        if(isNaN(_length) || _length === &#39;&#39;){            
        return false;
        }
        clearTimeout(timer);
        timer = setTimeout(function(){//也可不用定时器
            // 清空内容
            $(&#39;.lists&#39;).html(&#39;&#39;);
            $(&#39;.dropload-down&#39;).remove();            
            var counter = 0;            // 每页展示4个
            var num = 4;            
            var pageStart = 0,pageEnd = 0;            // dropload
            $(&#39;.content&#39;).dropload({
                scrollArea : window,
                loadDownFn : function(me){
                    $.ajax({
                        type: &#39;GET&#39;,
                        url: &#39;json/more.json&#39;,
                        dataType: &#39;json&#39;,
                        success: function(data){
                            var result = &#39;&#39;;
                            counter++;
                            pageEnd = num * counter;
                            pageStart = pageEnd - num;                            
                            .for(var i = pageStart; i < pageEnd; i++){
                                result +=   &#39;<a class="item opacity" href="&#39;+data.lists[i].link+&#39;">&#39;
                                                +&#39;<img src="&#39;+data.lists[i].pic+&#39;" alt="">&#39;
                                                +&#39;<h3>&#39;+data.lists[i].title+&#39;</h3>&#39;
                                                +&#39;<span class="date">&#39;+data.lists[i].date+&#39;</span>&#39;
                                            +&#39;</a>&#39;;                                
                                            if((i + 1) >= _length || (i + 1) >= data.lists.length){                                    // 锁定
                                    me.lock();                                    // 无数据
                                    me.noData();                                    
                                    break;
                                }
                            }                            // 为了测试，延迟1秒加载
                            setTimeout(function(){
                                $(&#39;.lists&#39;).append(result);                                // 每次数据加载完，必须重置
                                me.resetload();
                            },1000);
                        },
                        error: function(xhr, type){
                            alert(&#39;Ajax error!&#39;);                            // 即使加载出错，也得重置
                            me.resetload();
                        }
                    });
                }
            });
        },500);
    });

ログイン後にコピー

例 4、固定レイアウト、上部と下部をロード

$(function(){
    // 按钮操作
    $(&#39;.header .btn&#39;).on(&#39;click&#39;,function(){
        var $this = $(this);        
        if(!!$this.hasClass(&#39;lock&#39;)){
            $this.attr(&#39;class&#39;,&#39;btn unlock&#39;);
            $this.text(&#39;解锁&#39;);            // 锁定
            dropload.lock();
            $(&#39;.dropload-down&#39;).hide();
        }else{
            $this.attr(&#39;class&#39;,&#39;btn lock&#39;);
            $this.text(&#39;锁定&#39;);            // 解锁
            dropload.unlock();
            $(&#39;.dropload-down&#39;).show();
        }
    });    // dropload
    var dropload = $(&#39;.inner&#39;).dropload({
        domUp : {
            domClass   : &#39;dropload-up&#39;,
            domRefresh : &#39;<p class="dropload-refresh">↓下拉刷新</p>&#39;,
            domUpdate  : &#39;<p class="dropload-update">↑释放更新</p>&#39;,
            domLoad    : &#39;<p class="dropload-load"><span class="loading"></span>加载中...</p>&#39;
        },
        domDown : {
            domClass   : &#39;dropload-down&#39;,
            domRefresh : &#39;<p class="dropload-refresh">↑上拉加载更多</p>&#39;,
            domLoad    : &#39;<p class="dropload-load"><span class="loading"></span>加载中...</p>&#39;,
            domNoData  : &#39;<p class="dropload-noData">暂无数据</p>&#39;
        },
        loadUpFn : function(me){
            $.ajax({
                type: &#39;GET&#39;,
                url: &#39;json/update.json&#39;,
                dataType: &#39;json&#39;,
                success: function(data){
                    var result = &#39;&#39;;                    
                    for(var i = 0; i < data.lists.length; i++){
                        result +=   &#39;<a class="item opacity" href="&#39;+data.lists[i].link+&#39;">&#39;
                                        +&#39;<img src="&#39;+data.lists[i].pic+&#39;" alt="">&#39;
                                        +&#39;<h3>&#39;+data.lists[i].title+&#39;</h3>&#39;
                                        +&#39;<span class="date">&#39;+data.lists[i].date+&#39;</span>&#39;
                                    +&#39;</a>&#39;;
                    }                    // 为了测试，延迟1秒加载
                    setTimeout(function(){
                        $(&#39;.lists&#39;).html(result);                        // 每次数据加载完，必须重置
                        dropload.resetload();
                    },1000);
                },
                error: function(xhr, type){
                    alert(&#39;Ajax error!&#39;);                    // 即使加载出错，也得重置
                    dropload.resetload();
                }
            });
        },
        loadDownFn : function(me){
            $.ajax({
                type: &#39;GET&#39;,
                url: &#39;json/more.json&#39;,
                dataType: &#39;json&#39;,
                success: function(data){
                    var result = &#39;&#39;;                    
                    for(var i = 0; i < data.lists.length; i++){
                        result +=   &#39;<a class="item opacity" href="&#39;+data.lists[i].link+&#39;">&#39;
                                        +&#39;<img src="&#39;+data.lists[i].pic+&#39;" alt="">&#39;
                                        +&#39;<h3>&#39;+data.lists[i].title+&#39;</h3>&#39;
                                        +&#39;<span class="date">&#39;+data.lists[i].date+&#39;</span>&#39;
                                    +&#39;</a>&#39;;
                    }                    // 为了测试，延迟1秒加载
                    setTimeout(function(){
                        $(&#39;.lists&#39;).append(result);                        // 每次数据加载完，必须重置
                        dropload.resetload();
                    },1000);
                },
                error: function(xhr, type){
                    alert(&#39;Ajax error!&#39;);                    // 即使加载出错，也得重置
                    dropload.resetload();
                }
            });
        }
    });
});

ログイン後にコピー

以上がdropload.jsの使い方についての詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

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

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Gmailメールのログイン入り口はどこですか？

7529

CakePHP チュートリアル

1378

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

Related knowledge

DirectX修復ツールの使い方は？ DirectX修復ツールの詳しい使い方 Mar 15, 2024 am 08:31 AM

DirectX 修復ツールは専門的なシステムツールであり、その主な機能は現在のシステムの DirectX 状態を検出することであり、異常が見つかった場合は直接修復できます。 DirectX 修復ツールの使い方がわからないユーザーも多いと思いますので、以下の詳細なチュートリアルを見てみましょう。 1. 修復ツールソフトウェアを使用して修復検出を実行します。 2. 修復の完了後、C++ コンポーネントに異常な問題があることを示すメッセージが表示された場合は、[キャンセル] ボタンをクリックし、[ツール] メニューバーをクリックしてください。 3. [オプション] ボタンをクリックし、拡張機能を選択して、[拡張機能の開始] ボタンをクリックします。 4. 拡張が完了したら、再検出して修復します。 5. 修復ツールの操作が完了した後も問題が解決しない場合は、エラーを報告したプログラムをアンインストールして再インストールしてみてください。

HTTP 525 ステータスコードの概要: その定義と応用を調べる Feb 18, 2024 pm 10:12 PM

HTTP 525 ステータスコードの概要: その定義と使用法を理解する HTTP (HypertextTransferProtocol) 525 ステータスコードは、SSL ハンドシェイク中にサーバーでエラーが発生し、安全な接続を確立できないことを意味します。 Transport Layer Security (TLS) ハンドシェイク中にエラーが発生すると、サーバーはこのステータスコードを返します。このステータスコードはサーバーエラーカテゴリに分類され、通常はサーバーの構成またはセットアップの問題を示します。クライアントが HTTPS 経由でサーバーに接続しようとすると、サーバーには

Baidu Netdisk の使用方法 - Baidu Netdisk の使用方法 Mar 04, 2024 pm 09:28 PM

Baidu Netdisk の使い方をまだ知らない友人も多いので、以下では編集者が Baidu Netdisk の使い方を説明しますので、必要な場合は急いでご覧ください。ステップ 1: Baidu Netdisk をインストールした後、直接ログインします (図を参照); ステップ 2: 次に、ページのプロンプトに従って [マイ共有] と [転送リスト] を選択します (図を参照); ステップ 3: 「「友達共有」では、写真やファイルを友達と直接共有できます (図を参照); ステップ 4: 次に、「共有」を選択し、コンピューターファイルまたはネットワークディスクファイルを選択します (図を参照); 5 番目のステップ 1:次に、友達を見つけることができます (写真に示すように); ステップ 6: 「機能宝箱」で必要な機能を見つけることもできます (写真に示すように)。以上、編集者の意見です

素早くコピー＆ペーストする方法を学ぶ Feb 18, 2024 pm 03:25 PM

コピー＆ペーストのショートカットキーの使い方コピー＆ペーストは、毎日パソコンを使っていると頻繁に遭遇する操作です。作業効率を向上させるためには、コピー＆ペーストのショートカットキーを使いこなすことが非常に重要です。この記事では、読者がコピーアンドペースト操作をより便利に実行できるように、一般的に使用されるコピーアンドペーストのショートカットキーをいくつか紹介します。コピーのショートカットキー: Ctrl+CCtrl+C はコピーのショートカットキーで、Ctrl キーを押しながら C キーを押すと、選択したテキスト、ファイル、画像などをクリップボードにコピーできます。このショートカットキーを使用するには、

KMS アクティベーションツールとは何ですか? KMS アクティベーションツールの使用方法は? KMS アクティベーションツールの使用方法は? Mar 18, 2024 am 11:07 AM

KMS ライセンス認証ツールは、Microsoft Windows および Office 製品のライセンス認証に使用されるソフトウェアツールです。 KMS は KeyManagementService の略で、鍵管理サービスです。 KMS ライセンス認証ツールは、KMS サーバーの機能をシミュレートして、コンピューターが仮想 KMS サーバーに接続して Windows および Office 製品をライセンス認証できるようにします。 KMS ライセンス認証ツールは、サイズが小さく、機能が強力です。ワンクリックで永続的にライセンス認証できます。インターネットに接続せずに、あらゆるバージョンのウィンドウシステムとあらゆるバージョンの Office ソフトウェアをライセンス認証できます。現在、最も成功しているツールです。頻繁に更新される Windows ライセンス認証ツール今日はそれを紹介します kms ライセンス認証作業を紹介します

ショートカットキーを使ってセルを結合する方法 Feb 26, 2024 am 10:27 AM

セルを結合するためのショートカットキーの使用方法日常業務では、表の編集や書式設定が必要になることがよくあります。セルの結合は、表の美しさと情報の表示効果を向上させるために、隣接する複数のセルを 1 つのセルに結合する一般的な操作です。 Microsoft ExcelやGoogle Sheetsなどの主流の表計算ソフトでは、セルの結合操作は非常に簡単でショートカットキーで実現できます。この2つのソフトでセルを結合するショートカットキーの使い方を紹介します。存在する

ポットプレイヤーの使い方 - ポットプレイヤーの使い方 Mar 04, 2024 pm 06:10 PM

Potplayer は非常に強力なメディアプレーヤーですが、まだ Potplayer の使い方を知らない友達も多いので、今日は Potplayer の使い方を詳しく紹介して、皆さんのお役に立てればと思います。 1. PotPlayer のショートカットキー: PotPlayer プレーヤーのデフォルトの共通ショートカットキーは次のとおりです: (1) 再生/一時停止: スペース (2) 音量: マウスホイール、上下の矢印キー (3) 進む/戻る: 左右の矢印キー (4) ブックマーク: P- ブックマークの追加、H-ビューブックマーク (5) フルスクリーン/復元: Enter (6) 複数の速度: C-加速、7) 前/次のフレーム: D/

PyCharmとは何ですか?機能紹介と使い方の詳しい説明 Feb 20, 2024 am 09:21 AM

PyCharm は、JetBrains が開発したプロフェッショナルな Python 統合開発環境 (IDE) で、Python 開発者に強力な機能とツールを提供し、Python コードの作成をより効率的かつ便利にします。 PyCharm は、Windows、macOS、Linux などの複数のオペレーティングシステムをサポートし、複数の Python バージョンもサポートし、開発者が独自のニーズに応じて IDE 環境をカスタマイズできるようにする豊富なプラグインと拡張機能を提供します。 P

See all articles

dropload.jsの使い方について

例 3、複数のロード

例 4、固定レイアウト、上部と下部をロード

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック