ASP.NET กับ jQuery: สร้าง hyperlink เพื่อกลับไปที่บนสุดของ page

แรงจูงใจ …

บทความเยอะ และยาวมาก scroll page ลงมาเรื่อยๆ หาบทความที่ถูกใจอ่านไม่ได้ละ อยากจะกลับไปที่ navigator ที่อยู่บนสุด เพื่อไป page อื่น หรืออยากจะกลับไปอ่านบทความแรกเลย โอโห scroll ขึ้นอีกยาวเลย ไม่เอาละขี้เกียจ ต้องการ click เดียวถึงบนสุดเลยทำได้ปะ

เริ่มต้นทำกันเลย …

1. เพิ่ม web page ใหม่เขาไปใน project ตั้งชื่อว่า BackToTop.aspx แล้วเติม code ข้างล่างนี้เข้าไป form ของ page เรา

<form id=”form1″ runat=”server”>
<div>
<asp:HyperLink ID=”Top” runat=”server”></asp:HyperLink>
<div style=”width:300px;border:solid;”>

ความหมายของพรหมวิหาร 4

  • พรหมวิหาร แปลว่า ธรรมของพรหมหรือของท่านผู้เป็นใหญ่ พรหมวิหารเป็นหลักธรรมสำหรับทุกคน เป็นหลักธรรมประจำใจที่จะช่วยให้เราดำรงชีวิตอยู่ได้อย่างประเสริฐและบริสุทธิ์ หลักธรรมนี้ได้แก่

เมตตา     ความปรารถนาให้ผู้อื่นได้รับสุข
กรุณา     ความปราถนาให้ผู้อื่นพ้นทุกข์
มุทิตา     ความยินดีเมื่อผู้อื่นได้ดี
อุเบกขา     การรู้จักวางเฉย

คำอธิบายพรหมวิหาร 4

เมตตา
<br />
ความปราถนาให้ผู้อื่นได้รับสุข ความสุขเป็นสิ่งที่ทุกคนปรารถนา ความสุขเกิดขึ้นได้ทั้งกายและใจ เช่น ความสุขเกิดการมีทรัพย์ ความสุขเกิดจากการใช้จ่ายทรัพย์เพื่อการบริโภค ความสุขเกิดจากการไม่เป็นหนี้
และความสุขเกิดจากการทำงานที่ปราศจากโทษ เป็นต้น
</div>
<asp:HyperLink ID=”HyperLink1″ runat=”server” CssClass=”backtotoplink”></asp:HyperLink>
<div style=”width:300px;border:solid;”>
กรุณา
<br />
ความปรารถนาให้ผู้อื่นพ้นทุกข์ ความทุกข์ คือ สิ่งที่เข้ามาเบียดเบียนให้เกิดความไม่สบายกาย
ไม่สบายใจ และเกิดขึ้นจากปัจจัยหลายประการด้วยกัน พระพุทธองค์ทรงสรุปไว้ว่าความทุกข์มี 2 กลุ่มใหญ่ๆ ดังนี้

  • ทุกข์โดยสภาวะ หรือเกิดจากเปลี่ยนแปลงตามธรรมชาติของร่างกาย เช่น การเกิด การเจ็บไข้ ความแก่และ

ความตายสิ่งมีชีวิตทั้งหลายที่เกิดมาในโลกจะต้องประสบกับการเปลี่ยนแปลงทางร่างกายอย่างหลีกเลี่ยงไม่ได้ ซึ่งรวมเรียกว่า กายิกทุกข์

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

</div>
<asp:HyperLink ID=”HyperLink2″ runat=”server” CssClass=”backtotoplink”></asp:HyperLink>
<div style=”width:300px;border:solid;”>
มุทิตา
<br />
ความยินดีเมื่อผู้อื่นได้ดี คำว่า “ดี” ในที่นี้ หมายถึง การมีความสุขหรือมีความเจริญก้าวหน้า ความยินดีเมื่อผู้อื่นได้ดีจึงหมายถึง ความปรารถนาให้ผู้อื่นมีความสุขความเจริญก้าวหน้ายิ่งๆขึ้น ไม่มีจิตใจริษยา ความริษยา คือ ความไม่สบายใจ ความโกรธ ความฟุ้งซ่านซึ่งมักเกิดขึ้นเมื่อเห็นผู้อื่นได้ดีกว่าตน เช่น เห็นเพื่อนแต่งตัวเรียบร้อยแล้วครูชมเชยก็เกิดความริษยาจึงแกล้งเอาเศษชอล์ก โคลน หรือหมึกไปป้ายตามเสื้อกางเกงของเพื่อนนักเรียนคนนั้นให้สกปรกเลอะเทอะ เราต้องหมั่นฝึกหัดตนให้เป็นคนที่มีมุทิตา เพราะจะสร้างไมตรีและผูกมิตรกับผู้อื่นได้ง่ายและลึกซึ้ง
</div>
<asp:HyperLink ID=”HyperLink3″ runat=”server” CssClass=”backtotoplink”></asp:HyperLink>
</div>
<div style=”width:300px;border:solid;”>
อุเบกขา
<br />
การรู้จักวางเฉย หมายถึง การวางใจเป็นกลางเพราะพิจารณาเห็นว่า ใครทำดีย่อมได้ดี ใครทำชั่วย่อมได้ชั่ว ตามกฎแห่งกรรม คือ ใครทำสิ่งใดไว้สิ่งนั้นย่อมตอบสนองคืนบุคคลผู้กระทำ เมื่อเราเห็นใครได้รับผลกรรมในทางที่เป็นโทษเราก็ไม่ควรดีใจหรือคิดซ้ำเติมเขาในเรื่องที่เกิดขึ้น เราควรมีความปรารถนาดี คือพยายามช่วยเหลือผู้อื่นให้พ้นจากความทุกข์ในลักษณะที่ถูกต้องตามทำนองคลองธรรม
</div>
<asp:HyperLink ID=”HyperLink4″ runat=”server” CssClass=”backtotoplink”></asp:HyperLink>
</div> </form>

2. กำหนด CSS สำหรับ hyperlink

.backtotoplink
{
color:#00FF00;
cursor:hand;
}

3. ทดสอบ page BackToTop.aspx ของเราดูครับ

เติมกลไกเข้าไป …

1. ใน function document.ready() เพิ่ม javascript ค้น HyperLink ที่มี Css เท่ากับ backtotoplink แล้วกำหนด attribute innerHTML เท่ากับ “กลับไปบนสุด”

$(“.backtotoplink”).attr(“innerHTML”, “กลับไปบนสุด”);

2. เหมือนข้อ 1 set ค่า title เท่ากับ กลับไปบนสุด

$(“.backtotoplink”).attr(“title”, “กลับไปบนสุด”);

3. เหมือนข้อ 2 set link เท่ากับ #Top

$(“.backtotoplink”).attr(“href”, “#Top”);
code jQuery ที่เสร็จแล้ว

<script type=”text/javascript”>
$(document).ready(function() {
$(“.backtotoplink”).attr(“innerHTML”, “กลับไปบนสุด”);
$(“.backtotoplink”).attr(“title”, “กลับไปบนสุด”);
$(“.backtotoplink”).attr(“href”, “#Top”);
});
</script>

ทำงานยังไง …

ลอง run page นี้ขึ้นมา แล้ว scroll ล่างสุด แล้ว click ที่ “กลับไปบนสุด” page ก็จะกลับขึ้นมา บนสุดทันที

Advertisements

#asp-net, #jquery