JavaScript >> Javascript 文檔 >  >> Tags >> CSS

使用 jQuery 創建一個時尚的即將推出的頁面

當開始一個新的網站創意工作時,您可能做的第一件事就是獲取域名並設置某種即將推出的頁面(還記得那些建築工地 gif 動畫嗎?不要使用它們! )。

在此頁面的開發上投入一些時間實際上是一個好主意。這是訪問者與您和您的產品的第一次接觸。您甚至可以將其用作營銷渠道,讓人們訂閱您的發佈時事通訊。

這就是為什麼今天我們使用 PHP、MySQL 和 jQuery 創建一個時尚的即將推出的頁面。它將允許您收集訪問者的電子郵件並將它們存儲在一個簡單的數據庫表中。在演示方面,它在 Nivo Slider 插件的幫助下提供了一個流暢的幻燈片。

HTML

首先讓我們看一下即將推出的頁面的 HTML 標記。該頁面被設計為輕量級的,並且只有極少的代碼。

coming-soon.php

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>AJAX-ed Coming Soon Page with jQuery and PHP | Tutorialzine Demo</title>

<link rel="stylesheet" type="text/css" href="css/styles.css" />
<link rel="stylesheet" type="text/css" href="css/nivo-slider.css" />

</head>

<body>

<div id="page">

    <h1>Coming Soon</h1>

    <div id="slideshowContainer">
        <div id="slideshow">
            <img src="img/slides/slide1.jpg" width="454" height="169" alt="Coming Soon: Our Awesome Web App">
            <img src="img/slides/slide2.jpg" width="454" height="169" alt="Extensive Functionality">
            <img src="img/slides/slide3.jpg" width="454" height="169" alt="Complete with an iPhone App">
        </div>
    </div>

    <h2>Subscribe</h2>

    <form method="post" action="">
        <input type="text" id="email" name="email" value="<?php echo $msg?>" />
        <input type="submit" value="Submit" id="submitButton" />
    </form>

</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script src="js/jquery.nivo.slider.pack.js"></script>
<script src="js/script.js"></script>

</body>
</html>

在 head 部分,我們包含樣式表 - 我們自己的 styles.cssnivo-slider.css ,由 Nivo Slider 插件使用。您可以將這兩個文件合併為一個請求,但在這種情況下,這將是一個矯枉過正。

在正文部分,我們定義了主要標記 - 基本上是兩個標題、一個表單和一個包含三個圖像的 div 容器,供滑塊使用。

在底部,我們包含三個 JavaScript 文件。第一個導入 jQuery 1.4.3 來自 Google 的 CDN,這是撰寫本文時該庫的最新版本。之後是 nivo 滑塊 js 包含文件,最後是我們自己的 script.js ,這將在本教程的最後一節中詳細討論。

CSS

影響頁面的 CSS 樣式在 styles.css 中定義。為了更容易修改和包含到現有設計中,一些規則以 #page 為前綴 選擇器,將規則的效果限制在指定的元素——CSS命名空間。

css/styles.css

#page{
    width:330px;
    margin:70px auto 100px;
}

#slideshow{
    height:169px;
    overflow:hidden;
    width:454px;
}

#slideshowContainer{
    padding:10px;
    background-color:#181819;
    margin:30px 0 50px -72px;
    width:454px;
    border:1px solid #1f1f20;
}

#page h1,
#page h2{
    text-indent:-9999px;
    overflow:hidden;
    height:105px;
    background:url('../img/coming_soon.png') no-repeat;
}

#page h2{
    height:76px;
    background:url('../img/get_notified.png') no-repeat;
    margin-bottom:20px;
}

#page form{
    background-color:#181819;
    display:block;
    height:31px;
    padding:10px;
    position:relative;
    width:323px;
    margin-left:-7px;

    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
}

#email{
    background:url('../img/submit_form.png') no-repeat;
    border:none;
    color:#888888;
    height:31px;
    left:10px;
    line-height:31px;
    padding-left:8px;
    position:absolute;
    text-shadow:1px 1px 0 #FFFFFF;
    top:10px;
    width:215px;
    outline:none;
}

#submitButton{
    background:url('../img/submit_form.png') no-repeat right top;
    border:none;
    cursor:pointer;
    height:31px;
    left:236px;
    line-height:31px;
    position:absolute;
    text-indent:-99999px;
    text-transform:uppercase;
    top:10px;
    width:96px;
}

#submitButton:hover{
    background-position:right bottom;
}

事情在這裡非常清楚。值得注意的是,可能是否定的 text-indent 技術,廣泛用於顯示背景圖像和隱藏元素的內容。此方法的一個問題是,當應用於提交按鈕時,您需要使用 text-transform 將文本強制為大寫,否則在舊版本的 IE 中將無法正常工作。

PHP

為了使這個頁面盡可能簡單,處理表單提交的 PHP 代碼位於文檔的頂部。這也使得處理 JavaScript 不可用的情況變得更容易,並且以正常方式提交表單(請注意,在 HTML 步驟中,表單的 action 屬性為空 - 它將被提交到同一頁面)。

coming-soon.php

require "includes/connect.php";

$msg = '';

if($_POST['email']){

    // Requested with AJAX:
    $ajax = ($_SERVER['HTTP_X_REQUESTED_WITH']  == 'XMLHttpRequest');

    try{
        if(!filter_input(INPUT_POST,'email',FILTER_VALIDATE_EMAIL)){
            throw new Exception('Invalid Email!');
        }

        $mysqli->query("INSERT INTO coming_soon_emails
                        SET email='".$mysqli->real_escape_string($_POST['email'])."'");

        if($mysqli->affected_rows != 1){
            throw new Exception('This email already exists in the database.');
        }

        if($ajax){
            die('{"status":1}');
        }

        $msg = "Thank you!";

    }
    catch (Exception $e){

        if($ajax){
            die(json_encode(array('error'=>$e->getMessage())));
        }

        $msg = $e->getMessage();
    }
}

如果表單是通過 AJAX 提交的(我們可以通過檢查 X_REQUESTED_WITH header) 我們將響應輸出為 JSON,否則我們將它們分配給 $msg 稍後打印到頁面的變量。

由於我們使用的是 MySQLi 擴展,在我們將電子郵件插入 coming_soon_emails 之後 表(它只包含一個電子郵件列和一個時間戳)我們需要檢查受影響的行屬性。 email列定義為主鍵,重複email地址插入會失敗。

jQuery

由於我們使用的是 Nivo Slider 插件,我們已經完成了很多工作,我們可以將注意力轉移到處理表單提交和 AJAX 響應上。

js/script.js

$(window).load(function() {

    // Creating the Nivo Slider on window load

    $('#slideshow').nivoSlider({
        pauseTime:5000,
        directionNav:false,
        controlNav:false
    });
});

$(document).ready(function(){

    // Binding event listeners for the form on document ready

    $('#email').defaultText('Your Email');

    // 'working' prevents multiple submissions
    var working = false;

    $('#page form').submit(function(){

        if(working){
            return false;
        }
        working = true;

        $.post("./coming-soon.php",{email:$('#email').val()},function(r){
            if(r.error){
                $('#email').val(r.error);
            }
            else $('#email').val('Thank you!');

            working = false;
        },'json');

        return false;
    });
});

// A custom jQuery method for placeholder text:

$.fn.defaultText = function(value){

    var element = this.eq(0);
    element.data('defaultText',value);

    element.focus(function(){
        if(element.val() == value){
            element.val('').removeClass('defaultText');
        }
    }).blur(function(){
        if(element.val() == '' || element.val() == value){
            element.addClass('defaultText').val(value);
        }
    });

    return element.blur();
}

請注意,Nivo Slider 幻燈片是在 window.load 上創建的 事件。這樣就完成了,這樣我們就可以確定所有的圖片都已經加載完畢並且可以顯示了。雖然這是頁面上的第一個代碼塊,但實際上是最後執行的。

在文檔中。準備塊,我們為表單的提交事件綁定一個事件監聽器。由於處理程序返回一個布爾假值,表單將不會被提交,而是我們將 AJAX 發布請求發送回同一頁面並獲得成功響應或錯誤,這將作為電子郵件輸入的值輸出盒子。

我們的時尚 AJAX-ed Coming Soon 頁面完成了!

總結

您可以使用此頁面向早期訪問者介紹您即將推出的網站的功能。您可以使用任意數量的幻燈片對其進行擴展,並可能通過在每張幻燈片上添加一兩段來改善其 SEO。

到目前為止,最大的好處是提供了電子郵件訂閱選項。您稍後可以直接進入 phpMyAdmin 並導出一個友好的 CSV 文件,以便導入您最喜歡的電子郵件營銷應用程序。


Tutorial JavaScript 教程
  1. #3) ==和 ===操作符的區別❔

  2. Zapier 免費用於電子商務。

  3. 探索 Monorepo #5:完美的 Docker

  4. ember serve 和 npm run start 的區別

  5. JavaScript 中的 Rest 參數和擴展運算符

  6. 在您的下一個 Angular 應用程序中使用管道! (第1部分)

  7. 編寫更健壯代碼的 JavaScript 最佳實踐 — 刪除重複和合併數組

  1. 當滿足特定條件時,如何在 Vue 2 中刪除 eventListener (window.removeEventListener)

  2. 如何將二進製字符串轉換為十進制?

  3. 你必須擁有的 10 個 JavaScript 表單插件

  4. 設置 URL 以在 Django 模板中加載 iframe

  5. JavaScript Web Workers:初學者指南

  6. React:創建用於獲取數據的自定義 Hook

  7. 餘燼時報 - 第 137 期

  1. 使用 ES Lint、Prettier 和 Git Lens 在 VS Code 中實現無縫團隊合作

  2. 從零開始的 Shopify 應用程序 #11 - 用戶界面 1

  3. 3個非常流行和精彩的簡歷頁面模板

  4. 項目參觀:麵包比例計算器