jquery - jquery mobile css 无法在 github 页面上加载
问题描述
这里有一个多页jquery移动网站模板
这完美加载。但是,当我将相同的模板上传到 github pages 网站时,css 和 js 不会从 jquery 加载,请参见此处
这是网站的html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Multi-page template</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.2/jquery.mobile-1.1.2.min.css" />
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.2/jquery.mobile-1.1.2.min.js"></script>
</head>
<body>
<!-- Start of first page: #one -->
<div data-role="page" id="one">
<div data-role="header">
<h1>Multi-page</h1>
</div><!-- /header -->
<div data-role="content" >
<h2>One</h2>
<p>I have an <code>id</code> of "one" on my page container. I'm first in the source order so I'm shown when the page loads.</p>
<p>This is a multi-page boilerplate template that you can copy to build your first jQuery Mobile page. This template contains multiple "page" containers inside, unlike a <a href="page-template.html"> single page template</a> that has just one page within it.</p>
<p>Just view the source and copy the code to get started. All the CSS and JS is linked to the jQuery CDN versions so this is super easy to set up. Remember to include a meta viewport tag in the head to set the zoom level.</p>
<p>You link to internal pages by referring to the <code>id</code> of the page you want to show. For example, to <a href="#two" >link</a> to the page with an <code>id</code> of "two", my link would have a <code>href="#two"</code> in the code.</p>
<h3>Show internal pages:</h3>
<p><a href="#two" data-role="button">Show page "two"</a></p>
<p><a href="#popup" data-role="button" data-rel="dialog" data-transition="pop">Show page "popup" (as a dialog)</a></p>
</div><!-- /content -->
<div data-role="footer" data-theme="d">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page one -->
<!-- Start of second page: #two -->
<div data-role="page" id="two" data-theme="a">
<div data-role="header">
<h1>Two</h1>
</div><!-- /header -->
<div data-role="content" data-theme="a">
<h2>Two</h2>
<p>I have an id of "two" on my page container. I'm the second page container in this multi-page template.</p>
<p>Notice that the theme is different for this page because we've added a few <code>data-theme</code> swatch assigments here to show off how flexible it is. You can add any content or widget to these pages, but we're keeping these simple.</p>
<p><a href="#one" data-direction="reverse" data-role="button" data-theme="b">Back to page "one"</a></p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page two -->
<!-- Start of third page: #popup -->
<div data-role="page" id="popup">
<div data-role="header" data-theme="e">
<h1>Dialog</h1>
</div><!-- /header -->
<div data-role="content" data-theme="d">
<h2>Popup</h2>
<p>I have an id of "popup" on my page container and only look like a dialog because the link to me had a <code>data-rel="dialog"</code> attribute which gives me this inset look and a <code>data-transition="pop"</code> attribute to change the transition to pop. Without this, I'd be styled as a normal page.</p>
<p><a href="#one" data-rel="back" data-role="button" data-inline="true" data-icon="back">Back to page "one"</a></p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page popup -->
</body>
</html>
这与 http 与 https 有关吗?我想让它像在 jquery 网站上一样加载到我的 github 页面网站上。
解决方案
推荐阅读
- python - 如何制作函数作曲家
- mysql - 加载数据 infile str_to_date 转换
- excel - VLOOKUP 未显示正确的数据
- c++ - cvGetMat 中的错误标志(参数或结构字段)(无法识别或不支持的数组类型)
- wpf - 另一个用户控件中的用户控件在 WPF 中收集垃圾
- r - 如何将图形的标题从底部移动到顶部?
- uwp - 在 uwp 客户端中使用 Directline Enhanced 身份验证
- node.js - 在服务器上更改 json 文件时通过 Vuejs 更新数据(nodejs)
- html - 根据 html helper 上的条件禁用元素
- css - VSCode 为所有 mso 属性抛出错误......?