easyui二

最新推荐文章于 2024-11-05 22:07:06 发布
zzy7182
最新推荐文章于 2024-11-05 22:07:06 发布
阅读量98
点赞数
分类专栏： easyui 文章标签： javascript ViewUI
本文链接：https://blog.csdn.net/zzy7182/article/details/84087551
版权
easyui 专栏收录该内容
3 篇文章 0 订阅
订阅专栏

   <script type="text/javascript">
   $(function(){
      $('#myNumberBox').numberbox({
          min:5.5,
          max:20,
          precision:2
      });



      $('myPagination').pagination({
          total:114,
          loading:true,
          pageSize:15,
          pageNumber:2,
          pageList:[10,15,20,25,30,50,100],
          loading:false,
          showPageList:true,
          showRefresh:true,
          beforePageText:'第',
          afterPageText:'页，共{page}页',
          displayMsg:'{from}-{to}/total',
          buttons:[{
					iconCls:'icon-add',
					handler:function(){
						alert('add');
					}
				},{
					iconCls:'icon-cut',
					handler:function(){
						alert('cut');
					}
				},{
					iconCls:'icon-save',
					handler:function(){
						alert('save');
					}
				}],

          onSelect:function(pageNumber,pageSize){
             $(this).pagination('loading');
             alert("pageNumber:"+pageNumber+";pageSize:"+pageSize);
             $(this).pagination('loaded');
          }

      });


      $('#myPanel').panel({
          title:'My Love',
          iconCls:'icon-save',
          width:300,
          height:200,
          left:10,
          top:5,
          fit:false,
          collapsible:false,
          minimizable:false,
          maxmizable:false,
          closeable:true,
          tools:[
                  {iconCls:'icon-add',handler:function(){alert("add");}},
                  {iconCls:'icon-cancel',handler:function(){alert("cancel");}}
                ],
          loadingMessage:'The Rose',
          onResize:function(width,height){
             alert(width+';'+height);
          }


      });


      $('#tt1').tree({
           animate:true,
           onClick:function(node){
                   alert('you click'+node.text);
           },
      });



   });

   function disableMyNumberBox(){
      $('#myNumberBox').numberbox('disable');
   }
   function enableMyNumberBox(){
      $('#myNumberBox').numberbox('enable');
   }

   function validate(){
     alert($('#myEmail').validatebox('isValid'));
   }

   function resize(){
      $("#d").window({
          title:'if let you go',
          width:600,
          collapsible:false,
          minimizable:false,
          maxmizable:false,
          closeable:false,
          closed:false,
          height:500,
          draggable:true,
          resizable:true,
          shadow:false,
          modal:true
      });
   }

   function open1(){
     $('#d').window('open');
   }

   function close1(){
      $('#d').window('close');
   }
   function test(){
      $('#testDiv').window('open');
   }

   var indexTab = 0 ;
   function addTab(){

       indexTab++;
      $('#tabs').tabs('add',{
         title:'The Album of Westlife'+indexTab,
         content:'Body Of The New Album',
         closable:true
      });

   }

   function reload(){
      $('#tt1').tree('reload');
   }

   function getChecked(){
      var nodes = $('#tt1').tree('getChecked');
      var s = '' ;
      for(var i = 0 ; i < nodes.length; i++){
         if(nodes[i].text != '' ) s+= nodes[i].text;
      }
      alert(s);
   }

   function getSelected(){
       var node = $('#tt1').tree('getSelected');
       alert(node.text);
   }

   function collapse(){
     var node = $('#tt1').tree('getSelected');
     $('#tt1').tree('collapse',node.target);
   }

   function expand(){
      var node = $('#tt1').tree('getSelected');
      $('#tt1').tree('expand',node.target);
   }

   function isLeaf(){
      var node = $('#tt1').tree('isLeaf');
      $('#tt1').tree('isLeaf',node.target);
   } 
</script>
</head>
<body>
<!-- numberbox -->
<div>
   <a href="#" onclick="disableMyNumberBox()">disable</a>   
   <a href="#" onclick="enableMyNumberBox()">enable</a>
  <input id="myNumberBox" required="true"/>
</div>
<!--end numberbox  -->

<!-- validateBox -->
<div>
  <h1>ValidateBox <a href="#" onclick="validate()">Validate Box</a></h1>
  <table>
    <tr>
      <td>Name:</td>
      <td>
        <input type="text" class="easyui-validatebox" required="true" validType="length[1,3]">
      </td>
      <td>Email:</td>
      <td>
         <input id="myEmail" type="text" class="easyui-validatebox" validMessage="Email格式错误！" required="true" validType="email">
      </td>
    </tr>
    <tr>
      <td>URL:</td>
      <td>
        <input class="easyui-validatebox" validType="url" validMessage="URL格式错误">
      </td>
    </tr>
    <tr>
      <td>Note</td>
      <td>
        <input class="easyui-validatebox"  validMessage="字符长度至少是五位!" validType="minLength[5]">
      </td>
    </tr>
  </table>
</div>
<!-- end validateBox -->

<!-- pagination -->
<div>
  <a href="#" onclick="javascript:$('#myPagination').pagination({loading:false})">loaded</a>   
  <a href="#" onclick="javascript:$('#myPagination').pagination({loading:true})">loading</a>
  <div id="myPagination" style="width:500px;border:1px solid #ccc;background-color:#efefef;" ></div>
</div>
<!-- end pagination -->

<!-- window -->
 <div>
    <div>
           <a href="javascript:void(0)" onclick="resize()">resize</a>     
		   <a href="javascript:void(0)" onclick="open1()">open</a>    
		   <a href="javascript:void(0)" onclick="close1()">close</a>
    </div>

    <div id="d" class="easyui-window" title="My Window" icon="icon-save" style="width:500px;height:200px;padding:5px;background:#fafafa;">
        <div class="easyui-layout" fit="true">
           <div region="north" border="true" style="padding:10px;background: #fff; border: 1px solid #ccc;">
              Westlife is my favoriate!
           </div>
           <div region="center"  border="false" style="padding: 10px; background: #fff; border: 1px solid #ccc;">
               Hello  World !<br>
               click<a href="#" onclick="test()">here</a> to popup other window
           </div>

           <div region="south" border="false" style="padding: 10px; background: #fff; border: 1px solid #ccc;">
              <a class="easyui-linkbutton" icon="icon-ok" href="javscript:void(0)" onclick="resize()">OK</a>
              <a class="easyui-linkbutton" icon="icon-cancel" href="javascript:void(0)" onclick="resize()">Cancel</a>

           </div>
        </div>
    </div>
 </div>

 <div id="testDiv" class="easyui-window" closed="true" modal="true" title="Test Window" style="width:200px;height:100px;"></div>
<!-- end window -->


<!-- panel -->
<div id="myPanel"></div>
<div class="easyui-panel" width="200" height="100">easyui panel!</div>
<!-- end panel -->
<!-- tap -->
<div id="myTap">
   <div>
      <a class="easyui-linkbutton" icon="icon-add" href="javascript:void(0)" onclick="addTab()">add Tab</a>
   </div>
   <div id="tabs" class="easyui-tabs" style="width:500px;height:200px;">
       <div title="If I Let You Go">
         <h4> Westlife----If I Let You Go! </h4>
            day after day,time passed away <br>
           and i just can't get you off my mind<br>
           nobody knows, i hide it inside <br>
           i keep on searching but i can't find <br>
       </div>

       <div title="Season In The Sun" closable="true" style="padding:20px;overflow:auto;" cache="false">
        Goodbye to you, my trusted friend 再见了，我的挚友we've known each other since we were nine or ten 我们从孩提时就已相识,相知together we've climbed hills and trees
         我们一起爬山爬树learned of love and A-B-C 
         学会去爱和其他基本知识skinned our hearts
          and skinned our knees 
       </div>
       <div title="You Raise Me Up" selected="true">
        when I am down and, oh my soul, so weary; 当我消沉之时，我的灵魂无所依附
		When troubles come and my heart burdened be; 困难来袭之时，我的心不堪重负
		Then, I am still and wait here in the silence, 寂静如斯，我依然静静地在这等待
		Until you come and sit awhile with me. 直到你到我的身边
		You raise me up, so I can stand on mountains; 你鼓舞了我，我才能立于山巅
		You raise me up, to walk on stormy sea; 你鼓舞了我，我才能遨游怒海
		I am strong, when I am on your shoulders; 靠在你的肩上，我才变得坚强
		You raise me up... To more than I can be. 你鼓舞了我，让我超越极限

       </div>

   </div>
</div>
<!-- end tap -->
<!-- tree -->
  <ul class="easyui-tree" checkbox="true" id="tt1" width="200">
    <li><span>Folder</span></li>
    <ul>
	     <li><span>Sub Folder 1</span></li>
	     <ul>
	       <li>folder 1-1</li>
	       <li>folder 1-2</li>
	     </ul>
	     <li><span>File1</span></li>
	     <li><span>File2</span></li>
	     <li><span>File3</span></li>
    </ul>
  </ul>

  <div>
     <a href="#" onclick="reload()">reload</a>   
     <a href="#" onclick="getChecked()">getChecked</a>   
     <a href="#" onclick="getSelected()">getSelected</a>   
     <a href="#" onclick="collapse()">collapse</a>   
     <a href="#" onclick="expand()">expand</a>   
     <a href="#" onclick="append()">append</a>   
     <a href="#" onclick="remove()">remove</a>   
     <a href="#" onclick="isLeaf()">isLeaf</a>   
  </div>
  <ul id="tt2"></ul>
<!-- end tree -->
</body>