使用Java两次调用DIV

Question

我正在使用Subscribe2 ，效果很好。 使用<div id="element"></div>调用表单

但是，每页显示一次。 我想在同一页面上显示两次。 一个在页面顶部，另一个在底部。 我应该怎么做？

$(document).ready(function () {
        $("#element").subscribe2({
            options: {
                    method: "google",
                    formkey: "2eiFxDZOpcyjPo9ub7nIwp6vAKUkLIiOxXIPT1TtAAAA",
                    datakey: "entry.57553044"
                },
            });
        });

Answer 1

这可以为您提供帮助。

由于没有Subscribe2的CDN存储库，因此我仅在自定义脚本/ css中添加了文件。

 (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("&#x2713;"); } else { this.validationStatusIcon.css({ display: "block" }).addClass("subscribe2-invalid").removeClass("subscribe2-valid").html("x"); } } }, validateEmail: function(value) { var re = /^(([^<>()[\\]\\\\.,;:\\s@"]+(\\.[^<>()[\\]\\\\.,;:\\s@"]+)*)|(".+"))@((\\[[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>