"เพิ่มเติม"ว่ารูปแบบปุ่ม
หน้า 1 จาก 2
ในบทความนี้ผมจะอธิบายวิธีการที่จะสร้างผลกระทบของปุ่ม"เพิ่มเติม"เพื่อที่ Twitter โดยใช้ห้องสมุด jQuery
ปุ่มที่เราต้องการที่จะสร้าง, สำหรับมือใหม่ช่วยให้คุณสามารถขยายรายการของข้อความที่ปรากฏขึ้นโดยเริ่มต้นโดยไม่ต้องรีเฟรชหน้า (ซึ่งเป็นไปได้ที่จะขอบคุณเทคโนโลยี Ajax ใช้มากขึ้นในสภาพแวดล้อมของ Web 2.0) ใด ๆ
เราเริ่มต้นด้วยการสร้างฐานข้อมูลการทดสอบประกอบด้วยตารางเดียว :
สร้างข้อความตาราง ( msg_id INT AUTO_INCREMENT PRIMARY KEY, ข้อความตัวอักษร );ที่คุณสามารถดูตารางที่คุณเพิ่งสร้างจะประกอบด้วยเพียงสองเขตข้อมูลที่ :
- msg_id ซึ่งจะระบุข้อความ;
- ข้อความและที่มีข้อความ;
เพื่อความสะดวกสบายของฉันฉันสร้างไฟล์ PHP (ซึ่งผมจะใช้ในการรวม) ที่ฉันทำเพียงการเชื่อมต่อไปยังฐานข้อมูลและฉันเรียกมันว่า"dbconfig.php"
<? Php
mysql_connect $ conn = ("host","username"รหัสผ่าน"") or die (mysql_error ());
mysql_select_db ("NAME_DB", $ conn) or die (mysql_error ());
?>
ตามที่กล่าวไว้ในไฟล์"dbconfig.php"จะรวมอยู่ในไฟล์ที่เราสร้างเพื่อที่จะไม่ต้องเขียนรหัสเดียวกันหลายครั้ง
ไปปฏิบัติให้เกิดผลคุณจะต้องสร้างไฟล์ที่สอง :
- ที่ใช้ครั้งแรกสำหรับการแสดงครั้งแรก n""ข้อความที่;
- และที่สองที่จะต้องทำคำขอ AJAX (ดำเนินการกับ jQuery) เพื่อแสดงข้อความ"ถัดไป"
<html>
<head>
ปุ่มสไตล์ <title> เพิ่มเติมว่า </ title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="jquery.js"> </ script>
<script type="text/javascript">
$ ฟังก์ชัน (() {
$ ('. เพิ่มเติม'). คลิกที่ (function () {
องค์ประกอบ var = $ (this);
var msg = element.attr ('id');
$ ('# Morebutton') HTML ('<img src="loading.gif" />').;
$. Ajax ({
ประเภท :'post',
URL :'more_ajax.php',
วันที่ :'lastmsg ='msg +
แคช : เท็จ
ประสบความสำเร็จ : ฟังก์ชัน (HTML) {
$ ('# Morebutton') ลบ ().;
$ ('# More_updates') ผนวก (HTML).;
}
});
กลับเท็จ;
});
});
</ script>
</ head>
<body>
<div align="center" style="width:500px;">
<? Php
include ('dbconfig.php');
$ Sql_check = mysql_query ("SELECT * FROM สั่งซื้อโดย DESC LIMIT เพิ่มเติม msg_id 2");
ในขณะที่ ($ row = mysql_fetch_array ($ sql_check)) {
แถว = $ $ Msg_id ['msg_id'];
แถว $ Msg = $ ['message'];
?>
<Div id ="<Php echo $ msg_id;?>"class ="boxMsg">
<span style="padding:5px;"> <PHP echo $ msg;?> </ p>
</ div>
<? Php
}
?>
<div id="more_updates"> </ div>
<div id="morebutton"> <a id ="<PHP echo $ msg_id;?>"class ="ขึ้น"href ="#"> More </ a> </ p>
</ div>
</ BODY>
</ HTML>
ที่คุณสามารถดูหลังจากดูครั้งแรก 2 โพสต์ (เรียงตาม"msg_id"ในลำดับถัดลง) มี div ว่างเปล่าที่มี ID"more_update"(จะมี"บรรจุ"ข้อความถัดไป) และ div ที่แสดงต่อไปเป็น ลิงก์"เพิ่มเติม"เพื่อที่เราเชื่อมโยง -- วิธีการใช้ jQuery -- ข้อความที่ร้องขอการกระทำ
ส่วนหัว (หัว <head> ...</>) ของเอกสารหลังจากที่โทรเข้าห้องสมุด jQuery, เราอธิบายฟังก์ชัน javascript ที่เกี่ยวข้องกับการเชื่อมโยง"เพิ่มเติม"(ฟังก์ชันนี้จะเรียกว่าด้วย' เหตุการณ์คลิก )
กับการทำงานมาจาก"id"ของตัวระบุการเชื่อมโยง ("msg_id") นี้จะแสดงข้อความล่าสุด, ตัวระบุนี้ถูกส่งไปยังไฟล์ php เป็นพารามิเตอร์ที่สองหลังจากที่ ขอ ajax ในขณะเดียวกันแทนที่เนื้อหาของภาชนะ div ที่ ลิงก์"เพิ่มเติม"ที่มีความสวยงาม gif ภาพเคลื่อนไหวที่มีผลกระทบ loading"" เพียงเพื่อฆ่าเวลา
หากมีการขอ ajax ประสบความสำเร็จ (ความสำเร็จของสถานที่ให้บริการโปรแกรม) เราเอาทุก div ที่"morebutton"และแทรกการตอบสนอง HTML (ที่มีข้อความอื่น ๆ ) ใน div ภาชนะที่"more_update"ใช้ ผนวก .
 |
ASP ศูนย์ (Ebook)
การเรียนรู้ Microsoft ASP และ VBScript จากรอยขีดข่วน ที่เพียง 29 € |
 |
Javascript (หลักสูตร)
คู่มือที่สมบูรณ์ในการเขียนสคริปต์ฝั่งไคลเอนต์ จาก 39 € |
 |
PHP (หลักสูตร)
หลักสูตรเต็มสำหรับการสร้างเว็บไซต์แบบไดนามิก จาก 49 € |