1

困っていることが二つ。

ページが読み込まれるとスライドインし、一定時間後にスライドアウトする通知を作成しました。

まず、ページが読み込まれるたびに実行したくありません。メンバーを悩ませるからです。これはクッキーで行うことができますか? もしそうなら、どのように？

<div>第二に、ユーザーが閉じるボタンをクリックしたときにスライドアウトを作成して、スクリプトが終了するのを待つ必要がないようにしたいと思います。

4

5 に答える 5

2

ユーザーがすでにポップアップを見た場合にクッキーを使用して記録する方法の基本的な例で、既存の jsFiddle を変更しました: http://jsfiddle.net/Jk2AG/27/

$(document).ready(function() {

    if (getCookie("show-slide") == null) {
        $("#dimBackgrnd").hide().delay(1000).fadeIn("slow");

        $("#slide").hide().delay(2000).show("drop", {
            direction: "up"
        }, 500);


        $("#dimBackgrnd").hide().delay(7500).fadeOut("slow");

        $("#slide").delay(6000).hide("drop", {
            direction: "down"
        }, 500);

        setCookie("show-slide", "false", 7);
    }
    else {
        $("#dimBackgrnd").hide();
        $("#slide").hide();
    }

});

function setCookie(c_name, value, exdays) {
    var exdate = new Date();
    exdate.setDate(exdate.getDate() + exdays);
    var c_value = escape(value) + ((exdays == null) ? "" : "; expires=" + exdate.toUTCString());
    document.cookie = c_name + "=" + c_value;
}

function getCookie(c_name) {
    var i, x, y, ARRcookies = document.cookie.split(";");
    for (i = 0; i < ARRcookies.length; i++) {
        x = ARRcookies[i].substr(0, ARRcookies[i].indexOf("="));
        y = ARRcookies[i].substr(ARRcookies[i].indexOf("=") + 1);
        x = x.replace(/^\s+|\s+$/g, "");
        if (x == c_name) {
            return unescape(y);
        }
    }
}
于 2012-04-12T19:26:04.333 に答える
0

あらゆるタイプの長期保管でそれを行うことができます。

  1. ユーザーのログイン
  2. 最後に通知が表示された日付を確認する
  3. CurrentDate - LastShownDate > X ですか? 通知を表示
于 2012-04-12T19:19:57.957 に答える
0

サーバーに最後の通知日を保存しない場合、X 日後に有効期限が切れる Cookie をユーザーのコンピューターに保存できます。Cookie がない場合は、メッセージを表示します。

于 2012-04-12T19:25:47.990 に答える
0

オーケーカール！

最初にこれをチェックしてください: https://github.com/carhartl/jquery-cookie これでクッキーのことを作ることができるはずです。

次に、私のフィドルを見て、少し剥がれていますが、うまく機能しています! http://jsfiddle.net/Jk2AG/28/

于 2012-04-12T19:31:22.220 に答える
0

JavaScript を使用して Cookie を作成できるため、私の例は必要以上に過剰かもしれませんが、私が使用するサーバー側のソリューションを示したいと思いました。

PHP を使用している場合は、クリック時にセッション変数として渡すことができます。確認してみましょう。

$(function(){
  $('#slide #submit').click(function(){
    $.ajax({
      url: 'cookie_parser.php',
      data: 'setShowSlide=1', //we'll explain 0/1 methodology in the php description
      success: function(data){
        //we could do stuff with the (data) object, but we're not going to. 
        //Instead, we need to check it on page load.
      }
    });
  });
});

データを解析し、セッションを設定し、確認できるように ID を返す PHP。

<?php
  session_start(); /* so we can deal with our cookie variables */
  if(!empty($_GET['setShowSlide']) || !empty($_SESSION['setShowSlide'])){
    if(!empty($_GET['setShowSlide']) && empty($_SESSION['setShowSlide'])){
      $setShowSlide = $_GET['setShowSlide']
      if($setShowSlide == 1){
        session_start();
        $_SESSION['setShowSlide'] = $setShowSlide;
        return '<input type="hidden" id="setShowSlideCheck" value="'.$_SESSION['setShowSlide'].'">';
      }else if ($setShowSlide != 1){
        return false;
        /* We don't need to return any other instance. If it's not 1, then we're being hijacked, and we want to stop all script execution. */
      }
    }else if(empty($_GET['setShowSlide']) && !empty($_SESSION['setShowSlide'])){
      return '<input type="hidden" id="setShowSlideCheck" value="'.$_SESSION['setShowSlide'].'">';
    }else if(empty($_GET['setShowSlide']) && empty($_SESSION['setShowSlide'])){
      /* Do not do anything. This is default behavior. We want this to display on page load the first time. */
    }
  }
?>

「テンプレート」ファイルまたは「index.php」ファイルでは、デザイン/フローを維持するために javascript/css を継続的に含めるために使用するファイルは何でも構いません。

<?php
  session_start();
  include_once('cookie_parseer.php');
?>

jQuery で、DOM オブジェクトの存在をテストできるようになりました'setShowSlideCheck'。

$(function(){
  if($('#setShowSlideCheck').length != 0){
    //Don't show the slide, show the slide in variations, more checking to see if user needs to see the slide again, etc.
  }else{
    $("#slide").hide().delay(2000).show("drop", {
        direction: "up"
      }, 500
    );        
    // let's build the click function you wanted now
    $('#slide #submit').click(function(){
      $.ajax({
        url: 'cookie_parser.php',
        data: 'setShowSlide=1', //we'll explain 0/1 methodology in the php description
        success: function(data){
        //we could do stuff with the (data) object, but we're not going to. 
        //Instead, we need to check it on page load.
        $("#slide").hide('drop', {
            direction: "down"    
          }, 500
        );
        //I'm choosing to hide the above in the callback for the success on ajax request.
        //You can actually do this wherever you like.
      }
    });
  });
  }
});

これは、開始するための一般的な目的です。必要に応じて「クリック」機能も含まれています。

于 2012-04-12T19:37:43.567 に答える