Turnkey session 9: View Override
No edit summary |
No edit summary |
||
Line 24: | Line 24: | ||
</div> | </div> | ||
</form> | </form> | ||
@Html.Partial("_DeveloperInfoPartial") | @Html.Partial("_DeveloperInfoPartial") | ||
<html> | |||
<h4> In Session 9 I show how to replace the auto generated UI with html of your own. I show how to include a google map and how to pick up the location of the device using your application.</h4> | |||
<p> | |||
<em>To make your experience more comfortable, we set the main tags mentioned in the video to the right bar menu of this mini player. Choose the interesting subtitle on the list and immediately get to the exact theme timeplace in the video. Now you can pick any topic to be instructed without watching the whole video.</em> | |||
<style type="text/css"> | |||
p { | |||
opacity: 0.7; | |||
text-align: justify; | |||
width: 90% | |||
} | |||
</style> | |||
</p> | |||
<style> | |||
#video12 { | |||
position: relative; | |||
height: 500px; | |||
width:560px; | |||
padding-bottom: 10px; | |||
} | |||
#video12 iframe { | |||
position: absolute; | |||
min-height: auto; | |||
min-width: auto; | |||
} | |||
#video12 div { | |||
position: absolute; | |||
top: 0; | |||
left:760px; | |||
width: 260px; | |||
height: 100%; | |||
padding-left: 10px; | |||
overflow-y: auto; | |||
} | |||
span { | |||
font-size: 18; | |||
display:block; | |||
padding: 2px 10px 2px 10px; | |||
padding-bottom: 0.5; | |||
padding-top: 0.5; | |||
opacity: 0.7; | |||
} | |||
span:hover { | |||
color: #0000FF; | |||
cursor: pointer; | |||
} | |||
span:focus { | |||
color: blue; | |||
</style> | |||
<div id="video12"> | |||
<iframe width="740" height="500" src="https://www.youtube.com/embed/zQxkt2KBM3Q?rel=0&autoplay=0" frameborder="0" allowfullscreen></iframe> | |||
<div> | |||
<span data-video="zQxkt2KBM3Q" data-start="14" tabindex="0"> Create Vie Override</span> | |||
<span data-video="zQxkt2KBM3Q" data-start="31" tabindex="0"> view Override HTML </span> | |||
<span data-video="zQxkt2KBM3Q" data-start="84" tabindex="0"> Fine Tuning </span> | |||
<span data-video="zQxkt2KBM3Q" data-start="121" tabindex="0"> Adding an input control </span> | |||
<span data-video="zQxkt2KBM3Q" data-start="151" tabindex="0"> Style </span> | |||
<span data-video="zQxkt2KBM3Q" data-start="177" tabindex="0"> Boxes or combo boxes</span> | |||
<span data-video="zQxkt2KBM3Q" data-start="216" tabindex="0"> Tables </span> | |||
<span data-video="zQxkt2KBM3Q" data-start="306" tabindex="0"> removing the information </span> | |||
<span data-video="zQxkt2KBM3Q" data-start="353" tabindex="0"> complex action: location </span> | |||
<span data-video="zQxkt2KBM3Q" data-start="426" tabindex="0"> HTML adding scripts </span> | |||
<span data-video="zQxkt2KBM3Q" data-start="426" tabindex="0"> VClientLatitude and vClientLongitude variables </span> | |||
<span data-video="zQxkt2KBM3Q" data-start="524" tabindex="0"> Mobile Device UI</span> | |||
</div> | |||
</div> | |||
</div> | |||
<script> | |||
var IMG = document.querySelectorAll('#video12 span'), | |||
IFRAME = document.querySelector('#video12 iframe'); | |||
for (var i = 0; i < IMG.length; i++) { | |||
IMG[i].onclick = function() { | |||
IFRAME.src = 'http://www.youtube.com/embed/' + this.dataset.video + '?rel=0&autoplay=1'; | |||
if(this.dataset.end) IFRAME.src = IFRAME.src.replace(/([\s\S]*)/g, '$1&end=' + this.dataset.end); | |||
if(this.dataset.start) IFRAME.src = IFRAME.src.replace(/([\s\S]*)/g, '$1&start=' + this.dataset.start); | |||
this.style.backgroundColor='rgba(0,0,0,.2)'; | |||
} | |||
} | |||
</script> | |||
</html> |
Revision as of 19:21, 22 January 2017
This is the original generic view we use – use this as a starting point when stirring things up:
@using Eco.MVC @model AngularModel @{ Layout = null; }
Template:Root. ViewModelPresentation
<form >
<img src='~/Content/ajax-loader.gif' />
@Html.AngualarUIActions(Model)
@Html.AngualarUI(Model)
@Html.DisplayErrorsWarningsInfos(Model)@*Error,Warning,Info constraints*@
</form>
@Html.Partial("_DeveloperInfoPartial")
In Session 9 I show how to replace the auto generated UI with html of your own. I show how to include a google map and how to pick up the location of the device using your application.
To make your experience more comfortable, we set the main tags mentioned in the video to the right bar menu of this mini player. Choose the interesting subtitle on the list and immediately get to the exact theme timeplace in the video. Now you can pick any topic to be instructed without watching the whole video.
Create Vie Override
view Override HTML
Fine Tuning
Adding an input control
Style
Boxes or combo boxes
Tables
removing the information
complex action: location
HTML adding scripts
VClientLatitude and vClientLongitude variables
Mobile Device UI
This page was edited more than 11 months ago on 02/10/2024. What links here