• 刚入门的easyui


    这两天看了下easyui的教学先说说自己的一些小小理解吧!

    ----在使用easyui中也遇到了一个问题 :
      Uncaught TypeError:cannot call method ‘offset’ of undefined//为方法声明...
      后来在百度上搜索相关问题经发现,这是easyui 的包被修改了导致一些样式除了问题报的错...

     1.   引入easyui主要文件:

      

    <script type="text/javascript" src="easyword/jEasyUi/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="easyword/jEasyUi/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="easyword/jEasyUi/locale/easyui-lang-zh_CN.js"></script> 
    <link href="easyword/jEasyUi/themes/default/easyui.css" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="easyword/jEasyUi/themes/icon.css" />

     2. 首先布局按照:north(北)、south(南)、east(东)、west(西)、center(中)

        例:

    <body class="easyui-layout">
    <div data-options="region:'north',上北 title:'North Title',split:true" style="height:100px;"></div>
    <div data-options="region:'south',title:'下南Title',split:true" style="height:100px;"></div>
    <div data-options="region:'east',iconCls:'icon-reload',title:' 右东East',split:true" style="100px;"></div>
    <div data-options="region:'west',title:' 左西 West',split:true" style="100px;"></div>
    <div data-options="region:'  中 center',title:'center title'" style="padding:5px;background:#eee;"></div>
    </body>

      在写分页插件时 在手册好像没看见这个属性:layout:分页控件布局定义,布局选项可以包含一个或多个值

    1.list(页面显示条数列表)、2.sop(页面按钮分割线) 、3.first(首页按钮)、4.prev(上一页按钮)、

    5. next(下一页按钮)、6.last(尾页按钮)、7.refresh(刷新按钮)、8.(手工输入当前页的输入框)、

    9.links(页面数链接)

    例如:<div id="pp" class="easyui-pagination" data-options="total:1000,pageSize:10" style="background:#efefef;border:1px solid #ccc;"></div>

    效果如下:

     在使用上面layout:里面的 links改变样式

      

      

     3. 必须知道的data-options属性的用法(通过这个属性,我们可以对easyui组件的实例化可以完全写入到html中)例如:

    结果如下:

      4.   easyui的组件属性  也可以写入标签里面去

      

    <div id="p" class="easyui-panel" title="My Panel" style="500px;height:150px;padding:10px;"  
              iconCls="icon-save"  closable="true"  
              collapsible="true" minimizable="true" maximizable=true> 等同于:
    <div id="p" class="easyui-panel" title="My Panel" data-options="500px;height:150px;padding:10px;background:#fafafa;"  
              iconCls="icon-save"  closable="true"  
              collapsible="true" minimizable="true" maximizable=true> 

    ----上面是class写法,下面是JS写法 例如:

    <div id="login">
          <p>账号:<input class="easyui-numberbox" id="manager" type="text" name="name" value=" " /></p>
          <p>密码:<input class="easyui-numberbox" id="managerpass" type="password" name="name" value=" " /></p>
    </div>

    先给div一个id(“login”)




    
    
  • 相关阅读:
    JS 实现鼠标移入移出透明度动画变化效果
    Undefined和null的本质区别
    网格布局知识点总结
    用CSS3搭建立方体
    缩放实例
    浮动与细线边框制作广告商标
    用伪元素制作列表菜单
    元素的分类与转换
    网易云导航栏
    CSS中内边距和宽度内减
  • 原文地址:https://www.cnblogs.com/tangjiajun/p/4484384.html
Copyright © 2020-2023  润新知