Delphi-PRAXiS

Delphi-PRAXiS (https://www.delphipraxis.net/forum.php)
-   Programmieren allgemein (https://www.delphipraxis.net/40-programmieren-allgemein/)
-   -   [HTML] Google-Button-Design kopieren / nachbilden (https://www.delphipraxis.net/113873-%5Bhtml%5D-google-button-design-kopieren-nachbilden.html)

Balu der Bär 16. Mai 2008 08:05
[HTML] Google-Button-Design kopieren / nachbilden
 
Moin,

ich hätte gerne solche tollen Buttons wie sie Google hier einsetzt: http://translate.google.de/translate_t (die "Englisch"-, "Deutsch"-, "Übersetzen"-Buttons).

Leider jedoch ist der HTML- & CSS-Code derart verzwickt (ein Span und vier Divs für einen Button... :gruebel: ) das ich Laie da nicht mehr durchsehe was ich wo kopieren muss um die Buttons so hinzubekommen. Wie bekomme ich relativ einfach solche Buttons hin, hat da einer ne Idee?

Danke und Grüße

Daniel 16. Mai 2008 08:16
Re: [HTML] Google-Button-Design kopieren / nachbilden
 
Mit Fleiß und Spucke kann man sowas natürlich selbst machen.
Aber ich nutze mehr und mehr die YUI-Library von Yahoo. Die haben auch sog. Menu-Buttons im Angebot: http://developer.yahoo.com/yui/button/.

Natürlich gibt es belibige Bibliotheken, aber diese hat den Vorteil, dass sich sie recht gut auf den tatsächlich benötigten Code herunterbrechen lässt und dadurch vergleichsweise leichtfüßig ist. Bei Delphi nutze ich seit Jahren ein Framework, um schneller zum Ziel zu kommen und ich habe für mich entschieden, dies bei Javascript ebenfalls zu tun. AJAX-Requests beispielsweise, die zu Zweizeilern werden, sind einfach sympathisch. ;-)

Balu der Bär 16. Mai 2008 12:26
Re: [HTML] Google-Button-Design kopieren / nachbilden
 
Hey Chef,

besten Dank das sieht perfekt aus. :-)

Leider kriege ich nur nix hin. Wenn ich den Punkt "Getting Started" richtig verstanden habe, sollte es reichen die Dateien einzubinden? Die Beispiel-Codes erzeugen bei mir jedoch nur Standard-0815-Buttons. Muss ich doch das Zip runterladen oder wie geht das? :gruebel:

Code:
<html>
<head>
 
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.1/build/button/assets/skins/sam/button.css">
 
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.1/build/menu/assets/skins/sam/menu.css">
 
 
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/element/element-beta-min.js"></script>
 
 
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/container/container_core-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/menu/menu-min.js"></script>
 
 
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/button/button-min.js"></script>
<title></title>
</head>
<body>
<button type="button" id="pushbutton1" name="button1" value="Add">Add</button>
<input type="button" id="pushbutton2" name="button2" value="Add">

<div id="buttons">
       <input type="button" id="ok-button" name="ok-button" value="OK">
       <input type="button" id="cancel-button" name="cancel-button" value="Cancel">
   </div>

</body>
</html>

Daniel 16. Mai 2008 13:50
Re: [HTML] Google-Button-Design kopieren / nachbilden
 
Liste der Anhänge anzeigen (Anzahl: 1)
Ich denke, Du hast am Ende das Javascript vergessen.

Schau Dir mal die Test-Datei von mir an.

Balu der Bär 16. Mai 2008 13:53
Re: [HTML] Google-Button-Design kopieren / nachbilden
 
Super, vielen Dank.

Jakob Ullmann 16. Mai 2008 14:22
Re: [HTML] Google-Button-Design kopieren / nachbilden
 
@Daniel: Ist das das, was auch die DP nutzt?

Matze 16. Mai 2008 14:49
Re: [HTML] Google-Button-Design kopieren / nachbilden
 
Ich wüsste nicht, wo in der DP ein Button dieser Art vorkommt. Die Buttons bei den Beiträgen beispielsweise sind lediglich Grafiken.

himitsu 16. Mai 2008 15:00
Re: [HTML] Google-Button-Design kopieren / nachbilden
 
Zitat:
Zitat von Matze
Ich wüsste nicht, wo in der DP ein Button dieser Art vorkommt.
wenn er nicht das Javascript-Menü "DP Info & Services" meint, dann weiß ich auch nicht wo noch ein Menü/Button versteckt ist.

Balu der Bär 16. Mai 2008 15:04
Re: [HTML] Google-Button-Design kopieren / nachbilden
 
Ich denke Mal Jakob meint die Buttons zum Absenden eines Beitrages oder dem beim Einloggen. Imo sehen die nicht nach Standard-0815-Buttons aus.

Daniel 16. Mai 2008 15:10
Re: [HTML] Google-Button-Design kopieren / nachbilden
 
*g*
Was ist an diesem Forum schon Standard-08/15? ;-)

Das mit den Buttons hier in der DP ist ein simpler CSS-Effekt. Müsste ein Hintergrundbild oder dgl. sein.

himitsu 16. Mai 2008 15:15
Re: [HTML] Google-Button-Design kopieren / nachbilden
 
Absenden- und Vorschau-Buttons sind wohl mehr Standard :angel2:

Code:
<input type="submit" value="Absenden" ... />
Und wie man Aussehn, Text(Value) und Enabled ändern kann, steht in fast jeder HTML, CSS und vorallem JavaScript-Doku :stupid:

z.B.: SelfHTML.net

Matze 16. Mai 2008 15:17
Re: [HTML] Google-Button-Design kopieren / nachbilden
 
Zitat:
Zitat von Daniel
Das mit den Buttons hier in der DP ist ein simpler CSS-Effekt. Müsste ein Hintergrundbild oder dgl. sein.
Das haben Gérome, du oder wer auch immer ohne CSS gelöst, rein mit dem <img>-Tag ("Buttons" wie fürs Antworten oder diese ganzen Spezialfunktionen). :stupid:

Daniel 16. Mai 2008 15:22
Re: [HTML] Google-Button-Design kopieren / nachbilden
 
*g*

Kinderchen, Papa weiß doch, was er gemacht hat. Ich denke, wir reden von unterschiedlichen Buttons. Ich meine beispielsweise die im Editor zum Absenden eines Beitrages.

Code:
[...]
/* The main submit button option */
input.mainoption {
   background-color : #FAFAFA;
   font-weight : bold;
   border: solid 1px #000;
   background: #F0F0F0 url('./images/button.gif') repeat-x top left;
}
[...]
Und die Buttons des Beitrags-Editors ("Entwurf einfügen", "Vorschau", "Absenden", etc.) haben diese oder eine ähnliche CSS-Klasse.

Balu der Bär 16. Mai 2008 15:45
Re: [HTML] Google-Button-Design kopieren / nachbilden
 
Verstehe ich die Lizenz dieses Dingens richtig, dass ich die betreffenden Dateien auf meinen Server kopieren darf und das ganze ohne Hinweise auf Yahoo in meiner Seite verwenden kann? :gruebel:

Daniel 16. Mai 2008 15:55
Re: [HTML] Google-Button-Design kopieren / nachbilden
 
Also vBulletin macht es so. Die wickeln ihr gesamtes DHTML- und AJAX-Gedöns damit ab und haben keine sichtbaren Hinweise auf die Verwendung dieser Bibliothek untergebracht.

Als Hinweis: Es gibt diese Bibliothek komprimiert und unkomprimiert. Wenn Du also mit dem Entwickeln fertig bist, könntest Du in Erwägung ziehen, für den Live-Betrieb die komprimierte Variante zu nutzen, da diese ein paar KBytes kleiner ist.

Balu der Bär 16. Mai 2008 15:57
Re: [HTML] Google-Button-Design kopieren / nachbilden
 
Ok danke, super.

Btw, wer nur die reinen Buttons will wie ich, dem reicht das hier schon (man kann also auf die ganzen Scripte verzichten):

Delphi-Quellcode:
<html>
<head>
<title>balubutton</title>

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.1/build/button/assets/skins/sam/button.css">  

</head>

<body class="yui-skin-sam">

   <span id="submitbutton4" class="yui-button yui-submit-button">
       <span class="first-child">
           <button type="button" name="submitfield4">Convert hand</button>
       </span>    
       <span class="first-child">
           <button type="button" name="submitfield4">Clear form</button>
       </span>    
     </span>

</body>

</html>
Vielleicht sollte ich demnächst mal wieder mit Yahoo googeln, echt ne schöne Sache. :mrgreen:


Alle Zeitangaben in WEZ +1. Es ist jetzt 15:06 Uhr.

Powered by vBulletin® Copyright ©2000 - 2025, Jelsoft Enterprises Ltd.
LinkBacks Enabled by vBSEO © 2011, Crawlability, Inc.
Delphi-PRAXiS (c) 2002 - 2023 by Daniel R. Wolf, 2024-2025 by Thomas Breitkreuz