Какво е най-бутона в какви случаи най-добре е да се използва
Когато на страницата на сайта, са голям брой потребителското съдържание запознаят с него и пропиля страница до определен момент или на дъното, че често започва да преминете на върха, за да видите връзките за навигация в горната част на страницата и \ или да извърши някакво действие.
Има един много прост начин да се предостави на потребителя функционална. Този метод не изисква участието на всички библиотеки или допълнителни скриптове и направи изключително с HTML и ако е необходимо, с активирането на CSS, чрез създаване на общи вътрешни връзки.
За да направите това, където и да е, в долната част на страницата си, просто добавете следния код:
Както можете да видите даден линк .topbutton класа на използване, които, като се използват CSS, можете да направите някоя връзка, желания външен вид, например да видите същия бутон.
CSS примерен код:
- Превъртането няма да бъде гладка, и след натискане на потребителя ще се пренасочат незабавно в началото на страницата.
Предимства на този вид бутон:
+ За да работите с бутоните не е нужно да използвате скриптове и голям от обема на библиотеката. И това е един много голям плюс.
2. бутона в горната част с JQuery
Бутон реализира просто. За нейното функциониране ще трябва JQuery библиотека, малък скрипт, съдържащ JQuery събития, определени стилове и DIV таг, който съдържа текста и необходимите документи за самоличност.
Бутонът работи в браузъри, тъй като версии на Firefox 3.0.10 - 3.6.13, Internet Explorer 7 и 8, Google Chrome, Jquery 1.4.3. За съжаление, бутонът не работи в IE 6, но имате нужда от него :)?
следния код трябва да поставите преди етикета на всички страници от сайта ви. Ако библиотеката JQuery е свързан с вашия сайт, не е нужно да се добави на първа линия.
За да се даде един красив външен вид бутон трябва да добавите следните стилове. Тяхната най-добре да добавите към файла на вашия сайт стил.
3. UItoTop JQuery плъгин
Обикновено Plugin прави гладки бутони външен вид и гладко скролиране нагоре, когато се натисне. За да използвате приставката на вашия сайт не е необходимо да се добавят някои или тагове в HTML маркирането на страницата. Достатъчно, за да се свържете с всички необходими плъгини файлове и той ще работи.
Разархивирайте сваления архив с източника, в който дадена папка на вашия сайт. За да активирате плъгина, това е достатъчно, за да се свърже три от действащите JS файлове. За да им се даде възможност, преди затварянето
добавете следния път на файла:
Начинът, по който води до правилните файлове в съответствие с директорията, в която се намират плъгин файловете.
Моля, имайте предвид, че ако преди това сте свързани към вашия сайт JQuery библиотека, след което добавете следния код не е необходимо:
Следващата стъпка е да добавите CSS стилове, без бутон не работи. Свържете ги по два начина.
Първият метод е да добавите всички страници на сайта си, между маркерите
препратка към файла с CSS стил:
Не забравяйте да промените пътя до файла.
Вторият метод е да копирате цялото съдържание на ui.totop.css файл и го поставете в CSS файлове стилове на сайта си. Вторият метод е по-рационално, защото тя не се нуждае от допълнителни свързващи файлове.
4. Превъртете бутоните нагоре и надолу по JQuery
Архивът на изтегляне ще съдържа всички необходими файлове за операционните бутони. Това CSS, JS файлове и изображения които аз смятам за стрелеца.
Първо трябва да поставите бутони HTML код за обаждания на всички страници. За да направите това, поставете текста надолу по веригата, непосредствено преди маркера .
Път, водещ до файла JS трябва да бъде заменен с вашите собствени.
Първият ред на код свързва JQuery библиотеката, така че ако имате по-рано той е бил свързан към вашия сайт, той трябва да бъде премахнат.
По-долу е връзката на друг JS файл и кода съдържа специфични особености, които трябва да бъдат разгледани по-подробно. Защото за помощта, от която могат да се променят някои параметри на бутоните. Това е кодът с обяснение:
За да добавите CSS просто се свържете с файл на страниците на сайта style.css в архива с източник:
Но най-добрият вариант би бил да се копира стила на файла и го поставете във вашия сайт стилове файл.
5. Smooth Scrolling бутон, като използвате JQuery
Друг вариант на организация плавно превъртане на съдържанието на страницата отдолу нагоре, като се използва JQuery. Бътън се намира в долния десен ъгъл на страницата, и се появява само ако малко proskrolit надолу в страницата. Всички осъществява с помощта на една малка част от CSS и JS код, както и една малка картина се използва като бутон.
Харесва ми този бутон, така че да не се нуждае от създаването на голям брой скриптове в същото време тя има добри ефекти.
Сега да видим какво трябва да се направи за да се свържете бутона на сайта
Вие ще трябва снимка на бутона самата може да има такива, и да го използвате, тук: icon_top.png
За бутона за обаждане след основното съдържание на страницата, или преди етикета поставите следния HTML код:
С този код в допълнение към външния вид, ние определяме позицията на бутоните и тире 100 PX надясно и 50 PX-долу. Най-добре е да добавите файл, за да си стилове на мястото.
За да започнете, свържете библиотеката, ако то не е свързано с вашия сайт. За да направите това, таговете
. ? въведете следното:
След това, веднага след библиотека връзка, трябва да се намери на следния код JQuery:
Първо ScrollTop - определя текущата позиция на вертикалната лента за превъртане и ако тя е по-голяма от 100 пиксела, бутонът автоматично се появява. Ако искате да го правят да изглежда рано или късно да се промени в необходимата стойност посока.
Както можете да видите, че има два варианта - 0 - означава, че страницата превърта до началото на пиксел до нула и 600 - е скоростта на анимацията в милисекунди.
6. Анимирани бутон преход нагоре
Когато превъртате страници на определен брой символи надолу към долния ляв ъгъл има голям бутон със стрелка. Когато натиснете бутона за курсора на мишката светва плавно, а при кликване гладко скролиране случва нагоре.
За да създадете бутон използване на изображението на стрела, CSS стилове и JQuery.
бутоните със стрелки на изображението се използват за можете да намерите тук: до-arrow.png
За да се обадите бутон, използвайте следната HTML код:
Но той трябва да бъде поставен директно в предната част на основното съдържание на страницата, ако го сложите преди затварящия маркер , бутона няма да работи.
И още един важен момент за HTML код. свободен край
вие трябва да зададете началото идентификатор.
Ако маркерът
вече издадени за конкретен номер, а след това код бутони за повикване, намиращи се само на горе, за да бъдат заменени от #top # си идентификационен номер на
Използване на CSS дефинирани полета и бутони външен вид, добави преход имот: да се създаде навъртам закъснение ефект. Вградете по-добре в CSS файла на вашия сайт.
Първият ред е връзка JQuery библиотека, ако имате това вече е свързан, не се добавя тази линия. Добавете останалата част от между маркерите
.
Можете да промените следните опции, като:
100 - е броят на пикселите, след което се появява бутон за превъртане;
0 - това означава, че превъртане ще бъде направено до нула пиксела т.е. до върха ...
800 - това е скоростта на превъртане в милисекунди.
7. Translucent бутон с помощта на JQuery и CSS
Голям бутон полупрозрачни се появява, когато се придвижите нагоре в страницата. Не виждате, че е трудно. Изработен използват само JQuery и CSS.
Ние разбираме с HTML:
За да работите с основното съдържание на бутоните на страницата, за да се превърта, да бъдат поставени между две ключови думи:
Няма нищо специално, просто поставете този код в CSS файла, за да оформите вашия сайт.
Първият ред - библиотека връзка, ако сайтът ви е свързан след това да го пропуснете. Всички код е поставен между маркерите
. .
Разширения за Joomla и WordPress плъгини, за да ви позволи да създадете бутона "Назад".
По мое мнение по всеки CMS е най-добре да се използва едно от решенията по-горе, но ако не знаете как да се свържете на посочените скриптове за вашия сайт, за да Joomla или WordPress, можете да използвате следните готови, безплатни разширения и приставки.
