Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>Research Application</title>
- <!-- The necessary imports that give your application the layout and ease-of-implementation that Java has -->
- <!-- First, the jQuery library itself-->
- <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
- <!-- Then, all of the jLayout stuff -->
- <script type="text/javascript" src="http://www.bramstein.com/projects/jlayout/lib/jquery.sizes.js"></script>
- <script type="text/javascript" src="http://www.bramstein.com/projects/jlayout/lib/jlayout.grid.js"></script>
- <script type="text/javascript" src="http://www.bramstein.com/projects/jlayout/lib/jlayout.flexlayout.js"></script>
- <script type="text/javascript" src="http://www.bramstein.com/projects/jlayout/lib/jlayout.flow.js"></script>
- <script type="text/javascript" src="http://www.bramstein.com/projects/jlayout/lib/jlayout.border.js"></script>
- <script type="text/javascript" src="http://www.bramstein.com/projects/jlayout/lib/jquery.jlayout.js"></script>
- <!-- including the styleSheet -->
- <link rel="stylesheet" href="style/style.css" type="text/css"></link>
- </head>
- <body>
- <h1 id="title">Research Application</h1>
- <!-- This is where you might want to setup the jLayout script -->
- <script>
- // don't you just love function pointers?
- $(document).ready(function(){
- // in here goes all of the stuff to layout
- // first, make the borderLayout for the applicationWindow itself
- $('#applicationWindow').layout({
- type: 'border',
- maximumWidth: 900,
- height: 300,
- hgap: 3,
- vgap: 3
- });
- // then, layout the questionPanel into verticalLayout
- // next, make the picturesContainer into a horizontalLayout
- });
- </script>
- <!-- need div element that will the container for the application itself -->
- <div id="applicationWindow">
- <!-- need element that will notify the user of the question number, as well as a way to change the number programmatically -->
- <label id="problemNumberLabel" class="north">
- Question number: 0 of 10 <!-- This is subject to change -->
- </label>
- <!-- need left arrow widget (You might want to do what Facebook did for the pictures, with the CSS and everything, and use <a> -->
- <button class="navigatorButton west" id="leftArrowButton">
- <<
- </button>
- <!-- need div element that will house the inner panel -->
- <div id="questionPanel" class="center">
- <!-- Content to be determined possibly by either JavaScript (via the html() function, or the innerHTML attribute), or by controlling the file
- that gets loaded to here -->
- </div>
- <!-- need right arrow widget (You might want to do what Facebook did for the pictures, with the CSS and everything, and use <a> -->
- <button class="navigatorButton east" id="rightArrowButton">
- >>
- </button>
- <!-- container for lower buttons -->
- <div id="lowerButtonsContainer" class="south">
- <!-- This is where you put the "Share","Log on" buttons -->
- <button id="ShareButton"></button>
- <button name="LogOnButton"></button>
- </div>
- </div>
- </body>
- </html>
- #title
- {
- text-align: center;
- }
- #problemNumberLabel
- {
- text-align: right;
- }
- #applicationWindow,#problemNumberLabel
- {
- width: 900px;
- display: inline-block;
- position: relative;
- }
- #applicationWindow
- {
- margin-left: auto;
- margin-right: auto;
- height: 300px;
- }
- .navigatorButton
- {
- height: 100px;
- background-color: #ffffff; // make the color of the buttons white
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement