Блог

Главная - Вопросы по программированию - Проблема с размещением вкладок и блоков jquery

Проблема с размещением вкладок и блоков jquery

#jquery #css #jquery-ui

#jquery #css #jquery-пользовательский интерфейс

Вопрос:

Я использовал вкладки jquery и accordion.Код выглядит следующим образом:

  <html>
 <head>
 <script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
 <script type="text/javascript" src="js/jquery-ui-1.8.12.custom.min.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.resizable.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/chat.js"></script>

<link type="stylesheet" href="css/jquery.ui.dialog.css"></link>


<link
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/redmond/jquery-   ui.css"
rel="stylesheet" type="text/css" />
 <link type="stylesheet" href="styles/items.css"></link>
 </head>
 <script>   

 //tabs
$(function() {
    $( "#content-area" ).tabs();
    $("#content-area").resizable();
    $("#content-area").draggable();
});


   //button
$(function() {
    $( "button, input:submit, a", ".demo" ).button();
    //$( "a", ".demo" ).click(function() { return false; });
});

   //resizable box
   $(function() {
    $( "#item-list" ).accordion({
        fillSpace: true
    });
});
$(function() {
    $( "#item-list" ).resizable({
        minHeight: 140,
        resize: function() {
            $( "#item" ).accordion( "resize" );
        }
    });
});
  </script>

  </head>
  <body>
   <div class="demo">

  <div class="toolbar">
  <input value="AddItems" type="submit">
  <input value="LogOut" type="submit">
  </div>
  <br></br>

  <div id=content-area">
<ul>
    <li><a href="#tabs-1">catalog</a></li>
</ul>
<div id="jw">
    <p>hii</p>
</div>
  </div>
  <br></br>
  <div id="item-list" class="ui-widget-content">
<div id="items">
<h3><a href="#">ItemsList</a></h3>
<div>
    <p>item list here</p>
</div>
 </div>
  </div>   
 </div>
 </body>
 </html>

Мой файл css имеет:

 #content-area {
float:left
width: 350px;
height: 450px;
padding: 0.5em
}

#item-list {
float:right
width: 150px;
height: 150px;
padding: 0.5em;
 }

#item h3 {
text-align: center;
margin: 0;
}

когда я запускаю вкладки приложения и поле аккордеона находятся одна под другой.Я хочу, чтобы вкладки были слева, а поле справа.Даже когда я указал это в css, позиционирование, а также размер не применяются

Комментарии:

1. этот код не отображает ничего похожего на то, что вы описываете jsfiddle.net/HUEJE . У вас есть URL, чтобы лучше это видеть?

2. @Naoise Golden- спасибо, потому что я не включил темы и файлы js .. обновил код ..:)

Ответ №1:

Не могли бы вы рассмотреть возможность использования чего-то предварительно написанного, такого как:http://nicolahibbert.com/demo/liteAccordion / или http://letmehaveblog.blogspot.com/2007/10/haccordion-simple-horizontal-accordion.html или http://www.marghoobsuleman.com/jQuery-common-accordion. Возможно, вы сможете найти больше, если выполните поиск по «horizontal accordion jquery».

Комментарии:

1. @nmc- Вкладки просто прекрасны… Единственное, что мне требуется, это наличие вкладок с левой стороны и блоков jquery с правой стороны.. Я пытался расположить его в css, но он применяется… Я хочу знать, как я могу расположить вышеуказанное

2. Может ли кто-нибудь, пожалуйста, указать, как я могу расположить вкладки слева от меня и поля справа…

3. @Sadhwika Chandramohan: Вы ищете что-то более похожее на это: code.google.com/p/jquery-vert-tabs ?

4. @nmc-Нет .. Мне нужны только горизонтальные вкладки.. Единственная проблема заключается в смещении всего этого влево .. Или изменении его размера, чтобы я мог разместить поля jquery справа от меня… Я попытался указать ширину и высоту, но вкладки занимают всю страницу… Я хочу поместить поле справа..