jQuery 在放入 cshtml 页面时失败,出现错误“ $(..)符咒不是一种功能”
jQuery fails when dropped into cshtml page with error " $(...) Charms is not a function"
我一直在尝试将一些代码从html引导metro页面放入cshtml页面。
当我在cshtml项目中运行原始html页面时,它工作正常;但是,当我在cshtml页面中运行相同的代码时,jquery功能将背景颜色更改为深色,这是由设置图标触发的,返回此错误:
Timestamp: 05/06/2013 13:46:56
Error: TypeError: $(...).charms is not a function
Source File: http://*l*o*c*a*l*h*o*s*t*:24349/assets/js/demo.js
Line: 29
我尝试了以下答案,我毫无喜悦地研究了这些答案:
• 将代码放在 cshtml 页面中的@section脚本中:
@section scripts {
<script>
</script>
}
• 切勿在 ASP.NET MVC 应用程序中对 url 进行硬编码。始终使用帮助程序(或推荐的捆绑包(:
• 确保在 _Layout.cshtml
的末尾没有 @Scripts.Render("~/bundles/jquery")
调用,因为这将包含两次 jQuery。
• 如果在your _Layout.cshtml
末尾有一个用于自定义脚本的专用部分,如 @RenderSection("scripts", required: false)
,请确保已将自定义脚本放在该部分中(请注意,由于此 RenderSection 位于 DOM 的末尾,因此您不需要将脚本包装在 document.ready 事件中,因为当它执行时, DOM 已经加载(:
• 将脚本标记放在生成表单的分部视图本身中,它现在知道要将其绑定到哪个控件。
这是 cshtml 页面:
@{
}
<!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8" />
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!-- Mobile viewport optimized: h5bp.com/viewport -->
<meta name="viewport" content="width=device-width">
<title>bigint</title>
<!-- remove or comment this line if you want to use the local fonts -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="content/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="content/css/bootstrap-responsive.css">
<link rel="stylesheet" type="text/css" href="content/css/bootmetro.css">
<link rel="stylesheet" type="text/css" href="content/css/bootmetro-tiles.css">
<link rel="stylesheet" type="text/css" href="content/css/bootmetro-charms.css">
<link rel="stylesheet" type="text/css" href="content/css/metro-ui-light.css">
<link rel="stylesheet" type="text/css" href="content/css/icomoon.css">
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="assets/js/ico/favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
<script src="assets/js/modernizr-2.6.1.min.js"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-3182578-6']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<!-- bigInt favicon -->
<link href="../bigInt_fav.ico" rel="shortcut icon" type="image/x-icon" />
<style type="text/css">
body {
padding-top: 20px;
padding-bottom: 60px;
}
.pageborder {width:800px;
margin:0 auto 0 auto;
padding:5px;
border:2px solid #eeeeee;
}
/* Main marketing message and sign up button */
.jumbotron {
margin: 40px 0;
text-align: center;
}
.jumbotron h1 {
font-size: 100px;
line-height: 1;
}
.jumbotron .lead {
font-size: 24px;
line-height: 1.25;
}
/* Jumbotron button styling removed as it affects modal button size */
/* Supporting marketing content */
.marketing {
margin: 60px 0;
}
.marketing p + h4 {
margin-top: 28px;
}
/* Customize the navbar links to be fill the entire space of the .navbar */
.navbar .navbar-inner {
padding: 0;
}
.navbar .nav {
margin: 0;
display: table;
width: 100%;
}
.navbar .nav li {
display: table-cell;
width: 1%;
float: none;
}
.navbar .nav li a {
font-weight: bold;
text-align: center;
border-left: 1px solid rgba(255,255,255,.75);
border-right: 1px solid rgba(0,0,0,.1);
}
.navbar .nav li:first-child a {
border-left: 0;
border-radius: 3px 0 0 3px;
}
.navbar .nav li:last-child a {
border-right: 0;
border-radius: 0 3px 3px 0;
}
.spinning_icons a:hover{
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
transition: transform 0.2s ease-out;
-webkit-transition: -webkit-transform 0.2s ease-out;
-moz-transition: -moz-transform 0.2s ease-out;
}
.social{
float:right;
}
.like{
float:right;
}
.logo{
position:absolute;
left:10px;
top:10px;
}
</style>
<!-- I had to move a.trigger and active from stylex to here as links to plus & minus png did not work -->
</head>
<body data-accent="blue">
<div id="top-info" class="pull-right">
<a href="#" class="pull-left">
</a>
<a id="settings" class="pull-left" href="#">
<b class="icon-settings"></b>
</a>
</div>
</div>
</header>
<div class="container-fluid">
<div class="row-fluid">
<div class="metro span12">
<div class="metro-sections">
<div id="section1" class="metro-section tile-span-4">
<h2>bigint Pages</h2>
<a class="tile wide imagetext bg-color-blueDark" href="./Home_Slide.html">
<div class="image-wrapper">
<img src="content/img/metro-tiles.jpg" />
</div>
<div class="column-text">
<div class="text4">Finished looking at the Windows 8 Metro style theme - then return home</div>
</div>
<div class="app-label">bigint Home</div>
</a>
<a class="tile wide imagetext wideimage bg-color-orange" href="./Home_Slide.html">
<img src="content/img/appbar.png" alt=""/>
<div class="textover-wrapper bg-color-blue">
<div class="text2">About</div>
</div>
</a>
<a class="tile app wide bg-color-greenDark" href="./Home_Slide.html">
<div class="image-wrapper">
<b class="icon-home"></b>
</div>
<div class="app-label">Contact</div>
</a>
<a class="tile app bg-color-purple" href="./Home_Slide.html">
<div class="image-wrapper">
<b class="icon-list"></b>
</div>
<span class="app-label">Services</span>
</a>
<a class="tile app bg-color-red" href="./Home_Slide.html">
<div class="image-wrapper">
<b class="icon-share"></b>
</div>
<span class="app-label">Projects</span>
</a>
<a class="tile app bg-color-yellow" href="./Home_Slide.html">
<div class="image-wrapper">
<img src="content/img/My Apps.png" />
</div>
<span class="app-label">Quality Improvement</span>
</a>
<a class="tile app bg-color-blueDark" href="./Home_Slide.html">
<div class="image-wrapper">
<b class="icon-globe"></b>
</div>
<span class="app-label">Icons</span>
</a>
</div>
<div id="section2" class="metro-section tile-span-4">
<h2>Other bigint Sites </h2>
<a class="tile wide imagetext bg-color-blue" href="./Home_Slide.html">
<div class="image-wrapper">
<img src="content/img/My Apps.png" />
</div>
<div class="column-text">
<div class="text">Grid system</div>
<div class="text">Layouts</div>
<div class="text">Responsive design</div>
</div>
<span class="app-label">bigint Blog</span>
</a>
<a class="tile wide imagetext bg-color-blueDark" href="./Home_Slide.html">
<div class="image-wrapper">
<img src="content/img/Coding app.png" />
</div>
<div class="column-text">
<div class="text">Typography</div>
<div class="text">Tables</div>
<div class="text">Forms</div>
<div class="text">Buttons</div>
</div>
<span class="app-label">bigint Jetstrap</span>
</a>
<a class="tile app bg-color-orange" href="./Home_Slide.html">
<div class="image-wrapper">
<img src="content/img//RegEdit.png" alt="" />
</div>
<span class="app-label">Parners</span>
</a>
<a class="tile app bg-color-red" href="./Home_Slide.html">
<div class="image-wrapper">
<img src="content/img/Devices.png" alt="" />
</div>
<span class="app-label">Portfolio</span>
</a>
<a class="tile wide imagetext wideimage bg-color-white" href="./Home_Slide.html">
<iframe src="http://www.bigint.biz" width="306" height="200"></iframe>
<div class="textover-wrapper bg-color-blue">
<div class="text2">About</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
<div id="charms" class="win-ui-dark">
<div id="theme-charms-section" class="charms-section">
<div class="charms-header">
<a href="#" class="close-charms win-command">
<span class="win-commandimage win-commandring"></span>
</a>
<h2>Settings</h2>
</div>
<div class="row-fluid">
<div class="span12">
<form class="">
<label for="win-theme-select">Change theme:</label>
<select id="win-theme-select" class="">
<option value="metro-ui-semilight">Semi-Light</option>
<option value="metro-ui-light">Light</option>
<option value="metro-ui-dark">Dark</option>
</select>
</form>
</div>
</div>
</div>
</div>
<!-- Grab Google CDN's jQuery. fall back to local if necessary -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>window.jQuery || document.write("<script src='assets/js/jquery-1.8.2.min.js'>'x3C/script>")</script>
<script type="text/javascript" src="assets/js/google-code-prettify/prettify.js"></script>
<script type="text/javascript" src="assets/js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="assets/js/jquery.scrollTo.js"></script>
<script type="text/javascript" src="assets/js/bootstrap.min.js"></script>
<script type="text/javascript" src="assets/js/bootmetro.js"></script>
<script type="text/javascript" src="assets/js/bootmetro-charms.js"></script>
<script type="text/javascript" src="assets/js/demo.js"></script>
<script type="text/javascript" src="assets/js/holder.js"></script>
<script type="text/javascript">
$(".metro").metro();
</script>
</body>
</html>
以下是siteLayout.cshtml:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>@Page.Title</title>
<!-- Original <link href="~/Content/Site.css" rel="stylesheet" /> CSS -->
<link href="@Href("~/bigInt_fav.ico")" rel="shortcut icon" type="image/x-icon" />
<!-- Le Bootstrap Styles -->
<link href="../assets/css/bootstrap.css" rel="stylesheet">
<link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">
<!-- Slideout CSS -->
<link rel="stylesheet" href="stylex.css" type="text/css" media="screen" />
<style type="text/css">
body {
padding-top: 20px;
padding-bottom: 60px;
}
footer#site-footer {
padding-left: 20px;
}
.pageborder {width:800px;
margin:0 auto 0 auto;
padding:5px;
border:2px solid #eeeeee;
}
/* Main marketing message and sign up button */
.jumbotron {
margin: 40px 0;
text-align: center;
}
.jumbotron h1 {
font-size: 100px;
line-height: 1;
}
.jumbotron .lead {
font-size: 24px;
line-height: 1.25;
}
/* Supporting marketing content */
.marketing {
margin: 60px 0;
}
.marketing p + h4 {
margin-top: 28px;
}
/* Customize the navbar links to be fill the entire space of the .navbar */
.navbar .navbar-inner {
padding: 0;
}
.navbar .nav {
margin: 0;
display: table;
width: 100%;
}
.navbar .nav li {
display: table-cell;
width: 1%;
float: none;
}
.navbar .nav li a {
font-weight: bold;
text-align: center;
border-left: 1px solid rgba(255,255,255,.75);
border-right: 1px solid rgba(0,0,0,.1);
}
.navbar .nav li:first-child a {
border-left: 0;
border-radius: 3px 0 0 3px;
}
.navbar .nav li:last-child a {
border-right: 0;
border-radius: 0 3px 3px 0;
}
.twitter{ background:url('images/Facebook_Cracked-48x48.png'); }
.delicious{ background:url('images/Twitter_Cracked_48x48.png'); }
.spinning_icons a:hover{
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
transition: transform 0.2s ease-out;
-webkit-transition: -webkit-transform 0.2s ease-out;
-moz-transition: -moz-transform 0.2s ease-out;
}
.social{
float:right;
}
.like{
float:right;
}
</style>
<!-- Default Asp.net Script -->
<script src="~/Scripts/modernizr-2.6.2.js"></script>
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
</head>
<body>
<!-- Header section with social icons -->
<header id="banner">
<!-- Script for spinning icons -->
<div class="spinning_icons">
<div class="social">
<a href="https://plus.google.com/100935445850301773475" rel="publisher" ><img src="../images/Google_Cracked-48x84.png" alt="bigInt Google Plus"></a>
<a href="https://www.facebook.com/pages/Bigint/574360432595073" target="_blank"><img src="../images/Facebook_Cracked-48x48.png" alt="Follow Us On Facebook"></a>
<a href="http://twitter.com/bigInt_biz" target="_blank"><img src="../images/Twitter_Cracked_48x48.png" alt="Follow Us On Twitter"></a>
<a href="http://www.linkedin.com/pub/daniel-bye/51/b3b/ab2" target="_blank"><img src="../images/Linkedin_Cracked-48x48.png" alt=" photo Linkedin_Cracked.png"></a>
</div></div>
</br></br></br>
<!-- Top navigation bar-->
<div class="container">
<div class="masthead">
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="Services.html">Services</a></li>
<li><a href="Projects.html">Projects</a></li>
<li><a href="About.html">About</a></li>
<li><a href="Contact_bigInt.html">Contact</a></li>
</ul>
</div>
</div>
</div><!-- /.navbar -->
</div>
</div>
<!-- End of top navigation bar-->
</header>
<!-- Asp.net body tag - no need to comment as in use -->
<div id="body">
@RenderBody()
</div>
@RenderSection("Scripts", required: false)
</body>
</html>
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../assets/js/jquery.js"></script>
<script src="../assets/js/bootstrap-transition.js"></script>
<script src="../assets/js/bootstrap-alert.js"></script>
<script src="../assets/js/bootstrap-modal.js"></script>
<script src="../assets/js/bootstrap-dropdown.js"></script>
<script src="../assets/js/bootstrap-scrollspy.js"></script>
<script src="../assets/js/bootstrap-tab.js"></script>
<script src="../assets/js/bootstrap-tooltip.js"></script>
<script src="../assets/js/bootstrap-popover.js"></script>
<script src="../assets/js/bootstrap-button.js"></script>
<script src="../assets/js/bootstrap-collapse.js"></script>
<script src="../assets/js/bootstrap-carousel.js"></script>
<script src="../assets/js/bootstrap-typeahead.js"></script>
最后,这里是演示.js函数问题在第 29 行:
$(function(){
// this is for the appbar-demo page
if ($("#appbar-theme-select").length){
$("#appbar-theme-select").change(function(){
var ui = $(this).val();
if (ui != '')
$("footer.win-commandlayout")
.removeClass("win-ui-light win-ui-dark")
.addClass(ui);
});
}
// style switcher
if ($("#win-theme-select").length){
$("#win-theme-select").change(function(){
var css = $(this).val();
if (css != '')
updateCSS(css);
});
}
$("#settings").click(function (e) {
e.preventDefault();
$('#charms').charms('showSection', 'theme-charms-section'); // LINE 29
});
// listview demo
$('#listview-grid-demo').on('click', '.mediumListIconTextItem', function(e){
e.preventDefault();
$(this).toggleClass('selected');
});
//$('#home-carousel').carousel({interval: 5000});
});
//function to append a new theme stylesheet with the new style changes
function updateCSS(css){
$("head").append('<link rel="stylesheet" type="text/css" href="content/css/' + css +'.css">');
if($("link[href*=metro-ui-]").size() > 1){
$("link[href*=metro-ui-]:first").remove();
}
};
// NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
// IT'S ALL JUST JUNK FOR OUR DOCS!
// ++++++++++++++++++++++++++++++++++++++++++
!function ($) {
$(function(){
var $window = $(window)
// Disable certain links in docs
$('section [href^=#]').click(function (e) {
e.preventDefault()
})
// side bar
$('.bs-docs-sidenav').affix({
offset: {
top: function () { return $window.width() <= 980 ? 290 : 210 }
, bottom: 270
}
})
// make code pretty
window.prettyPrint && prettyPrint()
// add-ons
$('.add-on :checkbox').on('click', function () {
var $this = $(this)
**, method = $this.attr('checked') ? 'addClass' : 'removeClass'
$(this).parents('.add-on')[method]('active')
})
// add tipsies to grid for scaffolding
if ($('#gridSystem').length) {
$('#gridSystem').tooltip({
selector: '.show-grid > div'
, title: function () { return $(this).width() + 'px' }
})
}
// tooltip demo
$('.tooltip-demo').tooltip({
selector: "a[rel=tooltip]"
})
$('.tooltip-test').tooltip()
$('.popover-test').popover()
// popover demo
$("a[rel=popover]")
.popover()
.click(function(e) {
e.preventDefault()
})
// button state demo
$('#fat-btn')
.click(function () {
var btn = $(this)
btn.button('loading')
setTimeout(function () {
btn.button('reset')
}, 3000)
})
// carousel demo
$('#myCarousel').carousel()
// javascript build logic
var inputsComponent = $("#components.download input")
, inputsPlugin = $("#plugins.download input")
, inputsVariables = $("#variables.download input")
// toggle all plugin checkboxes
$('#components.download .toggle-all').on('click', function (e) {
e.preventDefault()
inputsComponent.attr('checked', !inputsComponent.is(':checked'))
})
$('#plugins.download .toggle-all').on('click', function (e) {
e.preventDefault()
inputsPlugin.attr('checked', !inputsPlugin.is(':checked'))
})
$('#variables.download .toggle-all').on('click', function (e) {
e.preventDefault()
inputsVariables.val('')
})
// request built javascript
$('.download-btn').on('click', function () {
var css = $("#components.download input:checked")
.map(function () { return this.value })
.toArray()
, js = $("#plugins.download input:checked")
.map(function () { return this.value })
.toArray()
, vars = {}
, img = ['glyphicons-halflings.png', 'glyphicons-halflings-white.png']
$("#variables.download input")
.each(function () {
$(this).val() && (vars[ $(this).prev().text() ] = $(this).val())
})
$.ajax({
type: 'POST'
, url: /'?dev/.test(window.location) ? 'http://*l*o*c*a*l*h*o*s*t*:3000' : 'http://bootstrap.herokuapp.com'
, dataType: 'jsonpi'
, params: {
js: js
, css: css
, vars: vars
, img: img
}
})
})
})
// Modified from the original jsonpi https://github.com/benvinegar/jquery-jsonpi
$.ajaxTransport('jsonpi', function(opts, originalOptions, jqXHR) {
var url = opts.url;
return {
send: function(_, completeCallback) {
var name = 'jQuery_iframe_' + jQuery.now()
, iframe, form
iframe = $('<iframe>')
.attr('name', name)
.appendTo('head')
form = $('<form>')
.attr('method', opts.type) // GET or POST
.attr('action', url)
.attr('target', name)
$.each(opts.params, function(k, v) {
$('<input>')
.attr('type', 'hidden')
.attr('name', k)
.attr('value', typeof v == 'string' ? v : JSON.stringify(v))
.appendTo(form)
})
form.appendTo('body').submit()
}
}
})
}(window.jQuery)**
我不得不从页面中删除相当多的内容以满足代码部分中允许的字符限制; 不过,Metroui 背景颜色切换的所有内容都应该在那里。
感谢大家的寻找/帮助。
哪里运行cshtml
页面?背景是什么?
Charms()
似乎是一个地铁功能,无法从您当前的上下文中获得。您可能必须显式添加对包含该函数/插件的任何库/脚本的引用。
- 添加文字和评论功能更新Div
- JavaScript打印功能使日历停止工作
- 每当您在选择器内移动鼠标时,悬停功能就会重复
- 如何防止网页加载后自动启动功能
- 除修剪外的其他功能
- 悬停功能触发器
- 使用angularjs向浏览器发送servlet响应(下载功能)
- 删除CKEditor工具栏按钮,但不删除功能
- 异步facebook功能
- 如何将chrome扩展功能移植到移动设备(特别是jquery和trello)
- jQuery滚动功能只工作一次
- Graphiti中是否有任何工具提示功能
- React redux初始化功能,无论状态变化如何
- 在哪里可以学习ECMAScript标准中尚未包含的JavaScript功能
- 正在获取select上的功能id
- Rhino打印功能
- 使用(navigator.geolocation)检测浏览器功能错误
- 主体单击删除功能上的输入框宽度
- JQuery使用相同的功能自动完成各种输入文本
- jQuery 在放入 cshtml 页面时失败,出现错误“ $(..)符咒不是一种功能”