-1
我试图构建一个工作的外部面板,但遇到一些问题。这里的HTML:jQuery Mobile Undefined不是函数
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script>
/* add panel */
$(document).on("mobileinit" , function() {
var panel = '<div>panel</div>';
$("body").prepend(panel); /* or .append */
});
</script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script>
/* initialize panel and contents */
$(function() {
$("[data-role=panel]").panel().enhanceWithin(); /* or #panelID or .class */
});
</script>
</head>
<body>
<div data-role="panel" class="panel left panel-01" data-position="left" data-display="push" id="panel-01">
<ul data-role="listview" data-theme="a">
<li><a href="#profile">My Profile</a></li>
<li><a href="#">Recent Activities</a></li>
<li><a href="#">FAQ </a></li>
<li><a href="#">Terms and Use</a></li>
<li><a href="#">Full Site</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Privacy Policy</a></li>
</ul>
</div>
<div data-role="page" id="home" data-position="fixed">
<div data-role="header"> <a href="#panel-01" class="menuIcon ico fl">menu</a>
<h1>Home</h1>
</div>
<div data-role="content" class="content">content
<div data-role="listview" style="margin:1em; border-radius:10px;">
<ul data-role="listview" style="margin:1em; border-radius:10px;">
<li><a href="#about">About us</a>
</li>
</ul>
</div>
</div>
</div>
<div data-role="page" id="about" data-position="fixed">
<div data-role="header"> <a href="#panel-01" class="menuIcon ico fl">menu</a>
<h1>About us</h1>
</div>
<div data-role="content" class="content">About us
<div data-role="listview" style="margin:1em; border-radius:10px;">
<ul data-role="listview" style="margin:1em; border-radius:10px;">
<li><a href="#home">Home</a>
</li>
</ul>
</div>
</div>
<div data-role="footer">
<!--<h4>Footer</h4>-->footer</div>
</div>
<div data-role="page" id="profile" data-position="fixed">
<div data-role="header"> <a href="#panel-01" class="menuIcon ico fl">menu</a>
<h1>My Profile</h1>
</div>
<div data-role="content" class="content">About us
<div data-role="listview" style="margin:1em; border-radius:10px;">
<ul data-role="listview" style="margin:1em; border-radius:10px;">
<li><a href="#home">Profiles</a>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
我在Chrome测试这一点,我越来越:
Uncaught TypeError: undefined is not a function
的代码是从不同的来源中获得,但似乎是加载外部面板的典型例子。
如何更正“未定义函数”错误?
的错误不是第一个剧本,它的第二:$(函数(){$(“[数据角色=面板]“).panel()。enhanceWithin(); ... –
确认:这不能解决错误。 –