9

JSfiddle.net で複数の HTML、CSS、JS ファイルを使用して本格的な HTML/CSS/JS プロジェクトを作成する方法はありますか? はいの場合、それを行う方法は?

HTML/CSS/JS に基づいた基本的なモバイル アプリを作成したいと考えています。HTML/CSS/JS ファイルは 12 個程度です。私のお気に入りのオンライン JavaScript IDEである JSfiddle ですべてを開発したいと思います。しかし、JSfiddle.net は、プロジェクトをテストするためのクリーンな方法でありながら、以下に限定されたままです。

  • 1 html ファイル (個人用)
  • 1 CSS ファイル (個人用)
  • 1 JS ファイル (個人用)
  • 別のウェブホスティングを要求するいくつかの外部リソース (CSS、JS ライブラリ、データ)。

1HTML/1JS/1CSS/someDataFiles のGithub ホスティングを提案する公式ドキュメントは満足のいくものではありません。JSFiddle のすべてと、プロジェクト内のファイルが増えることを願っています。

4

1 に答える 1

5

jsFiddle 内で実行できますが、いくつかの制限があり、おそらく満足できないでしょう。

  1. テストできる HTML 複数ページ テンプレートは 1 つだけです。しかし、jQuery Mobile フレームワークの場合、多数の jQM ページを 1 つの html ファイル内に配置できるため、これで十分です。

    たとえば、これはこのグループを支援するときの私の jsFiddle テンプレートです: http://jsfiddle.net/Gajotres/yWTG2/

  2. 通常のフォーム送信は使用できません。代わりに、ajax を使用してフォーム データを送信する必要があります。

    私の他の回答では、ajaxフォーム送信の解決策と、ページ遷移中にパラメーターを送信する方法を見つけることができます: jQuery Mobile: Sending data from one page to another

    リモートホストと通信したい場合:

    var ajax = {
    sendRequest:function(save_data){
        $.ajax({url: 'http://localhost/JSONP_Tutorial/json.php',
            data: save_data,
            async: true,
            beforeSend: function() {
                // This callback function will trigger before data is sent
                $.mobile.showPageLoadingMsg(true); // This will show ajax spinner
            },
            complete: function() {
                // This callback function will trigger on data sent/received complete
                $.mobile.hidePageLoadingMsg(); // This will hide ajax spinner
            },
            success: function (result) {
                if(result == "true") {
                    $.mobile.changePage( "#index", { transition: "slide"} ); // In case result is true change page to Index
                } else {
                    alert('Login unsuccessful, please try again!'); // In case result is false throw an error
                }
                // This callback function will trigger on successful action
            },
            error: function (request,error) {
                // This callback function will trigger on unsuccessful action                
                alert('Network error has occurred please try again!');
            }
        });
    }
}

  3. jsFiddle には、完全な HTML ファイルの使用を防止したいという愚かなポリシーがあります。彼らは、HTML コンテンツ部分に愚かなエラー警告を表示して、これを強制しようとしています。この愚かさを取り除くには、Firefox または Chrome 用の firebug プラグインのようなものが必要です。または、Grease Monkey プラグインを使用することもできます。

  4. 次の例のような完全な HTML テンプレートを使用する場合: http://jsfiddle.net/Gajotres/yWTG2/ onDomready 状態で JavaScript コードを使用する必要があります。

  5. 一部の機能が動作しません。window.orientationchange イベントと同様です。

于 2013-03-22T14:59:27.560 に答える