0

我正在尝试从 django-floppyforms 实现 Slider。但是，当我使用给出的示例时，我的页面仅显示一个空文本框。当我使用它渲染它时，{{form.as_p}}我只能让本机滑块工作，但我真的很喜欢 JS 功能。

我有一个从http://jquery.com/download/jquery-1.11.1.min.js下载的副本，它的文件路径是 `floppy_project/src/floppyform_test/static/jsfloppyform_test/static/js/jquery-1.11.1.min.js

我认为这可能是我的 jQuery 文件路径（我尝试了很多变体）或我的 views.py 的问题

我以前没有真正使用过 JavaScript，但这是我尝试过的。

视图.py

def sview(request):
    jquery_slider = Slider()
    native_slider = SlideForm()

    return render(request, 'slider.html', {
                                           'jquery_slider': jquery_slider,   
                                           'native_slider': native_slider,             
                                           })

slider.html（改编自原始文件）

{# slider.html #}
{% include "floppyforms/input.html" %}
<div id="{{ attrs.id }}-slider"></div>

<script type="text/javascript" src="{{ STATIC_URL }} /static/js/jquery-1.11.1.min.js">
  $(document).ready(function() {
    var type = $('<input type="range" />').attr('type');
    if (type == 'text') { // No HTML5 support
      $('#{{ attrs.id }}').attr("readonly", true);
      $('#{{ attrs.id }}-slider').slider({
        {% if value %}value: {{ value }},{% endif %}
        min: {{ attrs.min }},
        max: {{ attrs.max }},
        step: {{ attrs.step }},
        slide: function(event, ui) {
          $('#{{ attrs.id }}').val(ui.value);
        }
      });
    }
  });
</script>

forms.py（从原始复制）

import floppyforms as forms

class Slider(forms.RangeInput):
    min = 5
    max = 20
    step = 5
    template_name = 'slider.html'

    class Media:
        js = (
            'js/jquery.min.js',
            'js/jquery-ui.min.js',
        )
        css = {
            'all': (
                'css/jquery-ui.css',
            )
        }

class SlideForm(forms.Form):
    num = forms.IntegerField(widget=Slider)

    def clean_num(self):
        num = self.cleaned_data['num']
        if not 5 <= num <= 20:
            raise forms.ValidationError("Enter a value between 5 and 20")

        if not num % 5 == 0:
            raise forms.ValidationError("Enter a multiple of 5")
        return num

非常感谢任何帮助

4

1 回答 1

1

三件事：

  1. 你能在 {{static_url}}/static.... 路径找到 jquery 文件吗？如果您已将 static_url 设置为 /static/，则不需要再次添加 /static。

  2. 您在 Slider 小部件中声明了更多 jquery，但它与您在模板中的声明的路径和版本不同，因此您会遇到冲突。

  3. 不要像你所做的那样声明你的 jquery 文件 - 将它放在文档的头部，然后使用 $(document).ready(function(){}) 语法编写你的临时脚本

于 2014-07-07T20:13:56.470 回答