Я пытаюсь использовать jquery mobile, как описано в Нижняя панель навигации в jQuery mobile выглядит как панель навигации iPhone, возможно? .
Вот мой код, я попытался добавить весь код в один файл:
<html>
<head>
<style type="text/css">
.nav-glyphish-example .ui-btn .ui-btn-inner {
padding-top: 40px !important;
}
.nav-glyphish-example .ui-btn .ui-icon {
width: 45px!important;
height: 35px!important;
margin-left: -24px !important;
box-shadow: none!important;
-moz-box-shadow: none!important;
-webkit-box-shadow: none!important;
-webkit-border-radius: none !important;
border-radius: none !important;
}
#favorite .ui-icon {
background-image: url(http://glyphish.com/images/demo.png);
background-position: -345px -112px;
background-repeat: no-repeat;
}
#recent .ui-icon {
background-image: url(http://glyphish.com/images/demo.png);
background-position: -9px -61px;
background-repeat: no-repeat;
}
#contacts .ui-icon {
background-image: url(http://glyphish.com/images/demo.png);
background-position: -9px -540px;
background-repeat: no-repeat;
}
#keypad .ui-icon {
background-image: url(http://glyphish.com/images/demo.png);
background-position: -9px -783px;
background-repeat: no-repeat;
}
#voicemail .ui-icon {
background-image: url(http://glyphish.com/images/demo.png);
background-position: -394px -733px;
background-repeat: no-repeat;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="content">
<div data-role="footer" class="nav-glyphish-example">
<div data-role="navbar" class="nav-glyphish-example" data-grid="d">
<ul>
<li><a href="#" id="favorite" data-icon="custom">Favorite</a></li>
<li><a href="#" id="recent" data-icon="custom">Recent</a></li>
<li><a href="#" id="contacts" data-icon="custom">Contacts</a></li>
<li><a href="#" id="keypad" data-icon="custom">Keypad</a></li>
<li><a href="#" id="voicemail" data-icon="custom">Voicemail</a></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
Но вывод не отображается правильно:
