Forgot Password ??

PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone

	Registered : 109,038

HOME > PHP > PHP Forum > ขอถามว่า ส่วนนี้ของ facebook เขาทำอย่างไร รูปที่ 1 สถานะปกติ จะอยู่แบบรูปที่ 1 แต่เมื่อมีการไปคลิกในช่อง text

ขอถามว่า ส่วนนี้ของ facebook เขาทำอย่างไร รูปที่ 1 สถานะปกติ จะอยู่แบบรูปที่ 1 แต่เมื่อมีการไปคลิกในช่อง text

เริ่มหัวข้อใหม่

pollok

โพสกระทู้ ( 143 )
บทความ ( 0 )

รูปที่ 1

รูปที่ 2

สถานะปกติ จะอยู่แบบรูปที่ 1 แต่เมื่อมีการไปคลิกในช่อง text จะเป็นดังรูปที่ 2 และมีปุ่ม แบ่งปันโผล่ขึ้นมา

และเมื่อคลิกที่ปุ่มแบ่งปัน ก็ยังคงแสดงรูปแบบ ที่ 2 อยู่ แต่ถ้าเราไปคลิกทีอื่นนอกเหนือจากนี้ จะกลับเข้าสู่รูปที่ 1

ไม่ทราบว่าเขาทำอย่างไรเหรอครับ คิดไม่ตกสักที

Tag : - - - -

Date : 2010-06-29 13:11:16

By : pollok

View : 1149

Reply : 3

No. 1

Guest

ลองศึกษา javascript css และ dom ดูครับ

ในการสร้าง element ในระหว่างที่ cursor อยู่ใน textarea ที่ 1

เช่นถ้า cursor อยู่ .focus ปุ๊บ ให้สร้าง element ขึ้นมาเป็น javascript

หรือ ถ้าไม่ชินในการสร้าง element ด้วย javascript ให้ลอง

สร้าง

<div> ขึ้นมาสองตัว

ตัวแรก สร้าง รูปแบบ ที 1

ตัวที่สอง สร้าง รูปแบบ ที่ 2

ดังนั้นเมื่อลอง view ดู เราจะเห็นว่ามีแบบที่ 1 ที่ 2 วางเห็นอยุ่สองอัน ต่อกัน

คราวนี้เราจะใช้ CSS ซ่อน CSS ตัวที่ 2 ไว้

คราวนี้เราก็จะเหลือ div ตัวเดียวแล้วเพราะตัวที่ 2 ซ่อนไว้

จากนั้นก็ใช้ javascript ดักว่า ถ้า focus ที่1 ปุ๊บให้ตัวที่ 2 โชว์ ด้วย CSS หรืจะด้วย javascript ก็ตามถนัด

แล้วสั่ง cusor focus ที่ตัวสอง คราวนี้ตัวที่ 2 ก็จะแสดง ออกและตัวที่ 1 ก็จะถูกซ่อนไป

ถ้า ตัวที่สอง event blur เมื่อไร ก็ให้ตัวที่สอง ซ่อน โดยใช้การทำเหมือนตัวที่ 1 แล้วให้ตัวที่ 2 ซ่อน 1 โชว์ครับ

ถ้าผิดพลาดหรือว่าไม่ถูกหลักขออภัย ด้วยคร๊าบ

Date : 2010-06-29 21:11:41

By : ิิbbb

No. 2

Guest

เวลาซ่อนดู onblur ดูครับ

Date : 2010-06-29 21:18:19

By : 2123

No. 3

pollok

โพสกระทู้ ( 143 )
บทความ ( 0 )

คือผมลองสร้างแล้วครับ ติดตรงเวลาคลิกที่ปุ่ม แบ่งปัน มันจะกลับอยู่สถานะที่ 1

Date : 2010-06-29 22:25:08

By : pollok

ค้นหาข้อมูล

แสดงความคิดเห็น

Re : ขอถามว่า ส่วนนี้ของ facebook เขาทำอย่างไร รูปที่ 1 สถานะปกติ จะอยู่แบบรูปที่ 1 แต่เมื่อมีการไปคลิกในช่อง text

รายละเอียด

เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง

โดย

อีเมล์

บวกค่าให้ถูก

<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)

Exchange: นำเข้าสินค้าจากจีน, Taobao, เฟอร์นิเจอร์, ของพรีเมี่ยม, ร่ม, ปากกา, power bank, แฟลชไดร์ฟ, กระบอกน้ำ