embed – PlusMagi's Blog By Pitt Phunsanit

AJAX, datalist, embed, embedded, form, grid, iframe, joget, ฟอร์ม

Joget: แสดงเฉพาะ form / datalist

น้อง (รึเปล่า) ที่ทำงานต้องการจะแสดง datalist ในฟอร์ม ทำให้เกิดการค้นหาข้อมูลกันนิดหนึ่ง แต่จริงๆ แล้วก็มีอยู่ในแอปตัวอย่างของ Joget นั่นละ แต่ไม่ยักกะเขียนไว้ในคู่มือ Datalist Builder

สมมุติว่า url ของหน้าที่แสดง datalist คือ http://localhost:8080/jw/web/userview/crm/crm_userview_sales/_/UsersDashboard ถ้าจะแสดงเฉพาะส่วน body ไม่เอา header และ footer ได้ง่ายๆเพียงแค่ใส่ ?embed=true ไปเท่านั้น คือ http://localhost:8080/jw/web/userview/crm/crm_userview_sales/_/UsersDashboard?embed=true หลังจากนี้ก็จะเหมาะที่จะแสดงใน iframe หรือ เรียกใช้จาก ajax ได้แล้ว

จากนั้นหลังการค้นคว้าเพิ่มเติมก็ได้เจอกับ Embedded Mode ที่สามารถเพิ่ม /embed/ ก่อน /userview/ เช่น http://localhost:8080/jw/web/userview/crm/crm_userview_sales/_/UsersDashboard เป็น http://localhost:8080/jw/web/embed/userview/crm/crm_userview_sales/_/UsersDashboard

วิธีนี้สามารถใช้กับฟอร์มได้เหมือนกัน เช่น http://localhost:8080/jw/web/userview/crm/crm_userview_sales/_/UserForm?id=clark เป็น http://localhost:8080/jw/web/userview/crm/crm_userview_sales/_/UserForm?id=clark&embed=true และ http://localhost:8080/jw/web/userview/crm/crm_userview_sales/_/UserForm?id=clark&embed=true

Byphunsanit

embed, iframe, ipad, iphone, resize, responsive, you tube, youtube, ยูทูป, ไอเฟรม, ไอโฟน

ใส่ Youtube ใช้ได้บนมือถือและทุกจอ

สมัยนี้เวลาทำเว็บต้องคิดถึงพวกอุปกรณ์ขนาดหน้าจอต่างๆ เมื่อใส่ video แล้วก็อยากจะให้มันกว้างพอดีกับหน้าจอ ไม่ว่าจะเป็น iPhone, ipad, Note อุปกรณ์พกพามันมีหลายขนาดเหลือเกิน โดยเฉพาะของช่างตัดกระจกอย่าง samsung ที่ทำมือถือออกมาแทบจะทุกขนาด แถมแต่ละเครื่องยังมีแนวตั้ง แนวนอนให้เลือกอีก อีกจะเขียน code ให้ได้ทุกชิ้นยังไงก็ไม่ครบทั้งหมด

ไปเจอบนความดีๆ Responsive Youtube Embed ใช้แค่ css นิดหน่อยก็ตอบโจทย์ได้แล้ว

เปิดหน้าเว็บยูทูปที่เราต้องการใส่ในเว็บ ของผมคือเพลง เพลง ความรักกับรองเท้า
ศิลปิน SIGNATURE สังเกตุด้านบนเว็บจะมี url อยู่ด้านบน ของเพลงนี้คือ http://www.youtube.com/watch?v=FPnewcqkmlc&list=RDFPnewcqkmlc คัดลอกอักษรระหว่าง v= และ & ไปใส่โค้ทตามตัวอย่างด้านล่าง

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Responsive Youtube Embed</title>
<style>
.video-container {
	height: 0;
	overflow: hidden;
	padding-bottom: 56.25%;
	padding-top: 30px;
	position: relative;
}
.video-container embed, .video-container iframe, .video-container object {
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}
</style>
</head>

<body>
<div class="video-container">
  <iframe src="http://www.youtube.com/embed/FPnewcqkmlc" frameborder="0" width="560" height="315"></iframe>
</div>
</body>
</html>

เสร็จแล้ว มันง่ายมาก ฟังเพลงโปรดของผมไปเพลินๆ นะครับ หวังว่าวันหนึ่งจะได้มีคนมานั่งฟังเพลงนี้ด้วยกัน

Tag Archive embed

Joget: แสดงเฉพาะ form / datalist

ใส่ Youtube ใช้ได้บนมือถือและทุกจอ