JQUERY ve CSS Button Yapımı
JQuery ile basit bir buton yapıyoruz. Örneğimizde kısa bir yazının, devamını görüntülemeyi kullandık. Bunun için div, p ve span taglarını kullandık… Span tıklandığında, click fonksiyonu çalışacak ve kısa yazımızın tamamı görüntülenecek, kapat butonu tıklandığında ise tekrar kısa ön yazıya dönülecek… 2 Adet içerik kullandım, birisi kısa ön yazı, diğeride devamına tıkladığımızda görüntüleyeceğimiz yazının tamamıdır. Butonlara tıklandığında p tagı arasına aldığımız içeriği görüntülüyor ya da gizliyoruz…
Kodları olduğu gibi veriyorum
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Span Button</title>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%20type%3D%22text%2Fcss%22%3E%0Adiv%7B%0A%20%20%20%20border%3A%201px%20solid%20%23F2F2F2%3B%0A%7D%0Ah1%7B%0A%20%20%20%20background-image%3A%20url(btn_bg.jpg)%3B%0A%20%20%20%20background-position%3A%20left%20bottom%3B%0A%20%20%20%20padding-left%3A5px%3B%0A%20%20%20%20border%3A%201px%20solid%20%23F2F2F2%3B%0A%20%20%20%20margin%3A%205px%3B%0A%20%20%20%20color%3A%20%23564A45%3B%0A%7D%0Ap%20%7B%0A%20%20%20%20margin%3A5px%3B%0A%7D%0Aspan%20%7B%0A%20%20%20%20background-image%3A%20url(btn_bg.jpg)%3B%0A%20%20%20%20background-repeat%3A%20repeat-x%3B%0A%20%20%20%20background-position%3A%20left%20top%3B%0A%20%20%20%20display%3Ainline-block%3B%0A%20%20%20%20padding%3A5px%3B%0A%20%20%20%20border%3A%201px%20solid%20%23F2F2F2%3B%0A%20%20%20%20color%3A%20%2373788A%3B%0A%20%20%20%20font-weight%3A%20bold%3B%0A%20%20%20%20cursor%3Apointer%3B%0A%7D%0A%20%0Aspan%3Ahover%20%7B%0A%20%20%20%20background-image%3A%20url(btn_bg.jpg)%3B%0A%20%20%20%20background-position%3A%20left%20bottom%3B%0A%20%20%20%20color%3A%20%230080FF%3B%0A%7D%0A%20%0Aspan%3Aactive%20%7B%0A%20%20%20%20background-image%3A%20url(btn_bg.jpg)%3B%0A%20%20%20%20background-position%3A%20left%20center%3B%0A%20%20%20%20color%3A%20%23F30%3B%0A%7D%0A%20%0A%23iki%7B%0A%20%20%20%20display%3Anone%3B%0A%7D%0A%20%0A%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<style>" title="<style>" />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22http%3A%2F%2Fcode.jquery.com%2Fjquery-latest.pack.js%22%20type%3D%22text%2Fjavascript%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%0AjQuery(document).ready(function()%7B%0A%20%20%20%20%2F%2F%20icerik%20genislet%0A%20%20%20%20%24('%23devam_btn').click(function()%7B%0A%20%20%20%20%20%20%20%20%24('%23bir').hide()%3B%0A%20%20%20%20%20%20%20%20%24('%23iki').fadeIn(500)%3B%0A%20%0A%20%20%20%20%7D)%3B%0A%20%20%20%20%2F%2F%20icerik%20daralt%0A%20%20%20%20%24('%23kapat_btn').click(function()%7B%0A%20%20%20%20%20%20%20%20%24('%23bir').fadeIn(500)%3B%0A%20%20%20%20%20%20%20%20%24('%23iki').hide()%3B%0A%20%0A%20%20%20%20%7D)%3B%0A%20%0A%7D)%3B%0A%20%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
</head>
</html>