包含旋钮输入问题的弹出窗口(bootsrap-4)

时间:2019-07-05 23:26:23

标签: bootstrap-4 popover jquery-knob

我尝试将拨号式旋钮输入放置在弹出式窗口中,但没有效果

  1. 我只能通过放置脚本来显示控件 如果我尝试将脚本从div的“ popover-content”中删除 该div控件停止显示。
  2. 弹出窗口根据大小更改内容分发 分配给旋钮控件: 数据宽度和数据高度的大小最大为125像素,分布为横向,否则为纵向
  3. 仅适用于$('[data-plugin = "knob"]')选择器,使用 选择器id $("#myKnobInput")停止工作

'''

          <h4 id="E-33" class="text-muted font-light">1-1 Lorem ipsum dolor sit amet, consectetur adipisicing elit.
            <span class ="text-danger m-l-15">
            <a class="epop waves-effect waves-dark" href="javascript:void(0)" rel="popover"> 18%</a></span></h4> 

          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus placeat, ea quasi tenetur, ducimus minus repellendus molestias assumenda. Quisquam laborum et accusantium debitis, magni eveniet cum iusto temporibus doloremque optio!
          </p>


          <h4 id="E-35" class="text-muted font-light">1-3 Eligendi dignissimos expedita aspernatur voluptas veniam!
            <span class ="text-danger m-l-15">
            <a class="epop" href="javascript:void(0)" rel="popover"> 27%</a></span></h4> 

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus placeat, ea quasi tenetur, ducimus minus repellendus molestias assumenda. Quisquam laborum et accusantium debitis, magni eveniet cum iusto temporibus doloremque optio!</p>


          <div id="popover-content" style="display:none">                    


              <input id="myKnonInput" data-plugin="knob" data-width="125" data-height="125" data-min="0" data-max="100" data-fgColor="#f62d51" data-displayPrevious=true
              data-angleOffset=-125 data-angleArc=250 value="56" />


              <script>  // code oly works in this position
                $(document).ready(function(){
                    $('[data-plugin="knob"]').knob();                                  

                      var popOverSettings = {
                        placement: 'bottom',
                        container: 'body',
                        animated: true,
                        html: true,
                        selector: '[rel="popover"]', //Sepcify the selector here
                        content: function () {
                            return $('#popover-content').html();
                        }
                  }

                $('body').popover(popOverSettings);                 

                });

              </script>

          </div>  
        </div>'''

我需要根据旋钮的大小调整弹出窗口的大小

0 个答案:

没有答案