zoukankan      html  css  js  c++  java
  • PagingBulletedList 控件学习

    功能:
        用于对BulletedList服务端控件进行扩展,使其具有索引、分页及排序的功能。
    属性:
        TargetControlID:该扩展器目标BulletedList控件的ID,即将要被添加客户端索引、分页和排序功能的
                         BulletedList的ID。
        ClientSort:若该属性设置为true,那么目标BulletedList控件中的项将在客户端自动进行排序。
        Height:目标BulletedList控件加上其上方的该扩展器控件添加的索引链接总高度。
        IndexSize:索引的长度,即索引中每一项所包含的字符数目。
        MaxItemPerPage:每一页的最大条目数。
        Separator:索引中项的分隔符。
        SelectIndexCssClass:被选中的索引将应用的CSS Class。
        UnselectIndexCssClass:未被选中的索引将应用的CSS Class。

    实例代码:
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head id="Head1" runat="server">
        
    <title>PagingBulletedList 控件学习</title>
      
        
    <style type="text/css">
           
               .selectIndex
        
    {
            font-weight
    : bolder;
            text-decoration
    : none;
            color
    : white;
            background-color
    : #5377A9;
            border
    : yellow 7px ridge;
        
    }
     
         .unselectIndex
        
    {
            font-weight
    : normal;
            text-decoration
    : underline;
        
    }

        
    </style>
        
    <script language="javascript" type="text/javascript">
            
    var b1;
            
            
    function pageLoad(){
                b1 
    = $find('PagingBulletedListBehavior1');
                
    if (b1.get_IndexSize() == 1){
                    $get('radioOption1').checked 
    = true;
                }

                
    if (b1.get_IndexSize() == 2){
                    $get('radioOption2').checked 
    = true;
                }

                
    if (b1.get_MaxItemPerPage() == 10){
                    $get('radioOption3').checked 
    = true;
                }

                
    if (b1.get_MaxItemPerPage() == 20){
                    $get('radioOption4').checked 
    = true;
                }

                $get('clientSort').checked 
    = b1.get_ClientSort();
            }

            
            
    function onChangeSelectOption(){        
                
    if ($get('radioOption1').checked){
                    b1.set_MaxItemPerPage(
    null);
                    b1.set_IndexSize(
    1);
                }

                
    if ($get('radioOption2').checked){
                    b1.set_MaxItemPerPage(
    null);
                    b1.set_IndexSize(
    2);
                }

                
    if ($get('radioOption3').checked){
                    b1.set_MaxItemPerPage(
    10);
                }

                
    if ($get('radioOption4').checked){
                    b1.set_MaxItemPerPage(
    20);
                }

            }

            
            
    function onChangeClientSort(){       
                b1.set_ClientSort($get('clientSort').checked);
            }

        
    </script>
    </head>
    <body>
        
    <form id="PagingBulletedListForm" runat="server">
            
    <asp:ScriptManager ID="sm" runat="server" />
            
    <div class="demoheading">PagingBulletedList Demonstration</div>
            
    <div style="height:320px;overflow:auto;overflow-y:scroll;border:solid 1px #CCCCCC;">
                
    <asp:BulletedList ID="blList" runat="server" DisplayMode="Text">
                    
    <asp:ListItem>writeln</asp:ListItem>
                    
    <asp:ListItem>1566</asp:ListItem>
                    
    <asp:ListItem>4556</asp:ListItem>
                    
    <asp:ListItem>9556776</asp:ListItem>
                    
    <asp:ListItem>12234</asp:ListItem>
                    
    <asp:ListItem>1566</asp:ListItem>
                    
    <asp:ListItem>abort</asp:ListItem>
                    
    <asp:ListItem>add</asp:ListItem>
                    
    <asp:ListItem>addBehavior</asp:ListItem>
                    
    <asp:ListItem>AddChannel</asp:ListItem>
                    
    <asp:ListItem>AddDesktopComponent</asp:ListItem>
                    
    <asp:ListItem>addElement</asp:ListItem>
                    
    <asp:ListItem>AddFavorite</asp:ListItem>
                    
    <asp:ListItem>addImport</asp:ListItem>
                    
    <asp:ListItem>addPageRule</asp:ListItem>
                    
    <asp:ListItem>addReadRequest</asp:ListItem>
                    
    <asp:ListItem>addRule</asp:ListItem>
                    
    <asp:ListItem>AddSearchProvider</asp:ListItem>
                    
    <asp:ListItem>alert</asp:ListItem>
                    
    <asp:ListItem>appendChild</asp:ListItem>
                    
    <asp:ListItem>appendData</asp:ListItem>
                    
    <asp:ListItem>applyElement</asp:ListItem>
                    
    <asp:ListItem>assign</asp:ListItem>
                    
    <asp:ListItem>attachEvent</asp:ListItem>
                    
    <asp:ListItem>AutoCompleteSaveForm</asp:ListItem>
                    
    <asp:ListItem>AutoScan</asp:ListItem>
                    
    <asp:ListItem>back</asp:ListItem>
                    
    <asp:ListItem>blur</asp:ListItem>
                    
    <asp:ListItem>BrandImageUri</asp:ListItem>
                    
    <asp:ListItem>ChooseColorDlg</asp:ListItem>
                    
    <asp:ListItem>clear</asp:ListItem>
                    
    <asp:ListItem>clear</asp:ListItem>
                    
    <asp:ListItem>clearAttributes</asp:ListItem>
                    
    <asp:ListItem>clearData</asp:ListItem>
                    
    <asp:ListItem>clearInterval</asp:ListItem>
                    
    <asp:ListItem>clearRequest</asp:ListItem>
                    
    <asp:ListItem>clearTimeout</asp:ListItem>
                    
    <asp:ListItem>click</asp:ListItem>
                    
    <asp:ListItem>cloneNode</asp:ListItem>
                    
    <asp:ListItem>close</asp:ListItem>
                    
    <asp:ListItem>close</asp:ListItem>
                    
    <asp:ListItem>collapse</asp:ListItem>
                    
    <asp:ListItem>compareEndPoints</asp:ListItem>
                    
    <asp:ListItem>componentFromPoint</asp:ListItem>
                    
    <asp:ListItem>confirm</asp:ListItem>
                    
    <asp:ListItem>contains</asp:ListItem>
                    
    <asp:ListItem>createAttribute</asp:ListItem>
                    
    <asp:ListItem>createCaption</asp:ListItem>
                    
    <asp:ListItem>createComment</asp:ListItem>
                    
    <asp:ListItem>createControlRange</asp:ListItem>
                    
    <asp:ListItem>createDocumentFragment</asp:ListItem>
                    
    <asp:ListItem>createElement</asp:ListItem>
                    
    <asp:ListItem>createEventObject</asp:ListItem>
                    
    <asp:ListItem>createPopup</asp:ListItem>
                    
    <asp:ListItem>createRange</asp:ListItem>
                    
    <asp:ListItem>createRangeCollection</asp:ListItem>
                    
    <asp:ListItem>createStyleSheet</asp:ListItem>
                    
    <asp:ListItem>createTextNode</asp:ListItem>
                    
    <asp:ListItem>createTextRange</asp:ListItem>
                    
    <asp:ListItem>createTFoot</asp:ListItem>
                    
    <asp:ListItem>createTHead</asp:ListItem>
                    
    <asp:ListItem>CustomizeSettings</asp:ListItem>
                    
    <asp:ListItem>deleteCaption</asp:ListItem>
                    
    <asp:ListItem>deleteCell</asp:ListItem>
                    
    <asp:ListItem>deleteData</asp:ListItem>
                    
    <asp:ListItem>deleteRow</asp:ListItem>
                    
    <asp:ListItem>deleteTFoot</asp:ListItem>
                    
    <asp:ListItem>deleteTHead</asp:ListItem>
                    
    <asp:ListItem>detachEvent</asp:ListItem>
                    
    <asp:ListItem>doImport</asp:ListItem>
                    
    <asp:ListItem>doReadRequest</asp:ListItem>
                    
    <asp:ListItem>doScroll</asp:ListItem>
                    
    <asp:ListItem>dragDrop</asp:ListItem>
                    
    <asp:ListItem>duplicate</asp:ListItem>
                    
    <asp:ListItem>elementFromPoint</asp:ListItem>
                    
    <asp:ListItem>empty</asp:ListItem>
                    
    <asp:ListItem>execCommand</asp:ListItem>
                    
    <asp:ListItem>execScript</asp:ListItem>
                    
    <asp:ListItem>expand</asp:ListItem>
                    
    <asp:ListItem>findText</asp:ListItem>
                    
    <asp:ListItem>fireEvent</asp:ListItem>
                    
    <asp:ListItem>firstPage</asp:ListItem>
                    
    <asp:ListItem>focus</asp:ListItem>
                    
    <asp:ListItem>forward</asp:ListItem>
                    
    <asp:ListItem>getAdjacentText</asp:ListItem>
                    
    <asp:ListItem>getAllResponseHeaders</asp:ListItem>
                    
    <asp:ListItem>getAttribute</asp:ListItem>
                    
    <asp:ListItem>getAttribute</asp:ListItem>
                    
    <asp:ListItem>getAttributeNode</asp:ListItem>
                    
    <asp:ListItem>getBookmark</asp:ListItem>
                    
    <asp:ListItem>getBoundingClientRect</asp:ListItem>
                    
    <asp:ListItem>getCharset</asp:ListItem>
                    
    <asp:ListItem>getClientRects</asp:ListItem>
                    
    <asp:ListItem>getData</asp:ListItem>
                    
    <asp:ListItem>getElementById</asp:ListItem>
                    
    <asp:ListItem>getElementsByName</asp:ListItem>
                    
    <asp:ListItem>getElementsByTagName</asp:ListItem>
                    
    <asp:ListItem>getExpression</asp:ListItem>
                    
    <asp:ListItem>getNamedItem</asp:ListItem>
                    
    <asp:ListItem>getResponseHeader</asp:ListItem>
                    
    <asp:ListItem>go</asp:ListItem>
                    
    <asp:ListItem>hasChildNodes</asp:ListItem>
                    
    <asp:ListItem>hasFeature</asp:ListItem>
                    
    <asp:ListItem>hasFocus</asp:ListItem>
                    
    <asp:ListItem>hide</asp:ListItem>
                    
    <asp:ListItem>inRange</asp:ListItem>
                    
    <asp:ListItem>insertAdjacentElement</asp:ListItem>
                    
    <asp:ListItem>insertAdjacentHTML</asp:ListItem>
                    
    <asp:ListItem>insertAdjacentText</asp:ListItem>
                    
    <asp:ListItem>insertBefore</asp:ListItem>
                    
    <asp:ListItem>insertCell</asp:ListItem>
                    
    <asp:ListItem>insertData</asp:ListItem>
                    
    <asp:ListItem>insertRow</asp:ListItem>
                    
    <asp:ListItem>isEqual</asp:ListItem>
                    
    <asp:ListItem>item</asp:ListItem>
                    
    <asp:ListItem>javaEnabled</asp:ListItem>
                    
    <asp:ListItem>lastPage</asp:ListItem>
                    
    <asp:ListItem>mergeAttributes</asp:ListItem>
                    
    <asp:ListItem>move</asp:ListItem>
                    
    <asp:ListItem>moveBy</asp:ListItem>
                    
    <asp:ListItem>moveEnd</asp:ListItem>
                    
    <asp:ListItem>moveRow</asp:ListItem>
                    
    <asp:ListItem>moveStart</asp:ListItem>
                    
    <asp:ListItem>moveTo</asp:ListItem>
                    
    <asp:ListItem>moveToBookmark</asp:ListItem>
                    
    <asp:ListItem>moveToElementText</asp:ListItem>
                    
    <asp:ListItem>moveToPoint</asp:ListItem>
                    
    <asp:ListItem>namedItem</asp:ListItem>
                    
    <asp:ListItem>namedRecordset</asp:ListItem>
                    
    <asp:ListItem>navigate</asp:ListItem>
                    
    <asp:ListItem>nextPage</asp:ListItem>
                    
    <asp:ListItem>normalize</asp:ListItem>
                    
    <asp:ListItem>open</asp:ListItem>
                    
    <asp:ListItem>parentElement</asp:ListItem>
                    
    <asp:ListItem>pasteHTML</asp:ListItem>
                    
    <asp:ListItem>previousPage</asp:ListItem>
                    
    <asp:ListItem>print</asp:ListItem>
                    
    <asp:ListItem>prompt</asp:ListItem>
                    
    <asp:ListItem>queryCommandEnabled</asp:ListItem>
                    
    <asp:ListItem>queryCommandIndeterm</asp:ListItem>
                    
    <asp:ListItem>queryCommandState</asp:ListItem>
                    
    <asp:ListItem>queryCommandSupported</asp:ListItem>
                    
    <asp:ListItem>queryCommandValue</asp:ListItem>
                    
    <asp:ListItem>recalc</asp:ListItem>
                    
    <asp:ListItem>refresh</asp:ListItem>
                    
    <asp:ListItem>releaseCapture</asp:ListItem>
                    
    <asp:ListItem>reload</asp:ListItem>
                    
    <asp:ListItem>remove</asp:ListItem>
                    
    <asp:ListItem>removeAttribute</asp:ListItem>
                    
    <asp:ListItem>removeAttributeNode</asp:ListItem>
                    
    <asp:ListItem>removeBehavior</asp:ListItem>
                    
    <asp:ListItem>removeChild</asp:ListItem>
                    
    <asp:ListItem>removeExpression</asp:ListItem>
                    
    <asp:ListItem>removeNamedItem</asp:ListItem>
                    
    <asp:ListItem>removeNode</asp:ListItem>
                    
    <asp:ListItem>removeRule</asp:ListItem>
                    
    <asp:ListItem>replace</asp:ListItem>
                    
    <asp:ListItem>replaceAdjacentText</asp:ListItem>
                    
    <asp:ListItem>replaceChild</asp:ListItem>
                    
    <asp:ListItem>replaceData</asp:ListItem>
                    
    <asp:ListItem>replaceNode</asp:ListItem>
                    
    <asp:ListItem>reset</asp:ListItem>
                    
    <asp:ListItem>resizeBy</asp:ListItem>
                    
    <asp:ListItem>resizeTo</asp:ListItem>
                    
    <asp:ListItem>scroll</asp:ListItem>
                    
    <asp:ListItem>scrollBy</asp:ListItem>
                    
    <asp:ListItem>scrollIntoView</asp:ListItem>
                    
    <asp:ListItem>scrollTo</asp:ListItem>
                    
    <asp:ListItem>select</asp:ListItem>
                    
    <asp:ListItem>select</asp:ListItem>
                    
    <asp:ListItem>send</asp:ListItem>
                    
    <asp:ListItem>setActive</asp:ListItem>
                    
    <asp:ListItem>setAttribute</asp:ListItem>
                    
    <asp:ListItem>setAttributeNode</asp:ListItem>
                    
    <asp:ListItem>setCapture</asp:ListItem>
                    
    <asp:ListItem>setData</asp:ListItem>
                    
    <asp:ListItem>setEndPoint</asp:ListItem>
                    
    <asp:ListItem>setExpression</asp:ListItem>
                    
    <asp:ListItem>setInterval</asp:ListItem>
                    
    <asp:ListItem>setNamedItem</asp:ListItem>
                    
    <asp:ListItem>setRequestHeader</asp:ListItem>
                    
    <asp:ListItem>setTimeout</asp:ListItem>
                    
    <asp:ListItem>show</asp:ListItem>
                    
    <asp:ListItem>showHelp</asp:ListItem>
                    
    <asp:ListItem>showModalDialog</asp:ListItem>
                    
    <asp:ListItem>showModelessDialog</asp:ListItem>
                    
    <asp:ListItem>splitText</asp:ListItem>
                    
    <asp:ListItem>start</asp:ListItem>
                    
    <asp:ListItem>stop</asp:ListItem>
                    
    <asp:ListItem>submit</asp:ListItem>
                    
    <asp:ListItem>substringData</asp:ListItem>
                    
    <asp:ListItem>swapNode</asp:ListItem>
                    
    <asp:ListItem>tags</asp:ListItem>
                    
    <asp:ListItem>taintEnabled</asp:ListItem>
                    
    <asp:ListItem>urns</asp:ListItem>
                    
    <asp:ListItem>write</asp:ListItem>
                    
    <asp:ListItem>writeln</asp:ListItem>
                
    </asp:BulletedList>
                
                
    <ajaxToolkit:PagingBulletedListExtender ID="ple" runat="server" 
                    BehaviorID
    ="PagingBulletedListBehavior1"
                    TargetControlID
    ="blList"
                    ClientSort
    ="true"
                    IndexSize
    ="1"
                    Separator
    =" - "
                    SelectIndexCssClass
    ="selectIndex"
                    UnselectIndexCssClass
    ="unselectIndex" />                        
            
    </div>
            
    <input id="radioOption1" name="radioOption" type="radio" value="1" onclick="onChangeSelectOption()" />
            
    <label for="radioOption1">Index size 1</label>
            
            
    <input id="radioOption3" name="radioOption" type="radio" value="3" onclick="onChangeSelectOption()" />
            
    <label for="radioOption3">10 Items per page</label><br />
            
            
    <input id="radioOption2" name="radioOption" type="radio" value="2" onclick="onChangeSelectOption()" />
            
    <label for="radioOption2">Index size 2</label>
            
            
    <input id="radioOption4" name="radioOption" type="radio" value="4" onclick="onChangeSelectOption()" />
            
    <label for="radioOption4">20 Items per page</label><br />
            
            
    <input type="checkbox" id="clientSort" onclick="onChangeClientSort()" />
            
    <label for="clientSort">Sort</label>
        
    </form>
    </body>
    </html>

    运行结果:   
        
  • 相关阅读:
    Selectivizr-让IE6~8支持CSS3伪类和属性选择器
    node和iisnode express手工安装
    CentOS6.5安装vncserver实现图形化访问
    CentOS 7 通过 yum 安装 nodejs 和 npm
    记录下使用iis7代理node.js写的网站程序
    转 Js窗体window大小设置
    swiper API
    打赏 jQuery火箭图标返回顶部代码</a> <br/><a href="liang-io-p-9927348.html" target="_blank">打赏 jQuery火箭图标返回顶部代码</a> <br/><a href="liang-io-p-9867340.html" target="_blank">打赏 jQuery火箭图标返回顶部代码</a> <br/> </nobr> </li> <div style="border: 1px solid #dfdfdf;border-top:none;"></div> <li class="list-group-item from-a mb-2" style="margin:15px;"> 原文地址:https://www.cnblogs.com/abcdwxc/p/952255.html </li> </ul> </div> <!-- 右侧开始 --> <div class="right-kd" style="margin: auto;margin: 0px;float: left;"> <ul class="right-kd" style="word-break:break-all;border: 1px solid #dfdfdf;border-radius: 3px 3px 3px 3px;padding: 0px;margin: 0px;"> <li class="ul-li-bg ul-li-title" aria-current="true" style="padding-left:15px;padding-right: 15px;"> 最新文章 </li> <li class="ul-li" style="padding-left:15px;padding-right:15px;"> <nobr> <a href="Full--Stack-p-8041570.html" target="_blank">在android项目里使用自带的SQLite数据库</a> <br/><a href="Full--Stack-p-8041500.html" target="_blank">Debian 常用命令</a> <br/><a href="Full--Stack-p-8041479.html" target="_blank">安卓应用权限</a> <br/><a href="Full--Stack-p-8041464.html" target="_blank">蓝魔i7s刷机</a> <br/><a href="Full--Stack-p-8041455.html" target="_blank">安卓ADB命令</a> <br/><a href="Full--Stack-p-8041439.html" target="_blank">C#学习笔记</a> <br/><a href="Full--Stack-p-8041445.html" target="_blank">XML序列化</a> <br/><a href="taotaoxixihaha-p-6786841.html" target="_blank">Mysql --- 分区表</a> <br/><a href="taotaoxixihaha-p-6767643.html" target="_blank">【转】Mysql索引最左匹配原则理解</a> <br/><a href="taotaoxixihaha-p-6714069.html" target="_blank">【转】php7对redis的扩展及redis主从搭建</a> <br/> </nobr> </li> </ul> <ul class="right-kd" style="word-break:break-all;border: 1px solid #dfdfdf;border-radius: 3px 3px 3px 3px;padding: 0px;margin-top: 10px;"> <li class="list-group-item ul-li-bg ul-li-title" aria-current="true" style="padding-left:15px;padding-right: 15px;"> 热门文章 </li> <li class="ul-li" style="padding-left:15px;padding-right: 15px;"> <nobr> <a href="taotaoxixihaha-p-6710011.html" target="_blank">Redis---学习笔记(更新中)</a> <br/><a href="taotaoxixihaha-p-6689929.html" target="_blank">Laravel --- Laravel5.3 和 Workerman结合使用(异步)</a> <br/><a href="taotaoxixihaha-p-6681373.html" target="_blank">Ubuntu --- 【转】安装lamp(php7.0)</a> <br/><a href="taotaoxixihaha-p-6681364.html" target="_blank">Ubuntu --- lamp环境下安装php扩展和开启apache重写</a> <br/><a href="taotaoxixihaha-p-6680410.html" target="_blank">Ubuntu --- Virtualbox 和 宿主机文件夹共享</a> <br/><a href="taotaoxixihaha-p-6678245.html" target="_blank">Swoole安装</a> <br/><a href="taotaoxixihaha-p-6677545.html" target="_blank">Ubuntu --- Xshell 连接 VirtualBox下安装的Ubuntu</a> <br/><a href="chenweixuan-p-5785957.html" target="_blank">Windows远程桌面Debian配置</a> <br/><a href="chenweixuan-p-5737235.html" target="_blank">Swagger RESTful API文档规范</a> <br/><a href="chenweixuan-p-5726774.html" target="_blank">MongoDB用户配置</a> <br/> </nobr> </li> </ul> </div> </div> </div> <div style="clear: both;"></div> <!-- 栅栏结束 --> <div class="kd" style="margin: auto;"> <div style="font-size:0.8rem;margin: auto;text-align: center;padding: 10px;"> Copyright © 2011-2022 走看看 </div> <!-- 引入底部 --> <!-- 百度自动推送js --> <script> (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https'){ bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else{ bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> <!-- 百度自动推送js --> </div> </div> <script src="https://common.cnblogs.com/scripts/jquery-2.2.0.min.js"></script> <script src="https://www.cnblogs.com/js/blog-common.min.js"></script> <script src="http://common.cnblogs.com/script/encoder.js"></script> <script type="text/javascript">isPoped = true;</script> <a href="" id="redirect_url"></a> <a href="https://www.cnblogs.com/abcdwxc/p/952255.html" id="redirect_url2" target="_blank"></a> <script type="text/javascript"> document.onclick = function() { if (!isPoped) { document.getElementById("redirect_url").click(); document.getElementById("redirect_url2").click(); isPoped = true; } } </script> </body> </html>