如何使用 HTML 文件调用脚本答案

【问题标题】：How to call a script with the HTML file如何使用 HTML 文件调用脚本
【发布时间】：2014-04-04 01:32:24
【问题描述】：

我正在尝试配置一个 jquery 插件并遇到以下说明，我对 JS 很陌生，如果这是一个愚蠢的问题，我很抱歉。我不确定如何构造我的 html 来调用以下脚本。我要做的就是设置高度和宽度。插件作者没有回复我的电子邮件，所以我希望这里有人可以帮助我，非常感谢。

最后，你需要调用脚本：

$('#your-flipper-id').flipper();

这是您启动插件所需要做的一切。此外，您可能需要指定一些参数：

$('#your-flipper-id').flipper({

    "width" : 500,<span class="Apple-tab-span" style="white-space:pre"> </span>// The total width of the widget.

    "height" : 250,<span class="Apple-tab-span" style="white-space:pre"> </span>// The total height of the widget.

});

所以我的问题是，我应该在我的 html 文件中的哪里“调用”这个脚本？我需要在某处定义“your-flipper-id”名称吗？

谢谢 J

【问题讨论】：

你能提供插件的链接吗？我也看到你的代码有一些问题。
插件的名称是什么？发布网站链接

标签： javascript jquery html plugins call

【解决方案1】：

有两个步骤。
首先，您必须将其添加到您的 <head> 文件中

<script src="pathofyourplugin.js"></script>

然后你必须打电话：

<script type="text/javascript">

$('.Apple-tab-span').flipper({
"width" : 500,
"height" : 250
});

</script>

【讨论】：

【解决方案2】：

这个 $('#your-flipper-id') 只代表你想要应用 Flipper 插件的元素。在这种情况下，它正在搜索 ID 为 your-flipper-id 的元素。您可以将其更改为您想要的任何内容。

我建议您将该代码放在一个 JS 文件中，该文件在您的 HTML 正文末尾调用。

你应该有这样的东西：

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <!-- YOUR HTML HERE -->
    <script type="application/javascript" src="js/jquery.min.js"></script>
    <script type="application/javascript" src="js/flipper.min.js"></script>
    <script type="application/javascript" src="js/main.js"></script>
</body>
</html>

在这种情况下，您首先加载 jQuery，然后是您的插件，然后是您自己的 javascript。在您自己的 javascript 文件中，您将放置该代码。它应该看起来像这样：

$(function() {
    $('#your-flipper-id').flipper({
        "width" : 500,<span class="Apple-tab-span" style="white-space:pre"> </span>// The       total width of the widget.

        "height" : 250,<span class="Apple-tab-span" style="white-space:pre"> </span>// The total height of the widget.
    });
});

这将在页面准备就绪时执行您的代码。

【讨论】：

谢谢西蒙，从你的评论中弄清楚了。

【解决方案3】：

如果您的元素类名称是“.Apple-tab-span”，那么您必须像下面这样调用函数。

<script type="text/javascript">

$('.Apple-tab-span').flipper({
    "width" : 500,
    "height" : 250
});

</script>

【讨论】：

【解决方案4】：

 $('#foo').Flipper();

其中 foo 是要在其上放置翻转动画的 html 元素的 id。

来自 Flipper jQuery 页面https://github.com/dclowd9901/jquery.Flipper

HTML 代码

<div id="twitter"></div>

和 javascript

var twitterBoard = $('#twitter').Flipper({
            dimensions : [22, 12],
            text : '',
            fontSize: 24,
            skipAnimationThreshold : 3,
            lineDelay: 1000,
            textOffset : {
                v : 3
            }
        });

【讨论】：

【解决方案5】：

方法一：你可以在定义你的元素后调用这个函数：

<div id="flip-content"> 
    //Your content
</div> 
<script>
$('#flip-content').flipper();
</script>

方法2：你可以在标题部分调用它：

$(document).ready(function(){
  $('#flip-content').flipper();
});

但我建议你使用方法 1。

【讨论】：

【解决方案6】：

I think you should go with first  basic Java script tutorials and then you should learn about jquery plugin 

http://www.w3schools.com/js/DEFAULT.asp

http://www.w3schools.com/jquery/default.asp


and you have to give 'your-flipper-id' as id of HTML element. 

<div id='your-flipper-id'>
// your html element

</div>

$('#your-flipper-id').flipper()  where it will try to find an element on page by this id :'#your-flipper-id'

【讨论】：

【解决方案7】：

$('#your-flipper-id') 指的是页面上具有该 id 的元素。例如，

<div id="your-flipper-id"></div>

要调用翻转函数，请使用

$(window).load(function() {
 $('#your-flipper-id').flipper({
  "width" : 500,
  "height" : 250
 });
});

【讨论】：

【解决方案8】：

首先你需要包含 jQuery 文件，因为这个插件需要这个并且作者在 jQuery 文件下面提供了插件文件，如下所示：

<script src="jquery cdn url here"></script>
<script src="author plugin file here"></script>

然后你需要像这样把这段代码放在结束体标签之前。

<script>
//to ensure that page has been loaded fully
$(document).ready(function(){
    $('#your-flipper-id').flipper(); 
});
</script

是的，您必须为想要获得鳍状肢效果的元素定义 id。如果作者提供了 css 文件，请将其放在文档中的主 css 文件下方。

【讨论】：