これらの続き
Webアプリケーションでボタン操作などちょっと格好いいことをしようとするとjQueryは外せない。
じつは、Flask-Bootstrapで基本となっているbootstrap/base.html
は次のようになっており、jQueryのCDNを読み込むようになっている。
{% block doc -%} <!DOCTYPE html> <html{% block html_attribs %}{% endblock html_attribs %}> {%- block html %} ...(snip)... {% block scripts %} <script src="{{bootstrap_find_resource('jquery.js', cdn='jquery')}}"></script> <script src="{{bootstrap_find_resource('js/bootstrap.js', cdn='bootstrap')}}"></script> {%- endblock scripts %} {%- endblock body %} </body> {%- endblock html %} </html> {% endblock doc -%}
なので、これを参照するflask-bootstrapのhtmlではscriptsブロックを拡張することで、jQueryの機能が使用できる。
前回作成したbootstrap.htmlを次のように修正するだけで、jQueryでボタンのイベントを処理できる。
contentブロックに<button id="btn">Button</button>
の行でボタンを追加し、scriptsブロックでclickの処理を行っている。
{% extends "bootstrap/base.html" %} {% block title %}Hello{% endblock %} {% block content %} <div class="container"> <div class="page-header"> <h1>Hello World!</h1> <button id="btn">Button</button> </div> </div> {% endblock %} {% block scripts %} {{ super() }} <script> $(function() { $('#btn').click(function(e) { $(this).text("Clicked"); }); }); </script> {% endblock %}
これで「Button」ボタンをクリックすると、文字列が「Clicked」に変化する。
{{super()}}を忘れると、せっかく読み込んだCDNの設定が上書きされてしまい、 意図したように動作しないので注意。