zoukankan      html  css  js  c++  java
  • AJAX Control Toolkit PagingBulletedList

    PagingBulletedList is an ASP.NET AJAX extender that can be attached to an ASP.NET BulletedList control and provide client-side sorted paging. It is very flexible and lets you specify either the number of characters used in the heading indices or the maximum number of items to display per index. If the input is not sorted (either on the server or client), it will generated more header indices but still function appropriately.

    TargetControlID - The ID of the BulletedList to page.

    ClientSort - Whether or not the items should be sorted client-side.(Default is false)

    IndexSize - Number of characters in the index headings(ignored if MaxItemPerPage is set)(default is 1)

    MaxItemPerPage - Maximum number of items per page (ignores the IndexSize property)

    Separator - Separator text to be placed between indices.

    SelectIndexCssClass - Css Class for the selected index.

    UnselectIndexCssClass - CSS class for indices that aren't selected.

     1 <asp:ScriptManager ID="ScriptManager1" runat="server" />
    2 <div>
    3 <script language="javascript" type="text/javascript">
    4 var _indexHandler;
    5
    6 function onChangeSelectOption() {
    7 var bl = $find('PagingBulletedListBehavior1');
    8
    9 if ($get('radioOption1').checked) {
    10 bl.set_MaxItemPerPage();
    11 bl.set_IndexSize(1);
    12 }
    13 if ($get('radioOption2').checked) {
    14 bl.set_MaxItemPerPage();
    15 bl.set_IndexSize(2);
    16 }
    17 if ($get('radioOption3').checked) {
    18 bl.set_MaxItemPerPage(10);
    19 }
    20 if ($get('radioOption4').checked) {
    21 bl.set_MaxItemPerPage(20);
    22 }
    23 }
    24
    25 function onChangeClientSort() {
    26 var bl = $find('PagingBulletedListBehavior1');
    27 bl.set_ClientSort($get('clientSort').checked);
    28 }
    29 </script>
    30 <div class="bulletdiv">
    31 <asp:BulletedList ID="BulletedList1" runat="server" DisplayMode="Text">
    32 <asp:ListItem>writeln</asp:ListItem>
    33 <asp:ListItem>1566</asp:ListItem>
    34 <asp:ListItem>4556</asp:ListItem>
    35 <asp:ListItem>9556776</asp:ListItem>
    36 <asp:ListItem>12234</asp:ListItem>
    37 <asp:ListItem>1566</asp:ListItem>
    38 <asp:ListItem>2566</asp:ListItem>
    39 <asp:ListItem>abort</asp:ListItem>
    40 <asp:ListItem>add</asp:ListItem>
    41 <asp:ListItem>addBehavior</asp:ListItem>
    42 <asp:ListItem>AddChannel</asp:ListItem>
    43 <asp:ListItem>AddDesktopComponent</asp:ListItem>
    44 <asp:ListItem>addElement</asp:ListItem>
    45 <asp:ListItem>AddFavorite</asp:ListItem>
    46 <asp:ListItem>addImport</asp:ListItem>
    47 <asp:ListItem>addPageRule</asp:ListItem>
    48 <asp:ListItem>addReadRequest</asp:ListItem>
    49 <asp:ListItem>addRule</asp:ListItem>
    50 <asp:ListItem>AddSearchProvider</asp:ListItem>
    51 <asp:ListItem>alert</asp:ListItem>
    52 <asp:ListItem>appendChild</asp:ListItem>
    53 <asp:ListItem>appendData</asp:ListItem>
    54 <asp:ListItem>applyElement</asp:ListItem>
    55 <asp:ListItem>assign</asp:ListItem>
    56 <asp:ListItem>attachEvent</asp:ListItem>
    57 <asp:ListItem>AutoCompleteSaveForm</asp:ListItem>
    58 <asp:ListItem>AutoScan</asp:ListItem>
    59 <asp:ListItem>back</asp:ListItem>
    60 <asp:ListItem>blur</asp:ListItem>
    61 <asp:ListItem>BrandImageUri</asp:ListItem>
    62 <asp:ListItem>ChooseColorDlg</asp:ListItem>
    63 <asp:ListItem>clear</asp:ListItem>
    64 <asp:ListItem>clear</asp:ListItem>
    65 <asp:ListItem>clearAttributes</asp:ListItem>
    66 <asp:ListItem>clearData</asp:ListItem>
    67 <asp:ListItem>clearInterval</asp:ListItem>
    68 <asp:ListItem>clearRequest</asp:ListItem>
    69 <asp:ListItem>clearTimeout</asp:ListItem>
    70 <asp:ListItem>click</asp:ListItem>
    71 <asp:ListItem>cloneNode</asp:ListItem>
    72 <asp:ListItem>close</asp:ListItem>
    73 <asp:ListItem>close</asp:ListItem>
    74 <asp:ListItem>collapse</asp:ListItem>
    75 </asp:BulletedList>
    76 <ajaxToolkit:PagingBulletedListExtender ID="PagingBulletedListExtender1" runat="server"
    77 BehaviorID="PagingBulletedListBehavior1" TargetControlID="BulletedList1" ClientSort="true"
    78 IndexSize="1" Separator=" - " SelectIndexCssClass="selectIndex" UnselectIndexCssClass="unselectIndex" />
    79 </div>
    80 <input id="radioOption1" name="radioOption" type="radio" value="1" checked="checked"
    81 onclick="onChangeSelectOption()" />
    82 <label for="radioOption1">
    83 Index size 1</label>
    84 <input id="radioOption3" name="radioOption" type="radio" value="3" onclick="onChangeSelectOption()" />
    85 <label for="radioOption3">
    86 10 Items per page</label><br />
    87 <input id="radioOption2" name="radioOption" type="radio" value="2" onclick="onChangeSelectOption()" />
    88 <label for="radioOption2">
    89 Index size 2</label>
    90 <input id="radioOption4" name="radioOption" type="radio" value="4" onclick="onChangeSelectOption()" />
    91 <label for="radioOption4">
    92 20 Items per page</label>
    93 <br />
    94 <input type="checkbox" id="clientSort" checked="checked" onclick="onChangeClientSort()" /><br />
    95 <label for="clientSort">
    96 Sort</label>
    97 </div>

    该案例不是很明白:

    1.页面中不存在“PagingBulletedListBehavior1”这个ID的控件;

    2.JavaScript中的$find 和$get ,还有 bl.set_MaxItemPerPage(),bl.set_IndexSize(1)两个方法?

    {若是有人知道请告诉我哦!谢谢}

      

      

  • 相关阅读:
    C++进阶
    傅雷的一生
    OJ (Online Judge)使用
    详解事件委托
    tween.js是一款可生成平滑动画效果的js动画库。tween.js允许你以平滑的方式修改元素的属性值。它可以通过设置生成各种类似CSS3的动画效果。
    利用tween,使用原生js实现模块回弹动画效果
    JS阻止链接跳转代码
    CSS display 属性
    HTML5 Canvas绘文本动画(使用CSS自定义字体)
    MySQL基础CRUD编程练习题的自我提升(1)
  • 原文地址:https://www.cnblogs.com/January/p/2134601.html
Copyright © 2011-2022 走看看