0
head.js의 자바 스크립트 로더 부분 만 JQM 웹 사이트에 통합하려고합니다. 내가 head.js 페이지에 3 ~ 4 번로드와로드 노력하고있어 스크립트 블록을보고 있어요, 일부 페이지에Head.js와 jQuery Mobile의 통합 문제
- :
나는 문제의 몇 가지가 있어요.
- 모든 페이지에서 상당한 양의 압축되지 않은 콘텐츠 (FOUT)가 표시됩니다. 스타일링이 결국로드됩니다.
<!DOCTYPE html> <html> <head> <meta charset="ISO-8859-1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"> <title>Main Menu</title> <!-- JQM CSS --> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> <!-- Custom Theme CSS --> <link rel="stylesheet" href="themes/cayce.css" /> <!-- Custom CSS --> <link rel="stylesheet" href="css/custom.css" /> <script src="js/head.load.min.js"></script> <script> head.js("http://code.jquery.com/jquery-1.8.2.min.js", "js/custom.js", "http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"); </script> </head> <body> <div data-role="page" id="landing"> <div data-role="header"> <h1>Main Menu</h1> <div class="header-sub"> <div class="logo"> <a href="WebCatPageServer.exe?Landing"> <img src="themes/images/logo.png" width="100" height="49" alt="Company Logo"> </a> </div> </div> <!-- Search Bar--> <div class="ui-body ui-body-b"> <fieldset> <form name="Search" id="searchform" method="post" action="WebCatPageServer.exe"> <input name="Action" type="hidden" value="Search"/> <input name="PrevSearchText" type="hidden" value="" /> <input name="Start" type="hidden" value="1" /> <input name="New" type="hidden" value="YES" /> <input name="Refine" type="hidden" value="NO" /> <label for="search-basic"></label> <input type="search" name="Search Term" id="search-basic" placeholder="Enter Part #'s or Keywords" tabindex="1"/> </form> </fieldset> </div><!-- /Search Bar --> </div><!-- /header --> <div data-role="content"> <ul data-role="listview" data-inset="true"> <li><a href="SPI_TOCLink" data-theme="c">Browse Products</a></li> <!-- SPI_HTML_ShowSearchMenu --> <li><a href="SPI_SearchLink" id="SPI_CurrMenuSearch" data-prefetch>SPI_SearchMenuText</a></li> <!-- SPI_HTML_ShowSearchMenu --> <!-- SPI_HTML_AllowKits --> <li><a href="SPI_KitsLink" data-theme="c" id="viewjobs" data-prefetch>View Jobs</a></li> <!-- SPI_HTML_AllowKits --> <!-- SPI_HTML_AllowOrderPlacement --> <li><a href="SPI_ShopingCartLink" data-theme="c" data-prefetch>Shopping Cart</a></li> <!-- SPI_HTML_AllowOrderPlacement --> <!-- SPI_HTML_AllowSales --> <li><a href="SPI_SalesLink" id="SPI_CurrMenuSales" data-prefetch>SPI_SalesMenuText</a></li> <!-- SPI_HTML_AllowSales --> <!-- SPI_HTML_ShowMyAccountMenu --> <li><a href="SPI_MyAccountLink" data-theme="c" data-prefetch>SPI_MyAccountMenuText Dashboard</a></li> <!-- SPI_HTML_ShowMyAccountMenu --> <li><a href="SPI_LogoutLink">Logout</a></li> </ul><!-- /listview --> </div><!-- /Content--> <div data-role="footer"> </div><!-- /footer --> </div><!-- /page --> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="ISO-8859-1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"> <title>Login</title> <!-- JQM CSS --> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> <!-- Custom Theme CSS --> <link rel="stylesheet" href="themes/cayce.css" /> <!-- Custom CSS --> <link rel="stylesheet" href="css/custom.css" /> </head> <body> <div data-role="page" id="login"> <div data-role="header"> <h1>Login</h1> <div class="header-sub"> <div class="logo"> <a href="WebCatPageServer.exe?Landing"> <img src="themes/images/logo.png" width="100" height="49" alt="Company Logo"> </a> </div> </div> </div> <div data-role="content"> <div class="ui-bar text-center"> <p>Please enter your <strong>Username</strong> and <strong>Password</strong> below to log in to the SPI_Cname Mobile Web Store.</p> </div> <!-- SPI_HTML_UnknownLogin <div class="ui-bar ui-bar-e text-center"> <br> <h2>Please Try Again</h2> <p>Either the Username or Password you entered doesn't match our records. Please try logging in again.</p> </div> <br> SPI_HTML_UnknownLogin --> <!-- SPI_HTML_ExpiredLogin <div class="ui-bar ui-bar-e text-center"> <br> <h2>Please Log In Again</h2> <p>Either your session has expired or you logged in on another computer. Please log in again.</p> </div> <br> SPI_HTML_ExpiredLogin --> <!-- SPI_HTML_SessionLogout <div class="ui-bar ui-bar-e text-center"> <br> <h2>You've Logged Out.</h2> <p>You have successfully logged out of SPI_Cname online.</p> </div> <br> SPI_HTML_SessionLogout --> <div class="ui-body ui-body-c"> <form name="Form" method="post" action="WebCatPageServer.exe"> <input name="Action" type="hidden" value="Login" class="hidden" /> <input name="Request" type="hidden" value="SPI_PageRequest" /> <div data-role="fieldcontain"> <label for="username">Username</label> <input type="text" name="username" id="username" tabindex="1" value=""/> </div> <div data-role="fieldcontain"> <label for="password">Password</label> <input type="password" name="password" id="password" tabindex="2" value=""/> </div> <div data-role="controlgroup" style="width:100%; text-align:center"> <input name="loginbutton" type="submit" data-theme="b" style="width:100%;" value="Sign In" tabindex="3"/> </div> </form> </div><!-- /ui-body ui-body-c --> <br> <ul data-role="listview" data-inset="true"> <!-- SPI_HTML_GuestLogin <li><a href="href="javascript:document.Form.Username.value='guest';document.Form.Password.value='guestpassword';document.Form.submit();">Guest Login</a></li> SPI_HTML_GuestLogin --> <li><a href="tel://SPI_CPNum">Call Us: SPI_CPNum</a></li> <li><a href="WebCatPageServer.exe?Account_Request" id="accountrequest">Request Online Account</a></li> </ul><!-- /listview --> </div><!-- /content --> <div data-role="footer"> </div><!-- /footer --> <!-- Start headjs --> <script src="js/head.load.min.js"></script> <script> head.js("http://code.jquery.com/jquery-1.8.2.min.js", "js/custom.js", "http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js", function() { $('#login').on('pageshow', function() { $(':input:visible:enabled:first').focus(); }); });<!-- End headjs --> </script> </div><!-- /page --> </body> </html>몇 가지주의해야 할 :
- 나는 아약스 전 세계적으로 비활성화
여기에 각각의 문제를 보여 일부 샘플 코드입니다.
- 단일 페이지 템플릿 (여러 페이지)을 사용하고 있습니다.
고마워요!