Webmaster Forum Logo Part 1 Webmaster Forum Logo Part 2
Webmaster Forum Logo Part 3
     
 
    36 User online
    0 User im Chat
    Kontrollzentrum
  :: Anmeldung

Benutzername:

Registrierung...

Passwort:

Passwort vergessen?

angemeldet bleiben


  
  :: Umfrage
Welche sozialen Netzwerke benutzt du regelmäßig?

 Facebook
 Webmaster - WebspaceWebmaster - WebspaceWebmaster - Webspace 73%
 keines
 Webmaster - WebspaceWebmaster - WebspaceWebmaster - Webspace 22%
 Google+
 Webmaster - WebspaceWebmaster - WebspaceWebmaster - Webspace 19%
 Twitter
 Webmaster - WebspaceWebmaster - WebspaceWebmaster - Webspace 11%
 Xing
 Webmaster - WebspaceWebmaster - WebspaceWebmaster - Webspace 6%
 schülerVZ
 Webmaster - WebspaceWebmaster - WebspaceWebmaster - Webspace 6%
 meinVZ
 Webmaster - WebspaceWebmaster - WebspaceWebmaster - Webspace 4%
 studiVZ
 Webmaster - WebspaceWebmaster - WebspaceWebmaster - Webspace 4%
 MySpace
 Webmaster - WebspaceWebmaster - WebspaceWebmaster - Webspace 2%
 LinkedIn
 Webmaster - WebspaceWebmaster - WebspaceWebmaster - Webspace 2%

 ges. 393 Stimmen
 
zum Beitrag
  :: Buttons

Valid XHTML 1.0 Transitional

Josephine

Haudegen

Dabei seit: 30.04.2009

Beiträge: 624

 

1 Zum Seitenanfang

Dienstag, 17. Mai 2011, 13:46

Wie funzt die Verlinkung?

http://sonspring.com/journal/jquery-desktop

Hallo bin grad an obigem Script am rumtüfteln, aber ich bekomm es einfach nicht hin ein neuen Shortcut auf dem Desktop mit einem neuen Fenster zu verlinken.

Hier ein Auszug aus der index.html:

Was auf die verlinkung Schließt bzw. was ich rausgelesen hab hab ich mal rot makiert. Aber wenn ich ein neues Shortcut anlege mit:

HTML

 
1
2
3

<a class="abs icon" style="left:20px;top:80px;" href="[color=#006600]#icon_dock_beispiel[/color]">
      <img src="assets/images/icons/icon_32_beispiel.png" />
      Beispiel    </a>


und die divs ändere, die grün markierten Bereiche (was wohl offensichtlich nicht geklappt hat ^^) passiert trozdem nix :)
Wie genau funktioniert das denn? Mit JS ist klar, aber dort steht nur die allgemeinen Funktionen....


HTML

 
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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202

<div class="abs" id="wrapper">
  <div class="abs" id="desktop">
    <a class="abs icon" style="left:20px;top:20px;" href="[color=#006600]#icon_dock_computer[/color]">
      <img src="assets/images/icons/icon_32_computer.png" />
      Computer
    </a>
    <a class="abs icon" style="left:20px;top:100px;" href="#icon_dock_drive">
      <img src="assets/images/icons/icon_32_drive.png" />
      Festplatte
    </a>
    <div id="[color=#006600]window_computer[/color]" class="abs window">
      <div class="abs window_inner">
        <div class="window_top">
          <span class="float_left">
            <img src="assets/images/icons/icon_16_computer.png" />
            Computer
          </span>
          <span class="float_right">
            <a href="#" class="window_min"></a>
            <a href="#" class="window_resize"></a>
            <a href="[color=#006600]#icon_dock_computer[/color]" class="window_close"></a>
          </span>
        </div>
        <div class="abs window_content">
          <div class="window_aside">
            Hello. You look nice today!
          </div>
          <div class="window_main">
            <table class="data">
              <thead>
                <tr>
                  <th class="shrink">
                    &nbsp;
                  </th>
                  <th>
                    Name
                  </th>
                  <th>
                    Date Modified
                  </th>
                  <th>
                    Date Created
                  </th>
                  <th>
                    Size
                  </th>
                  <th>
                    Kind
                  </th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>
                    <img src="assets/images/icons/icon_16_drive.png" />
                  </td>
                  <td>
                    Hard Drive
                  </td>
                  <td>
                    Today
                  </td>
                  <td>
                    &mdash;
                  </td>
                  <td>
                    200 GB
                  </td>
                  <td>
                    Volume
                  </td>
                </tr>
                <tr>
                  <td>
                    <img src="assets/images/icons/icon_16_disc.png" />
                  </td>
                  <td>
                    Audio CD
                  </td>
                  <td>
                    &mdash;
                  </td>
                  <td>
                    &mdash;
                  </td>
                  <td>
                    2.92 GB
                  </td>
                  <td>
                    Media
                  </td>
                </tr>
                <tr>
                  <td>
                    <img src="assets/images/icons/icon_16_network.png" />
                  </td>
                  <td>
                    Network
                  </td>
                  <td>
                    &mdash;
                  </td>
                  <td>
                    &mdash;
                  </td>
                  <td>
                    &mdash;
                  </td>
                  <td>
                    LAN
                  </td>
                </tr>
                <tr>
                  <td>
                    <img src="assets/images/icons/icon_16_folder_remote.png" />
                  </td>
                  <td>
                    Shared Project Files
                  </td>
                  <td>
                    Yesterday
                  </td>
                  <td>
                    12/29/08
                  </td>
                  <td>
                    524 MB
                  </td>
                  <td>
                    Folder
                  </td>
                </tr>
                <tr>
                  <td>
                    <img src="assets/images/icons/icon_16_documents.png" />
                  </td>
                  <td>
                    Documents
                  </td>
                  <td>
                    Yesterday
                  </td>
                  <td>
                    12/29/08
                  </td>
                  <td>
                    524 MB
                  </td>
                  <td>
                    Folder
                  </td>
                </tr>
                <tr>
                  <td>
                    <img src="assets/images/icons/icon_16_system.png" />
                  </td>
                  <td>
                    Preferences
                  </td>
                  <td>
                    &mdash;
                  </td>
                  <td>
                    &mdash;
                  </td>
                  <td>
                    &mdash;
                  </td>
                  <td>
                    System
                  </td>
                </tr>
                <tr>
                  <td>
                    <img src="assets/images/icons/icon_16_trash.png" />
                  </td>
                  <td>
                    Trash
                  </td>
                  <td>
                    Today
                  </td>
                  <td>
                    &mdash;
                  </td>
                  <td>
                    &mdash;
                  </td>
                  <td>
                    Bin
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div class="abs window_bottom">
          Build: TK421
        </div>
      </div>
      <span class="abs ui-resizable-handle ui-resizable-se"></span>
    </div>
Unterschätze nie jemanden der einen Schritt zurück geht! Er könnte Anlauf nehmen.

Dieser Beitrag wurde bereits 3 mal editiert, zuletzt von »Josephine« (17. Mai 2011, 13:46)

 

cccpmik

Foren Gott

Dabei seit: 04.09.2007

Beiträge: 2 999

 

2 Zum Seitenanfang

Dienstag, 17. Mai 2011, 13:55

wo siehste da funktionen? das ist reiner HTML Code...

EDIT:

http://desktop.sonspring.com/assets/js/jquery.desktop.js

das sind die funktionen
Mein kleines Projekt
-Cruel Online-

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »cccpmik« (17. Mai 2011, 13:55)

 

Josephine

Haudegen

Dabei seit: 30.04.2009

Beiträge: 624

 

3 Zum Seitenanfang

Dienstag, 17. Mai 2011, 14:10

Ja ich weiss das sie dort sind, aber dort seh ich auch nix spezielles das ich da noch was einfügen oder ändern müsste. Ich will ja einfach noch zusätzliche Shortcuts mit ensprechenden Fenstern...
Unterschätze nie jemanden der einen Schritt zurück geht! Er könnte Anlauf nehmen.
 

cccpmik

Foren Gott

Dabei seit: 04.09.2007

Beiträge: 2 999

 

4 Zum Seitenanfang

Dienstag, 17. Mai 2011, 14:28

also ich habe mich ein bisschen das ganze angeschaut. es sieht wohl so aus als ob du in den divs:

HTML

 
1
2
3
4
5

<div class="abs" id="wrapper">
  <div class="abs" id="desktop">
<!-- hier dein Quellcode -->
</div>
</div>


reinpacken musst. um ein Icon zu setzen benutzt du folgenden code:

HTML

 
1
2
3
4

<a class="icon" style="left:20px;top:20px;" href="#icon_dock_beispiel">
      <img src="assets/images/icons/icon_32_beispiel.png" />
      Beispiel
    </a>


um ein beispiel fenster zu öffnen musste folgenden code einfügen

HTML

 
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

<div id="window_beispiel" class="abs window">
      <div class="abs window_inner">
        <div class="window_top">
          <span class="float_left">

            <img src="assets/images/icons/icon_16_beispiel.png" />
            Beispiel
          </span>
          <span class="float_right">
            <a href="#" class="window_min"></a>
            <a href="#" class="window_resize"></a>
            <a href="#icon_dock_beispiel" class="window_close"></a>
          </span>
        </div>

        <div class="abs window_content">
          <div class="window_aside">
            Linke spalte 
          </div>
          <div class="window_main">
            Rechte Spalte
          </div>
        </div>
        <div class="abs window_bottom">

          Test
        </div>
      </div>
      <span class="abs ui-resizable-handle ui-resizable-se"></span>
    </div>


es sieht wohl so aus dass dein href im icon hinter dem letzten _ den namen des fensters beschreibt, das es öffnen soll.

genau weis ich es nicht laut quellcode sucht er eh nach allen <a href="" class="icon">

Javascript-Quelltext

 
1
2
3
4
5

// Desktop icons.
        $('a.icon').live('mousedown', function() {
          // Highlight the icon.
          JQD.util.clear_active();
//....


.. einfach mal ausprobieren;)
Mein kleines Projekt
-Cruel Online-
 

ospx

Kaiser

Dabei seit: 11.11.2006

Beiträge: 1 131

 

5 Zum Seitenanfang

Dienstag, 17. Mai 2011, 14:40

Nur so am Rande als Nebenfrage:

Hast du dir schon alternative Systeme wie qooxdoo oder lucid (dojo) angeschaut?

Ich pers. bevorzuge qooxdoo. Die Art der "Klassen"-Bibliothek und der Programmierung gefällt mir sehr (auch, dass ich da dieses blöde html - u. css gefrickel ) nicht mehr dringend brauche.

Allerdings habe ich mit jquery-Desktop keine Erfahrungen und kann also auch nicht sagen, was besser oder oder schlechter sei.
 

cccpmik

Foren Gott

Dabei seit: 04.09.2007

Beiträge: 2 999

 

6 Zum Seitenanfang

Dienstag, 17. Mai 2011, 14:46

EDIT: zu meiner antwort.. nun verstehe ich die verlinking..

also

HTML

 
1
2
3
4

<a class="abs icon" style="left:20px;top:360px;"href="#icon_dock_test"> 
      <img src="assets/images/icons/icon_32_computer.png" />
      Test
    </a>


Hiermit erstellst du ein Link auf dem Desktop
in den div mit der id bar_bottom kommt eine verknüpfung rein

HTML

 
1
2
3
4
5
6

<li id="icon_dock_test">
        <a href="#window_test">
          <img src="assets/images/icons/icon_22_computer.png" />
          Beispiel
        </a>
      </li>

mit dieser Verknpüfung setzt du im a href in der 2en zeile das zu öffnende fenster.

HTML

 
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

<div id="window_test" class="abs window">
      <div class="abs window_inner">
        <div class="window_top">
          <span class="float_left">
            <img src="assets/images/icons/icon_16_computer.png" />
            Test
          </span>
          <span class="float_right">
            <a href="#" class="window_min"></a>
            <a href="#" class="window_resize"></a>
            <a href="#icon_dock_test" class="window_close"></a>
          </span>
        </div>
        <div class="abs window_content">
          <div class="window_aside">
           Links
          </div>
          <div class="window_main">
            Rechts
          </div>
        </div>
        <div class="abs window_bottom">
         Bla
        </div>
      </div>
      <span class="abs ui-resizable-handle ui-resizable-se"></span>
    </div>


und somit erstellst du ein test fenster

MFG
Mein kleines Projekt
-Cruel Online-
 

Josephine

Haudegen

Dabei seit: 30.04.2009

Beiträge: 624

 

7 Zum Seitenanfang

Dienstag, 17. Mai 2011, 14:59

Edit: Mom ich hab die verknüfung im bottom vergessen...
Edit2: Das Icon in der Bottom Leiste wird angeeigt, aber das Fenster an sich nicht :)

Ja so hab ich das ja schon und es funzt nicht :) Deswegen hatte ich auch den Thread aufgemacht. Habs genau so:

HTML

 
1
2
3
4

<a class="abs icon" style="left:20px;top:180px;" href="#icon_dock_book">
      <img src="assets/images/icons/icon_32_drive.png" />
      Büchersammlung
    </a>


HTML

 
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

<div id="window_book" class="abs window">
      <div class="abs window_inner">
        <div class="window_top">
          <span class="float_left">
            <img src="assets/images/icons/icon_16_computer.png" />
            Büchersammlung
          </span>
          <span class="float_right">
            <a href="#" class="window_min"></a>
            <a href="#" class="window_resize"></a>
            <a href="#icon_dock_book" class="window_close"></a>
          </span>
        </div>
        <div class="abs window_content">
          <div class="window_aside">
            Beschreibung....
          </div>
          <div class="window_main">
            <table class="data">
              <thead>
                <tr>
                  <th class="shrink">
                    &nbsp;
                  </th>
                  <th>
                    Überschrift 1
                  </th>
                  <th>
                   Überschrift 1
                  </th>
                  <th>
                    Überschrift 1
                  </th>
                  <th>
                   Überschrift 1
                  </th>
                  <th>
                  Überschrift 1
                  </th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>
                    <img src="assets/images/icons/icon_16_drive.png" />
                  </td>
                  <td>
                    Hard Drive
                  </td>
                  <td>
                    Today
                  </td>
                  <td>
                    &mdash;
                  </td>
                  <td>
                    200 GB
                  </td>
                  <td>
                    Volume
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div class="abs window_bottom">
          Build: TK421
        </div>
      </div>
      <span class="abs ui-resizable-handle ui-resizable-se"></span>
    </div>


Das ist so wie du es auch beschrieben hast... Aber tut sich nix :(
Unterschätze nie jemanden der einen Schritt zurück geht! Er könnte Anlauf nehmen.

Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von »Josephine« (17. Mai 2011, 14:59)

 

Josephine

Haudegen

Dabei seit: 30.04.2009

Beiträge: 624

 

8 Zum Seitenanfang

Dienstag, 17. Mai 2011, 15:00

Zitat von »ospx«

Nur so am Rande als Nebenfrage:

Hast du dir schon alternative Systeme wie qooxdoo oder lucid (dojo) angeschaut?

Ich pers. bevorzuge qooxdoo. Die Art der "Klassen"-Bibliothek und der Programmierung gefällt mir sehr (auch, dass ich da dieses blöde html - u. css gefrickel ) nicht mehr dringend brauche.

Allerdings habe ich mit jquery-Desktop keine Erfahrungen und kann also auch nicht sagen, was besser oder oder schlechter sei.


Nein hab ich nicht, werde es aber tun danke für den Tip
Unterschätze nie jemanden der einen Schritt zurück geht! Er könnte Anlauf nehmen.
 

cccpmik

Foren Gott

Dabei seit: 04.09.2007

Beiträge: 2 999

 

9 Zum Seitenanfang

Dienstag, 17. Mai 2011, 15:03

wie sieht denn dein icon in der bottom leiste aus? so?

HTML

 
1
2
3
4
5
6

<li id="icon_dock_book">
        <a href="#window_book">
          <img src="assets/images/icons/icon_22_computer.png" />
          Beispiel
        </a>
      </li>
Mein kleines Projekt
-Cruel Online-
 

Josephine

Haudegen

Dabei seit: 30.04.2009

Beiträge: 624

 

10 Zum Seitenanfang

Dienstag, 17. Mai 2011, 15:12

Danke jetzt gehts hatte <a href="#window_book"> nicht so geändert :)
Unterschätze nie jemanden der einen Schritt zurück geht! Er könnte Anlauf nehmen.
 

cccpmik

Foren Gott

Dabei seit: 04.09.2007

Beiträge: 2 999

 

11 Zum Seitenanfang

Dienstag, 17. Mai 2011, 15:15

du hast mich auf eine idee gebracht, ich schreibe gerade eine weitere klasse zu dem desktop um elemente einfach zu adden
Mein kleines Projekt
-Cruel Online-
 

Josephine

Haudegen

Dabei seit: 30.04.2009

Beiträge: 624

 

12 Zum Seitenanfang

Dienstag, 17. Mai 2011, 15:48

Echt :) Klasse daran hab ich mich auch grad versucht :) Aber wenn du das schon machst kann ich mir das ja sparen, falls du es mir zur verfügung stellen würdest
Unterschätze nie jemanden der einen Schritt zurück geht! Er könnte Anlauf nehmen.
 

cccpmik

Foren Gott

Dabei seit: 04.09.2007

Beiträge: 2 999

 

13 Zum Seitenanfang

Dienstag, 17. Mai 2011, 16:13

das kann aber paar tage dauern...
Mein kleines Projekt
-Cruel Online-
 

Josephine

Haudegen

Dabei seit: 30.04.2009

Beiträge: 624

 

14 Zum Seitenanfang

Dienstag, 17. Mai 2011, 16:22

kein Problem ,wie du Zeit hast :)
Unterschätze nie jemanden der einen Schritt zurück geht! Er könnte Anlauf nehmen.
 

Ähnliche Themen