zoukankan      html  css  js  c++  java
  • EasyUI SideMenu的运用

    1.背景

    不知不觉中jQuery EasyUI已经发布到1.6.8,在1.6之后也多了三个组件,虽然在API上还是显得很匮乏,但带来的便利却是不可忽视。出于对新组件的好奇,也花了些时间研究了下。

    2.现状

    不得不说jQuery EasyUI在API文档这块还是做得不错的,不仅全还简单易懂。但主键的应用场景上,却显得有些不足。对于SideMenu官方只给出了怎么创建这个组件,但却没有给出怎么来把这个嵌入到整个系统中。

    官方对于SideMenu的展示。有了新的主键当然第一时间想应用到自己的项目上,在运用的过程中也遇到了各种各样的问题,特此记录。

    3.SideMenu的运用

    最初的实现:将SideMenu放在了Layout的left,只能实现左侧菜单的显示和隐藏,无法发挥SideMenu的两种状态的切换(当然也可能是我的技术还不到家)。

    当前的实现:Step 1. 经过一番琢磨,得出的结论的就是现有主键无法直接实现,那么就自己动手吧,自己来实现一个左侧面板。仔细一分析好像也挺简单的左侧面板不就是一个panel吗,只是这个panel在右上角有个展开和折叠的按钮,但这个折叠并不是真正意义上的折叠,只是将panel放大和缩小而已,同时把SideMenu的状态进行切换。

    Step 2. 现在就是SideMenu和Tag的联动了,联动的话必须实现随着SideMenu选中改变,Tab的激活面板也要相应改变,反过来Tab的激活面板改变也要可以触发SideMenu的选中改变。当然在实现的过程中也了解到了SideMenu状态切换的实现原理,其实SideMenu的展开和折叠其实是两个组件,通过状态的切换来触发组件的显示和隐藏。具体的实现细节就不赘述,感兴趣的可以下载源码去了解。

    4.源码地址

    码云地址:https://gitee.com/huaiXH/Easyui.SideMenu.Demo/tree/master

    GitHub地址:https://github.com/zqb971/Easyui.SideMenu.Demo

  • 相关阅读:
    数据提交方式:post和get
    什么是SQL注入式攻击和如何防范?
    CSS3 @keyframes 规则
    php数据库连接及简单操作
    深入理解CSS过渡transition
    css 选择器
    利用border制作三角形原理
    iOS 8 自适应 Cell
    dSYM 文件分析工具
    iOS开发使用半透明模糊效果方法整理
  • 原文地址:https://www.cnblogs.com/zhangqibao/p/9959030.html
Copyright © 2011-2022 走看看