Design ****** Le principe de cet article est de fournir un exemple design épuré pour réaliser un formulaire par exemple le code pour le serveur web python .. code-block:: python #!/usr/bin/env python # -*- coding: utf-8 -*- import os from flask import Flask import flask # Flask configuration DEBUG = True PORT = 5001 HOST = '0.0.0.0' PATH_HTML = '.' PATH_INDEX = 'index.html' app = Flask(__name__) app.config.from_object(__name__) @app.route("/") def index(): return flask.send_from_directory(app.config['PATH_HTML'],app.config['PATH_INDEX']) @app.route("/") def static_web(path): return flask.send_from_directory(app.config['PATH_HTML'],path) @app.route('/update', methods=['POST']) def update(): print(flask.request.form['id']) return "" if __name__ == "__main__": app.run(host = app.config['HOST'], port = app.config['PORT']) il faudra trouver ce fichier python à la racine de notre site web qui comportera aussi le contenu font, js, css, ... du module **fortawesome** (http://fortawesome.github.io/Font-Awesome/) au niveau du fichier **index.html** .. code-block:: html
Home
Library
Applications
Settings
Android
About
au niveau du fichier **menu1.html** .. code-block:: html
Menu1







title rubric 1




Alarme a









au niveau du fichier **css/mycss.css** .. code-block:: css body { width: 100%; margin: 0; } input[type=checkbox], input[type='radio']{ display:none; } input[type=checkbox] + label:before, input[type=radio] + label:before { font-family: FontAwesome; display: inline-block; letter-spacing: 5px; padding: 4px 5px; } input[type="checkbox"].checked + label:before { content: "\f046"; } input[type="checkbox"] + label:before { content: "\f096"; } input[type="radio"] + label:before { content: "\f10c"; } input[type="radio"].checked + label:before { content: "\f05d"; } div.test { width: 100%; } label { width: 100%; display: inline-block; } input[type=checkbox].toogle + label:after { font-family: FontAwesome; display: inline-block; letter-spacing: 5px; padding: 4px 5px; } input[type="checkbox"].toogle + label:before { content: ""; } input[type="checkbox"].toogle.checked + label:after { content: "\f205"; float:right } input[type="checkbox"].toogle + label:after { content: "\f204"; float:right } .input-prepend { font-size: 0px; } .add-on { margin-right: -1px; border-radius: 4px 0px 0px 4px; display: inline-block; min-width: 16px; padding: 4px 5px; text-align: center; } input[type=text] { display: inline-block; vertical-align: top; border-radius: 0px 4px 4px 0px; float: none; margin-left: 0px; box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset; transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s; padding: 4px 6px; margin-bottom: 10px; } input[type=range]{ -webkit-appearance: none; display: inline; vertical-align: middle; width: 80%; } input[type='range']::-moz-range-track { -moz-appearance: none; } div.range > label { display: inline; padding: 4px 5px; } .menu > div { width: 100%; } .menu-header > div { width: 100%; } .menu > div > a { text-decoration: none; padding-left: 20px; padding-right: 20px; } .content { position:in-line; margin-left: 5px; } .menu-footer { position:fixed; bottom:0; width:100%; } .menu-header { position:fixed; top:0; width:100%; } .expander { margin-right: -1px; margin-left: 4px; display: inline-block; width: 100%; } .expander > i:before { font-family: FontAwesome; display: inline-block; letter-spacing: 5px; padding: 4px 5px; content: "\f0fe"; font-style: normal; } .expander.expand > i:before { font-family: FontAwesome; display: inline-block; letter-spacing: 5px; padding: 4px 5px; content: "\f146"; font-style: normal; } .expander > i { font-style: normal; } .view { padding: 4px 10px; } div.expand > span > label { display: inline; } button { display: inline-block; vertical-align: top; border-radius: 4px 4px 4px 4px; min-width: 200px; } button > i.fa { float: left; } au niveau du fichier **css/mytheme.css** .. code-block:: css label, input[type=checkbox] + label:before, .add-on, input[type=text], .menu > div, .expander, .expand, button { font-size: 24px; } input[type="checkbox"].checked + label, input[type="radio"].checked + label { color: black; } input[type="checkbox"] + label, input[type="radio"] + label { color: #CCC; } input[type="checkbox"].checked + label:before, input[type="checkbox"].toogle.checked + label:before , input[type="checkbox"].toogle.checked + label:after , input[type="radio"].checked + label:before, .add-on, .expander > i:before, strong.list-selected, button{ color: #38C; } input[type="checkbox"] + label:before, input[type="checkbox"] + label, input[type="checkbox"].toogle + label:before, input[type="radio"] + label, .expander.expand > i:before { color: #CCC; } .add-on { text-shadow: 0px 1px 0px #FFF; background-color: #EEE; border: 1px solid #CCC; height: 25px; } .padding-two { padding:50px 0 50px 0; } .padding-one { padding:50px 0 0 0; } input[type=text] { background-color: #FFF; border: 1px solid #CCC; width: 200px; line-height: 25px; } input[type=range] { background-color: white; width: 500px; } input[type='range']::-moz-range-track { border-radius: 5px; box-shadow: inset 0 0 5px #38C; background-color: #38C; height: 10px; } .menu > div { line-height: 50px; } .menu-header > div, .menu-content > div { border-bottom: 1px solid #CCC; } .menu-footer > div { border-top: 1px solid #CCC; } .menu > div > a, input[type=text] { color: #555; } .menu-footer, .menu-header, .menu-content, .body-menu { background: #f0f0f0; } button { border: 1px solid #CCC; min-width: 200px; } au niveau du fichier **js/myjs.js** .. code-block:: javascript $().ready(function() { $("input[type=checkbox]").click(function () { $(this).toggleClass("checked"); $.ajax({ type: "POST", url: "http://127.0.0.1:5001/update", dataType: "xml", data: "id=" + $(this).attr("id"), async: true, global: false, success: function(xml) { /* todo */ }, beforeSend: function() { /* todo */ }, complete: function() { /* todo */ } }); }); // hide block expand $("div.list>input.checked").each(function() { $("div.expand>span[id='"+$(this).parent().attr("view")+"']").append(" "+$(this).next().text()+""); } ); $("input[type=radio]").click(function () { $('input:radio[name='+$(this).attr("name")+']').removeClass("checked"); $(this).toggleClass("checked"); /*$('input:radio[name='+$(this).attr("name")+']').toggleClass("checked");*/ $.ajax({ type: "POST", url: "http://127.0.0.1:5001/update", dataType: "xml", data: "id=" + $(this).attr("id")+ "&val=" + $(this).val(), async: true, global: false, success: function(xml) { /* todo */ }, beforeSend: function() { /* todo */ }, complete: function() { /* todo */ } }); /* manage list */ if ( $( this ).hasClass( "list" ) ) { $(this).parent().css("display","none"); $("div.expand>span[id='"+$(this).parent().attr("view")+"']").toggleClass("expand"); $("div.expand>span[id='"+$(this).parent().attr("view")+"']>strong").remove(); $("div.expand>span[id='"+$(this).parent().attr("view")+"']").append(" "+$(this).next().text()+""); }; }); $('input[type=text]').on('input', function() { $.ajax({ type: "POST", url: "http://127.0.0.1:5001/update", dataType: "xml", data: "id=" + $(this).attr("id") + "&val=" + $(this).val(), async: true, global: false, success: function(xml) { /* todo */ }, beforeSend: function() { /* todo */ }, complete: function() { /* todo */ } }); }); // hide block expand $("div.expand>span").each(function() { $("[view='"+$(this).attr("id")+"']").css("display","none"); } ); $("div.expand>span").click(function () { $(this).toggleClass("expand"); if ( $( this ).hasClass( "expand" ) ) { $("[view='"+$(this).attr("id")+"']").css("display","inline-block"); } else { $("[view='"+$(this).attr("id")+"']").css("display","none"); } }); $('input[type=range]').on('input change', function() { $.ajax({ type: "POST", url: "http://127.0.0.1:5001/update", dataType: "xml", data: "id=" + $(this).attr("id") + "&val=" + $(this).val(), async: true, global: false, success: function(xml) { /* todo */ }, beforeSend: function() { /* todo */ }, complete: function() { /* todo */ } }); }); $("button").click(function () { $.ajax({ type: "POST", url: "http://127.0.0.1:5001/update", dataType: "xml", data: "id=" + $(this).attr("id"), async: true, global: false, success: function(xml) { /* todo */ }, beforeSend: function() { /* todo */ }, complete: function() { /* todo */ } }); }); }); .. warning:: il faut noter l'utilisation de jquery que vous pouvez télécharger en local si vous le souhaitez