0

我承认我是新手网络开发人员。我刚刚用凉亭安装了 seiyria-bootstrap-slider。我似乎有一个问题让它工作。我已按照以下基本指令集将插件 CSS 和 JavaScript 加载到我的网页中。

下面是我使用 angular-route 在不同页面之间导航的 index.html。我相信我错过了一些东西。此外，下面还有我定义的滑块元素。该元素显示在浏览器 (Chrome) 中，但其 nobs 不可移动。

任何线索都非常感谢。

非常感谢。

基本设置

将插件 CSS 和 JavaScript 加载到您的网页中，一切正常！

记得在加载 Bootstrap CSS 和 JQuery 之后加载插件代码。

JQuery 是可选的，插件可以在有或没有它的情况下运行。

请看下面的示例，了解如何与非 JQuery 接口进行交互。

仍然无法让它工作。

index.html

<html data-ng-app="eynakestanApp">
<head>

    <title>Eynakestan</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- SCROLLS -->
    <!-- load bootstrap and fontawesome via CDN -->
    <link href="/static/scripts/bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
    <link href="/static/content/font-awesome.css" rel="stylesheet" />
    <link href="/static/content/bootsnipp.min.css" rel="stylesheet"/>
    <link href="/static/content/site.css" rel="stylesheet"  />
    <link href="/static/scripts/bower_components/seiyria-bootstrap-slider/dist/css/bootstrap-slider.css" rel="stylesheet"  />


    <!-- SPELLS -->
    <!-- load angular via CDN -->
</head>

<!-- define angular controller -->
<body ng-controller="mainController">

    <!-- HEADER AND NAVBAR -->
    <header>
        <nav class="navbar navbar-default">
            <div class="container">
                <div class="navbar-header">
                    <a class="navbar-brand" href="/" style="font-size: x-large; font-weight: bold;">Eynakestan</a>
                </div>

                <ul class="nav navbar-nav ">
                    <li><a href="#/"><i class="fa fa-home"></i> Home</a></li>
                    <li><a href="#product"><i class="fa fa-eye"></i> Product</a></li>
                    <li><a href="#userlist"><i class="fa fa-user"></i> User List</a></li>
                    <li><a href="#about"><i class="fa fa-shield"></i> About</a></li>
                    <li><a href="#contact"><i class="fa fa-comment"></i> Contact</a></li>
                </ul>

                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#compare"><span class="glyphicon glyphicon-adjust"></span> Compare</a></li>
                    <li><a href="#favorites"><span class="glyphicon glyphicon-heart"></span> Favorites</a></li>
                    <li><a href="#shoppingcart"><span class="glyphicon glyphicon-shopping-cart"></span> Shopping Cart</a></li>
                    <li><a href="#signup" ng-show="Username==''"><span class="glyphicon glyphicon-user"></span> Sign-Up</a></li>
                    <li><a href="#signin" ng-show="Username==''"><span class="glyphicon glyphicon-log-in"></span> Sign-in</a></li>
                    <li><a href="#/" ng-show="Username!=''"><span class="glyphicon glyphicon-user"></span> Hi&nbsp;{{Username}}!</a></li>
                    <li><a href="" ng-click="SignOut()" ng-show="Username!=''" ><span class="glyphicon glyphicon-log-out"></span> Sign-Out</a></li>

                </ul>
            </div>
        </nav>
    </header>



    <!-- MAIN CONTENT AND INJECTED VIEWS -->
<div id="main">
    <div ng-view></div>

    <!-- angular templating -->
    <!-- this is where content will be injected -->
</div>
    <script src="/static/scripts/bower_components/angular/angular.min.js"></script>
    <script src="/static/scripts/bower_components/angular-route/angular-route.js"></script>
    <script src="/static/scripts/script.js"></script>
    <script src="/static/scripts/bower_components/jquery/dist/jquery.min.js"></script>
    <script src="/static/scripts/bower_components/seiyria-bootstrap-slider/src/js/bootstrap-slider.js"></script>

</body>
</html>

元素

        Filter by price interval:<br>
        <b>€ 10</b>

        <div class="slider slider-horizontal" id="">
            <div class="slider-track">
                <div class="slider-track-low" style="left: 0; width: 19.697%;"></div>
                <div class="slider-selection" style="left: 19.697%; width: 52.0202%;"></div>
                <div class="slider-track-high" style="right: 0; width: 28.2828%;"></div>
            </div>
            <div class="tooltip tooltip-main top" role="presentation" style="left: 45.7071%; margin-left: -33.5px;">
                <div class="tooltip-arrow"></div>
                <div class="tooltip-inner">205 : 720</div>
            </div>
            <div class="tooltip tooltip-min top" role="presentation" style="left: 19.697%; margin-left: 0; display: none;">
                <div class="tooltip-arrow"></div>
                <div class="tooltip-inner">205</div>
            </div>
            <div class="tooltip tooltip-max top" role="presentation" style="left: 71.7172%; margin-left: 0; display: none;">
                <div class="tooltip-arrow"></div>
                <div class="tooltip-inner">720</div>
            </div>
            <div class="slider-handle min-slider-handle round" role="slider" aria-valuemin="10" aria-valuemax="1000" aria-valuenow="205" tabindex="0" style="left: 19.697%;"></div>
            <div class="slider-handle max-slider-handle round" role="slider" aria-valuemin="10" aria-valuemax="1000" aria-valuenow="720" tabindex="0" style="left: 71.7172%;"></div>
        </div>

        <input id="ex2"
               type="text"
               class="span2"
               value="205,720"
               data-slider-min="10"
               data-slider-max="1000"
               data-slider-step="5"
               data-slider-value="[250,450]"
               data-value="205,720" 
               style="display: none;"> 
        <b>€ 1000</b>
4

1 回答 1

0

我无法准确指出问题所在。但是，我根据下面的独立示例修复了它。我希望它也对其他人有所帮助。

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8"/>
    <link href="../content/bootstrap.css" rel="stylesheet"/>
    <title></title>

    <script src="../scripts/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="../scripts/bower_components/jquery/dist/jquery.min.js"></script>
    <link href="../scripts/bower_components/seiyria-bootstrap-slider/dist/css/bootstrap-slider.min.css" rel="stylesheet" />
    <script src="../scripts/bower_components/seiyria-bootstrap-slider/dist/bootstrap-slider.min.js"></script>

</head>
<body>
<input id="myslider"
       type="text"
       class="span2"
       value="5,10"
       data-slider-id="myslider"
       data-slider-min="2" 
       data-slider-max="20"
       data-slider-step="2"
       data-slider-value="[5,10]"
       data-value="5,10" 

       />
<p id="slider"></p>


<script language="javascript">
    var mySlider = new Slider('#myslider');
    mySlider.on('slideStop', function(value) {
        document.getElementById('slider').innerHTML = value;
    });
</script>
</body>
</html>
于 2016-09-03T06:27:17.993 回答