#javascript #jquery #css
#javascript #jquery #css
Вопрос:
Кажется, я не вижу, что изменилось в журналах изменений jquery ui
с версии 1.8.20 на то, что я сейчас использую 1.10.3
Я динамически извлекаю данные из базы данных, и она реплицирует вкладки по мере необходимости. Вкладки не работают, вместо этого они отображают все разделы, открытые на странице повсюду. Так что я думаю, что это как если бы скрыть css не работает. Вкладки также ничего не делают, когда вы нажимаете на них.
Он создает вкладки, а также отображает содержимое. как я уже сказал, ВСЕ разделы отображаются вместо того, чтобы быть скрытыми, если вы не выберете вкладку. Поэтому, в свою очередь, нажатие на вкладки ничего не дает, потому что все уже отображается.
Я думаю, что здесь есть скрипт, который нуждается в изменении:
<html style="height:100% !important;">
<head>
<title></title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!--Loading bootstrap css-->
<link type="text/css"
href="http://fonts.googleapis.com/css?family=Open Sans:400italic,700italic,800italic,400,700,800">
<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Oswald:400,700,300">
<link type="text/css" rel="stylesheet" href="vendors/font-awesome/css/font-awesome.min.css">
<link type="text/css" rel="stylesheet" href="vendors/bootstrap/css/bootstrap.min.css">
<!--LOADING SCRIPTS FOR PAGE-->
<link type="text/css" rel="stylesheet" href="vendors/dhtmlxGantt/dhtmlxgantt.css">
<!--Loading style vendors-->
<link type="text/css" rel="stylesheet" href="vendors/animate.css/animate.css">
<link type="text/css" rel="stylesheet" href="vendors/jquery-pace/pace.css">
<!--Loading style-->
<link type="text/css" rel="stylesheet" href="css/style.css">
<link type="text/css" rel="stylesheet" href="style-mango.css" id="theme-style">
<link type="text/css" rel="stylesheet" href="css/themes/default.css" id="color-style">
<link type="text/css" rel="stylesheet" href="css/vendors.css">
<link type="text/css" rel="stylesheet" href="css/style-responsive.css">
<link type="text/css" href="vendors/jquery-ui-1.10.3.custom/css/ui-lightness/jquery-ui-1.10.3.custom.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<link rel="shortcut icon" href="images/icons/favicon.ico">
</head>
<!--BEGIN CONTENT-->
<div class="page-content" style="min-height:1400px;">
<div class="col-md-9" id="nfw_body_body" style="height:100%;">
<style>
div.ui-tabs { width:100%; height:80%; min-height:700px; margin:5px; float:left; border:none; }
#tabs .ui-widget-content { border:none; padding:0px; margin:0px; background-color:#fff !important;" }
}
</style>
<script language="javascript">
var dyna_tabs = {
tabs: null,
init: function (id) {
var tabs = $('<div></div>').append('<div id="' id '"></div>');
$('#nfw_body_body').append(tabs);
var list = $('<ul></ul').append('<li><a href="#"></a></li>');
tabs.append(list);
tabs.tabs();
// remove the dummy tab
tabs.tabs('remove', 0);
tabs.hide();
this.tabs = tabs;
},
add: function (tab_id, tab_name, tab_content) {
if (this.tabs != null) {
if (this.tabs.css('display') == 'none') {
this.tabs.show();
}
var data = $('<div id="' tab_id '"></div>').append(tab_content);
this.tabs.append(data).tabs('add', '#' tab_id, tab_name);
this.tabs.tabs('beforeActivate', '#' 1);
} else {
alert('Tabs not initialized!');
}
}
};
$(document).ready(function() {
dyna_tabs.init('mytabs');
dyna_tabs.add(
'tabs-' 1,
' User Details',
'<div id="tabs-1" ></div>'
);
$('#tabs-1').load("content/change_user_details.php?user_id=");
dyna_tabs.add(
'tabs-' 2,
'Pest Control',
'<div id="tabs-2"><h2>Pest Control</h2></div>'
);
$('#tabs-' 2).load("content/change_service_details.php?service_id=");
2
dyna_tabs.add(
'tabs-' 3,
'House Cleaning',
'<div id="tabs-3"><h2>House Cleaning</h2></div>'
);
$('#tabs-' 3).load("content/change_service_details.php?service_id=);
3
});
</script>
</div>
<!--END CONTENT-->
</div>
<!--END CONTENT-->
<!--START FOOTER -->
<script src="js/jquery-migrate-1.2.1.min.js"></script>
<!--loading bootstrap js-->
<script src="vendors/bootstrap/js/bootstrap.min.js"></script>
<script src="vendors/bootstrap-hover-dropdown/bootstrap-hover-dropdown.js"></script>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<script src="vendors/metisMenu/jquery.metisMenu.js"></script>
<script src="vendors/slimScroll/jquery.slimscroll.js"></script>
<script src="vendors/jquery-cookie/jquery.cookie.js"></script>
<script src="js/jquery.menu.js"></script>
<script src="vendors/jquery-pace/pace.min.js"></script>
<!--LOADING SCRIPTS FOR PAGE-->
<!--CORE JAVASCRIPT-->
<script src="js/main.js"></script>
<script src="js/holder.js"></script>
<!--END FOOTER-- >
Комментарии:
1. Как выглядит скрипт после того, как PHP отобразил страницу клиенту?
2. Это только я или что? Я вижу jQUI CSS, но нет jQUI JS.
3. я только что отредактировал его, извините, что получилось странно. теперь это намного лучший вид.
4. Кто-нибудь может увидеть проблему? Я проверил журналы изменений и заблудился
Ответ №1:
Это было решено как несколько версий и вызовов jquery. Можно вызвать только один.