[英]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.