คลังเก็บบล็อก

jQuery.html5Loader


Html 5 มีความสามารถในการแสดง video และ audio เพิ่มขิ้นมา ดังนั้น preload ในครั้งที่แล้ว ซึ่งช่วยโหลดรูปมาเก็บไว้เท่านั้นอาจจะไม่เพียงพอ เพราะไฟล์วิดีโอใหญ่ ๆ หรือไฟล์เพลงยังโหลดมาไม่ครบ การแสดงผลออกมาจึงไม่สมบูรณ์ตามที่ออกแบบไว้ได้ เครื่องมือที่แนะนำวันนี้คือ jQuery.html5Loader โหลดได้ที่ gianlucaguarini http://www.gianlucaguarini.com/
demo.html


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>preload jQuery.html5loader</title>
<style>
#preload {
	background: #000;
	height: 99%;
	opacity: 0.5;
	width: 99%;
	z-index: 100;
}
</style>
</head>

<body>
<div id="preload"></div>
<script src="assets/jQuery/jquery.min.js"></script> 
<script src="assets/jquery/jQuery.html5loader/js/animations/jQuery.html5Loader.circular.js"></script> 
<script src="assets/jQuery/jQuery.html5loader/js/jQuery.html5Loader.min.js"></script> 
<script>
var images ={};
var loaderAnimation = $('#preload').LoaderAnimation({
	glowColor:"#f0f0f0",
	lineWidth:10,
	color:"#cccccc"
});
$.html5Loader({
		getFilesToLoadJSON:'preloadHtml5loader.json',
		onComplete:function()
		{
			alert('onComplete');
			$('#preload').remove();
		},
		onUpdate: loaderAnimation.update
});
</script>
</body>
</html>

โดย JavaScript จะอ่านข้อมูลที่ต้องโหลดมาจากข้อมูล json ในไฟล์ preloadHtml5loader.json ผมทำไฟล์ PHP ช่วย generate ไว้ให้แล้ว
generator.php

<?php
/*
http://php.net/manual/en/function.readdir.php
Xhtml.co.il 01-Jun-2011 02:31
*/

/*
http://en.wikipedia.org/wiki/Internet_media_type#List_of_common_media_types
http://diveintohtml5.info/video.html
http://en.wikipedia.org/wiki/HTML5_video#Supported_video_formats
*/

$extensionType['AUDIO'] = array('aiff', 'au', 'flac', 'l16', 'm4a', 'm4b', 'm4p', 'm4rand', 'm4v', 'mp3', 'oga', 'ogg', 'ogv', 'ogx', 'opus', 'pcm', 'ra', 'ram', 'spx', 'wav', 'wave', 'webm');
$extensionType['IMAGE'] = array('gif', 'ico', 'jfi', 'jfif', 'jif', 'jpe', 'jpeg', 'jpg', 'png', 'svg', 'svgz', 'tif', 'tiff');
$extensionType['SCRIPT'] = array('js', 'json');
$extensionType['TEXT'] = array('css', 'csv', 'htm', 'html', 'txt', 'xml');
$extensionType['VIDEO'] = array('aac', 'dv', 'f4a', 'f4b', 'f4p', 'f4v', 'flv', 'm1a', 'm1v', 'm2a', 'm4a', 'm4b', 'm4p', 'm4r', 'm4v', 'mk3d', 'mka', 'mks', 'mkv', 'mov', 'mp1', 'mp2', 'mp4', 'mpa', 'mpeg', 'mpg', 'mpv', 'oga', 'ogv', 'ogx', 'opus', 'qt', 'spx', 'wav', 'wmv');

function ReadFolderDirectory($dir = 'assets/products', $extensionType, $files)
{
	$multiple = array();
	if($handler = opendir($dir))
	{
		$dirs = array();
		while (($sub = readdir($handler)) !== FALSE)
		{
			$item = array();
			if ($sub != "." && $sub != ".." && $sub != "Thumb.db" && $sub != "Thumbs.db")
			{
				if(is_file($dir."/".$sub))
				{
					$pathParts = pathinfo($sub);
					$item['type'] = '';
					foreach($extensionType as $group => $type)
					{
						$ext = strtolower($pathParts['extension']);
						if(array_search($ext, $type) !== FALSE)
						{
							$item['type'] = $group;
							continue;
						}
					}
					if($item['type'] == 'AUDIO' || $item['type'] == 'VIDEO')
					{
						$multiple[$item['type']][$pathParts['filename']][$ext]['size'] = filesize($dir."/".$sub);
						$multiple[$item['type']][$pathParts['filename']][$ext]['source'] = $dir.'/'.$sub;
					}
					else
					{
						$item['size'] = filesize($dir."/".$sub);
						$item['source'] = $dir.'/'.$sub;
						$files[] = $item;
					}
				}
				else
				{
					$files = ReadFolderDirectory($dir."/".$sub, $extensionType, $files);
				}
			}
		}
		closedir($handler);
		foreach($multiple as $type => $filenames)
		{
			$group = array();
			$group['type'] = $type;
			foreach($filenames as $filename => $exts)
			{	
				foreach($exts as $ext => $info)
				{	
					$group['sources'][$ext]['size'] = $info['size'];
					$group['sources'][$ext]['source'] = $info['source'];
				}
			}
			$files[] = $group;
		}
	}
	return $files;
}

$files = array();
$files['files'] = ReadFolderDirectory('assets/products/items', $extensionType, $files);
//echo '<pre>',print_r($lists, true),'</pre>';
header('Content-type: application/json; charset=utf-8');
echo json_encode($files);

Effect ที่มีสามารถเปลี่ยนได้โดยการเปลี่ยนไปเรียกไฟล์ javascript อื่นๆ ใน assets/jquery/jQuery.html5loader/js/animations แทน

Advertisements

Ajax Jquery Tinymce Serialize


เวลาใช้ jQuery serialize() ดึงข้อมูลจากฟอร์ม ถ้ามี WYSIWYG Editor อยู่ หลายๆครั้ง จะได้ข้อมูลไม่ครบ เพราะช่องที่เรากรอกข้อมูลลงไป จริงๆแล้วมันไม่ใช้ textarea แต่จะเป็นอีก layer ที่อยู่ข้างบนอีกที ถ้าจะเอาข้อมูลออกมาต้องคัดลอกข้อมูลกลับไปที่ textarea ก่อน
ถ้าเป็น tinymce ใช้คำสั่ง tinyMCE.get(‘ ไอดี ของ textarea’).getContent()

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Tinymce & Jquery serialize By Pitt Phunsanit</title>
</head>

<body>
<form id="plus" method="post" action="somepage">
  <textarea name="article" id="articleId" style="width:100%"></textarea>
  <input type="submit">
</form>
<script src="assets/jQuery/jquery.min.js"></script> 
<script src="assets/tinymce/tiny_mce.js"></script> 
<script>
$(function(){
	$('#plus').submit(function(event){
		event.preventDefault();
		$('#articleId').val(tinyMCE.get('articleId').getContent());
		alert('after '+$('#articleId').serialize());
	});
});

tinyMCE.init({
	mode : "textareas",
	theme : "simple"
});
</script>
</body>
</html>
%d bloggers like this: