Uncaught TypeError: $(...).customFileInput is not a function

你的名字 2022-06-10 05:18 556阅读 0赞

1、错误描述

  1. demo.js:214 Uncaught TypeError: $(...).customFileInput is not a function
  2. at HTMLDocument.<anonymous> (demo.js:214)
  3. at f (jquery-1.9.0.min.js:1)
  4. at Object.fireWith [as resolveWith] (jquery-1.9.0.min.js:1)
  5. at Function.ready (jquery-1.9.0.min.js:1)
  6. at HTMLDocument.xt (jquery-1.9.0.min.js:1)
  7. (anonymous) @ demo.js:214
  8. f @ jquery-1.9.0.min.js:1
  9. fireWith @ jquery-1.9.0.min.js:1
  10. ready @ jquery-1.9.0.min.js:1
  11. xt @ jquery-1.9.0.min.js:1

2、错误原因

  1. $(function () {
  2. //####### Buttons
  3. $('button,.button,#sampleButton').button();
  4. // Buttonset
  5. $('#radioset').buttonset();
  6. $("#format").buttonset();
  7. //####### Toolbar
  8. $("#play, #shuffle").button();
  9. $("#repeat").buttonset();
  10. //####### Accordion
  11. $("#menu-collapse").accordion({
  12. header: "h3"
  13. });
  14. // Dialog Link
  15. $('#dialog_link').click(function () {
  16. $('#dialog_simple').dialog('open');
  17. return false;
  18. });
  19. // Modal Link
  20. $('#modal_link').click(function () {
  21. $('#dialog-message').dialog('open');
  22. return false;
  23. });
  24. //hover states on the static widgets
  25. $('#dialog_link, #modal_link, ul#icons li').hover(
  26. function () {
  27. $(this).addClass('ui-state-hover');
  28. }, function () {
  29. $(this).removeClass('ui-state-hover');
  30. }
  31. );
  32. // Dialog Simple
  33. $('#dialog_simple').dialog({
  34. autoOpen: false,
  35. width: 600,
  36. buttons: {
  37. "Ok": function () {
  38. $(this).dialog("close");
  39. },
  40. "Cancel": function () {
  41. $(this).dialog("close");
  42. }
  43. }
  44. });
  45. //####### Dialogs
  46. $("#dialog-message").dialog({
  47. autoOpen: false,
  48. modal: true,
  49. buttons: {
  50. Ok: function () {
  51. $(this).dialog("close");
  52. }
  53. }
  54. });
  55. // Remove focus from buttons
  56. $('.ui-dialog :button').blur();
  57. //####### Tabs
  58. $('#tabs2, #tabs, #tabs3').tabs();
  59. // Dynamic tabs
  60. var tabTitle = $( "#tab_title" ),
  61. tabContent = $( "#tab_content" ),
  62. tabTemplate = "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close'>Remove Tab</span></li>",
  63. tabCounter = 2;
  64. var tabs = $( "#tabs2" ).tabs();
  65. // modal dialog init: custom buttons and a "close" callback reseting the form inside
  66. var dialog = $( "#dialog2" ).dialog({
  67. autoOpen: false,
  68. modal: true,
  69. buttons: {
  70. Add: function() {
  71. addTab();
  72. $( this ).dialog( "close" );
  73. },
  74. Cancel: function() {
  75. $( this ).dialog( "close" );
  76. }
  77. },
  78. close: function() {
  79. form[ 0 ].reset();
  80. }
  81. });
  82. // addTab form: calls addTab function on submit and closes the dialog
  83. var form = dialog.find( "form" ).submit(function( event ) {
  84. addTab();
  85. dialog.dialog( "close" );
  86. event.preventDefault();
  87. });
  88. // actual addTab function: adds new tab using the input from the form above
  89. function addTab() {
  90. var label = tabTitle.val() || "Tab " + tabCounter,
  91. id = "tabs-" + tabCounter,
  92. li = $( tabTemplate.replace( /#\{href\}/g, "#" + id ).replace( /#\{label\}/g, label ) ),
  93. tabContentHtml = tabContent.val() || "Tab " + tabCounter + " content.";
  94. tabs.find( ".ui-tabs-nav" ).append( li );
  95. tabs.append( "<div id='" + id + "'><p>" + tabContentHtml + "</p></div>" );
  96. tabs.tabs( "refresh" );
  97. tabCounter++;
  98. }
  99. // addTab button: just opens the dialog
  100. $( "#add_tab" )
  101. .button()
  102. .click(function() {
  103. dialog.dialog( "open" );
  104. });
  105. // close icon: removing the tab on click
  106. $( "#tabs2" ).on( "click",'span.ui-icon-close', function() {
  107. var panelId = $( this ).closest( "li" ).remove().attr( "aria-controls" );
  108. $( "#" + panelId ).remove();
  109. tabs.tabs( "refresh" );
  110. });
  111. //Combination examples (tabs) and open dialog
  112. $('#sampleButton').on('click', function(event){
  113. event.preventDefault();
  114. $('#dialog_simple').dialog({
  115. autoOpen: true,
  116. modal: true,
  117. width: 600,
  118. buttons: {
  119. "Save": function () {
  120. $(this).dialog("close");
  121. },
  122. "Cancel": function () {
  123. $(this).dialog("close");
  124. }
  125. }
  126. });
  127. });
  128. //####### Datepicker
  129. $('#datepicker').datepicker({
  130. inline: true
  131. });
  132. //####### Slider
  133. // Horizontal slider
  134. $('#h-slider').slider({
  135. range: true,
  136. values: [17, 67]
  137. });
  138. // Vertical slider
  139. $("#v-slider").slider({
  140. orientation: "vertical",
  141. range: "min",
  142. min: 0,
  143. max: 100,
  144. value: 60,
  145. slide: function (event, ui) {
  146. $("#amount").val(ui.value);
  147. }
  148. });
  149. $("#amount").val($("#v-slider").slider("value"));
  150. // Autocomplete
  151. var availableTags = ["ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme"];
  152. $("#tags").autocomplete({
  153. source: availableTags
  154. });
  155. //####### Menu
  156. $("#menu").menu();
  157. //####### Spinner
  158. var spinner = $( "#spinner" ).spinner();
  159. $( "#disable" ).click(function() {
  160. if ( spinner.spinner( "option", "disabled" ) ) {
  161. spinner.spinner( "enable" );
  162. } else {
  163. spinner.spinner( "disable" );
  164. }
  165. });
  166. $( "#destroy" ).click(function() {
  167. if ( spinner.data( "ui-spinner" ) ) {
  168. spinner.spinner( "destroy" );
  169. } else {
  170. spinner.spinner();
  171. }
  172. });
  173. $( "#getvalue" ).click(function() {
  174. alert( spinner.spinner( "value" ) );
  175. });
  176. $( "#setvalue" ).click(function() {
  177. spinner.spinner( "value", 5 );
  178. });
  179. //####### Tooltip
  180. $( "#tooltip" ).tooltip();
  181. // File input (using http://filamentgroup.com/lab/jquery_custom_file_input_book_designing_with_progressive_enhancement/)
  182. $('#file').customFileInput({
  183. button_position : 'right'
  184. });
  185. //####### Wijmo
  186. $("#menu1").wijmenu({ trigger: ".wijmo-wijmenu-item", triggerEvent: "click" });
  187. // Select a Date Range with datepicker
  188. $( "#rangeBa" ).datepicker({
  189. defaultDate: "+1w",
  190. changeMonth: true,
  191. numberOfMonths: 3,
  192. onClose: function( selectedDate ) {
  193. $( "#rangeBb" ).datepicker( "option", "minDate", selectedDate );
  194. }
  195. });
  196. $( "#rangeBb" ).datepicker({
  197. defaultDate: "+1w",
  198. changeMonth: true,
  199. numberOfMonths: 3,
  200. onClose: function( selectedDate ) {
  201. $( "#rangeBa" ).datepicker( "option", "maxDate", selectedDate );
  202. }
  203. });
  204. });
  205. 上述js代码:
  206. $('#file').customFileInput({
  207. button_position : 'right'
  208. });

3、解决办法

发表评论

表情:
评论列表 (有 0 条评论,556人围观)

还没有评论,来说两句吧...

相关阅读