Можно ли даже расширить фон (горизонтальный) списка с помощью Ajax? - PullRequest
Новая
       15

Можно ли даже расширить фон (горизонтальный) списка с помощью Ajax?

0 голосов
/ 13 января 2010

У меня есть список с list-style-none, который должен иметь возможность добавлять новые элементы к себе через Ajax и соответствующим образом расширять фон, когда это происходит. Добавление через Ajax легко, но каждое решение, которое я пробую в качестве фона, не дает результата. Я не знаю, возможно ли это вообще; это? Я использую сетку, подобную этой:

http://jqueryui.com/demos/sortable/#display-grid

И WebKit, и Firebug показывают мне тощие пустые столбики, когда я наводю указатель мыши на теги div и / или тег ul. Похоже, что в тот момент, когда вы освобождаете список с помощью list-style-none и float: везде, где вы отказываетесь от управления его фоном. Но это не может быть правдой.

Ответы [ 4 ]

2 голосов
/ 14 января 2010

Это то, с чем я сталкивался несколько раз. Проблема в том, что плавающие элементы не являются частью обычной блочной модели, поэтому они не заставляют свои родительские элементы расширяться , если их родительские элементы также не плавают. Так что, если возможно, плавающий ul или содержащий div.

Edit: См. quirksmode для другого обходного пути только для CSS.

1 голос
/ 14 января 2010

Вам необходимо явно установить ширину и высоту для области.

Проверьте эту ссылку для горизонтальной прокрутки: http://valums.com/scroll-menu-jquery/

Вот скрипт: 

$(function(){
  //Get our elements for faster access and set overlay width
  var div = $('div.sc_menu'),
               ul = $('ul.sc_menu'),
               // unordered list's left margin
               ulPadding = 15;

  //Get menu width
  var divWidth = div.width();

  //Remove scrollbars
  div.css({overflow: 'hidden'});

  //Find last image container
  var lastLi = ul.find('li:last-child');

  //When user move mouse over menu
  div.mousemove(function(e){

    //As images are loaded ul width increases,
    //so we recalculate it each time
    var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding;

    var left = (e.pageX - div.offset().left) * (ulWidth-divWidth) / divWidth;
    div.scrollLeft(left);
  });
});

Как правило, вам нужно обновить ulWidth и divWidth при добавлении нового элемента.

Затем просто установите фоновое изображение так, чтобы оно повторялось по горизонтали, и вы должны установить. 

ul.sc_menu {background:transparent url(image.png) repeat scroll 0 0;height:100px}

Примечание: вам нужно будет установить высоту; в противном случае вы не увидите фон, потому что li плавают.

1 голос
/ 13 января 2010

Не могли бы вы предоставить пример кода? Кроме того, почему в списке отображается: ничего не установлено?

Например, должно быть так просто:

HTML: 

<ul id="dest"></ul>

JS: 

// Simplified example, most likely wrapped in $.ajax
// This is the AJAX response function  
function(data, response) {
    var items = json.parse(data);
    $.each(items, function() {
         // Assumes item has a name property
         $('#dest').append($('<li>' + this.name + '</li>'));     
    });
}

Должно быть так просто. Вам не нужно изначально скрывать список, поскольку вы можете просто добавить элементы списка и соответствующим образом обновить отображение.

Надеюсь, это поможет.

0 голосов
/ 14 января 2010

Для того, чтобы иметь дело с элементом float, может быть, вы должны знать, что это за характеристика, ха-ха и как с этим бороться.Смотрите ссылки ниже, здесь также есть демоверсия, чтобы вы могли понять концепцию:

  1. http://www.smashingmagazine.com/2009/10/19/the-mystery-of-css-float-property/
  2. http://www.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/
  3. http://aloestudios.com/2009/12/goodbye-overflow-clearing-hack/и http://aloestudios.com/misc/overflow/
...