JSfiddle: cách tạo dự án tệp đa JS/CSS/HTML?

Question

Có cách nào để tạo một dự án HTML/CSS/JS nghiêm túc với nhiều tệp HTML, CSS, JS trên JSfiddle.net không? Nếu có, làm thế nào để làm điều đó?

---

Tôi muốn tạo ứng dụng di động cơ bản dựa trên HTML/CSS/JS, khoảng một tá tệp HTML/CSS/JS. Tôi muốn phát triển tất cả trên JSfiddle, yêu thích của tôi Online JavaScript IDE. Nhưng JSfiddle.net trong khi một cách sạch để kiểm tra các dự án vẫn được giới hạn:

• 1 file html (cá nhân)
• 1 CSS file (cá nhân)
• 1 JS tập tin (cá nhân)
• nhiều bên ngoài tài nguyên (CSS, JS libs, dữ liệu) yêu cầu bạn một webhosting khác.

Tài liệu chính thức suggesting Github hosting cho 1HTML/1JS/1CSS/someDataFiles không thỏa mãn. Tôi muốn tất cả trên JSFiddle, và nhiều tập tin trong dự án của tôi.

Answer 1

Bạn có thể làm điều đó bên trong jsFiddle nhưng có vài hạn chế và bạn có thể sẽ không hài lòng với nó.

1. Bạn chỉ có thể thử nghiệm 1 mẫu nhiều trang HTML. Nhưng trong trường hợp khung công tác jQuery Mobile, điều này là đủ, vì bạn có thể đặt nhiều trang jQM bên trong một tệp 1 html.

   Ví dụ, đây là mẫu jsFiddle tôi khi giúp nhóm này: http://jsfiddle.net/Gajotres/yWTG2/

2. Bạn không thể sử dụng hình thức trên Facebook Chia bình thường. Thay vào đó, bạn nên sử dụng ajax để sumbit dữ liệu biểu mẫu.

   Trong câu trả lời khác của tôi, bạn có thể tìm ra giải pháp cho nộp mẫu đơn ajax và làm thế nào để gửi các thông số trong quá trình chuyển trang: jQuery Mobile: Sending data from one page to the another

   Trong trường hợp bạn muốn giao tiếp với một máy chủ từ xa:

   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 có một chính sách ngu ngốc mà họ muốn ngăn chặn việc sử dụng các tệp HTML đầy đủ. Họ đang cố gắng thực thi điều này với các cảnh báo lỗi ngu ngốc trong phần nội dung HTML. Bạn sẽ cần phải có một cái gì đó giống như plugin firebug cho Firefox hoặc Chrome để loại bỏ ngu dốt này. Hoặc bạn thậm chí có thể làm điều đó với plugin Grease Monkey.

4. Trong trường hợp bạn muốn sử dụng mẫu HTML đầy đủ như trong ví dụ này: http://jsfiddle.net/Gajotres/yWTG2/, bạn sẽ cần phải sử dụng mã javascript của mình ở trạng thái onDomready.

5. Một số chức năng sẽ không hoạt động. Giống như sự kiện window.orientationchange.