Autor: JDStar o poniedziałek 20. Październik 2008
Do testowania stron – wiadomo – trzeba używać kilku przeglądarek na różnych silnikach np. Firefox (czasem jednocześnie wersje 2.x i 3.x), Opera, IE6, IE7 (jeszcze chwila i będzie IE8), Safari, Chrome, Konqueror itp.
Do przeglądania stron każdy programista zazwyczaj używa jakiejś swojej ulubionej – jednak do programowania aplikacji i stron internetowych moim zdaniem Firefox + kilka rozszerzeń do niego biją na głowę pozostałe.
Poniżej screenshot z mojej listy zainstalowanych rozszerzeń i postaram się lakonicznie opisać co do czego – chociaż większość programistów już ich raczej używa, to może nowi sobie spróbują i potestują.
Jak widać jest ich tu “kilka”, podzielę na te związane z programowanie stron i te “inne”.
Rozszerzenia dla programistów:
- ColorZilla – próbnik (pipetka) koloru dowolnego elementu na stronie, paleta kolorów, analizator kolorystyczny strony
- FireBug – bez tego nie wyobrażam sobie pisanie czegokolwiek związanego z AJAX i JS
- Firecookie – dodatek do w/w umożliwiający podgląd ciasteczek
- FireShot – kombajn do robienia zrzutów ekranu z ogromnymi możliwościami, edycja, dodawanie opisów, wskaźników, upload na serwer lub e-mail
- Html Validator – sprawdzanie poprawności kodu względem wytycznych W3C
- MeasureIT – linijka ekranowa – zmierzy wszystko co jest w obrębie strony
- Search Status -podaje w statusie kilka informacji (PageRank, Alexa itp)
- User Agent Switcher – zmiana identyfikacji przeglądarki
- Web Developer – to rozszerzenie “trzeba mieć” – ogromna ilość opcji przydatnych do pisania i testowania aplikacji www
Rozszerzenia pozostałe – bardzo przydatne przy pracy w sieci:
- Adblock Plus – blokuje wyskakujące okienka, popupy, reklamy itp
- Better Gmail – dodaje kilka przydatnych opcji do interface GMaila (o ile ktoś używa)
- DownThemAll – menedżer pobieranie plików
- Flashblock – wyłączenie obiektów flash na stronach
- Foxmark Bookmark Synchronizer – synchronizacja zakładek
- Notatnik Google – notes online od Google
- Password Exporter – import/export zapisanych hasłeł z Firefoxa
- Stylish – “nadpisanie” styli CSS stron własnymi (dostępna ogromna baza gotowych arkuszy CSS dla popularnych stron)
- Topper -wtyczka z pakietu Chrome Package – upodabnia Firefoxa do Chrome:)
- English Dictionary – wiadomo do czego służy:) polski słownik mam również, ale się nie wyświetla na liście
Napisany w firefox, programowanie, rozszerzenia | Brak komentarzy »
Autor: JDStar o czwartek 16. Październik 2008
Dzisiaj gotowy cały plik z przykładem (nie chciało mi się kombinować z WordPressem jak umieścić w poście działający kod) – może ktoś ma jakieś przydatne wtyczki do tego?
Animacja w jQuery + selektory
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>jQuery - bardzo mały i prosty poradnik devel.jdstar.pl</title>
<meta name="description" content="miniporadnik jQuery, Jacek Diurra" />
<meta name="keywords" content="jquery, jacek dziura, jdstar" />
<meta name="author" content="Jacek Dziura htttp://devel.jdstar.pl" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<style type="text/css">
div{
display: block;
border: 1px solid gray;
background-color: rgb(239, 239, 239);
width: 150px;
height: 150px;
margin: 3px;
padding: 5px;
text-align:center;
float: left;
}
div:hover{
border: 1px solid blue;
background-color: rgb(194, 231, 239);
}
a.button{
border: 1px solid gray;
padding: 2px;
line-height:170%;
text-decoration:none;
}
a.button:hover{
border: 1px solid blue;
background-color: rgb(0, 191, 255);
color:blue;
}
.bluesky{
background-color: rgb(0, 191, 255);
}
</style>
</head>
<body>
<div id="parent" style="float:none; width:auto; height: auto">Lorem ipsum..... "rodzic"
<div class="anim ex1">Lorem ipsum..... [ex1]<br/>child 1</div>
<div class="anim ex2">Lorem ipsum..... [ex2]<br/>child 2</div>
<div class="anim ex3">Lorem ipsum..... [ex3]<br/>child 3</div>
<div class="anim ex4">Lorem ipsum..... [ex4]<br/>dziecko 4</div>
<div class="anim ex5">Lorem ipsum..... [ex5]<br/>dziecko 5</div>
<div class="anim ex6">Lorem ipsum..... [ex6]<br/>child 6</div>
<br style="clear:both"/>
</div>
<p>
<a href="#" class="button" id="showall">pokaż wszystkie</a><br/>
<a href="#" class="button" id="togglechild">pokaż/schowaj n-child - czyli kolejny element z tablicy o numerze 'n' (wartość z pola obok)</a><input id="nchild" name="nchild" size="2" value="1"/><br/>
element(y) zawierający wartość z pola obok: <input id="nval" name="nval" size="6" value="child"/> [<a href="#" class="button" id="selval">zaznacz</a> - <a href="#" class="button" id="dselval">odznacz</a>]
</p>
<script type="text/javascript">//<![CDATA[
$(document).ready(function(){
$("div .anim").click(function(){
$(this).toggle('slow');
return false;
});
$("#showall").click(function(){
$("div").show("fast");
return false;
});
$("#togglechild").click(function(){
$("div.anim:nth-child("+$("#nchild").val()+")").toggle("slow");
return false;
});
$("#selval").click(function(){
$("div.anim:contains('"+$("#nval").val()+"')").addClass("bluesky");
return false;
});
$("#dselval").click(function(){
$("div.anim:contains('"+$("#nval").val()+"')").removeClass("bluesky");
return false;
});
});
//]]>
</script>
</body>
</html> |
Napisany w animacja, efekty, jquery, selectors | Brak komentarzy »
Autor: JDStar o środa 15. Październik 2008
Cel: wybrać elementy przy pomocy atrybutu title (oczywiście może to być dowolny inny).
Niżej działający przykład
title=’ex1′
title=’ex2′
title=’abc2′
title=” lub jego brak
wybierz niepuste title (uwaga – również te w wordpress’ie)
wybierz z title zaczynającym się od ‘ex‘
wybierz z title kończącym się ‘2‘
Wszystkie elementy “wyzeruj”
Kod HTML i JavaScript z przykładu
1
2
3
4
5
6
7
8
9
10
|
<span title='ex1'>title='ex1'</span>
<span title='ex2'>title='ex2'</span>
<span title='abc2'>title='abc2'</span>
<span title=''>title='' lub jego brak</span>
<a class="jq" rel="[@title!='']" rev="red" href="#">wybierz niepuste title</a>
<a class="jq" rel="[@title^='ex']" rev="blue" href="#">wybierz z title zaczynającym się od '<em>ex</em>'</a>
<a class="jq" rel="[@title$='2']" rev="green" href="#">wybierz z title kończącym się '<em>2</em>'</a>
<a class="jq" rel="" rev="black" href="#">Wszystkie elementy "wyzeruj"</a> |
1
2
3
4
5
6
7
8
9
| <script type="text/javascript"><!--
var $j = jQuery;
$j(document).ready(function(){
$j("a.jq").click(function () {
$j(" span"+$j(this).attr("rel")).css('color',$j(this).attr('rev'));
return false;
});
});
// --></script> |
Jeśli ktoś ma pytania o bardziej skomplikowane przykłady – proszę w komentarzu zostawić info
Napisany w jquery, selectors | Brak komentarzy »
Autor: JDStar o niedziela 12. Październik 2008
Na początek kilka prostych przykładów jak dostać się do poszczególnych obiektów strony. Posłużę się elementami span, ale równie dobrze mogą to być inne.
Kod HTML, który jest w przykładzie:
1
2
3
4
5
6
7
8
9
10
11
12
13
| <span class="c1">element class="c1"</span>
<span class="c2">element class="c2"</span>
<span class="d2">element class="d2"</span>
<span class="c1 c2">element class="c1 c2"</span>
<span id="idc1" class="c1">element class="c1" id="idc1"</span>
<span id="idc2" class="c2">element class="c2" id="idc2"</span>
<a class="jq" rel="span.c1" rev="red" href="#">Elementy z atrybutem class="c1"</a>
<a class="jq" rel="span.c2" rev="green" href="#">Elementy z atrybutem class="c2"</a>
<a class="jq" rel="span.d2" rev="pink" href="#">Elementy z atrybutem class="d2"</a>
<a class="jq" rel="span.c1, span.c2" rev="blue" href="#">Elementy z atrybutem class="c1" lub c2</a>
<a class="jq" rel="span#idc2" rev="orange" href="#">Elementy z atrybutem id="idc2"</a>
<a class="jq" rel="span.c1, span.c2, span.d2" rev="black" href="#">Wszystkie elementy "wyzeruj"</a> |
Kod JS odpowiedzialny za selekcję:
1
2
3
4
5
6
7
8
9
| <script type="text/javascript"><!--
var $j = jQuery;
$j(document).ready(function(){
$j("a.jq").click(function () {
$j(' '+$j(this).attr("rel")).css('color',$j(this).attr('rev'));
return false;
});
});
// --></script> |
Dla potrzeb silnika WordPress aby kod jQuery działał poprawnie konieczny jest mały trick – var $j = jQuery; – niestety standardowe wywołanie $() nie działa.
Poniżej działający przykład (zmiana koloru tekstu na wartość z atrybutu rev linku
element class=”c1″
element class=”c2″
element class=”d2″
element class=”c1 c2″
element class=”c1″ id=”idc1″
element class=”c2″ id=”idc2″
Elementy z atrybutem class=”c1″
Elementy z atrybutem class=”c2″
Elementy z atrybutem class=”d2″
Elementy z atrybutem class=”c1″ lub c2
Elementy z atrybutem id=”idc2″
Wszystkie elementy “wyzeruj”
Jeśli ktoś ma pytania o bardziej skomplikowane przykłady – proszę w komentarzu zostawić info
Napisany w jquery, selectors | Brak komentarzy »
Autor: JDStar o sobota 11. Październik 2008
Poprzedni wpis na swojej stronie popełniłem ponad rok temu (tu jest stara wersja).
Ciągły brak czasu i ochoty, ale w końcu – wybrałem na nowy silnik wordpress’a i może dzięki temu będę częściej publikował jakieś wpisy.
Na razie starych postów nie przeniosłem, ale w miarę posiadanego czasu będę starał się je skopiować – wraz z uaktualnieniem do nowych bibliotek i systemów (niektóre mają ponad 2 lata, a wiadomo – to ogromny kawał czasu dla branży IT).
Przez ostatni okres wgłębiałem się w kruczki, sztuczki i wszystko co związane z biblioteką jQuery – bo na niej oparłem aplikację nad którą pracuję przez ostatni rok. To co tu będę zamieszczał dla niektórych będzie totalną prościzną, ale dla innych chyba się przyda – tak sądzę na podstawie statystyk odwiedzających poprzednią wersję, tego co szukali i skąd na nią trafili.
Napisany w Bez kategorii | Brak komentarzy »
