PlusMagi's Blog By Pitt Phunsanit

plus emotion magic to the knowledge of logic.

Tag Archive jQuery

  • Home   /  
  • Posts tagged "jQuery"
    • ( Page2 ) ( Page2 )

ใส่ฟิลเตอร์ให้ select box

select box (drop down/ dropdown / ดรอปดาวน์ / list / ลิสต์ หลายชื่อเหลือกเกิน) นิยมใช้เวลาต้องการให้ user เลือกจากตัวเลือกที่กำหนดให้เท่านั้น แต่ถ้ามันมีเยอะมาก อย่าง 77 จังหวัด ถ้าต้องเลือกบ่อยๆ ก็ไม่สดวกที่จะต้องไล่หา แก้ได้โดยใช้ jQuery ใส่ filter ให้

ดูตัวอย่างการทำงานได้ที่

ตัวอย่าง Demo -> =>

  1. download jQuery.chosen มาจาก harvesthq Chosen แตกไฟล์
  2. ใส่ code ง่ายๆ ตามตัวอย่าง[code language=”html”]
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>jQuery Chosen Demo By Pitt Phunsanit</title>
    <link href="chosen/chosen.min.css" rel="stylesheet" type="text/css">
    </head>
    <body>
    <select id="province" style="width:200px;">
    <option value="64">กระบี่</option>
    <option value="1">กรุงเทพมหานคร</option>
    <option value="56">กาญจนบุรี</option>
    <option value="34">กาฬสินธุ์</option>
    <option value="49">กำแพงเพชร</option>
    <option value="28">ขอนแก่น</option>
    <option value="13">จันทบุรี</option>
    <option value="15">ฉะเชิงเทรา</option>
    <option value="11">ชลบุรี</option>
    <option value="9">ชัยนาท</option>
    <option value="25">ชัยภูมิ</option>
    <option value="69">ชุมพร</option>
    <option value="45">เชียงราย</option>
    <option value="38">เชียงใหม่</option>
    <option value="72">ตรัง</option>
    <option value="14">ตราด</option>
    <option value="50">ตาก</option>
    <option value="17">นครนายก</option>
    <option value="58">นครปฐม</option>
    <option value="36">นครพนม</option>
    <option value="19">นครราชสีมา</option>
    <option value="63">นครศรีธรรมราช</option>
    <option value="47">นครสวรรค์</option>
    <option value="3">นนทบุรี</option>
    <option value="76">นราธิวาส</option>
    <option value="43">น่าน</option>
    <option value="77">บึงกาฬ</option>
    <option value="20">บุรีรัมย์</option>
    <option value="4">ปทุมธานี</option>
    <option value="62">ประจวบคีรีขันธ์</option>
    <option value="16">ปราจีนบุรี</option>
    <option value="74">ปัตตานี</option>
    <option value="5">พระนครศรีอยุธยา</option>
    <option value="44">พะเยา</option>
    <option value="65">พังงา</option>
    <option value="73">พัทลุง</option>
    <option value="53">พิจิตร</option>
    <option value="52">พิษณุโลก</option>
    <option value="61">เพชรบุรี</option>
    <option value="54">เพชรบูรณ์</option>
    <option value="42">แพร่</option>
    <option value="66">ภูเก็ต</option>
    <option value="32">มหาสารคาม</option>
    <option value="37">มุกดาหาร</option>
    <option value="46">แม่ฮ่องสอน</option>
    <option value="24">ยโสธร</option>
    <option value="75">ยะลา</option>
    <option value="33">ร้อยเอ็ด</option>
    <option value="68">ระนอง</option>
    <option value="12">ระยอง</option>
    <option value="55">ราชบุรี</option>
    <option value="7">ลพบุรี</option>
    <option value="40">ลำปาง</option>
    <option value="39">ลำพูน</option>
    <option value="30">เลย</option>
    <option value="22">ศรีสะเกษ</option>
    <option value="35">สกลนคร</option>
    <option value="70">สงขลา</option>
    <option value="71">สตูล</option>
    <option value="2">สมุทรปราการ</option>
    <option value="60">สมุทรสงคราม</option>
    <option value="59">สมุทรสาคร</option>
    <option value="18">สระแก้ว</option>
    <option value="10">สระบุรี</option>
    <option value="8">สิงห์บุรี</option>
    <option value="51">สุโขทัย</option>
    <option value="57">สุพรรณบุรี</option>
    <option value="67">สุราษฎร์ธานี</option>
    <option value="21">สุรินทร์</option>
    <option value="31">หนองคาย</option>
    <option value="27">หนองบัวลำภู</option>
    <option value="6">อ่างทอง</option>
    <option value="26">อำนาจเจริญ</option>
    <option value="29">อุดรธานี</option>
    <option value="41">อุตรดิตถ์</option>
    <option value="48">อุทัยธานี</option>
    <option value="23">อุบลราชธานี</option>
    </select>
    <script src="../jQuery/jquery-2.1.3.min.js"></script><!– เรียกใช้ jQuery –>
    <script src="chosen/chosen.jquery.min.js"></script><!– เรียกใช้ jQuery plugin –>
    <script>
    $(function(){

    $(‘#province’).chosen(); <!– เรียกใช้ jQuery plugin chosen กับ id province–>

    })
    </script>
    </body>
    </html>
    [/code]

  3. ใช้ได้แล้ว

เช็คฟอร์มด้วย jQuery Validation

ถ้าฟอร์มของเราโดนเรียกใช้บ่อยๆ การที่ใส่กฏไว้ในไฟล์ HTML จะทำให้ทราฟฟิคเว็บเราเสียไปเปล่าๆ แก้ได้โดยแยก rule ออกไปไว้ในไฟล์ javasscript เพราะว่าถึงหน้านี้จะโดนเรียกกี่ครั้ง แต่ไฟล์ javascript ที่โดนแยกออกไปจะโหลดแค่ครั้งเดียวเท่านั้น ประหยัดไปได้ส่วนหนึ่ง และทำให้โหลดหน้าเว็บได้เร็วขึ้น

[code language=”html”]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Validation : html5 / inline</title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<!– HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries –>
<!–[if lt IE 9]>
<script src="http ://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="http ://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]–>
</head>
<body>
<form action="validation.php" enctype="multipart/form-data" id="formA" method="post">
<div class="form-group">
<p>เครื่องปรุง</p>
<label>
<input type="checkbox" name="flavoring[]" value="1">
เกลือ</label>
<label>
<input type="checkbox" name="flavoring[]" value="2">
น้ำตาล</label>
<label>
<input type="checkbox" name="flavoring[]" value="3">
น้ำปลา</label>
<label>
<input type="checkbox" name="flavoring[]" value="4">
พริกป่น</label>
<label for="flavoring[]" class="error"></label>
</div>
<div class="form-group">
<label>สั่งวันที่
<input type="text" name="dateOrder">
</label>
</div>
<div class="form-group">
<label>Email
<input type="text" name="sendto">
</label>
</div>
<div class="form-group">
<label>รับเฉพาะภาพ
<input type="file" name="image">
</label>
</div>
<div class="form-group">
<label class="btn btn-primary">รับแต่ .jpeg
<input type="file" name="jpeg">
</label>
</div>
<div class="form-group">
<label>ข้าวเปล่า
<input type="text" name="rice">
</label>
</div>
<div class="form-group">
<label>แคปหมู (ปลีก สั่งเป็นขีดได้ เช่น 0.5)
<input type="text" name="friedPorkSkin">
</label>
</div>
<div class="form-group">
<label>แคปหมู (ส่ง kg.)
<input type="text" name="friedPorkSkin">
</label>
</div>
<div class="form-group">
<p>เส้น</p>
<label>
<input type="radio" name="noodle" value="1">
เส้นหมี่</label>
<label>
<input type="radio" name="noodle" value="2">
เส้นเล็ก</label>
<label>
<input type="radio" name="noodle" value="3">
เส้นใหญ่</label>
<label>
<input type="radio" name="noodle" value="4">
เส้นหมี่</label>
<label for="noodle" class="error"></label>
</div>
<div class="form-group">
<label>เว็บส่วนตัว
<input type="url" name="blogUrl">
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<script src="assets/jQuery/jquery.min.js"></script>
<script src="plus/jQuery/jquery-validation/jquery.validate.min.js"></script>
<script src="assets/script.js"></script>
</body>
</html>
[/code]
ไฟล์ assets/script.js
[code language=”javascript”]
$(function()
{
$(‘#formA’).validate(
{
"messages" : {
"friedPorkSkin" : {
"digits" : "ขายแต่เป็น KG ครับ"
}
},
"rules" : {
"flavoring[]" : {
"required" : true
},
"dateOrder" : {
"required" : true,
"date" : true
},
"sendto" : {
"required" : true,
"email" : true,
"maxlength" : 50,
"minlength" : 10
},
"image" : {
"required" : true,
"accept" : "image/*"
},
"jpeg" : {
"required" : true,
"accept" : "image/jpeg"
},
"rice" : {
"required" : true,
"number" : true
},
"friedPorkSkin" : {
"required" : true,
"digits" : true
},
"blogUrl" : {
"required" : true,
"url" : true
}
}
});
});
[/code]

ปล. messages โดนแยกออกมา ไม่เข้าใจเหมือนกันทำไม่ปลักอินตัวนี้ถึงออกแบบแบบนี้

jQuery Validation On AJAX form

ถ้าเราต้องการส่งค่าฟอร์มไปแบบเอแจ็กซ์ โดยก่อนส่งค่าไปให้ตรวจสอบเบื่องต้นก่อน สามารถทำได้โดยใช้เมธอด validate()

[code language=”html”]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Validation : AJAX form</title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<!– HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries –>
<!–[if lt IE 9]>
<script src="http://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="http://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]–>
</head>
<body>
<form action="login.php" id="formA" method="post">
<div class="form-group">
<label>User
<input type="text" name="user" required minlength="5" maxlength="20">
</label>
</div>
<div class="form-group">
<label>Password
<input type="password" name="password" required minlength="10" maxlength="50">
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<script src="assets/jQuery/jquery.min.js"></script>
<script src="plus/jQuery/jquery-validation/jquery.validate.min.js"></script>
<script>
$(function()
{
form = $(‘#formA’);
validation = form.validate();
form.on(‘submit’, function(event)
{
event.preventDefault();
/* check form validation */
if(validation.form() == true)
{
$.ajax({
data: form.serialize(),
dataType : ‘json’,
success: function(data){
$(‘#predictionCompaireA’).html(data);
},
type: ‘POST’,
url: ‘login.php’
});
}
});
});
</script>
</body>
</html>
[/code]

ตรวจฟอร์มด้วย HTML 5 / jQuery Validation Plugin

HTML 5 มี attribute อย่าง required ช่วยตรวจสอบฟอร์ม แต่มันยังไม่สมบูรณ์ เช่น ใช้ required กับกลุ่ม checkbox ไม่ได้ มันตรวจได้แค่เลือก checkbox ตัวนั้นๆเท่านั้น จะบังคับให้เลือก 1 ในตัวเลือกไม่ได้

ทำให้ต้องใช้เจคิวรี่อย่าง jQuery Validation Plugin ช่วย

[code language=”html”]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Validation : html5 / inline</title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<!– HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries –>
<!–[if lt IE 9]>
<script src="http://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="http://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]–>
</head>
<body>
<form action="validation.php" enctype="multipart/form-data" id="formA" method="post">
<div class="form-group">
<p>เครื่องปรุง</p>
<!– ใส่ required ใน input ตัวแรกก็พอ –>
<label>
<input type="checkbox" name="flavoring[]" value="1" required>
เกลือ</label>
<label>
<input type="checkbox" name="flavoring[]" value="2">
น้ำตาล</label>
<label>
<input type="checkbox" name="flavoring[]" value="3">
น้ำปลา</label>
<label>
<input type="checkbox" name="flavoring[]" value="4">
พริกป่น</label>
<!– แสดง error ตรงนี้ อย่าลืม class="error" –>
<label for="flavoring[]" class="error"></label>
</div>
<div class="form-inline">
<div class="form-group"><!– input text ธรรมดา –>
<label>สั่งวันที่
<input type="text" name="dateOrder" required data-rule-date="true">
</label>
</div>
<div class="form-group"><!– input date –>
<label>ส่งวันที่
<input type="date" name="dateDelivery" required>
</label>
</div>
</div>
<div class="form-inline">
<div class="form-group"><!– min and max length –>
<label>
<input type="text" id="sendto" name="sendto" required minlength="10" maxlength="50" data-rule-email="true">
Email</label>
</div>
<div class="form-group"> <!– data-rule-equalTo id sendto –>
<label>
<input type="email" id="sendtoSame" name="sendtoSame" required data-rule-equalTo="#sendto">
Email Confirm</label>
</div>
</div>
<div class="form-inline">
<div class="form-group">
<label>รับเฉพาะภาพ
<input type="file" name="image" accept="image/*">
</label>
</div>
<div class="form-group"><!– style input –>
<label class="btn btn-primary">รับแต่ .jpeg
<input type="file" name="jpeg" accept="image/jpeg" style="display:none;">
</label>
</div>
</div>
<div class="form-inline">
<div class="form-group">
<label>ข้าวเปล่า
<input type="text" name="rice" data-rule-number="true">
</label>
</div>
<div class="form-group">
<label>แคปหมู (ปลีก สั่งเป็นขีดได้ เช่น 0.5)
<input type="number" name="friedPorkSkin" step="0.1">
</label>
</div>
<div class="form-group"><!– custom message –>
<label>แคปหมู (ส่ง kg.)
<input type="number" name="friedPorkSkin" data-rule-digits="true" data-message-digits="ขายแต่เป็น KG ครับ">
</label>
</div>
</div>
<div class="form-group">
<p>เส้น</p>
<!– ใส่ required ใน input ตัวแรกก็พอ –>
<label>
<input type="radio" name="noodle" value="1" required>
เส้นหมี่</label>
<label>
<input type="radio" name="noodle" value="2">
เส้นเล็ก</label>
<label>
<input type="radio" name="noodle" value="3">
เส้นใหญ่</label>
<label>
<input type="radio" name="noodle" value="4">
เส้นหมี่</label>
<!– แสดง error ตรงนี้ อย่าลืม class="error" –>
<label for="noodle" class="error"></label>
</div>
<div class="form-group">
<label>ลวกนานมั๋ย
<input type="range" min="2" max="8" step="1">
</label>
</div>
<div class="form-inline">
<div class="form-group">
<label>เว็บบริษัท
<input type="text" name="officeUrl" data-rule-url="true">
</label>
</div>
<div class="form-group">
<label>เว็บส่วนตัว
<input type="url" name="blogUrl">
</label>
</div>
</div>
<input type="submit" value="Submit">
</form>
<script src="assets/jQuery/jquery.min.js"></script>
<script src="plus/jQuery/jquery-validation/jquery.validate.min.js"></script>
<script>
$(function()
{
$(‘#formA’).validate();
});
</script>
</body>
</html>
[/code]

ฟอร์มเดียวหลายหน้าที่ พรีวิวก็ได้ บันทึกก็ดี

ลูกค้าอยากจะให้ คนกรอกข้อมูลสามารถตรวจสอบข้อมูลได้ก่อนกว่า หลังจาก save ไปแล้ว report ที่จะออกมาจะหน้าตาแบบไหน ไม่อยากให้ บันทึกแล้วมาแก้ที่หลัง

ทำได้โดยทำปุ่ม submit มีหลายปุ่ม แล้วมาเช็กดูว่าเค้ากดปุ่มไหน จะได้เลือกการกระทำถูก

google maps จาก jQuery ajax

ใช้เจคิวรี่เอแจ็กซ์ โหลด fragment google map เข้ามาแสดงในเท็ปแล้วไม่ขึ้น ไม่เห็น ทั้งๆที่ก็เขียน code ตามปกติ ดูตรงๆ ไม่ผ่านเอเจ็กซ์ ก็ทำงานปกติ ให้เปลี่ยนมาใช้ HTML fragment code ตามนี้ครับ
[code language=”html”]
<div id="map-canvas" style="width: 100$; height: 400px"></div>
<script type="text/javascript">
function initialize()
{
var mapOptions = {
center: {lat: 13.799604, lng: 100.51129},
zoom: 16
};
var map = new google.maps.Map(document.getElementById(‘map-canvas’),
mapOptions);
}

$(function()
{
$.getScript("https://maps.googleapis.com/maps/api/js?key=ใส่ google map API key ตรงนี้&async=2&callback=initialize", function () {});
});
</script>
[/code]

jQuery.html5Loader

Html 5 มีความสามารถในการแสดง video และ audio เพิ่มขิ้นมา ดังนั้น preload ในครั้งที่แล้ว ซึ่งช่วยโหลดรูปมาเก็บไว้เท่านั้นอาจจะไม่เพียงพอ เพราะไฟล์วิดีโอใหญ่ ๆ หรือไฟล์เพลงยังโหลดมาไม่ครบ การแสดงผลออกมาจึงไม่สมบูรณ์ตามที่ออกแบบไว้ได้ เครื่องมือที่แนะนำวันนี้คือ jQuery.html5Loader โหลดได้ที่ gianlucaguarini http://www.gianlucaguarini.com/
demo.html[code language=”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>
[/code]
โดย JavaScript จะอ่านข้อมูลที่ต้องโหลดมาจากข้อมูล json ในไฟล์ preloadHtml5loader.json ผมทำไฟล์ PHP ช่วย generate ไว้ให้แล้ว
generator.php
[code language=”html”]
<?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);
[/code]
Effect ที่มีสามารถเปลี่ยนได้โดยการเปลี่ยนไปเรียกไฟล์ javascript อื่นๆ ใน assets/jquery/jQuery.html5loader/js/animations แทน

Ajax Jquery Tinymce Serialize

เวลาใช้ jQuery serialize() ดึงข้อมูลจากฟอร์ม ถ้ามี WYSIWYG Editor อยู่ หลายๆครั้ง จะได้ข้อมูลไม่ครบ เพราะช่องที่เรากรอกข้อมูลลงไป จริงๆแล้วมันไม่ใช้ textarea แต่จะเป็นอีก layer ที่อยู่ข้างบนอีกที ถ้าจะเอาข้อมูลออกมาต้องคัดลอกข้อมูลกลับไปที่ textarea ก่อน
ถ้าเป็น tinymce ใช้คำสั่ง tinyMCE.get(‘ ไอดี ของ textarea’).getContent()
[sourcecode language=”html”]
<!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>
[/sourcecode]

jQuery plugin แบบมาตราฐาน

[sourcecode language=”html”]
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>advance jQuery plugin By Pitt Phunsanit</title>
<body>
<div id="demo">
<h1>test</h1>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
/* jQuery Plugin Template */
(function($){
/* global data & object */
var global = new Object
var methods = {
/* default methods */
init : function(options){
var settings = $.extend({
id:"instead",
background:"green"
}, options);
this.append(‘<ul id="’+settings.id+’" style="background:’+settings.background+’"></ul>’);
global.ul = $(‘#’+settings.id);
return this;
},
/* methods */
li:function(methodsArguments){
var arguments = $.extend({
id:"liId",
color:"blue"
}, methodsArguments);
global.ul.append(‘<li id="’+arguments.id+’" style="color:’+arguments.color+’">set color = ‘+arguments.color+'</li>’);
return this;
}
/* methods ตัวที่ 2 แบบมี internal call */
,link:function(methodsArguments_1){
var arguments_1 = $.extend({
id:"liId",
color:"blue",
href:"#",
label:"link to"
}, methodsArguments_1);
/* call methods li */
methods[‘li’].apply(this ,arguments)
$(‘#’+arguments_1.id ,global.ul).append(‘<a href="’+arguments_1.href+’">’+arguments_1.label+'</a>’);
return this;
}
};

$.fn.instead = function(method){
/* method calling logic */
if ( methods[method] ) {
return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
} else if ( typeof method === ‘object’ || ! method ) {
return methods.init.apply( this, arguments );
} else {
$.error(‘Method ‘ + method + ‘ does not exist on jQuery.tooltip’ );
}
};
})(jQuery);
</script>
<script>
$(function(){
$(‘#demo’)
/* default (init) */
.instead()
/* methods li แบบ default */
.instead(‘li’)
/* methods li แบบ ปรับแต่ง */
.instead(‘li’, {id:"customID1" ,color:"red"})
.instead(‘link’, {id:"customID2" ,color:"white" ,href:"http://plusmagic.wordpress.com/" ,label:"plusmagic.wordpress.com"})
.instead({id:"customID" ,background:"yellow"})
.instead(‘li’)
.instead(‘li’, {id:"customID2" ,color:"red"})
/* test chainability */
.css(‘color’, ‘pink’);
});
</script>
</body>
</html>
[/sourcecode]

jQuery plugin แบบง่ายๆ

[sourcecode language=”html”]
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>basic jQuery plugin By Pitt Phunsanit</title>
</head>
<body>
<ul id="demo">
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
/* jQuery Plugin Template */
(function($){
/* $.fn.ชื่อ plugin */
$.fn.instead = function(options){
/* ค่า default ถ้าไม่ส่งมา */
var settings = $.extend({
id:"instead",
background:"green"
}, options);
/* ทำงาน
– อ้างถึง selected โดยใช้ this
– ใช้ตัวแปรตามรูปแบบ settings.ตัวแปร
*/
this.append(‘<li id="’+settings.id+’" style="background:’+settings.background+’">id = ‘+settings.id+'</li>’);
/* Maintaining Chainability */
return this;
};
})( jQuery );
</script>
<script>
$(function(){
$(‘#demo’)
/* default */
.instead()
/* ปรับแต่ง */
.instead({id:"customID" ,background:"yellow"})
.instead({id:"customID2" ,background:"red"})
/* test chainability */
.css(‘color’, ‘white’);
});
</script>
</body>
</html>
[/sourcecode]

Proudly powered by WordPress | Theme: Appointment Blue by Webriti