Not Defterim

<html>

<body>
  <p>Css ayarları kapalıdır.</p>
   <p>Url: <a href="https://sweetalert.js.org/guides/">https://sweetalert.js.org/guides/</a></p>
   <p>Github: <a href="https://github.com/t4t5/sweetalert">https://github.com/t4t5/sweetalert</a></p>
	<button id="description">Açıklama</button><br><br>
	<button id="title">Başlık ve Açıklama</button><br><br>
	<button id="status">İcon</button><br><br>
	<button id="custom">Özelleştirilmiş</button><br><br>
	<button id="twoButton">2 buton</button><br><br>
	<button id="buttonClick">Butona tıklandıktan sonra bir şey çıkart</button><br><br>
	<button id="input">Uyarı içerik</button><br><br>
	<button id="ajax">Ajax at</button><br><br>
<h2>Methodlar</h2>
	<table>
		<tr>
			<td>Adı</td>
			<td>Açıklama</td>
			<td>Örnek</td>
		</tr>
		<tr>
			<td>close</td>
			<td>Açık olan sweetalert'ı kapatır.</td>
			<td>swal.close()</td>
		</tr>
		<tr>
			<td>getState</td>
			<td>SweetAlert'ın durumunu öğrenin.</td>
			<td>swal.getState()</td>
		</tr>
		<tr>
			<td>setActionValue</td>
			<td>SweetAlert'ın buton değerlerini değiştirebiliriz.</td>
			<td>swal.setActionValue({ confirm: 'Text from input' })</td>
		</tr>
		<tr>
			<td>stopLoading</td>
			<td>Modal düğmeleri üzerindeki tüm yükleme durumlarını kaldırır. Düğmeyi closeModal düğmesi ile birlikte kullanın: false.</td>
			<td>swal.stopLoading()</td>
		</tr>
	</table>
    <script>
	$('#description').on('click',function(){
		//swal("Başlık");
		swal({
			text: "Açıklama",
		}); 
	});
	$('#title').on('click',function(){
		//swal("Başlık", "Açıklama");
		swal({
			title: "Başlık",
			text: "Açıklama",
		});
	});
	$('#status').on('click',function(){ 
		//swal("Good job!", "You clicked the button!", "success");
		swal({
		  icon: "success", //"warning", "error", "success" and "info".
		});
	});
	$('#custom').on('click',function(){
		swal({
			title: "Başlık",
			text: "Açıklama",
			icon: "success",  //"warning", "error", "success" and "info".
			button: {
				text: "OK", //Buton yazısı
				value: true,
				visible: true, //Görünsün mü? true, false
				className: "", //class değiştirmek istersen
				closeModal: true, //Modal kapatılsın mı, true, false 
			},
			closeOnClickOutside: false, //Modal dışında tıklayınca kapansın mı true, false 
			closeOnEsc: false, //Modal ESC ile kapansın mı true, false 
			dangerMode: true, //Buton rengi kırmızıya döner true, false
			timer: 3000, //Belli bir süre sonra otomatik kapanır. (ms cinsinden)
			  html:
              'You can use <b>bold text</b>, ' +
              '<a href="//github.com">links</a> ' +
              'and other HTML tags'
		});
	});
	
	$('#twoButton').on('click',function(){
		//swal("Çıkmak istediğinize emin misiniz?", {
		//	buttons: ["Hayır", "Evet"],
		//});
		swal({
			text:"Deneme",
			buttons: {
				cancel: "İptal", //string, true, false
				confirm: "Confirm",
				roll: {
				  text: "Do a barrell roll!",
				  value: "roll",
				},
			}
		})
	});
	
	$('#buttonClick').on('click',function(){
		swal("A wild Pikachu appeared! What do you want to do?", {
			buttons: {  //cancel, catch, defealt farkını anlamadım.
				cancel: "Run away!", 
				catch: {
					text: "Throw Pokéball!",
					value: "catch",
				},
				defeat: "İptal", 
			  },
			})
			.then((value) => {
			  switch (value) {
			 
				case "defeat":
				  swal("Pikachu fainted! You gained 500 XP!");
				  break;
			 
				case "catch":
				  swal("Gotcha!", "Pikachu was caught!", "success");
				  break;
			 
				default:
				  swal("Got away safely!");
			}
		});
	});
	
	$('#input').on('click',function(){
		swal("Write something here:", {
			content: {
				element: "input",
				attributes: {
				  placeholder: "Type your password",
				  type: "password",
				},
			  },
			})
			.then((value) => {
			  swal(`You typed: ${value}`);
		});
	});
	
	
	$('#ajax').on('click',function(){
		swal({
		text: 'Aranacak kelime, Örnek: "La La Land".',
		content: "input",
		  button: {
			text: "Ara!",
			closeModal: false, 
		  },
		})
		.then(name => {
		  if (!name) throw null;
		 
		  return fetch(`https://itunes.apple.com/search?term=${name}&entity=movie`); //ajax atılacak url
		})
		.then(results => {
		  return results.json();
		})
		.then(json => {
		  const movie = json.results[0];
		 
		  if (!movie) {
			return swal("Böyle birşey yok.!");
		  }
		 
		  const name = movie.trackName;
		  const imageURL = movie.artworkUrl100;
		 
		  swal({
			title: "Top result:",
			text: name,
			icon: imageURL,
		  });
		})
		.catch(err => {
		  if (err) {
			swal("Oh noes!", "The AJAX request failed!", "error");
		  } else {
			swal.stopLoading();
			swal.close();
		  }
		});
	});
	
	</script>
  </body>

</html>

Anasayfa Dosyalar Çalıştır Uygulama: Sweet Alert

Anasayfa Dosyalar Uygulama: Sweet Alert