Đang chuẩn bị nút TẢI XUỐNG, xin hãy chờ
Tải xuống
Sau khi kiểm soát ScriptManager, bạn phải xác định HTML tĩnh sẽ trở thành danh sách kéo-thả. Để có được bố trí được thể hiện trong hình 13,8, bạn phong cách hai yếu tố div như hai cột mà chủ các widget kéo. Điều này được thực hiện trong một file CSS tham chiếu trong trang ASP.NET, | 480 CHAPTER 13 Implementing common Ajax patterns page together with the drag-and-drop components. The ScriptManager control looks like this asp ScriptManager ID scriptManager runat server Scripts asp ScriptReference Assembly Microsoft.Web.Preview Name PreviewScript.js asp ScriptReference Assembly Microsoft.Web.Preview Name PreviewDragDrop.js Scripts asp ScriptManager After the ScriptManager control you have to define the static HTML that will become the drag-drop list. To obtain the kind of layout shown in figure 13.8 you style two div elements as the two columns that host the draggable widgets. This is done in a CSS file referenced in the ASP.NET page which isn t included in the following listings. You can access and run the complete source code for this example after downloading it from www.manning.com gallo. Listing 13.22 shows the static HTML to add to the ASP.NET page. Listing 13.22 Static HTML for the declarative widgets example div class widgets -- Left List -- div id leftArea class left_col -- Widget 1 -- div id widget1 class widget div id widget1_Handle class widget_handle Widget 1 div div class widget_content asp Login ID myLogin runat server CssClass centered asp Login div div Left-side list Bf -- Widget 2 -- div id widget2 class widget div id widget2_Handle class widget_handle Widget 2 div div class widget_content span Enter some text span asp TextBox ID TextBox1 runat server asp TextBox div div Widget div Declarative widgets 481 -- Right List -- div id rightArea class right_col -- Widget 3 -- div id widget3 class widget div id widget3_Handle class widget_handle Widget 3 div div class widget_content asp Calendar ID Calendar1 runat server CssClass centered asp Calendar div div div -- Templates -- div class templates -- Drop Cue template -- 0 Drop iCue div id dropCueTemplate class drop_cue div ------1 template -- Empty template -- div id emptyTemplate class emptyList Drop widgets here. div I jE Empty div template div The static HTML includes two div .
