jQueryMobileSkin

jQueryMobile.ascx

<%@ Control language="C#" AutoEventWireup="true" Explicit="True" Inherits="DotNetNuke.UI.Skins.Skin" %>
<%@ Register TagPrefix="dnn" TagName="LANGUAGE" Src="~/Admin/Skins/Language.ascx" %>
<%@ Register TagPrefix="dnn" TagName="LOGO" Src="~/Admin/Skins/Logo.ascx" %>
<%@ Register TagPrefix="dnn" TagName="SEARCH" Src="~/Admin/Skins/Search.ascx" %>
<%@ Register TagPrefix="dnn" TagName="NAV" Src="~/Admin/Skins/Nav.ascx" %>
<%@ Register TagPrefix="dnn" TagName="TEXT" Src="~/Admin/Skins/Text.ascx" %>
<%@ Register TagPrefix="dnn" TagName="BREADCRUMB" Src="~/Admin/Skins/BreadCrumb.ascx" %>
<%@ Register TagPrefix="dnn" TagName="USER" Src="~/Admin/Skins/User.ascx" %>
<%@ Register TagPrefix="dnn" TagName="LOGIN" Src="~/Admin/Skins/Login.ascx" %>
<%@ Register TagPrefix="dnn" TagName="LEFTMENU" Src="~/Admin/Skins/LeftMenu.ascx" %>
<%@ Register TagPrefix="dnn" TagName="LINKS" Src="~/Admin/Skins/Links.ascx" %>
<%@ Register TagPrefix="dnn" TagName="PRIVACY" Src="~/Admin/Skins/Privacy.ascx" %>
<%@ Register TagPrefix="dnn" TagName="TERMS" Src="~/Admin/Skins/Terms.ascx" %>
<%@ Register TagPrefix="dnn" TagName="COPYRIGHT" Src="~/Admin/Skins/Copyright.ascx" %>
<%@ Register TagPrefix="dnn" TagName="STYLES" Src="~/Admin/Skins/Styles.ascx" %>
<%@ Register TagPrefix="dnn" Namespace="DotNetNuke.Web.DDRMenu.TemplateEngine" Assembly="DotNetNuke.Web.DDRMenu" %>
<%@ Register TagPrefix="dnn" TagName="MENU" src="~/DesktopModules/DDRMenu/Menu.ascx" %>
<%@ Register TagPrefix="dnn" TagName="CONTROLPANEL" Src="~/Admin/Skins/controlpanel.ascx" %>
<%@ Register TagPrefix="dnn" Namespace="DotNetNuke.Web.Client.ClientResourceManagement" Assembly="DotNetNuke.Web.Client" %>

<dnn:DnnJsInclude runat="server" FilePath="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js" forceprovider="DnnPageHeaderProvider" Priority="6" />
<dnn:DnnCssInclude runat="server" FilePath="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" forceprovider="DnnPageHeaderProvider" Priority="1" />
<dnn:DnnCssInclude runat="server" FilePath="stylesheets/mobile.css" forceprovider="DnnPageHeaderProvider" Priority="3" />

<script runat="server">

protected void Page_Load(object sender, System.EventArgs e)
{
	WriteMeta("viewport", "width=device-width, initial-scale=1", true);
}

public void WriteMeta(string sName, string sContent, bool addTop)
{
	HtmlMeta oMeta = new HtmlMeta();
	oMeta.Name = sName;
	oMeta.Content = sContent;
	if (addTop == true) {
		this.Page.Header.Controls.AddAt(1,oMeta);
	} else {
		this.Page.Header.Controls.Add(oMeta);
	}
}
</script>


<style>
.ui-page { display:static!important;}
.ui-content {overflow-x: visible;}
<%
/* this little fix allows for room for our toolbar when logged in. adjust the height for your own preferences. I know there are better ways to do this, that will come later*/
DotNetNuke.Entities.Users.UserInfo loggedInUser= DotNetNuke.Entities.Users.UserController.GetCurrentUserInfo();
            if (loggedInUser.UserID > 0)
            {
		Response.Write(".ui-mobile [data-role=\"page\"] {top:70px!important}");
	    }
%>
</style>

<div id="ControlPanelOutter">
    <dnn:CONTROLPANEL runat="server" id="cp"  IsDockable="True" />
</div>

<div data-role="page" data-theme="b" style="display:static!important;">
		<div data-role="header">
			<h1><dnn:LOGO runat="server" id="logo" /></h1>
		</div>
    <div data-role="content">
        <dnn:MENU MenuStyle="jQueryMobile" runat="server" NodeSelector="CurrentChildren" ></dnn:MENU>
        <div id="ContentPane" runat="server" style="margin-top:30px;"></div>
    </div>
</div>

jQueryMobile.xslt

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
	<xsl:output method="html"/>
	<xsl:template match="/*">
		<xsl:apply-templates select="root" />
	</xsl:template>
	<xsl:template match="root">
    <nav>
		  <ul data-role="listview">
			  <xsl:apply-templates select="node" />
		  </ul>
    </nav>
	</xsl:template>
	<xsl:template match="node">
		<li>
			<xsl:attribute name="class">
				<xsl:if test="@first = 1">first</xsl:if>
				<xsl:if test="@last = 1"><xsl:text>&#32;</xsl:text>last</xsl:if>
				<xsl:if test="@selected = 1"><xsl:text>&#32;</xsl:text>selected</xsl:if>
			</xsl:attribute>
			<xsl:choose>
				<xsl:when test="@enabled = 1">
					<a href="{@url}">
						<xsl:value-of select="@text" />
					</a>
				</xsl:when>
				<xsl:otherwise>
					<xsl:value-of select="@text" />
				</xsl:otherwise>
			</xsl:choose>
			<xsl:if test="node">
				<ul>
					<xsl:apply-templates select="node" />
				</ul>
			</xsl:if>
		</li>
	</xsl:template>
</xsl:stylesheet>

mobile.css

/* these were temporary hacks to the jquerymobile css, while keeping our css separate. hope to eliminate all of these at some point */
body{margin:15px 55px}
.ui-bar-a{background:white !important}
.ui-bar-a .ui-btn-up-a{background:white !important;border:none !important}
#dnn_ContentPane div{font-size:16px}