[英]jQuery function in separate file,
我在stackoverflow上找到了一个很好的jQuery脚本,我想把它放在一个单独的.js文件中。
我想这样做是因为我想在超过1页的文件中使用该文件。
如果我将此代码放在特定页面上的脚本标记内,它可以工作,但是当我在头部引用它时,它就会执行。
(function ($) {
// jQuery autoGrowInput plugin by James Padolsey
$.fn.autoGrowInput = function (o) {
o = $.extend({
maxWidth: 1000,
minWidth: 10,
comfortZone: 10
}, o);
this.filter('input:text').each(function () {
var minWidth = o.minWidth || $(this).width(),
val = '',
input = $(this),
testSubject = $('<div/>').css({
position: 'absolute',
top: -9999,
left: -9999,
width: 'auto',
fontSize: input.css('fontSize'),
fontFamily: input.css('fontFamily'),
fontWeight: input.css('fontWeight'),
letterSpacing: input.css('letterSpacing'),
whiteSpace: 'nowrap',
textIndent: 0
}),
check = function () {
if (val === (val = input.val())) { return; }
// Enter new content into testSubject
var escaped = val.replace(/&/g, '&').replace(/\s/g, ' ').replace(/</g, '<').replace(/>/g, '>');
testSubject.html(escaped);
// Calculate new width + whether to change
var testerWidth = testSubject.width(),
newWidth = (testerWidth + o.comfortZone) >= minWidth ? testerWidth + o.comfortZone : minWidth,
currentWidth = input.width(),
isValidWidthChange = (newWidth < currentWidth && newWidth >= minWidth)
|| (newWidth > minWidth && newWidth < o.maxWidth);
// Animate width
if (isValidWidthChange) {
input.width(newWidth);
}
};
testSubject.insertAfter(input);
$(this).bind('keyup keydown blur update', check);
// Resize the input to the correct size from the beginning.
check();
});
return this;
}; })(jQuery); $('input').autoGrowInput();
我就是这样做的:
我把它放在一个单独的文件中:
(function ($) {
// jQuery autoGrowInput plugin by James Padolsey
$.fn.autoGrowInput = function (o) {
o = $.extend({
maxWidth: 1000,
minWidth: 10,
comfortZone: 10
}, o);
this.filter('input:text').each(function () {
var minWidth = o.minWidth || $(this).width(),
val = '',
input = $(this),
testSubject = $('<div/>').css({
position: 'absolute',
top: -9999,
left: -9999,
width: 'auto',
fontSize: input.css('fontSize'),
fontFamily: input.css('fontFamily'),
fontWeight: input.css('fontWeight'),
letterSpacing: input.css('letterSpacing'),
whiteSpace: 'nowrap',
textIndent: 0
}),
check = function () {
if (val === (val = input.val())) { return; }
// Enter new content into testSubject
var escaped = val.replace(/&/g, '&').replace(/\s/g, ' ').replace(/</g, '<').replace(/>/g, '>');
testSubject.html(escaped);
// Calculate new width + whether to change
var testerWidth = testSubject.width(),
newWidth = (testerWidth + o.comfortZone) >= minWidth ? testerWidth + o.comfortZone : minWidth,
currentWidth = input.width(),
isValidWidthChange = (newWidth < currentWidth && newWidth >= minWidth)
|| (newWidth > minWidth && newWidth < o.maxWidth);
// Animate width
if (isValidWidthChange) {
input.width(newWidth);
}
};
testSubject.insertAfter(input);
$(this).bind('keyup keydown blur update', check);
// Resize the input to the correct size from the beginning.
check();
});
return this;
};
})(jQuery);
然后我从布局中调用它,如下所示:
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>
<script src="~/Scripts/Forms/dynamicFormSize.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function () {
$('input').autoGrowInput();
});
</script>
// REST OF SITE HERE...
</body>
它仍然不起作用,我可以补充一点,我使用MVC FrameWork。
控制台错误:未捕获TypeError:对象[object Object]没有方法'autoGrowInput'
我也可以说.js文件包含在源代码中,同样适用于$('input')。autoGrowInput();
你必须调用$('input').autoGrowInput();
文档加载后。
试试这个:
$(function(){
$('input').autoGrowInput();
});
您在代码中对autoGrowInput
引用应该在您内联定义或指定包含它的外部脚本标记之后。
此外,您必须在已加载的元素上使用它。
尝试使用文档就绪事件,如下所示:
$(function(){
$('input').autoGrowInput();
});
首先确保引用jquery
然后引用脚本
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="yourScript.js"></script>
然后在文档准备好后调用函数。
<script type="text/javascript">
$('document').ready(function(){
$('input').autoGrowInput();
});
</script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="yourScript.js"></script>
<script type="text/javascript">
$('document').ready(function(){
autoGrowInput();
});
</script>
在浏览器上清除缓存....并再次测试。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.