LINUX.ORG.RU
решено Форум — Web-development  

[js] сделать вид динамической подгрузки

 


0

2

Понимаю, что не туда зашёл, но всё равно прошу помочь с такой траблой: хочу написать простенькую html-страничку. С кнопочками (1, 2, 3, 4) и какой-то информацией для каждой из них (форматированной в HTML).
Вот зашёл пользователь со включёнными скриптами: 

 ---------------------------
 |  ---   ---   ---   ---  |
 | | 1 | | 2 | | 3 | | 4 | |
 |  ---   ---   ---   ---  |
 |                         |
 | Lorem ipsum über alles. |
 ---------------------------
Вот он нажал первую кнопку: 
 ---------------------------
 |  ---   ---   ---   ---  |
 | | 1 | | 2 | | 3 | | 4 | |
 |  ---   ---   ---   ---  |
 | - Section 1 -           |
 | --------------          |
 | | table | HN |     ---  |
 | --------------    |img| |
 | | porn  | no |     ---  |
 | --------------          |
 | | money | 10 |          |
 | --------------          |
 |                         |
 | Lorem ipsum über alles. |
 ---------------------------
А теперь третью: 
 ---------------------------
 |  ---   ---   ---   ---  |
 | | 1 | | 2 | | 3 | | 4 | |
 |  ---   ---   ---   ---  |
 |  - Section 3 -          |
 |    -----------------    |
 |    |               |    |
 |    |               |    |
 |    |               |    |
 |    | bigimage.jpg  |    |
 |    |               |    |
 |    |               |    |
 |    -----------------    |
 |                         |
 | Lorem ipsum über alles. |
 ---------------------------
Т.е. с нажатием на новую кнопку, текст, показанный предыдущей кнопкой пропадает и появляется текст, соответствующий нужной кнопке. Надеюсь, объяснил наглядно. НО: весь размеченный текст для каждой кнопки хранится всё в том же html-файле, извне ничего не подгружается.
А если зайдёт пользователь с отключённым js, то увидит он такое: 
 ---------------------------
 |  ---   ---   ---   ---  |
 | | 1 | | 2 | | 3 | | 4 | |
 |  ---   ---   ---   ---  |
 | - Section 1 -           |
 | --------------          |
 | | table | HN |     ---  |
 | --------------    |img| |
 | | porn  | no |     ---  |
 | --------------          |
 | | money | 10 |          |
 | --------------          |
 |                         |
 | - Section 2 -           |
 |        STOP SOPA!       |
 |                         |
 | - Section 3 -           |
 |    -----------------    |
 |    |               |    |
 |    |               |    |
 |    |               |    |
 |    | bigimage.jpg  |    |
 |    |               |    |
 |    |               |    |
 |    -----------------    |
 |                         |
 | - Section 4 -           |
 | Nothing here :(         |
 |                         |
 | Lorem ipsum über alles. |
 ---------------------------
т.е. всё и сразу (т.к. не работает этот самый скрывающий скрипт).
Теперь сразу вопрос: Возможно ли такое? Целесообразно ли такое? Как это сделать? Много кто сидит с отключёнными скриптами?

★★★★★

Последнее исправление: CYB3R (всего исправлений: 1)

 ← 1 2 →

Возможно ли такое?

да

Целесообразно ли такое?

нет

Как это сделать?

rtfm

Много кто сидит с отключёнными скриптами?

я

lazyklimm ★★★★★
()

Много кто сидит с отключёнными скриптами?

Едва ли один процент наберется.

anonymous
()

Ты хотел изобрести табы?

Много кто сидит с отключёнными скриптами?

1% и то на лоре :)

xpahos ★★★★★
()

предлагаю сделать не скрывающий, а показывающий скрипт. т.е. в теге <noscript> писать что-нибудь типа «Включите Javascript или проследуйте в пешее эротическое»

anonymous
()
Ответ на: комментарий от lazyklimm

Целесообразно ли такое?

нет

Аргументы где?

CYB3R ★★★★★
() автор топика
Ответ на: комментарий от CYB3R

Можно сделать на чистом css3, но, удивительно, это будет менее переносимое решение, чем jquery или что-то подобное.

note173 ★★★★★
()
Ответ на: комментарий от CYB3R

Пользуйся. Если что надо подсказать пиши demmsnt at gmail.com тока я тут пока безработный и читаю почту в будке самоубийств раз в неделю (день).

demmsnt ★
()
Ответ на: комментарий от CYB3R

так, как ты и написал — вывалятся вверху ссылки/кнопки, под ними контент по слоям

(или как ты там css-иной раскрасишь :)

P.S. Пользователь NoScript

loginame
()

Много кто сидит с отключёнными скриптами?

Я бы задал вопрос по другому, ты готов забить на тех, кто выключает JavaScript (я бы вообще блокировал по IP прямо на файрволе тех, кто зашел с установленным NoScript). Хитрость в том, что создавая интерфейс удобный одним и неудобный другим, ты привлекаешь к себе тех, кто тебе нужен и отталкиваешь кто не нужен. Тебе нужны параноики? Не нужно делать проект для всех и прогибаться под всех (прогибать других тоже не надо), нужно делать проект для тех, кто ТЕБЕ нужен, с кем ты хочешь работать.

Прежде, чем реализовывать такое, пойми, что это очень неудобное для поисковиков решение. Если тебе нужно, чтобы страница находилась поисковиком, то так делать не надо. Поясню - на кнопе 3 у тебя висит описание, как приготовить курицу в винном соусе, а на кнопке 1 как пожарить яичницу. Поисковик, проиндексирует все содержимое страницы (и про курицу и про яичницу), и пользователь, вбив в поиск про курицу - найдет твою страницу, но ссылка для страницы будет одна (для содержимого всех четырех кнопок) и нажав в поиске результаты про курицу чувак что увидит?

Если с поисковиком заморачиваться не нужно (страница не индексируемая), то такое легко реализовать на JQuery (на простом JavaScript тоже можно написать, но быстрее разобраться с JQuery). Пишешь страницу как есть, при загрузке страницы скриптом закрываешь все блоки, кроме кнопок, а при нажатии на кнопку открываешь только нужный блок. У человека без JS блоки при открытии страницы не закроются (т.е. он увидит все, как ты и хотел).

http://api.jquery.com/category/effects/basics/

anonymous
()
Ответ на: комментарий от anonymous

Прежде, чем реализовывать такое, пойми, что это очень неудобное для поисковиков решение. Если тебе нужно, чтобы страница находилась поисковиком, то так делать не надо.

Для решения придумали HTML History API, и есть js для его эмуляции в старых браузерах. Впрочем, нужно будет городить много сервер-сайда на пустом месте.

anonymous
()
Ответ на: комментарий от anonymous

Для решения придумали HTML History API, и есть js для его эмуляции в старых браузерах. Впрочем, нужно будет городить много сервер-сайда на пустом месте.

все зависит от того как у тебя все изначально спланировано. Может там бэкенд генирирует XML/JSON, а фронтенд просто накладывает шаблон. Хотя у топикпастера вряд ли такое.

xpahos ★★★★★
()
Ответ на: комментарий от zili

Спасибо, буду использовать именно этот вариант.

CYB3R ★★★★★
() автор топика
Ответ на: комментарий от zili

Хотя там вот эта беда:

У такого решения есть одна проблема: если на странице есть вертикальная полоса прокрутки, а верхняя граница таба находится ниже верхней границы экрана, то при нажатии на закладку таба страница промотается так, что таб окажется наверху — точно так же, как при нажатии на якорь страница проматывается до содержимого, указанного в адресе после хеша.

CYB3R ★★★★★
() автор топика
Ответ на: комментарий от demmsnt

На фотке не мой мот. Он стоит 700 т.р. Уже продали. Хороши аппарат.

вот видишь, смог бы даже не только инет оплатить, но и еды купить.

tazhate ★★★★★
()
Ответ на: комментарий от demmsnt

Зациклило тебя чтоли? Как я могу продать то чего нет?

да, мы входим в рекурсию. как нет? есть же. точно есть. поищи в гараже.

tazhate ★★★★★
()
Ответ на: комментарий от tazhate

Вот ведь блин. У меня нет гаража. У меня единственный мот это скутер Keeway за который я еще должен 30т.р.

Я с удовольствием прокатился на BMW k1200 который на фотке BMW 1000rr, на Suzuki Bandit 600, На Honda Hornet, на Honda CRF450, на Suzuki DRZ 450. На Yamaha WR250x и что, то вроде еще было.

Но Yamaha WR250 стоит 280 т.р. А я получаю 30 т.р. в МЕСЯЦ. И я при всем своем желании не могу себе позволить купить сей пепелац! Хочу, но не могу! А да еще был Djebel и Ковровец уродец калька с хонды.

demmsnt ★
()
Ответ на: комментарий от tazhate

Ага знаю я их. На испытательный срок 50% потом это 40 белая. А на руки - 13% и ту ты не получишь ибо вылетишь. Но думаю напишу для интереса.

Если не так, то с меня штуки три отстегну 100% просто за наводку. А может и больше.

demmsnt ★
()
Ответ на: комментарий от demmsnt

Если не так, то с меня штуки три отстегну 100% просто за наводку. А может и больше.

давай просто дурацкую аватарку уберешь, этого достаточно.

tazhate ★★★★★
()
Ответ на: комментарий от tazhate

В смысле? Мот чтоли? Да могу и убрать. В МСК не хочу. Тоесть судя по всему надо, но не хочу. А мот был хороший. Там квикшифтер и т.п. А что тебе в нем не нравится? Мне приятно, я вспоминаю и чувствую типа въехал в тред.

demmsnt ★
()
Ответ на: комментарий от demmsnt

http://hh.ru/vacancy/5357164?query=системный администратор

вот эти ребята наверняка помогают с переездом тоже. в общем в родном городе тебе точно ловить нечего. а если пойдешь в фирму, которая из usa, то и до полного переезда недолго.

tazhate ★★★★★
()
Ответ на: комментарий от tazhate

Да и для МСК ЗП маленькие. У нас тут и 150 есть. Но не у программистов. Хотя может и повезет. У нас квартира стоит 20, у вас 30. И так далее... ЗП надо в два раза увеличить. Хотя я возможно и не прав.

demmsnt ★
()
Ответ на: комментарий от tazhate

У меня почти готовая виза в Австралию. Не хватает 150 т.р. Там нужны программисты. А вот денежки тут о как текут.

demmsnt ★
()
Ответ на: комментарий от tazhate

Спасибо. Напиши свои ЯД я из чисто человеческого чувства тебе завтра 100р на пиво закину. Я тут хоть и безработный но могу пока заработать. А поддержка дорого стоит... Спасибо.

А чем тебе аватар не понравился?

demmsnt ★
()
Ответ на: комментарий от demmsnt

Руби не хочу. Хороший язык, но не моё.

там не только руби, там и по скриптовым много, аля js.

tazhate ★★★★★
()
Ответ на: комментарий от demmsnt

Напиши свои ЯД я из чисто человеческого чувства тебе завтра 100р на пиво закину

забей, аватарку лучше бэ.

А чем тебе аватар не понравился?

ужасный он. дорогой мотоцикл, ты и всё это непонятно зачем. парни мы тут простые, линуксовые, мотоциклы нам не нужны.

tazhate ★★★★★
()
Ответ на: комментарий от demmsnt

написать можно в demmsnt at gmail.com

лор удобнее %) в общем, я дал тебе вектор - главное крупная компания + то, в чем ты шаришь. сядь да разошли резюме нормально. но я бы на твоем месте точно переехал бы.

tazhate ★★★★★
()
Ответ на: комментарий от tazhate

ужасный он. дорогой мотоцикл, ты и всё это непонятно зачем. парни мы тут простые, линуксовые, мотоциклы нам не нужны.

И кстати открою тебе секрет жудко неудобный в вождении. Но есть свои плюсы.

А мотоциклы нужны. Ну ладно щас.

demmsnt ★
()
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.
 ← 1 2 →
Web-development