Динамическая загрузка и управление несколькими областями контента - PullRequest
Новая
       1

Динамическая загрузка и управление несколькими областями контента

1 голос
/ 15 июня 2011

Я заранее извиняюсь, если выгляжу менее чем хорошо осведомленным здесь.Я дизайнер, пытающийся учиться.

Так что я действительно хочу сделать свой дизайн работоспособным, но я смотрел на различные методы (jquery, AJAX, лайтбокс), но я не уверен, что делатьиспользовать, чтобы соответствовать моему дизайну.Ссылка внизу, но вот основная проблема:

Для каждого элемента в портфеле у меня есть основная область изображения, некоторая копия и область выбора, которая имеет короткий заголовок для изображения и многое другое.Вы можете выбрать (представлены в виде чисел) и что я хочу сделать, чтобы иметь возможность изменить изображение и иметь короткие заголовок и номер изменения в области выбора, а также чтобы они отображались, когда вы наводите курсор на разныеномера, без перезагрузки страницы.(Я извиняюсь, что сделал этот звук слишком сложным, он намного более телеграфный, когда вы просматриваете фактическую страницу.) В идеале я хотел бы найти метод, который позволяет слегка / быстро исчезать и отображать изображение при изменениивместо резкого, резкого переключателя, но на глазу торчит леденец.

Если у кого-то есть идеи, куда направить меня в правильном направлении, я был бы очень признателен!Большое спасибо за вашу помощь!

http://personal.justgooddesign.net/draft/work.html

1 Ответ

0 голосов
/ 16 июня 2011

Ну, это можно сделать с помощью Ajax. довольно легко с помощью Jquery на самом деле. Я бы посоветовал вам разбить различные «разделы» на страницы.

Я имею в виду, например, что у вас будет страница print.html, содержащая только разметку для страницы печати, такую ​​же для веб-страницы и такую ​​же для страницы движения. (только разметка = "область основного изображения, некоторая копия и область выделения, которая имеет короткий заголовок для изображения", никаких тегов <html>, <head> или <body>, поскольку мы фактически создаем "сегменты") для вашей страницы.

Разметка контейнера главной страницы была бы почти такой же, за исключением того, что ваши текущие div с id content3 и content4 были бы пустыми (поскольку именно здесь мы вставили бы вашу страницу. Фактически вы можете даже передать эти 2 div'а вашим сегментам страницы и замените их на <div id='dynamic'></div> (лучше, так как тогда вы лучше контролируете размещение элементов в своих сегментах).

С этого момента я предполагаю, что у вас есть некоторые знания jquery, поэтому, если вы чего-то не понимаете, вы можете посмотреть или спросить.

каждая из ссылок (web / print / motion) может иметь класс load_segment и идентификатор web / print / motion. для удобства я бы назвал идентификаторы такими же, как и сегменты страницы, о которых я говорил выше (конечно, без расширения .html), чтобы автоматизировать некоторые работы.

поэтому, после того, как это будет сделано, включите скрипт jquery и сделайте что-то вроде следующего 

<script>
   $(function(){ // shorthand document.ready, ensures dom is loaded before starting

       $('.load_segment').click(function(){  // binds a click event handler to your links

           var page = $(this).attr("id") + '.html'  

           /* 
              here is why we named our id the same as our page segments, we auto generate 
              filenames, and thus only need to write this code once for all 3 links. you could 
              even add more later and as long as you have the corresponding html file segment 
              it will still work all the same 
           */

           $.get(page,function(segment){  
          // perform ajax request, fetch page, and then execute function 

               $("#dynamic").html(segment); 
              // the segment is inserted in the dynamic div created above.

           }); //end ajax request

        }); // end .load_segment click event

   }) // end of jquery document.ready
</script>

Обратите внимание, что для пронумерованных ссылок в каждом разделе вы также можете создавать встроенные средства извлечения ajax, такие как в приведенном выше разделе, внутри своих сегментов (нет необходимости снова включать jquery в каждый сегмент) и создавать ... хорошо "подсегменты" для каждого страницы, но это может стать немного сложным в долгосрочной перспективе, если страница будет расти.

...