Back to site

Biggerlink – jQuery plugin

Source: http://www.ollicle.com/projects/jquery/biggerlink/

Мэта

JQuery плягін, каб зрабіць яго сапраўды лёгка ўключыць ўказаны элемент / S паводзіць сябе як проксі для іх першага змяшчаюцца спасылку.

Выкарыстанне дадатковых класаў CSS, каб забяспечыць сродкі для ўказанага элемента візуальна адлюстроўвае накіраванасць і навядзенні стану ён змяшчаецца спасылка / s.

Больш падрабязна прачытаць у маім блогу: Вялікія спасылка: лягчэй націску з JQuery

Патрабуецца JQuery версіі 1,3 +

Паспяхова пратэставаны на:
Firefox 3.x
IE 6,7,8
Safari 3,4
Opera 9

Проста дэма

Са спасылкамі на больш дэма. Адкрыць крыніца для CSS, HTML і JavaScript.

Асноўныя дэманстрацыі

Абноўлена для JQuery 1,3

З выпускам JQuery 1,3 Я зноў гэты плягін для паляпшэння майго разумення новага аб'екта падзеі і выпраўленыя некаторыя памылкі і дададзеныя некаторыя функцыі, пакуль я быў на яе.

Калі вы затрымаліся з JQuery версіі 1.2 паспрабаваць jquery.biggerlink версіі 1.

Як яго выкарыстоўваць

Вось некалькі тыповых канфігурацый.

Па змаўчанні

Звычайна гэты плягін будзе трэба вельмі мала канфігурацыі - Хаця вы павінны паказаць яе на элемент / с, на якіх вы хочаце, каб дзейнічаць.

HTML-элемента, які ўтрымлівае спасылку, паводзіны якога вы хочаце элемент, каб успадкаваць. У гэтым выпадку <li> элементаў.

 <ul class="links"> <li><a href="http://www.fusion.com.au/">Fusion</a></li> <li><a href="http://jquery.com/">jQuery</a></li> <li><a href="http://www.google.com.au/">Google</a></li> </ul> 

JavaScript ў дакуменце галаву

 <script type="text/javascript"src="jquery-1.3.2.min.js"></script> <script type="text/javascript" src="jquery.biggerlink.js"></script> <script type="text/javascript"> $('.links li').biggerlink(); </script> 

З JavaScript ўсплываючае акна

Выкарыстаньне JavaScript, каб адкрыць спасылку ў новым акне з'яўляецца адным верагодным сцэнарам, дзе вы будзеце жадаць, каб прадухіліць дзеянне па змоўчванні спасылкі.

HTML як апісана вышэй. (Звярніце ўвагу, дадаў атрыбуты назва будзе прымяняцца да <li> элементаў плягін).

 <ul class="links"> <li><a href="http://www.fusion.com.au/" title="Fusion web site in a new window">Fusion</a></li> <li><a href="http://jquery.com/" title="The write less, do more, JavaScript library">jQuery</a></li> <li><a href="http://www.google.com.au/" title="More about everything in a new window">Google</a></li> </ul> 

JavaScript. Настройка follow да false забяспечвае сувязь не будзе суправаджацца браўзэра, як бы па змаўчанні; Такім чынам, не interferring з дзеяннем OS JavaScript ўсплываючае акна прымяняюцца да той жа спасылцы.

 <script type="text/javascript"src="jquery-1.3.2.min.js"></script> <script type="text/javascript" src="jquery.biggerlink.js"></script> <script type="text/javascript"> $('.links a').click(function(){ window.open(this.href); return false; }); $('.links li').biggerlink({follow:false}); </script> 

Пачынаючы з версіі 2 з biggerlink ў цяперашні час новае значэнне па змоўчванні для follow ад 'auto'. У кодзе вышэй, дзе biggerlink звязаны наступны пасля ўсплываючае падзеі налады follow да false да непатрэбным. Калі падзеі націску да biggerlink вяртае ілжывае biggerlink не выкліча спасылку для пераймання. Любыя іншыя падзеі звязаныя з спасылка будзе запушчаны ў звычайным рэжыме.

Некалькі спасылак у кожным кантэйнеры biggerlink

Па змаўчанні biggerlink прымусіць ўсіх наведаных спасылак у паказаны кантэйнер для запуску першай (майстар) спасылка. Хоць націсніце падзеі звязаныя з іншымі спасылкі агню, а таксама любыя прымяняюцца да майстар спасылку. Як правіла, гэта карысна, калі некалькі спасылак паказваюць на той жа HREF.

Гэтая версія biggerlink ўводзіць новыя наладкі otherstriggermaster (за адсутнасцю больш кароткі імя!). Па змаўчанні ён усталяваны ў true. Ўстаноўка ў false дазваляе спасылкі пасля першага ў зададзеным кантэйнеры павінен быць незалежным. Кліку на іх не будзе выклікаць націсніце падзей на майстар спасылку.

Непасрэдна завісаньні або факусоўка "іншае" сувязь з otherstriggermaster значэнне false будзе дадаць дадатковы клас для biggerlink кантэйнер - bl-hover2 па змаўчанні.

HTML. Заўважым, кожны Li змяшчае дзве спасылкі:

 <ul class="links"> <li> <h3><a href="http://www.fusion.com.au/">Fusion</a></h3> <p>Where Ollie works in Adelaide <a href="http://www.google.com/search?q=fusion">Google search</a></p> </li> <li> <h3><a href="http://jquery.com/">jQuery</a></h3> <p>The write less, do more, JavaScript library <a href="http://www.google.com/search?q=jquery">Google search</a></p> </li> <li> <h3><a href="http://www.google.com.au/">Google</a></h3> <p>Find out more about everything <a href="http://www.google.com/search?q=everything">Google search</a></p> </li> </ul> 

JavaScript.

 <script type="text/javascript"src="jquery-1.3.2.min.js"></script> <script type="text/javascript" src="jquery.biggerlink.js"></script> <script type="text/javascript"> $('.links li').biggerlink({otherstriggermaster:false}); </script> 

Выкарыстаньне карыстацкіх класаў

Па змаўчанні плягін ўжываецца класаў мэтавых элементаў:

hoverclass - клас дададзены ў бацькоўскі элемент пры навядзенні курсора над ёй з вамі курсора або факусоўка спасылку ў ім утрымліваецца. Па змаўчанні гэты клас hover.

clickableclass - Клас дадаецца да кожнага выбраным элементу, які змяшчае па меншай меры адна спасылка. Па змаўчанні гэты клас hot. Асабліва карысна, калі вы хочаце зрабіць элемент з'явіцца "інтэрактыўных", калі сувязь паводзін якія ўскладзены на яе.

Версія 2 ўводзіць яшчэ пару

biggerclass - дадаў клас для ўсіх змяшчаюцца <a> элементы, калі otherstriggermaster з'яўляецца false, у гэтым выпадку ён ужываецца толькі да першай (галоўнай).

hoverclass2 - Калі otherstriggermaster устаноўлены на false гэта дадатковы клас дадаецца да змяшчаюць элемент, калі спасылкі, акрамя першага, навядзенні паказальніка мышы або з акцэнтам. CSS ўжываецца з гэтага класа можна перавызначыць стылі, якія прымяняюцца hoverclass для забеспячэння візуальнага намякае, што функцыі або прызначэння спасылку адрозніваецца ад першага.

HTML. Нічога новага тут:

 <ul class="links"> <li><a href="http://www.fusion.com.au/">Fusion</a></li> <li><a href="http://jquery.com/">jQuery</a></li> <li><a href="http://www.google.com.au/">Google</a></li> </ul> 

JavaScript. Калі выпадкова гэтыя класы канфлікт з іншымі класамі у дакуменце яны могуць быць настроены:

 <script type="text/javascript"src="jquery-1.3.2.min.js"></script> <script type="text/javascript" src="jquery.biggerlink.js"></script> <script type="text/javascript"> $('.links li').biggerlink({clickableclass:'yum',hoverclass:'roll'}); </script> 

Рэчы, не можа працаваць, як чакалася

  • Вёрстка прызначаны элементаў biggerlink.
  • Выкарыстаньне biggerlink нараўне падзеі звязаныя з убудаваным атрыбут OnClick.
  • Блізкі або правай кнопкай мышы на клікі biggerlink вобласці.

Спампаваць версію 2

Дзякуй

Ўбудова да Олівер Boermans. Палягчаецца за кошт JQuery.

Першая версія гэтага кода прадукту ў некалькі пятніцах. За гэты час мой працадаўца, Fusion, дазваляе мне і маім калегам Fusionites працаваць на ўнутраныя праекты, якія нас цікавяць больш за ўсё.

Я абмену biggerlink ў надзеі, што яна можа быць дадаткова адпаліраваныя людзі разумнейшыя, чым мне, і, у невялікай шлях, аддаць іншым, хто ўнёс свой уклад у JQuery бліскучым.

Published (Last edited): Apr 11