Я разработал веб-страницу, используя jquery и html, теперь я хочу преобразовать эту же веб-страницу в форму xhtml. Я пытался сделать это сам, но я не получаю желаемых результатов. Я публикую часть моего кода для вашего ссылка..
Кто-нибудь может сказать мне, где я иду не так?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:a4j="http://richfaces.org/a4j">
<h:head>
<title>Portal</title>
<meta http-equiv="content-type" content="text/xhtml; charset=UTF-8" />
<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
<script type="text/javascript" src="js/ui.core.js"></script>
<script type="text/javascript" src="js/ui.draggable.js"></script>
<script type="text/javascript" src="js/ui.dialog.js"></script>
<script type="text/javascript" src="js/jquery.bgiframe.js"></script>
<script type="text/javascript" src="js/jquery.ui.core.js"></script>
<script type="text/javascript" src="js/jquery.ui.widget.js"></script>
<script type="text/javascript" src="js/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="js/jquery.ui.sortable.js"></script>
<script type="text/javascript" src="js/jquery.ui.selectable.js"></script>
<script type="text/javascript" src="js/jquery.ui.tabs.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script type="text/javascript" src="js/zoombox.js"></script>
<script type="text/javascript" src="js/jquery.ui.button.js"></script>
<link rel="stylesheet" href="css/demos.css"/>
<link rel="stylesheet" href="css/ui.all.css" />
<link rel="stylesheet" href="css/ui.core.css" />
<link rel="stylesheet" href="css/jquery.ui.all.css"/>
<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.3.4.css" />
<link type="text/css" href="css/min.css" rel="stylesheet" />
<script>
$(document).ready(function () {
$('#switcher').themeswitcher();});
$("#btn").click(function () {
$("#settingsDialog").dialog("open");
});
});
$(function () {
$( "#selectable" ).selectable();
$(".selectable").bind('click', function() {
$(this).toggleClass('selected').toggleClass('ui-state-default');
var str=$(this).attr('id');
$("#p_"+str).toggle();
});
$( "#tabs" ).tabs();
$("#settingsDialog").dialog({
bgiframe: true,
autoOpen: false,
height: 600,
width:670,
modal: true,
buttons: {
Save: function () {
});
$(this).dialog("close");
},
Cancel: function () {
$(this).dialog("close")
}
},
close: function () {}
});
});
</script>
</h:head>
<h:body>
<div class="demo">
<div><label id="hdrlogo" class="ui-widget-header ui-corner-all"><label id="img"></label><button id="btn" class="ui-state-default ui-corner-all" title="Customize"><span class="ui-icon ui-icon-gear"></span></button>
</label></div>
<div id="settingsDialog" title="Settings">
<div id="tabs">
<ul>
<li><a href="#set1">Resize Pane</a></li>
<li><a href="#set2">Select Theme</a></li>
<li><a href="#set3">Add/Remove Widgets</a></li>
<li><a href="#set4">Select Layout</a></li>
</ul>
<div id="set1">
<input type="range" id="scroller" min="29" max="60" value="29" /><input type="text" id="size"/>
</div>
<div id="set2">
<div id="switcher" class="ui-state-default"></div>
</div>
<div id="set3">
<ol id="selectable">
<li class="selectable ui-state-default" id="0">Feeds</li>
<li class=" selectable ui-state-default" id="1">Pipelined Stages</li>
<li class="selectable ui-state-default" id="2">Qualifying</li>
</ol>
</div>
</div>
</div>
</div>
</h:body>
</html>