引導程序自定義彈出窗口

Question

是否有可能具有自定義引導窗口彈出窗口？

我的意思是我希望能夠使用

$('#example').popover(options) 

所以上的元素＃示例的點擊，我會通過一些文字（這將在可編輯的文本域顯示）;

我使用的引導2.3.2

Answer 1

我不認爲在評論中的鏈接完全回答了這個問題。下面是一個例子2.3.2，通過多條鏈路/要素，即在通過text()從元素到一個文本上的酥料餅，並返回到元工作「提交」：

<a href="#" rel="comments" title="Enter comments">awesome user</a> 

使用popovers template功能定製酥料餅（添加按鈕），設置一個<textarea>爲content，注入鏈接/元素的文本到文本區域上shown事件：

$("[rel=comments]").popover({ 
    trigger : 'click', 
    placement : 'top', 
    html: 'true', 
    content : '<textarea class="popover-textarea"></textarea>', 
    template: '<div class="popover"><div class="arrow"></div>'+ 
       '<h3 class="popover-title"></h3><div class="popover-content">'+ 
       '</div><div class="popover-footer"><button type="button" class="btn btn-primary popover-submit">'+ 
       '<i class="icon-ok icon-white"></i></button>&nbsp;'+ 
       '<button type="button" class="btn btn-default popover-cancel">'+ 
       '<i class="icon-remove"></i></button></div></div>' 
}) 
.on('shown', function() { 
    //hide any visible comment-popover 
    $("[rel=comments]").not(this).popover('hide'); 
    var $this = $(this); 
    //attach link text 
    $('.popover-textarea').val($this.text()).focus(); 
    //close on cancel 
    $('.popover-cancel').click(function() { 
     $this.popover('hide'); 
    }); 
    //update link text on submit 
    $('.popover-submit').click(function() { 
     $this.text($('.popover-textarea').val()); 
     $this.popover('hide'); 
    }); 
}); 

看到小提琴 - >http://jsfiddle.net/e4zMu/這裏w ^第i個3編輯鏈接/元素：

Answer 2

倘若你想用剃刀或HTML實際上可以作爲模板的酥料餅（而不是通過JS屬性注射吧）：

在以下示例中，我們構建了一個帶有彈出窗口的引導程序Breadcrumb控件，該控件包含可能選擇用於更改麪包屑的值的值列表。

我們使用razor爲popover-content創建HTML TEMLPLATE。

這是酥料餅如何使用HTML其「內容」：

<script type='text/javascript'> 
    $(function() { 
     $('a[data-toggle="popover"]').popover({ 
      html: true, 
      content: function() { 
       return $($(this).data('contentwrapper')).html(); 
      } 
     }); 
    }); 
</script> 

這是什麼做的是對於內容屬性，我們使用jQuery來搜索這個麪包屑中的數據contentwrapper。

我們使用Razor創建每個麪包屑元素（使用orderlist/listitem）和一個包含要在我們的數據切換中使用的正確ID的div。

<ol class="breadcrumb"> 
    @foreach (var segment in Model.Segments) 
    { 
     var selectedChild = segment.SelectedChild; 
     var popoverId = segment.Id + "_breadcrumb_popover"; 
     var longCaption = segment.Caption; 
     var shortCaption = segment.Id; 
     var childType = segment.ChildType; 
     if (segment.SelectedChild != null) 
     { 
      shortCaption = segment.SelectedChild.Id; 
     } 
     else 
     { 
      // if the selected child is null, then we want the text to show 'select ' _grandchildType is 
      shortCaption = string.Format("Select {0} ?", segment.ChildType); 
     } 
     var listItemClassString = (segment.Children.Any()) ? "" : "hidden"; 

     <!-- THIS IS THE BREADCRUMB ELEMENT --> 
     <li class="@listItemClassString"> 
      <small>@childType</small> 
      <a href="javascript: void(0)" tabindex="0" rel="popover" data-container="body" 
      data-html="true" data-toggle="popover" data-placement="bottom" 
      data-animation="true" data-trigger="focus" title="Choose @childType" data-contentwrapper="#@popoverId" >@shortCaption</a> 
      <i class="glyphicon glyphicon-chevron-right"></i> 

     </li> 


     <!-- THIS IS THE TEMPLATE DROPDOWNLIST FOR THe above list item --> 
     <div role="tooltip" title="FROM TEMPLATE" class="popover breadcrumb hidden" id="@popoverId"> 
      <div class="arrow"></div> 
      @*<h3 class="popover-title"></h3>*@ 
      <div class="popover-content" class='panel clearfix hidden' style='padding-right: 10px;'> 
       <ul class="list-group"> 
        @foreach (var option in segment.Children) 
        { 

         <li class="list-group-item"> 
          @{ 
         var url = new UrlHelper(ViewContext.RequestContext, RouteTable.Routes).RouteUrl("DefaultWithBreadcrumb", 
          new 
          { 
           action = parentRouteData.Values["action"] as String, 
           controller = parentRouteData.Values["controller"] as String, 
           breadcrumbPath = option.Url 
          }); 
          } 
          <a href="@url" style="font-size:.9em;">@option.Caption</a> 
         </li> 
         <!-- class='col-md-3 col-sm-4'--> 
        } 
        @{ tabIndex++;} 
       </ul> 
      </div> 
     </div> 
    } 
</ol> 

希望這可以幫助那些想將服務器端MVC與客戶端引導popover html內容結合起來的人。