Now that you\'ve learned how to use jQuery Mobile Data Attributes, create a full
ID: 3856931 • Letter: N
Question
Now that you've learned how to use jQuery Mobile Data Attributes, create a full page containing the following attributes:
The data-role="page" is the page displayed in the browser
The data-role="header" creates a toolbar at the top of the page (often used for title or search buttons)
The data-role="main" defines the content of the page, like text, images, buttons, forms, etc.
The "ui-content" class adds extra padding and margin inside the page content
The data-role="footer" creates a toolbar at the bottom of the page
Inside these containers, you can add any HTML elements - paragraphs, images, headings, lists, and so on.
Explanation / Answer
Note: Execute the below code
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Welcome to My Album
</h1>
</div>
<div data-role="main" class="ui-content">
<style>
div {
background-color: orange;
width: 800px;
border: 25px solid green;
padding: 20px;
margin: 5px;
}
</style>
<p> Street photography, also sometimes called candid photography, is photography conducted for art or enquiry that features unmediated chance encounters and random incidents within public places.</p>
<form>
People's culture:<br>
<input type="text" name="People's culture"><br>
People's food:<br>
<input type="text" name="People's food">
</form>
</div>
<div data-role="footer">
<h1> COMMENTS
</h1>
<form action="/action_page.php">
<input type="text" name="LOCname" placeholder="Location name"><br>
<input type="text" name="typename" placeholder="Type of street photography"><br>
<p> CLOSE TO YOUR IMAGINATION </P>
<ul>
<li><a href="http://artofcreativephotography.com/wp-content/uploads/2009/04/Swarat-Gosh-Street-Photography.jpg">City of joy</li>
<li><a href="http://121clicks.com/wp-content/uploads/2014/04/rohit_vohra_02.jpg">City of Temple</li>
</ul>
<input type="submit" value="Submit">
</form>
<input type="text" name="COMMENT" placeholder="Describe about your choice">
<img src="https://cdn.fstoppers.com/styles/full/s3/media/2016/05/fstoppers-kenn-tam-street-photography-photo-walk-tips-thomas_leuthard_cooph_01.jpg" alt="Mountain View">
</div>
</div>
</body>
</html>
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.