网站极限改造，第 6 部分 (共 7 部分)

是时候认真对待一些实际的 jQuery 代码了

在分期付款的第六部分，是时候用一些实际的 jQuery 代码（稍微）认真对待了。实际上，不会有很多代码；但这是一件好事。 jQuery 使您很容易使您的网站焕然一新（所以我是一个新词创造者 - 告我吧！），我现在就证明这一点。让我们转到 Images 页面并添加一个小部件，该小部件将包含并显示我们要添加的图像

首先，我将对 jQuery 和 jQueryUI 的引用添加到该页面（如果需要，请从 https://jqueryui.jqueryjs.cn/ 下载 jQueryUI 文件；另一个选择是使用 CDN（文件的托管版本），但我认为我不会在这个例子中这样做）

<script src="Scripts/jquery-1.10.2.min.js"></script>
<script src="Scripts/jquery-ui-1.10.3.custom.min.js"></script>
<script>
    $(document).ready(function () {
    });
</script>
<h2>We will show some false feet here (faux toes)</h2>

也许您注意到我还添加了一个空的 jQuery “ready” 处理程序 - 我很快就会给它一些代码，我想。最后，我添加了一些占位符文本，以便我们在测试期间导航时知道我们已到达正确的页面。

现在用于显示照片的小部件。我决定尝试“Anything Slider”，因为它被吹捧并且它的用法记录在我拥有和喜欢的一本书中，即： 。

因此，使用本书中的说明（对于在家中进行操作的人来说，从第 312 页开始），我从 https://github.com/ProLoser/AnythingSlider/ 下载了压缩的存储库，然后将 CSS 和 jQuery 文件分别添加到 Content 和 Scripts 文件夹下面。我将anythingslider.css添加到前者，将jquery.anythingslider.min.js添加到后者。

我现在添加三张照片来测试它。Photos.aspx中asp:Content标签之间的代码是

<link href="Content/anythingslider.css" rel="stylesheet" />
<script src="Scripts/jquery-1.10.2.min.js"></script>
<script src="Scripts/jquery-ui-1.10.3.custom.min.js"></script>
<script src="Scripts/jquery.anythingslider.min.js"></script>
<script>
    $(document).ready(function () {
        $('#slider').anythingSlider();
    });
</script>
<div id="slider">
    <div><img src="Images/JPoolGetty.JPG" /></div>
    <div><img src="Images/Billiards.JPG" /></div>
    <div><img src="Images/PoolHarder.JPG" /></div>
</div>
<h2>We will show some false feet here (faux toes)</h2>

这很好用，正如您可以用自己的眼睛看到的那样

...所以我添加了到目前为止我拥有的其余图像。

正如 Rod Price () 曾经说过，“Slide On!”

 

 

Eye Scream 社交按钮

现在让我们添加一些“社交按钮”，即用于 Twitter 推文和 Facebook 赞。这样，如果有人看到该网站并想让他们的朋友或关注者——他们可能正在市场上寻找游泳池或游泳池工作——知道它，他们可以推文或喜欢该页面并帮助宣传它。

为了实现这一点，我添加了以下代码

<script>(function (d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "//#/en_US/all.js#xfbml=1";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

        <div style="display:inline-block;vertical-align:top">
            <a href="https://twitter.com/share" class="twitter-share-button" 
              data-url="http://www.replaster.azurewebsites.net" 
              data-text="Look at this Pool plastering company serving Central California!" 
              data-via="BClayShannon">Tweet</a>
            <script>!function (d, s, id) { var js, fjs = d.getElementsByTagName(s)[0], 
              p = /^http:/.test(d.location) ? 'http' : 'https'; if (!d.getElementById(id)) { 
              js = d.createElement(s); js.id = id; js.src = p + '://platform.twitter.com/widgets.js'; 
              fjs.parentNode.insertBefore(js, fjs); } }(document, 'script', 'twitter-wjs');</script>
        </div>
        <div style="display:inline-block;vertical-align:top" class="fb-like" 
          data-href="http://www.replaster.azurewebsites.net" data-send="false" 
          data-width="450" data-show-faces="false" data-font="segoe ui"></div>

现在这是在上下文中

<asp:Content ID="BodyContent" 
   ContentPlaceHolderID="MainContent" runat="server">

<div id="fb-root"></div>
<script>(function (d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "//#/en_US/all.js#xfbml=1";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

    <div class="jumbotron backgroundcolorLightSkyBlue" >
        <h1>Hartt's Pool Plastering</h1>
        <p class="lead fontcolorAzure">Serving Central California 
          from Stockton to Madera and from Sonora to Tracy</p>
        <img src="Images/Logo-BannerSmall_1_.gif" />
        <div style="display:inline-block;vertical-align:top">
            <a href="https://twitter.com/share" class="twitter-share-button" 
              data-url="http://www.replaster.azurewebsites.net" 
              data-text="Look at this Pool plastering company serving Central California!" 
              data-via="BClayShannon">Tweet</a>
            <script>!function (d, s, id) { var js, fjs = d.getElementsByTagName(s)[0], 
              p = /^http:/.test(d.location) ? 'http' : 'https'; if (!d.getElementById(id)) { 
              js = d.createElement(s); js.id = id; js.src = p + '://platform.twitter.com/widgets.js'; 
              fjs.parentNode.insertBefore(js, fjs); } }(document, 'script', 'twitter-wjs');</script>
        </div>
        <div style="display:inline-block;vertical-align:top" class="fb-like" 
          data-href="http://www.replaster.azurewebsites.net" data-send="false" 
          data-width="450" data-show-faces="false" 
          data-font="segoe ui"></div>
    </div>

        <div class="row">
        <div class="col-md-4">
            <h2>Services We Provide</h2>
            <ul>
                <li>Plastering & Replastering</li>
		. . .

...所以页面的顶部现在看起来像这样

这次就到此为止。下次我们将添加一些 CSS，使 H1 文本（“Hartt's Pool and Plastering”）在页面首次加载时在各种蓝色阴影之间循环，然后尝试通过更改字体等来美化其他页面。