1

我的网站上有一些功能想介绍给我的新用户。所以每次新用户登录时，不熟悉新功能，我会将他重定向到 index.php?welcome=1。

在这个页面上，我想让他浏览这个页面上的某些元素，在每个元素旁边为他提供解释，并带有一个“下一步”按钮，允许他继续下一个元素。

现在我似乎有两个问题：

  1. 我不希望用户意外关闭弹出框，因此，我想禁用负责通过单击绑定到的元素来切换弹出框的功能。

  2. 此外，我不希望我的用户意外或故意跳过第一次解释，首先因为系统非常复杂，我希望我的用户收到关于如何使用它的完整解释。

非常感谢任何帮助！由于这个小问题，我即将自定义 twitter 项目文件。

我的代码：（test.json）

    {
   "0":{
      "id":"intro",
      "title":"Welcome",
      "body":"Hello, and <b>welcome</b> to atavde"
   },
   "1":{
      "id":"autoShare",
      "title":"AutoShare position",
      "body":"Here you can autoShare a position Break line"
   },
   "2":{
      "id":"personalShare",
      "title":"PerrsonalShare section",
      "body":"personalBodypersonalBody"
   },
   "3":{
      "id":"anotherExample",
      "title":"thisispersonal share exmp",
      "body":"personalBodypersonalBody"
   },
   "4":{
      "id":"specificExample",
      "title":"This is a specific example",
      "body":"specific example horrey"
   }  
}

(popoverNavigate.js)

var currentPopOver = 0;
popOvers = {};
$(function ()  
{
    var i = 0
    $.getJSON("test.json", function(json) {
            console.log(json);
            // json.each(function(){
            //  console.log($(this));
            // });
            for(var j in json){
                json[j]['body'] = json[j]['body'] + "<div style='display:block;'><span class='btn btn-link next'>Next</span><span class='btn btn-link close'>Close</span></div>";
            }
            popovers = json;
            $('[rel="popover"]').each(function(){
                var currentId = $(this).attr('id');
                // var currentConetnet = currentId.substr(currentId.length  - 1);
                console.log(currentId);
                $(this).popover({
                    html : true,
                    placement : 'bottom',               
                    title: popovers[i]['title'],
                    content: popovers[i]['body'] /*function(){return $('#content' + currentConetnet).html()}*/
                })
                // .on('click', function(){
                //  $(this).popover('hide').delay(300).queue(function(next){
                //  $(this).popover('show');        
                //  });
                // });
                i++;

            });
            $('#' + popovers[currentPopOver]['id']).popover('show');
});
// $.ajax(data: "JSON", type: "POST", url : "../test.json",success: function(json) {
//    alert("JSON Data: " + json);
//  });

// htmlElements = ;


// $('body').on('click', '.popover .close', function(){
//  $('#example' + currentPopOver).popover('hide');
// })
// $('[rel="popover"]').click(function(e){
//   e.preventDefault();
//   if (! $(this).next('div.popover:visible').length){

//      // $('#' + popovers[currentPopOver]['id']).popover('show');
//      openedPopoverId = $(this).attr('id');
//      for(i in popovers){
//          if(openedPopoverId == popovers[i]['id']){
//              var previousPopover = currentPopOver;
//              currentPopOver = i;
//              $('#' + popovers[previousPopover]['id']).popover('hide').delay(500).queue(function(next){
//                  $('#' + popovers[currentPopOver]['id']).popover('show');
//                  next();
//              });
//          }

//      }
//  }   
//  return false;

// });
$('body').on('click', '.popover .close', function(){
    $('#' + popovers[currentPopOver]['id']).popover('hide');
})

$('body').on('click', '.popover .next', function () {
   if(currentPopOver < $('[rel="popover"]').length - 1)
    nextPopOver(1);
    else if(currentPopOver == $('[rel="popover"]').length - 1 ){
        $('#' + popovers[currentPopOver]['id']).popover('hide');
    }
});

// $('.next').live('click', function(){
// if(currentPopOver < $('a').length)
//  nextPopOver(1);
// })

$('body').on('click', '.popover .previous', function(){
if(currentPopOver > 1)  
    nextPopOver(-1);
})




});  

function nextPopOver(direction){//1 - next, -1 previous
    $('#' + popovers[currentPopOver]['id']).popover('hide').delay(500).queue(function(next){
    currentPopOver += direction;
    $('#' + popovers[currentPopOver]['id']).popover('show');
    $('#' + popovers[currentPopOver]['id']).focus();
    next(); 
    });
}
4

0 回答 0