Я не уверен, ожидаете ли вы, что кто-нибудь даст вам полное руководство с включенным исходным кодом? :) Вы , вероятно, должны покопаться вокруг себя, поскольку конкретный ответ на это может означать написать несколько страниц:)
Как ты можешь копаться?
Инструмент для такой работы: Firebug (IMO).
С большими подобными задачами имеет смысл попытаться разделить его на более мелкие части.
Допустим, вы идете на виджет, как всплывающее окно профиля пользователя на SO.
- вам нужно немного HTML для отображения во всплывающем окне: щелкните правой кнопкой мыши по любому элементу HTML во всплывающем окне и выберите пункт меню «осмотреть элемент». Это приведет вас к вкладке HTML в Firebug. Это позволяет выяснить, как структурирован HTML
- вам нужно немного CSS для стилизации этого всплывающего окна: когда вы просматриваете структуру html, вы, возможно, уже заметили, что справа от нее находится CSS, который применяется к активному элементу
- вы можете использовать некоторые анимационные эффекты: для этого вы можете использовать jquery. Посмотрите здесь , чтобы узнать больше о том, какие эффекты доступны и как они могут быть вызваны. Fading используется во всплывающем профиле на SO.
- тогда вы могли бы задать себе вопрос, откуда ТАК получить эту HTML-структуру, верно? Чтобы узнать больше о том, какие серверные звонки сделаны, вы можете использовать вкладку «NET» в Firebug. (Когда вы наводите курсор на свое имя пользователя (только в первый раз?), Тогда вы должны заметить, что был сделан вызов на что-то вроде:
http://stackoverflow.com/users/profile-link-stats?_=someLongNumberHere
В Firebug вы можете проверить запрос и ответ. Вы должны заметить, что ответ является некой HTML-структурой. Эта структура HTML затем вставляется в DOM.
Ооооооооооочень склеить все это вместе:
- пользователь наводит курсор на свое имя пользователя
- зависание запускает вызов сервера (см. Шаг 4): используйте jquery hover , чтобы присоединить обработчик к пользовательской ссылке. (последующие зависания не вызывают этот серверный вызов, поэтому необходимо проверить, загружено ли уже всплывающее окно с этим профилем)
- когда серверный вызов успешно возвращается (см. jquery get ), возвращаемый html вставляется в DOM и запускается эффект fadeIn.
- кажется, что мышка используется для исчезновения всплывающего окна
Надеюсь, это ответ, который вы искали. Это заняло у меня некоторое время;)