(function($, window, document, undefined) {
"use strict";
var pluginName = "subscribe2",
defaults = {
buttonText: "Request Invite",
btnClass: "",
inputClass: "",
errorMessages: {
client: "Please enter a valid email address.",
server: "Error contacting server"
},
successMessage: "Thanks. We have added you to our list and you will be notified soon."
};
// Plugin constructor
function Plugin(element, options) {
if (!options.hasOwnProperty("options") || typeof options.options !== "object" || !options.options.hasOwnProperty("formkey") || !options.options.hasOwnProperty("datakey") || typeof options.options.formkey !== "string" || typeof options.options.datakey !== "string") {
console.error("Invalid Options. Refer https://github.com/abhas9/subscribe2");
return;
}
this.element = element;
this.settings = $.extend({}, defaults, options);
this._defaults = defaults;
this._name = pluginName;
this.init();
}
// Avoid Plugin.prototype conflicts
$.extend(Plugin.prototype, {
init: function() {
this.appendSubscribeBox();
},
postForm: function(inputValue) {
var data = {}, that = this;
data[this.settings.options.datakey] = inputValue;
var successCallback = function() {
that.inputView.css({
display: "none"
});
that.successMessage.css({
display: "block"
}).html(that.settings.successMessage);
}
$.ajax({
url: "https://docs.google.com/forms/d/" + this.settings.options.formkey + "/formResponse",
type: "POST",
dataType: "xml",
statusCode: {
0: successCallback,
200: successCallback
},
data: data
})
},
submitHandler: function() {
var inputValue = $(this.element).find(".subscribe2-control-input").val();
if (this.validateEmail(inputValue)) {
this.errorMessage.css({
display: "none"
});
this.postForm(inputValue);
} else {
this.errorMessage.html(this.settings.errorMessages.client).css({
display: "block"
});
}
},
inputKeyUp: function(event) {
var inputValue = $(this.element).find(".subscribe2-control-input").val();
if (event.which === 13) {
this.submitHandler();
} else {
this.errorMessage.css({
display: "none"
});
if (this.validateEmail(inputValue)) {
this.validationStatusIcon.css({
display: "block"
}).addClass("subscribe2-valid").removeClass("subscribe2-invalid").html("✓");
} else {
this.validationStatusIcon.css({
display: "block"
}).addClass("subscribe2-invalid").removeClass("subscribe2-valid").html("x");
}
}
},
validateEmail: function(value) {
var re = /^(([^<>()[\]\\.,;:\[email protected]"]+(\.[^<>()[\]\\.,;:\[email protected]"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(value);
},
appendSubscribeBox: function() {
var subscribeInputWrp = $("<div>", {
class: "subscribe2-input-wrp"
});
var subscribeInput = $("<input>", {
type: "email",
class: "subscribe2-control-input " + this.settings.inputClass,
placeholder: "Email",
keyup: this.inputKeyUp.bind(this)
});
this.validationStatusIcon = $("<div>", {
class: "subscribe2-validation-status",
css: {
display: "none"
}
});
subscribeInputWrp.append(subscribeInput, this.validationStatusIcon);
var subscribeButton = $("<button>", {
text: this.settings.buttonText,
class: "subscribe2-btn " + this.settings.btnClass,
click: this.submitHandler.bind(this)
});
this.errorMessage = $("<div>", {
class: "subscribe2-error",
css: {
display: "none"
}
});
this.successMessage = $("<div>", {
class: "subscribe2-success",
css: {
display: "none"
}
});
var clearDiv = $("<div>", {
css: {clear: "both"}
});
this.inputView = $("<div>", {
class: "subscribe2-input-view",
append: [this.errorMessage, subscribeInputWrp, subscribeButton, clearDiv]
})
var subscribeBox = $("<div>", {
class: "subscribe2-wrp"
});
$(this.element).append(subscribeBox.append(this.inputView, this.successMessage));
}
});
// A really lightweight plugin wrapper around the constructor,
// preventing against multiple instantiations
$.fn[pluginName] = function(options) {
return this.each(function() {
if (!$.data(this, "plugin_" + pluginName)) {
$.data(this, "plugin_" + pluginName, new Plugin(this, options));
}
});
};
})(jQuery, window, document);
$(document).ready(function() {
$(".element").subscribe2({
options: {
method: "google",
formkey: "2eiFxDZOpcyjPo9ub7nIwp6vAKUkLIiOxXIPT1TtAAAA",
datakey: "entry.57553044"
},
});
});
.subscribe2-wrp {
width: 100%;
max-width: 450px;
border: 1px solid #ccc;
}
.subscribe2-input-view {
padding: 10px 30px;
}
.subscribe2-input-wrp {
width: 70%;
float: left;
margin-right: 5%;
position: relative;
}
.subscribe2-btn {
width: 25%;
float: left;
}
.subscribe2-control-input {
width: 100%;
}
.subscribe2-validation-status {
display: block;
position: absolute;
right: 0;
top: 2px;
border-radius: 50%;
width: 10px;
height: 10px;
text-align: center;
padding: 2px;
font-size: 12px;
line-height: 12px;
vertical-align: middle;
color: #fff;
}
.subscribe2-valid {
background: #49BF49;
border: 1px solid #6DBD6D;
}
.subscribe2-invalid {
background: #c0392b;
border: 1px solid #B13326;
line-height: 9px;
font-family: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
}
.subscribe2-success {
padding: 10%;
}
@media only screen and (max-width: 480px) {
.subscribe2-input-wrp {
width: 100%;
}
.subscribe2-btn {
width: 90%;
margin: 10px auto;
}
}
#footer {
position: fixed;
bottom: 0;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="subscribe2/src/jquery.subscribe2.css">
<div class="element"></div>
<div class="element" id="footer"></div>
anstelle von 'id' verwenden' CLASS'
weil id Targeting nur einmal getan werden kann .. so fügen Sie einfach an und unten auf der Seite .. – ManjunathDanke. Ich wusste nicht ID kann nur einmal gemacht werden! –
Ur willkommen :) :) – Manjunath