あえて逆にjQuery Mobileでやってみる - とりあえず書きなぐる

今にも消えそうなjQuery Mobileのネタを放出します
jQuery Mobileは2014年以降、すっかりお亡くなりになってるモバイル用と称されるアプリケーションフレームワークです
こいつをゴニョゴニョしてデスクトップ用に仕立ててみようというネタです

全て使い古された環境で、最新のものは何もありません。あしからず
開発環境は

VisualStudio2013
VB.Net
Asp.Net+Mvc4+Razor
Jquery2.1.3
Jquery Mobile1.4.5
TypeScript1.8.2

古っ＆マイノリティー

ページテンプレ

<!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")" />

  <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>

</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>Header</h1>
    </div>
    <div role="main" class="ui-content">
    </div>
    <div data-role="footer" data-position="fixed" data-fullscreen="false" data-tap-toggle="false">
      <h1>Footer</h1>
    </div>
  </div>
</body>
</html>

ヘッダ、フッタは位置固定
ヘッダ、フッタは隠れたりしない
フルスクリーンなし

CDNなら

  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"/>
  <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
  <script type="text/javascript" src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>