In [1]:

    

from nbfiddle import Fiddle


    

In [2]:

    

# jquery-ui datepicker

Fiddle(
    
html="""
 <input type="text" name="date" class="date1"/>
""", 
    
 js = """
element.find('input.date1').datepicker();
""",
    
 div_css="""
background-color:red;
""",
    
 jslibs = 
    (('jquery-ui', 'https://code.jquery.com/ui/1.11.4/jquery-ui.min','jqu'),),
    
 csslibs = ("https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css",)
    
)


    

    
Out[2]:





    
 

In [3]:

    

Fiddle(
    js = """
        less_text = '#header {\
          color: black;\
          .navigation {\
            font-size: 12px;\
          }\
          .logo {\
            width: 300px;\
          }\
        }';
        
        less.render(less_text, function (e, output) {
          element.text(output.css);
        });    
    
    """,
    jslibs = (('less', "https://cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less", "less"),)
)


    

    
Out[3]:





    

In [4]:

    

from jinja2 import (Template, DebugUndefined)
from settings import (MAPBOX_KEY, MAPBOX_PROJ_ID)

def leaflet_HTML(lat=37.8717, long_=-122.2728, height=300, zoom=12,
                mapbox_key=MAPBOX_KEY, mapbox_proj_id=MAPBOX_PROJ_ID):

        js = u"""
var map = L.map('{{div_id}}').setView([{{lat}}, {{long_}}], {{zoom}});

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
  attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
  maxZoom: 18,
  id: '{{mapbox_proj_id}}',
  accessToken: '{{mapbox_key}}'
}).addTo(map);
"""
        
        div_css = Template("""
height: {{height}}px;
* + img {margin-top: 0em;}
        """).render(height=height)
        
        jslibs = (('leaflet', 'http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet', "leaflet"),)
        csslibs = ("http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css",)
        extra_vars = {'lat':lat, 
                  'long_':long_,
                  'height':height,
                  'zoom': zoom,
                  'mapbox_key':mapbox_key, 
                  'mapbox_proj_id':mapbox_proj_id}
        
        f = Fiddle(js=js,div_css=div_css,jslibs=jslibs,csslibs=csslibs,extra_vars=extra_vars)
        return f


    

In [5]:

    

from ipywidgets import (interact, interactive, fixed)
import ipywidgets as widgets

zoom_widget = widgets.IntSlider(min=1, max=18, step=1)
zoom_widget.value = 12

interact(leaflet_HTML, lat=fixed(37.8717), long_=fixed(-122.2728), height=fixed(300),
         div_id=fixed(None), mapbox_key=fixed(MAPBOX_KEY), mapbox_proj_id=fixed(MAPBOX_PROJ_ID),
         zoom=zoom_widget)


    

In [6]:

    

Fiddle(

html = """
 <p>
  First name: <span data-bind="text: firstName"></span>
</p>
<p>
  Last name: <span data-bind="text: lastName"></span>
</p>

<p>
  First name: <input data-bind="value: firstName" />
</p>
<p>
  Last name: <input data-bind="value: lastName" />
</p>
""",
    
js = """

function VM() {
  this.firstName = ko.observable("John");
  this.lastName = ko.observable("Wayne");
};

//ko.applyBindings(new VM(), $('#{{div_id}}')[0]);
ko.applyBindings(new VM(), element[0]);

""",
    
jslibs = (("knockout", "https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-debug", "ko"),)

)


    

    
Out[6]:





    
 

  First name: 


  Last name: 



  First name: 


  Last name: 

In [ ]: