งานนำเสนอกำลังจะดาวน์โหลด โปรดรอ

งานนำเสนอกำลังจะดาวน์โหลด โปรดรอ

DR.SOMBUT FOITHONG Navigation Controls 1 Web Programming With C#.NET.

งานนำเสนอที่คล้ายกัน


งานนำเสนอเรื่อง: "DR.SOMBUT FOITHONG Navigation Controls 1 Web Programming With C#.NET."— ใบสำเนางานนำเสนอ:

1 DR.SOMBUT FOITHONG Navigation Controls 1 Web Programming With C#.NET

2 Ways to Move Around Your Site การที่เราจะ move จาก page หนึ่งไปยังอีก page นั้นเราสามารถทำได้โดยการ ใช้ element โดยกำหนด href attribute เพื่ออ้างถึง page ที่ต้องการอ้างถึง อีกแนวทางหนึ่งที่สามารถทำได้ในการสร้าง link ไปยัง page อื่นโดยการใช้ แท็ก HyperLink และใช้ NavigateUrl property ในการระบุ page ที่ต้องการ Web Programming With C#.NET 2 You can log in here You can log in here

3 Uniform Resource Locator (URL) URL ใช้อ้างถึง resource ที่อยู่ภายใน website หรือ ภายนอก href attribute: เป็นการสร้าง hyperlink element: ใช้ link ไปยัง CSS file Src attribute: ระบุถึงภาพ หรือ java script url(): ค่าของ CSS property Web Programming With C#.NET 3

4 Relative URLs เพื่อที่จะ link จาก Login.aspx ใน root ไปยัง Default.aspx ใน Management folder เราสามารถทำได้โดยใช้ URL ต่อไปนี้: เพื่อที่จะอ้างถึง image Header.jpg จาก Default.aspx ใน Management folder เราสามารถทำได้โดยใช้ URL ต่อไปนี้:../  บอกให้ทราบว่าขึ้นไปอีก 1 ระดับจะเป็น root แล้วย้อนกลับมายัง Images folder Web Programming With C#.NET 4 Management

5 Relative URLs เพื่อที่จะอ้างถึง image Header.jpg จาก Default.aspx ใน Review folder ที่อยู่ใน Management folder เราสามารถทำได้โดยใช้ URL ต่อไปนี้: Web Programming With C#.NET 5

6 Root-Based Relative URLs จะเริ่มต้นด้วย / เพื่อบ่งชี้ถึง root ของ site ถ้าเราต้องการ link ไปยัง Management folder เราสามารถเขียนได้ดังนี้ / ที่เขียนนำหน้า Management folder เพื่อบอก ให้ทราบว่าให้ขึ้นไปยัง root ของ web site แล้วจาก root เดินไปยัง Default.aspx ในManagement folder Web Programming With C#.NET 6 Management

7 The Navigation Controls ASP.NET 4 สนับสนุนการใช้งาน navigation tools 3 ตัวด้วยกัน: SiteMapPath, TreeView, and Menu. 7 Web Programming With C#.NET

8 SiteMapPath: แสดงถึง path ใน page ปัจจุบัน ทำให้เราทราบ ว่าเราอยู่ในส่วนไหนของหน้า website TreeView: แสดงโครงสร้างภายใน website ซึ่งสามารถแสดง โหนดได้ทั้งแบบ แตก และแบบ รวบ Menu control: แสดงถึงรายการเมนู โดยเมื่อเราเลื่อนเม้าส์ไปที่เมนู ไหน submenu นั้นก็จะแสดงออกมาให้เห็น 8 Web Programming With C#.NET

9 Architecture of the Navigation Controls ASP.NETจะใช้ไฟล์ XML ในการอธิบายโครงสร้าง webpage ในรูปแบบlogical structure ไฟล์ XML นี้จะมีชื่อเรียกว่า Web.sitemap Web.sitemap จะถูกใช้งานโดย navigation controls ที่จะ นำเสนอการเชื่อมโยงที่เกี่ยวข้อง Web.sitemap file สามารถนำไปใช้สร้าง menus หรือ tree view 9 Web Programming With C#.NET

10 Web.sitemap File ในตัวอย่างนี้จะมี root node เพียง 1 โหนดเรียกว่า “Home” ซึ่งจะประกอบด้วย โหนดลูก 2 โหนดคือ “Reviews” และ“About” 10 Web Programming With C#.NET

11 Web.sitemap File แต่ละ siteMapNode สามารถมี child nodes ได้หลายโหนด แต่จะ มี siteMapNode ได้ 1 โหนดภายใน siteMap siteMapNode elements มี 3 attributes set: url, title, and description url attribute: ระบุถึงตำแหน่งของ page ใน web site เราใช้ ~ เพื่ออ้างถึง application-root–based URLs title attribute: ใช้ใน navigation controls เพื่อแสดงชื่อของ page description attribute: ใช้เป็น tooltip สำหรับใช้ใน navigation elements 11 Web Programming With C#.NET

12 เพื่อให้ file web.sitemap สามารถทำงานได้ ASP.NET จะใช้งาน SiteMapDataSource control ในการกำหนดโครงสร้างของ page ต่างที่ได้มีการกำหนดไว้ใน web.sitemap ให้กับ controls ต่างๆ เช่น menu, TreeView, SiteMapPath 12 Web Programming With C#.NET

13 การสร้าง web.sitemap 13 Web Programming With C#.NET

14 Menu Control 14 Web Programming With C#.NET

15 ขั้นตอนการสร้าง ในการสร้าง menu control จะต้องเชื่อมต่อกับ XML file โดยใช้ SiteMapDataSource 15 Web Programming With C#.NET

16 Property ของ Menu control PropertyDescription CssClass กำหนด Css class attribute ให้กับ control StaticEnableDefaultPopOutImage กำหนดค่าเป็น true/false จะใช้ image ในส่วนของ menu เพื่อบ่งบอกว่ามี submenu หรือไม่ DynamicEnableDefaultPopOutImage กำหนดค่าเป็น true/false จะใช้ image เพื่อบ่งบอก ว่ามี submenu / menu หรือไม่ DisappearAfter กำหนดช่วงเวลาเป็นหน่วย millisecond ที่จะมองเห็น menu item หลังจากมีการเลื่อนเม้าส์ออก DataSourceID ระบุถึง ID ของ SiteMapDataSource ที่จะใช้ข้อมูล จากไฟล์ Web.sitemao MaximumDynamicDisplayLevels กำหนดระดับสูงสุดของ submenu ที่จะแสดงผล 16 Web Programming With C#.NET

17 Property ของ Menu control PropertyDescription Orientation จะแสดงผล submenu เป็น Horizontal / Vertical RenderingMode พิจารณาว่าตัว control จะแสดงในรูปแบบ table และ inline style หรือ unordered list และ CSS style IncludeStyleBlock ถ้ามีค่าเป็น false ASP.NET จะไม่มีการเพิ่ม embedded style sheet ในการกำหนด lay out ของ menu 17 Web Programming With C#.NET

18 TreeView Control TreeView ใช้แสดงโครงสร้าง page ในลักษณะต้นไม้ คล้ายกับใน Windows Explorer รายการข้อมูลในต้นไม้สามารถที่แตกออกหรือยุบรวมได้ TreeView สามารถใช้ได้ทั้ง Web.sitemap และ ผูกโดยตรงกับ XML file 18 Web Programming With C#.NET

19 ขั้นตอนการสร้าง TreeView 19 Web Programming With C#.NET

20 PropertyDescription CssClassกำหนด Css Class attribute ที่จะใช้งาน CollapseImageUrlใช้รูปภาพเพื่อบ่งบอกถึงโครงสร้างที่แตกออก โดยแสดง เป็น icon - ExpandImageUrlใช้รูปภาพเพื่อบ่งบอกถึงโครงสร้างที่ยุบรวม โดยแสดง เป็น icon + CollapseImageToolTipแสดง tooltip เมื่อ user เลื่อนเม้าส์ไปยังรายการที่แตก ออก ExpandImageToolTipแสดง tooltip เมื่อ user เลื่อนเม้าส์ไปยังรายการที่ยุบรวม ShowExpandCollapseพิจารณาว่ารายการใน TreeView เป็นแบบแตกออก หรือ ยุบรวมอยู่ โดยการคลิกภาพที่อยู่หน้ารายการ ShowLinesพิจารณาว่าจะแสดงเส้นที่เชื่อมถึงกันระหว่างรายการ ย่อย ExpandDepthกำหนดระดับสูงที่ของ TreeView ที่สามารถมองเห็นได้ 20 Web Programming With C#.NET

21 SiteMapPath Control SiteMapPath control แสดงให้เราเห็นว่าตอนนี้เราอยู่ในส่วนไหนของ โครงสร้าง page มันจะแสดงถึงลำดับของ link ที่เรามีการเลื่อนไปยัง page ต่างๆ 21 Web Programming With C#.NET

22 การสร้าง SiteMapPath 22 Web Programming With C#.NET

23 Property ของ SiteMapPath PropertyDescription PathDirectionเป็นการแสดงผลแบบ RootToCurrent หรือ CurrentToRoot PathSeparatorกำหนดสัญลักษณ์ที่ใช้แสดงระหว่าง element ที่แตกต่าง กันใน path ถ้าไม่กำหนดจะเป็น > RenderCurrentNodeAsLinkถ้ากำหนดค่าเป็น true จะทำให้แต่ละรายการที่แสดงใน path สามารถเป็น link ไปยัง page อื่นๆได้ ShowToolTipsแสดง Tooltip เมื่อเลื่อนเม้าส์ไปยัง รายการต่างๆ 23 Web Programming With C#.NET


ดาวน์โหลด ppt DR.SOMBUT FOITHONG Navigation Controls 1 Web Programming With C#.NET.

งานนำเสนอที่คล้ายกัน


Ads by Google