Новые уроки
Получай новые уроки по RSS

Подписка на рассылку


Голосование
Чего выкладывать больше?
Программ
Уроков
Скриптов
Шаблонов
Макетов
CMS
Видеоуроков
Облако тегов

Jquery, PHP → Страница подписки с JQuery

Страница подписки с JQuery


Демо: смотреть
Скачать: coming-soon.zip [124,7 Kb] (cкачиваний: 218)


Когда начинаете работать над новым сайтом, первое, что вы делаете, вероятно, является приобретение доменного имени и создание какой-то скорой страницы (помните такое строительство GIF анимации на сайте? Не используйте их!).

Это на самом деле хорошая идея, чтобы потратить некоторое время в развитие этой странице. Это первая встреча посетителей с вами и вашей продукции. Вы можете даже использовать его в качестве маркетингового канала, что позволит людям подписаться на рассылку и при запуске им сообщат по email об открытии.

Именно поэтому, сегодня мы создаем стильную скорую страницу с использованием PHP, MySQL и JQuery. Это позволит вам собрать базу электронных почт посетителей и хранить их в простых таблицах базы данных. На презентации, в нем пятно слайд-шоу реализованое с помощью Nivo Slider плагина .

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>


Страница подписки с JQuery


CSS стили, которые влияют на дизайн страницы, они будут определены в styles.css. Чтобы было легче изменить и включить в существующий дизайн, некоторые правила начинаются с # (ид), который ограничивает действие 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;
}


Чтобы сделать эту страницу как можно более простой, код PHP, который обрабатывает форму подписки, находится в верхней части документа. Это также делает ее проще в обращении.

Замечания по установке: если вы хотите создать скорую страницу, вам нужно создать coming_soon_emails таблицу, запустив table.sql (доступна в ZIP исходнике) в PhpMyAdmin. После этого, не забудьте добавить свои данные MySQL для конекта к базе (connect.php) .


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();
}


Демо: смотреть
Скачать: coming-soon.zip [124,7 Kb] (cкачиваний: 218)


Готова ;) Наша страница имеет такой вид:
Страница подписки с JQuery
Опубликовал dimas_ua, 23-03-2011, 00:00 Комментариев: 0
 (голосов: 0)