2012-01-25 8 views
0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
     <meta name="language" content="en" /> 




     <link rel="stylesheet" type="text/css" href="./custom-theme/jquery-ui-1.8.17.custom.css" /> 
     <!-- CUSTOMIZE/OVERRIDE THE DEFAULT CSS --> 
     <style type="text/css"> 

     /* remove padding and scrolling from elements that contain an Accordion OR a content-div */ 
     .ui-layout-center , /* has content-div */ 
     .ui-layout-west , /* has Accordion */ 
     .ui-layout-east , /* has content-div ... */ 
     .ui-layout-east .ui-layout-content { /* content-div has Accordion */ 
      padding: 0; 
      overflow: hidden; 
     } 
     .ui-layout-center P.ui-layout-content { 
      line-height: 1.4em; 
      margin:   0; /* remove top/bottom margins from <P> used as content-div */ 
     } 
     h3, h4 { /* Headers & Footer in Center & East panes */ 
      font-size:  1.1em; 
      background:  black; 
      border:   1px solid #BBB; 
      border-width: 0 0 1px; 
      padding:  7px 10px; 
      margin:   0; 
     } 
     .ui-layout-east h4 { /* Footer in East-pane */ 
      font-size:  0.9em; 
      font-weight: normal; 
      border-width: 1px 0 0; 
     } 

     </style> 

     <!-- REQUIRED scripts for layout widget --> 
     <script type="text/javascript" src="jquery-latest.js"></script> 
     <script type="text/javascript" src="jquery-ui-latest.js"></script> 
     <script type="text/javascript" src="jquery.layout-latest.js"></script> 
     <script type="text/javascript" src="jquery.layout.resizePaneAccordions-1.0.js"></script> 


     <script type="text/javascript" src="debug.js"></script> 

     <script type="text/javascript"> 
     $(document).ready(function() { 

      myLayout = $('body').layout({ 
       west__size:   300 


      , central_size: 400 



      }); 
    $('#date').datepicker(); 
      // ACCORDION - in the West pane 
      $("#accordion1").accordion({ size: 200, 
              fillSpace: true }); 
      //$("#accordion2").resizable(maxHeight= 100); 

      //$("#accordion2").accordion({ autoHeight : false 

      //,fillSpace: true 
      //,event: "click"}); 

    $('#tab').tabs(); 


     }); 
     </script> 
     <script type="text/javascript"> 
    $(function() { 
      $(".ui-layout-west").resizable({disabled: true}); 
     }); 
    </script> 
    </head> 
    <body> 

    <div class="ui-layout-north ui-widget-content" style="display: none;"> 

     North Pane 
    </div> 

    <div class="ui-layout-south ui-widget-content ui-state-error" style="display: none;"> copiright Fairy tail </div> 

    <div class="ui-layout-center ui-widget-content " style="display: none;"> 
     <div id="tab"> 
     <ul> 
      <li class="prova"><a href="#fragment-1"><span>Uno</span></a></li> 
      <li><a href="#fragment-2"><span>Due</span></a></li> 

     </ul> 
      <div id="fragment-1"> 
      <p>Testo 1</p> 

     </div> 
     <div id="fragment-2"> 
      <input type="text" name="date" id="date" /> Lorem ipsum dolor sit amet, consectetuer adipiscing elit... 
     </div> 

    </div> 
    </div> 






    <div class="ui-layout-west " style="display: none;"> 
     <div id="accordion1" class="basic"> 

       <h3><a href="#">Section 1</a></h3> 
       <div> 
        <h5>West Pane</h5> 
        <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. 
         Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc.</p> 
        <p>Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. 
         Vestibulum a velit eu ante scelerisque vulputate.</p> 
       </div> 

       <h3><a href="#">Section 2</a></h3> 
       <div> 
        <h5>Sed Non Urna</h5> 
        <p>Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. 
         Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, 
         faucibus interdum tellus libero ac justo.</p> 
        <p>Vivamus non quam. In suscipit faucibus urna.</p> 
       </div> 

       <h3><a href="#">Section 3</a></h3> 
       <div> 
        <p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. 
         Phasellus pellentesque purus in massa. Aenean in pede.</p> 
        <p>Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, 
         magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.</p> 
        <ul> 
         <li>List item one</li> 
         <li>List item two</li> 
         <li>List item three</li> 
        </ul> 
       </div> 

       <h3><a href="#">Section 4</a></h3> 
       <div> 
        <p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames 
         ac turpis egestas.</p> 
        <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; 
         Aenean lacinia mauris vel est.</p> 
        <p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. 
         Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p> 
       </div> 

     </div> 
    </div> 



    </body> 
    </html> 

こんにちはみなさん、私の問題は次のとおりです。ユーザーが西側パネルのサイズを変更できないようにしたいと思います。ライブラリを確認しましたが、わかりませんでした。私はjQueryのレイアウトを使用しています、誰かが私を助けることができますか?ありがとう!!ui-layout-westへのサイズ変更を無効にする方法はありますか?

答えて

7

レイアウトプラグインを使用していますが、サイズ変更可能なプラグインと同じではありません。

私が原因私のモバイルデバイスに正常にコピー&ペースト、それにあなたのレイアウトオプションを変更してみてくださいすることはできません。

{ 
    west__size: 300, 
    west__resizable: false, 
    central__size 
} 
+0

これは私のために働いた:)、ありがとうございました! – AzurGroup

関連する問題