Implementing jquery mobile in express js application with jade template

in layout.jade view file

doctype 5
html
         head
                 title= "MyMobileApp"
                 link(rel='stylesheet', href='/stylesheets/style.css')
                 link(rel='stylesheet', href='/stylesheets/jquery.mobile.css')
                 script(src='/javascripts/jquery.mobile.js')
                 script(src='/javascripts/jquery.js')
                 <meta name="viewport" content="width=device-width, initial-scale=1">
         body(class="ui-mobile-viewport ui-overlay-c")
                 div(data-role='page')
                 div(data-role='header',class='ui-header ui-bar-b')
                          h1 
                                   p My Sample Application
                 div(data-role='content',class='ui-content')
                          block content
                 div(data-role='footer',class='ui-header ui-bar-b')
                          h4= "Page Footer"

now, in index.jade view file,


extends layout

block content
p page content goes here

careful on indenting. jade template reacts the most with indentation.

Advertisements

2 thoughts on “Implementing jquery mobile in express js application with jade template

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s