2014-03-25 122 views
0

我需要使用一個引導酥料餅時imagepicker的一個選項徘徊工作,但這不起作用引導酥料餅不imagepicker.js

我的代碼是這樣的:

 $("select").eq(0).imagepicker({ show_label: true, hide_select: true }); 
       $(".thumbnail").each(function() { $(this).attr("rel", "popover"); }); 
       $(".thumbnail").hover(function() { 
        var index = $(this).parent().index(); 
        var content = $(".image-picker").children().eq(index).attr("data-content"); 
        $(this).popover({ 
         trigger: 'focus', 
         animation: true, 
         title: $(this).find("p").text().trim(), 
         placement: 'bottom', 
         content: content 
        }); 
       }, 
       function() { 
        $(this).popover('destroy'); 
       }); 
      }); 

     </script> 


     <select multiple="multiple" class="image-picker show-labels"> 
      @foreach (Entidades.Resource resource in (List<Entidades.Resource>)ViewData["lsResource"]) 
      { 
       <option data-img-src="@(!string.IsNullOrEmpty(resource.RES_VIMAGE) ? resource.RES_VIMAGE : "#")" value="@(resource.RES_ID)" data-content="@resource.RTR.RTR_TDESCRIPTION"> 
        @resource.RTR.RTR_VNAME 
       </option> 
      } 
     </select> 

我安裝HTML:

<select multiple="multiple" class="image-picker show-labels" style="display: none;"> 

       <option data-img-src="http://uncbears.com/graphics/wallpaper/phone/Bear_Blue_128-128.jpg" value="1" data-content="huehueBRBRBRBRBRBRBRBRSFD sfdhufdsusd"> 
        Agenda digital 
       </option> 
       <option data-img-src="http://uncbears.com/graphics/wallpaper/phone/Bear_Blue_128-128.jpg" value="2" data-content="hhdsbdshbdskjbdaskjhsjak adsb habd hasbd hasbd asbd hbsahd bsahdb sabd abd asb dasbdas "> 
        resource dois 
       </option> 
       <option data-img-src="http://uncbears.com/graphics/wallpaper/phone/Bear_Blue_128-128.jpg" value="3" data-content="duash udfas h has bdash bdhsab hdas hdasb hdasbhj dbahjabd sh"> 
        terceiro 
       </option> 
       <option data-img-src="http://uncbears.com/graphics/wallpaper/phone/Bear_Blue_128-128.jpg" value="4" data-content="uhdsuih"> 
        uhsadudhasuidas 
       </option> 
       <option data-img-src="http://uncbears.com/graphics/wallpaper/phone/Bear_Blue_128-128.jpg" value="5" data-content="gdyusagygasu"> 
        ydasgyugdayugdasy 
       </option> 

     </select><ul class="thumbnails image_picker_selector"><li><div class="thumbnail selected" rel="popover" data-original-title="" title=""><img class="image_picker_image" src="http://uncbears.com/graphics/wallpaper/phone/Bear_Blue_128-128.jpg"><p> 
        Agenda digital 
       </p></div></li><li><div class="thumbnail selected" rel="popover" data-original-title="" title=""><img class="image_picker_image" src="http://uncbears.com/graphics/wallpaper/phone/Bear_Blue_128-128.jpg"><p> 
        resource dois 
       </p></div></li><li><div class="thumbnail selected" rel="popover" data-original-title="" title=""><img class="image_picker_image" src="http://uncbears.com/graphics/wallpaper/phone/Bear_Blue_128-128.jpg"><p> 
        terceiro 
       </p></div></li><li><div class="thumbnail selected" rel="popover" data-original-title="" title=""><img class="image_picker_image" src="http://uncbears.com/graphics/wallpaper/phone/Bear_Blue_128-128.jpg"><p> 
        uhsadudhasuidas 
       </p></div></li><li><div class="thumbnail selected" rel="popover" data-original-title="" title=""><img class="image_picker_image" src="http://uncbears.com/graphics/wallpaper/phone/Bear_Blue_128-128.jpg"><p> 
        ydasgyugdayugdasy 
       </p></div></li></ul> 

我想告訴酥料餅時,縮略圖徘徊,那酥料餅含有該縮略圖的標題和相同的描述。

回答

0

我使用瞭解決此代碼這個問題

$(".thumbnail").each(function() { 
        $(this).attr("rel", "popover"); 
        var index = $(this).parent().index(); 
        var content = $(".image-picker").children().eq(index).attr("data-content"); 
        $(this).popover({ 
         trigger: 'focus', 
         animation: true, 
         title: $(this).find("p").text().trim(), 
         placement: 'bottom', 
         content: content 
        }); 
        $(this).bind({ 
         mouseenter: function() { 
          $(this).popover('show'); 
         }, 
         mouseleave: function() { 
          $(this).popover('hide'); 
         } 
        }); 
       }); 

我用結合的MouseEnter和每個項目,當組件在頁面完全充電鼠標離開。懸停工作成功。