Javascript 将jquery css范围栏与django模板合并_Javascript_Jquery_Python_Html_Django

Javascript 将jquery css范围栏与django模板合并

javascript jquery python html django

Javascript 将jquery css范围栏与django模板合并,javascript,jquery,python,html,django,Javascript,Jquery,Python,Html,Django,我有两段代码，一段是django，另一段是range slidebar。我想把第二个html上的范围栏变成第一个html。 {%include display_static.html%} var-map，marker，topmostID={}，currentObject，geocoder；函数初始化（）{ map=new google.maps.map（document.getElementById（'map'）{ 缩放：5，中心：新google.maps.LatLng（19.0861,

我有两段代码，一段是django，另一段是range slidebar。我想把第二个html上的范围栏变成第一个html。


{%include display_static.html%}
var-map，marker，topmostID={}，currentObject，geocoder；
函数初始化（）{
map=new google.maps.map（document.getElementById（'map'）{
缩放：5，
中心：新google.maps.LatLng（19.0861,72.8530），
mapTypeId:google.maps.mapTypeId.ROADMAP
});
geocoder=新的google.maps.geocoder（）；
}
正文{字体系列：无衬线}
#地图{宽度：1200px；高度：600px}
{%csrf_令牌%}

另一件是用于范围滑块的，一些静态文件未写入：

<!DOCTYPE html>
<html>
    <head>

        <script src="static/js/ion.rangeSlider.js"></script>
        <script>

            $(document).ready(function() {

                $("#range_45").ionRangeSlider({
                    type: "single",
                    grid: true,
                    values: [
                        "TEN - WROST", "nine", "eight",
                        "seven", "six", "five",
                        "four", "three", "two", "ONE - BEST"
                    ]
                });

            });
        </script>
    </head>

    <body>

        <!-- Page contents -->
        <div style="position: relative; padding: 200px;">

            <div>
                <input type="text" id="range_45" value="" name="range" />
                <input type="submit" data-inline="true" value="Submit" />
            </div>

        </div>

    </body>

</html>


$（文档）.ready（函数（）{
$（“#范围_45”）.IonRange滑块({
类型：“单个”，
网格：是的，
价值观：[
“十、九、八”，
“七”、“六”、“五”，
“四”，“三”，“二”，“一-最佳”
]
});
});

问题是什么？@Wtower我想要一个范围滑块（第2个代码）和谷歌地图（第1个代码）如何合并它们。我不知道如何将jquery与django模板一起使用。您必须演示一些工作。

<!DOCTYPE html>
<html>
    <head>

        <script src="static/js/ion.rangeSlider.js"></script>
        <script>

            $(document).ready(function() {

                $("#range_45").ionRangeSlider({
                    type: "single",
                    grid: true,
                    values: [
                        "TEN - WROST", "nine", "eight",
                        "seven", "six", "five",
                        "four", "three", "two", "ONE - BEST"
                    ]
                });

            });
        </script>
    </head>

    <body>

        <!-- Page contents -->
        <div style="position: relative; padding: 200px;">

            <div>
                <input type="text" id="range_45" value="" name="range" />
                <input type="submit" data-inline="true" value="Submit" />
            </div>

        </div>

    </body>

</html>