9

有没有办法在 JSfiddle.net 上创建一个包含多个 HTML、CSS、JS 文件的严肃的 HTML/CSS/JS 项目？如果是，该怎么做？

我想创建一个基于 HTML/CSS/JS 的基本移动应用程序，大约有十几个 HTML/CSS/JS 文件。我想在我最喜欢的在线 JavaScript IDE JSfiddle 上开发它。但是 JSfiddle.net 虽然测试项目的干净方式仍然限于：

  • 1个html文件（个人）
  • 1个CSS文件（个人）
  • 1个JS文件（个人）
  • 几个外部资源（CSS、JS 库、数据），它们要求您进行另一个虚拟主机。

建议 Github 托管1HTML/1JS/1CSS/someDataFiles的官方文档并不令人满意。我希望 JSFiddle 上的所有内容，以及我的项目中的更多文件。

4

1 回答 1

5

您可以在 jsFiddle 中执行此操作，但限制很少，您可能不会对此感到满意。

  1. 您只能测试 1 个 HTML 多页模板。但是对于 jQuery Mobile 框架，这就足够了，因为您可以在 1 个 html 文件中放置大量 jQM 页面。

    例如，这是我帮助这个小组时的 jsFiddle 模板：http: //jsfiddle.net/Gajotres/yWTG2/

  2. 您不能使用正常的表单提交。相反，您应该使用 ajax 来汇总表单数据。

    在我的另一个答案中，您可以找到 ajax 表单提交以及如何在页面转换期间发送参数的解决方案：jQuery Mobile: Sending data from a page to the 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 回答