デスクトップなjQuery Mobile
実際にページを作ってみます
ポチッとな
/Home/Index.vbhtml
<!DOCTYPE html> <html> <head> <title>Home</title> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta charset="utf-8" /> <link rel="stylesheet" href="@Url.Content("~/Content/jquery.mobile-1.4.5.min.css")" /> <link rel="stylesheet" href="@Url.Content("~/Src/cm.css")" /> <link rel="stylesheet" href="@Url.Content("~/Src/app.css")" /> <script type="text/javascript" src="@Url.Content("~/Scripts/jquery-2.1.3.min.js")"></script> <script type="text/javascript" src="@Url.Content("~/Scripts/jquery.mobile-1.4.5.min.js")"></script> <style type="text/css"> .menu { width: 20em; float: left; margin-left: 1em!important; } ul.ui-listview > li.ui-li-divider, div.ui-header > .ui-title { border-color: blue; background-color: blue; color: white; } .ui-flipswitch-active.ui-flipswitch, .ui-btn-active { border-color: blue !important; background-color: blue !important; } #page1 > .ui-header > .ui-title { padding-right: 10.5em; } </style> </head> <body class="ui-nodisc-icon ui-alt-icon ui-desktop"> <div data-role="page" id="page1"> <div data-role="header" data-position="fixed" data-fullscreen="false" data-tap-toggle="false"> <h1 class="ui-icon ui-icon-home-w ui-title-left">HeaderHeaderHeaderHeaderHeaderHeader</h1> <div class="ui-right-panel"> <a href="#page2" class="ui-btn">ダイアログページ</a> <a href="#" class="ui-btn ui-btn-icon-notext ui-icon-delete"></a> </div> <div class="ui-toolbar"> <div class="ui-left-panel"> <div class="ui-toolbar-divider"> <a href="#" class="ui-btn ui-btn-icon-left ui-icon-star">star</a> <a href="#" class="ui-btn ui-btn-icon-notext ui-icon-star"></a> <a href="#" class="ui-btn ui-btn-icon-notext ui-icon-alert"></a> </div> </div> <div class="ui-right-panel"> <div class="ui-toolbar-divider"> <a href="#" class="ui-btn ui-btn-icon-left ui-icon-action ui-btn-active">Active</a> <a href="#" class="ui-btn ui-btn-icon-notext ui-icon-gear"></a> </div> <div class="ui-toolbar-divider"> <a href="#" class="ui-btn">ボタン</a> <a href="#" class="ui-btn ui-btn-icon-left ui-icon-search">Search</a> <a href="#" class="ui-btn ui-btn-icon-notext ui-icon-search"></a> </div> <div class="ui-toolbar-divider"> <a href="#" class="ui-btn ui-btn-icon-left ui-icon-edit">Edit</a> <a href="#" class="ui-btn ui-btn-icon-notext ui-icon-edit"></a> </div> </div> </div> </div> <div role="main" class="ui-content"> <ul data-role="listview" data-inset="true" data-icon="false" class="menu"> <li data-role="list-divider">Menu1</li> <li><a href="#">A</a></li> <li><a href="#">B</a></li> <li><a href="#">C</a></li> <li><a href="#">D</a></li> <li><a href="#">E</a></li> </ul> <ul data-role="listview" data-inset="true" data-icon="false" class="menu"> <li data-role="list-divider">Menu2</li> <li><a href="#">AA</a></li> <li><a href="#">BB</a></li> <li><a href="#">CC</a></li> <li><a href="#">DD</a></li> <li><a href="#">EE</a></li> <li><a href="#">FF</a></li> <li><a href="#">GG</a></li> <li><a href="#">HH</a></li> <li><a href="#">II</a></li> <li><a href="#">JJ</a></li> <li><a href="#">KK</a></li> </ul> <ul data-role="listview" data-inset="true" data-icon="false" class="menu"> <li data-role="list-divider">Menu3</li> <li><a href="#">AAA</a></li> <li><a href="#">BBB</a></li> </ul> </div> <div data-role="footer" data-position="fixed" data-fullscreen="false" data-tap-toggle="false"> <div class="ui-toolbar"> <div class="ui-left-panel"> <a href="#" class="ui-btn">ボタン3</a> </div> <div class="ui-right-panel"> <a href="#" class="ui-btn ui-btn-active">OK</a> <a href="#" class="ui-btn">キャンセル</a> </div> </div> </div> </div> <div data-role="page" id="page2"> <div data-role="header" data-position="fixed" data-fullscreen="false" data-tap-toggle="false"> <h1>Dialog</h1> <a href="#" class="ui-btn ui-btn-icon-notext ui-icon-video">ボタン1</a> </div> <div role="main" class="ui-content ui-form"> <ul data-role="listview" data-inset="true" data-icon="false" class="split"> <li> <div class="ui-field-contain em7"> <label for="text-12">Text input:</label> <div> <input name="text-12" id="text-12" type="text" value=""> </div> </div> <button class="ui-btn ui-btn-icon-notext ui-btn-split ui-icon-carat-d"></button> </li> <li> <div class="ui-field-contain em7"> <label for="text-13">Text input clr:</label> <div> <input name="text-13" id="text-13" type="text" value="" data-clear-btn="true"> </div> </div> </li> <li> <div class="ui-field-contain em7"> <label for="search-8">Search:</label> <div> <input name="search-8" id="search-8" type="search" value=""> </div> </div> </li> <li> <div class="ui-field-contain em7"> <label for="textarea-12">Textarea:</label> <div> <textarea name="textarea-12" id="textarea-12" rows="8" cols="40"></textarea> </div> </div> <button class="ui-btn ui-btn-icon-notext ui-btn-split ui-icon-delete"></button> </li> <li> <div class="ui-field-contain em7"> <label for="Switch">Textarea:</label> <div> <input name="flip-checkbox-1" id="flip-checkbox-1" type="checkbox" data-role="flipswitch"> </div> </div> </li> </ul> </div> <div data-role="footer" data-position="fixed" data-fullscreen="false" data-tap-toggle="false"> <div class="ui-toolbar"> <div class="ui-left-panel"> <a href="#" class="ui-btn">リセット</a> </div> <div class="ui-right-panel"> <a href="#" class="ui-btn ui-btn-active">OK</a> <a href="#page1" class="ui-btn">キャンセル</a> </div> </div> </div> </div> </body> </html>
/Mobile/Index.vbhtml
<!DOCTYPE html> <html> <head> <title>Home</title> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta charset="utf-8" /> <link rel="stylesheet" href="@Url.Content("~/Content/jquery.mobile-1.4.5.min.css")" /> <link rel="stylesheet" href="@Url.Content("~/Src/cm.css")" /> <link rel="stylesheet" href="@Url.Content("~/Src/app.css")" /> <script type="text/javascript" src="@Url.Content("~/Scripts/jquery-2.1.3.min.js")"></script> <script type="text/javascript" src="@Url.Content("~/Scripts/jquery.mobile-1.4.5.min.js")"></script> <style type="text/css"> .ui-header > .ui-title { background-color: Red; color: white; text-shadow: none; } .ui-btn-active{ background-color: Red !important; text-shadow:none !important; } </style> </head> <body class="ui-nodisc-icon ui-alt-icon"> <div data-role="page" id="page1"> <div data-role="header" data-position="fixed" data-fullscreen="false" data-tap-toggle="false"> <h1>Header</h1> <a href="#" class="ui-btn ui-btn-icon-notext ui-icon-carat-l ui-btn-left"></a> <a href="#" class="ui-btn ui-btn-icon-notext ui-icon-carat-r ui-btn-right"></a> <div class="ui-toolbar"> <div class="ui-left-panel"> <a href="#" class="ui-btn ui-btn-icon-notext ui-icon-star"></a> <a href="#" class="ui-btn ui-btn-icon-notext ui-icon-gear"></a> <a href="#" class="ui-btn ui-btn-icon-notext ui-icon-search"></a> <a href="#" class="ui-btn ui-btn-icon-notext ui-icon-edit"></a> </div> <div class="ui-right-panel"> <a href="#" class="ui-btn ui-btn-icon-notext ui-icon-bullets"></a> <a href="#" class="ui-btn ui-btn-icon-notext ui-icon-camera"></a> </div> </div> <div data-role="navbar"> <a href="#" class="ui-btn ui-btn-active">ホーム</a> <a href="#">設定</a> <a href="#">ヘルプ</a> <a href="#">問い合わせ</a> </div> </div> <div role="main" class="ui-content"> <ul data-role="listview" data-icon="false"> <li> <a href="#"> <img src=@Url.Content("~/imgs/album-bb.jpg")> <h2>Broken Bells</h2> <p>Broken Bells</p> </a> </li> <li> <img src=@Url.Content("~/imgs/album-hc.jpg")> <h2>Warning</h2> <p>Hot Chip</p> </li> <li> <a href="#"> <img src=@Url.Content("~/imgs/album-p.jpg")> <h2>Wolfgang Amadeus Phoenix</h2> <p>Phoenix</p> </a> </li> <li> <a href="#"> <img src=@Url.Content("~/imgs/album-bb.jpg")> <h2>Broken Bells</h2> <p>Broken Bells</p> </a> </li> <li> <img src=@Url.Content("~/imgs/album-hc.jpg")> <h2>Warning</h2> <p>Hot Chip</p> </li> <li> <a href="#"> <img src=@Url.Content("~/imgs/album-p.jpg")> <h2>Wolfgang Amadeus Phoenix</h2> <p>Phoenix</p> </a> </li> </ul> </div> <div data-role="footer" data-position="fixed" data-fullscreen="false" data-tap-toggle="false"> <div class="ui-toolbar"> <div class="ui-left-panel"> <a href="#" class="ui-btn ui-btn-icon-notext ui-icon-star"></a> <a href="#" class="ui-btn ui-btn-icon-notext ui-icon-gear"></a> <a href="#" class="ui-btn ui-btn-icon-notext ui-icon-search"></a> <a href="#" class="ui-btn ui-btn-icon-notext ui-icon-edit"></a> </div> <div class="ui-right-panel"> <a href="#" class="ui-btn ui-btn-icon-notext ui-icon-bullets"></a> <a href="#" class="ui-btn ui-btn-icon-notext ui-icon-camera"></a> </div> </div> <div data-role="navbar"> <a href="#" class="ui-btn ui-btn-active">ホーム</a> <a href="#">設定</a> <a href="#">ヘルプ</a> <a href="#">問い合わせ</a> </div> </div> </div> </body> </html>
/Src/app.css
/* Icon From: http://andymatthews.net/code/jQuery-Mobile-Icon-Pack/builder/ */ .ui-icon-home-w:after { background-image: url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%20Tiny%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11-tiny.dtd%22%3E%3Csvg%20version%3D%221.1%22%20baseProfile%3D%22tiny%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%2216px%22%20height%3D%2216px%22%20viewBox%3D%220%200%20500%20500%22%20xml%3Aspace%3D%22preserve%22%3E%20%3Cpath%20d%3D%22M392.857%20276.786v133.929q0%207.254-5.301%2012.556t-12.556%205.301h-107.143v-107.143h-71.429v107.143h-107.143q-7.254%200-12.556-5.301t-5.301-12.556v-133.929q0-0.279%200.14-0.837t0.14-0.837l160.435-132.254%20160.435%20132.254q0.279%200.558%200.279%201.674zM455.078%20257.534l-17.299%2020.647q-2.232%202.511-5.859%203.069h-0.837q-3.627%200-5.859-1.953l-193.081-160.993-193.081%20160.993q-3.348%202.232-6.696%201.953-3.627-0.558-5.859-3.069l-17.299-20.647q-2.232-2.79-1.953-6.557t3.069-5.999l200.614-167.132q8.929-7.254%2021.206-7.254t21.206%207.254l68.081%2056.919v-54.409q0-3.906%202.511-6.417t6.417-2.511h53.571q3.906%200%206.417%202.511t2.511%206.417v113.839l61.105%2050.781q2.79%202.232%203.069%205.999t-1.953%206.557z%22%20fill%3D%22%23ffffff%22%20%2F%3E%3C%2Fsvg%3E'); background-size: 20px; border-radius: 0; } .ui-icon-home-b:after { background-image: url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%20Tiny%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11-tiny.dtd%22%3E%3Csvg%20version%3D%221.1%22%20baseProfile%3D%22tiny%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%2216px%22%20height%3D%2216px%22%20viewBox%3D%220%200%20500%20500%22%20xml%3Aspace%3D%22preserve%22%3E%20%3Cpath%20d%3D%22M392.857%20276.786v133.929q0%207.254-5.301%2012.556t-12.556%205.301h-107.143v-107.143h-71.429v107.143h-107.143q-7.254%200-12.556-5.301t-5.301-12.556v-133.929q0-0.279%200.14-0.837t0.14-0.837l160.435-132.254%20160.435%20132.254q0.279%200.558%200.279%201.674zM455.078%20257.534l-17.299%2020.647q-2.232%202.511-5.859%203.069h-0.837q-3.627%200-5.859-1.953l-193.081-160.993-193.081%20160.993q-3.348%202.232-6.696%201.953-3.627-0.558-5.859-3.069l-17.299-20.647q-2.232-2.79-1.953-6.557t3.069-5.999l200.614-167.132q8.929-7.254%2021.206-7.254t21.206%207.254l68.081%2056.919v-54.409q0-3.906%202.511-6.417t6.417-2.511h53.571q3.906%200%206.417%202.511t2.511%206.417v113.839l61.105%2050.781q2.79%202.232%203.069%205.999t-1.953%206.557z%22%20fill%3D%22%23000000%22%20%2F%3E%3C%2Fsvg%3E'); background-size: 20px; border-radius: 0; } /* buildin icon */ .ui-icon-alert:after, .ui-icon-action:after, .ui-icon-audio:after, .ui-icon-back:after, .ui-icon-bars:after, .ui-icon-bullets:after, .ui-icon-calendar:after, .ui-icon-camera:after, .ui-icon-edit:after, .ui-icon-search:after, .ui-icon-gear:after, .ui-icon-star:after { background-size: 18px; border-radius: 0; } .ui-icon-action:after { background-position-y: 0; } .ui-icon-alert:after { background-size: 20px; background-position-y: 3px; }
cm.css
.ui-corner-all { border-radius: 0 !important; } .ui-panel, .ui-header, .ui-footer, .ui-btn:active, .ui-overlay-shadow, .ui-shadow, .ui-shadow-inset, input:focus { box-shadow: none !important; } .ui-focus { box-shadow: none !important; /*box-shadow: 0 0 0 3px rgba(0,0,0,0.50) !important;*/ } .ui-btn:focus:not(.ui-flipswitch-on) { box-shadow: none !important; /*box-shadow: 0 0 0 3px rgba(0,0,0,0.50) inset !important;*/ } .ui-flipswitch-on.ui-btn:focus { box-shadow: none !important; /*box-shadow: 0 0 0 3px rgba(0,0,0,0.50) inset !important;*/ } /* ThemeA BaseColor White */ .ui-page-theme-a .ui-btn:not(.ui-btn-active), .ui-page-theme-a .ui-bar-inherit:not(.ui-flipswitch-active):not(.ui-li-divider), .ui-page-theme-a { background-color: #fff; } .ui-page-theme-a .ui-btn:not(.ui-btn-active):hover { background-color: #f6f6f6; } /* blank icon */ .ui-icon-none:after { background-image: none; background-color: transparent; border-radius: 0; padding: 1px; } /* Box Icon */ .ui-icon { position: relative; padding-left: 2em !important; } .ui-icon:after { background-color: transparent; position: absolute; content: ""; background-repeat: no-repeat; background-position: center center; width: 2em; height: 2em; left: 0; top: 50%; margin-top: -1em; } /* Title */ .ui-header .ui-title { margin: 0; padding-left: 2.5em; padding-right: 2.5em; text-shadow: none; } .ui-header .ui-title.ui-title-left { padding-left: 0.3em; text-align:left; } /* Button */ .ui-page .ui-btn { font-weight: 400; } .ui-page .ui-btn.ui-btn-icon-notext:not(.ui-input-clear) { font-size: 12.5px; padding: 0.48em; } .ui-page .ui-btn.ui-btn-icon-notext.min:not(.ui-input-clear) { padding: 0; } .ui-page .ui-btn:not(.ui-flipswitch-on):not(.ui-checkbox-on):not(.ui-checkbox-off):active { -o-transform: translate(1px, 1px); -ms-transform: translate(1px, 1px); -moz-transform: translate(1px, 1px); -webkit-transform: translate(1px, 1px); transform: translate(1px, 1px); } .ui-page .ui-flipswitch-active.ui-flipswitch, .ui-page .ui-btn-active { text-shadow: none !important; } .ui-btn.ui-btn-underline{ background: linear-gradient(transparent 90%, rgb(0,0,0) 10% ); } /* ChekcBox */ .ui-checkbox > label { border-width: 0; } /* Herder/Footer Button*/ .ui-header .ui-btn, .ui-footer .ui-btn { margin: 0; border-width: 0; } .ui-header .ui-btn:not(.ui-btn-icon-notext), .ui-footer .ui-btn:not(.ui-btn-icon-notext) { min-width: 5em; } .ui-header .ui-btn.ui-btn-icon-left, .ui-header .ui-btn.ui-btn-icon-right, .ui-footer .ui-btn.ui-btn-icon-left, .ui-footer .ui-btn.ui-btn-icon-right { min-width: 3em; } /* Header Button */ .ui-header > .ui-btn.ui-btn-left, .ui-header > .ui-btn.ui-btn-right, .ui-header > .ui-left-panel, .ui-header > .ui-right-panel { position: absolute; top: 0.4em; } .ui-header > .ui-left-panel, .ui-header > .ui-right-panel { white-space: nowrap; font-size: 12.5px; } .ui-header > .ui-btn.ui-btn-left, .ui-header > .ui-left-panel { left: 0.4em; } .ui-header > .ui-btn.ui-btn-right, .ui-header > .ui-right-panel { right: 0.4em; } /* Toolbar */ .ui-toolbar{ clear: both; } /* Toolbar Divider*/ .ui-toolbar .ui-toolbar-divider { display: inline-block; height: 100%; border-left: 1px solid #ccc; padding-left: 1px; } /* Toolbar LeftPanel/RightPanel */ .ui-toolbar > .ui-left-panel, .ui-toolbar > .ui-right-panel { margin: 0.3em; } .ui-toolbar > .ui-left-panel { float: left; } .ui-toolbar > .ui-right-panel { float: right; } /* content */ .ui-content.ui-nopadding { padding: 0; } .ui-content .ui-listview-inset { margin: 0; } /* Form */ .ui-toolbar.ui-form, .ui-content.ui-form { max-width: 800px; margin: 0 auto; } .ui-content.ui-form > ul.ui-listview{ margin: 0; } /* Field Contain Fix */ .ui-field-contain-fix > label { float: left; margin-top: 0.5em; } .ui-field-contain-fix.em3 > label { width: 3em; } .ui-field-contain-fix.em5 > label { width: 5em; } .ui-field-contain-fix.em7 > label { width: 7em; } .ui-field-contain-fix.em9 > label { width: 9em; } .ui-field-contain-fix > label + div { margin-top: -0.5em; margin-bottom: -0.5em; } .ui-field-contain-fix.em3 > label + div { padding-left: 3em; } .ui-field-contain-fix.em5 > label + div { padding-left: 5em; } .ui-field-contain-fix.em7 > label + div { padding-left: 7em; } .ui-field-contain-fix.em9 > label + div { padding-left: 9em; } /* Field Contain */ .ui-field-contain { border-bottom-width: 0; padding-top: 0.3em; padding-bottom: 0.3em; margin: 0; } .ui-field-contain .ui-flipswitch{ margin-top: 0.2em; } /* Field Contain 28em Over */ @media (min-width: 28em) { .ui-field-contain.em3 .ui-flipswitch, .ui-field-contain.em5 .ui-flipswitch, .ui-field-contain.em7 .ui-flipswitch, .ui-field-contain.em9 .ui-flipswitch { margin-top: 0.7em; } .ui-field-contain.em3 > label, .ui-field-contain.em5 > label, .ui-field-contain.em7 > label, .ui-field-contain.em9 > label { float: left !important; margin-right: 0 !important; margin-top: 0.5em !important; } .ui-field-contain.em3 > label { width: 3em !important; } .ui-field-contain.em5 > label { width: 5em !important; } .ui-field-contain.em7 > label { width: 7em !important; } .ui-field-contain.em9 > label { width: 9em !important; } .ui-field-contain.em3 > label + div, .ui-field-contain.em5 > label + div, .ui-field-contain.em7 > label + div, .ui-field-contain.em9 > label + div { width: 100% !important; margin-top: -0.5em !important; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .ui-field-contain.em3 > label + div { padding-left: 3em !important; } .ui-field-contain.em5 > label + div { padding-left: 5em !important; } .ui-field-contain.em7 > label + div { padding-left: 7em !important; } .ui-field-contain.em9 > label + div { margin-left: 9em !important; padding-right: 9em !important; } } /* Navbar */ .ui-navbar { clear: both; padding: 1px; } .ui-navbar > .ui-btn { margin: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin-right: -0.35em; width: 25%; } @media (max-width: 28em) { .ui-navbar > .ui-btn { width: 50%; } } .ui-page .ui-header > .ui-navbar > .ui-btn, .ui-page .ui-footer > .ui-navbar > .ui-btn { border-width: 0; } /* Listview */ ul.ui-listview{ padding-right: 1px; padding-bottom: 1px; } /* Listvew Split Button */ ul.ui-listview.split > li > a, ul.ui-listview.split > li.ui-li-static { padding-right: 3em; } ul.ui-listview.split .ui-btn.ui-btn-split { position: absolute; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 3em; height: 100%; right: 0; top: 0; bottom: 0; margin: 1px; border-radius: 0; border-width: 0 0 0 1px; padding: 0.3em; } /* Listview Thumb */ .ui-content ul.ui-listview:not(.ui-listview-inset) > li:first-child > a { border-top-width : 0; } ul.ui-listview > .ui-li-has-thumb > .ui-btn, ul.ui-listview > .ui-li-has-thumb.ui-li-static { padding-left: 10em; min-height: 8em; } ul.ui-listview > .ui-li-has-thumb > .ui-btn > img:first-child, ul.ui-listview > .ui-li-has-thumb.ui-li-static > img:first-child { max-width: 8em; max-height: 8em; left: 5em; /* parent padding-left/2 */ top: 4.7em; /* (max-widht + parent padding-top&bottom)/2 */ -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%,-50%); } ul.ui-listview > li.ui-li-divider{ text-shadow: none; } /* Flipswitch */ .ui-page div.ui-flipswitch{ font-weight: 400; } /* Input */ .ui-input-has-clear > input { border-right: 1px solid #ddd; }
コントローラーを追加します
/Controllers/HomeController.vb
/Controllers/MobileController.vb
Public Class HomeController Inherits System.Web.Mvc.Controller ' ' GET: /Home Function Index() As ActionResult Return View() End Function End Class Public Class MobileController Inherits System.Web.Mvc.Controller ' ' GET: /Mobile Function Index() As ActionResult Return View() End Function End Class
URLは/Home/Index.htmlと/Mobile/Index.htmlになります