zoukankan      html  css  js  c++  java
  • AJAX Control Toolkit ——DragPanelExtender(拖拽面板)

    1.初始效果

    2.改变位置后

    • TargetControlID - The ID of a Panel to make draggable.(本例为:PanelContainer)
    • DragHandleID - The ID of a control that will serve as the "drag handle" for the panel. When the user clicks and drags this control, the panel will move.(本例为:PanelHeader,当单击“Header”,按住可拖动)

    示例代码:

     1  <asp:ScriptManager ID="ScriptManager1" runat="server" />
    2 <div>
    3 <ajaxToolkit:DragPanelExtender ID="DragPanelExtender1" runat="server" TargetControlID="PanelContainer" DragHandleID="PanelHeader">
    4 </ajaxToolkit:DragPanelExtender>
    5 <asp:Panel ID="PanelContainer" runat="server" CssClass="dragContainer" >
    6 <asp:Panel ID="PanelHeader" runat="server" CssClass="dragHeader">
    7 <br />Header</asp:Panel>
    8 <asp:Panel ID="PanelBody" runat="server" CssClass="dragBody">
    9 <br />
    10 One<br /><br />
    11 Two<br /><br />
    12 Three<br /><br />
    13 Four
    14 </asp:Panel>
    15 </asp:Panel>
    16 </div>
    17
    18 <script type="text/javascript">
    19 function setBodyHeightToContentHeight() {
    20 document.body.style.height = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight)+"px";
    21 }
    22 setBodyHeightToContentHeight();
    23 window.attachEvent('onresize', setBodyHeightToContentHeight);
    24 </script>

    CSS

      1 .dragContainer{
    2 background-color: #FFC0FF;
    3 height: 282px;
    4 width: 357px;
    5 border-bottom-color: black;
    6 }
    7
    8 .dragHeader{
    9 background-color: #8080FF;
    10 height: 48px;
    11 width: 358px;
    12 }
    13
    14 .dragBody{
    15 background-color: #FFC0FF;
    16 height: 213px;
    17 width: 357px;
    18
    19 }
    20
    21 .collapsePanel {
    22 width: 640px;
    23 height:0px;
    24 background-color:white;
    25 overflow:hidden;
    26 }
    27
    28 .collapsePanelHeader{
    29 width:640px;
    30 height:20px;
    31 color: Yellow;
    32 background-color: Black;
    33 font-weight:bold;
    34 float:left;
    35 padding:5px;
    36 cursor: pointer;
    37 vertical-align: middle;
    38 }
    39
    40 .accordionHeader
    41 {
    42 border: 1px solid #2F4F4F;
    43 color: white;
    44 background-color: #2E4d7B;
    45 font-family: Arial, Sans-Serif;
    46 font-size: 12px;
    47 font-weight: bold;
    48 padding: 5px;
    49 margin-top: 5px;
    50 cursor: pointer;
    51 }
    52
    53 .accordionContent
    54 {
    55 background-color: #D3DEEF;
    56 border: 1px dashed #2F4F4F;
    57 border-top: none;
    58 padding: 5px;
    59 padding-top: 10px;
    60 }
    61
    62 .accordionLink
    63 {
    64 background-color: #D3DEEF;
    65 color: white:
    66 }
    67
    68 .watermark {
    69 background: #FFAAFF;
    70 }
    71
    72 .popupControl {
    73 background-color:#AAD4FF;
    74 position:absolute;
    75 visibility:hidden;
    76 border-style:solid;
    77 border-color: Black;
    78 border-width: 2px;
    79 }
    80
    81 .modalBackground {
    82 background-color:Gray;
    83 filter:alpha(opacity=70);
    84 opacity:0.7;
    85 }
    86
    87 .modalPopup {
    88 background-color:#ffffdd;
    89 border-width:3px;
    90 border-style:solid;
    91 border-color:Gray;
    92 padding:3px;
    93 width:250px;
    94 }
    95
    96 .sampleStyleA {
    97 background-color:#FFF;
    98 }
    99
    100 .sampleStyleB {
    101 background-color:#FFF;
    102 font-family:monospace;
    103 font-size:10pt;
    104 font-weight:bold;
    105 }
    106
    107 .sampleStyleC {
    108 background-color:#ddffdd;
    109 font-family:sans-serif;
    110 font-size:10pt;
    111 font-style:italic;
    112 }
    113
    114 .sampleStyleD {
    115 background-color:Blue;
    116 color:White;
    117 font-family:Arial;
    118 font-size:10pt;
    119 }

      

  • 相关阅读:
    em和rem
    uniapp小程序 插槽 使用 template 失效!
    大半夜睡不着,来个雪花动画
    opencv 修改像素为透明色
    C++ unsigned char 和 char 的转换示例(数组没试)
    切割矩形,C++版
    清除blob生成图片的缓存
    C++ 固定长度的队列
    Chrome神器Vimium快捷键学习记录
    ASC简介
  • 原文地址:https://www.cnblogs.com/January/p/2125832.html
Copyright © 2011-2022 走看看