CAD中如何制作自定义菜单
2019-4-27  倒立控     CAD
经常有小伙伴问我怎么把小葛CAD工具箱的功能加入到CAD的菜单栏中。我个人当然是推荐使用自定义快捷键的方式来调用我的工具箱功能，或者CAD自带的命令。很多人以为需要制作这些CAD文件需要编程，自己无法独立完成。其实这个菜单与编程毫无关系，自己鼠标点点就可以制作出来。为了应对老是有人来问这个问题，下面就简单介绍如何自己制作自定义菜单文件。
一、关于CAD中用户界面自定义
CAD中用户界面可自定义，我们可以通过编辑CUI文件来设置自定义界面，下面先引用CAD帮助文件介绍一下什么是CUI文件：
用户界面的自定义是通过使用自定义用户界面 (CUI) 编辑器修改基于 XML 的自定义 (CUIx) 文件来完成的。
您可以编辑自定义 (CUIx) 文件以进行以下更改：
添加、删除或更改用户界面元素，例如，功能区选项卡和面板以及快速访问工具栏
创建或更改工作空间
创建或更改命令的宏和工具提示
创建或更改双击动作
创建或更改键盘快捷键和临时替代值
控制使用鼠标悬停工具提示和快捷特性选项板时显示的特性
创建并加载新 CUIx 文件
可自定义的用户界面元素
CUI 编辑器允许用户创建和管理用于定义用户界面元素动作的命令。定义了命令之后，可以将其用于创建按钮或响应绘图区域中的操作。您可以自定义
快速访问工具栏
功能区选项卡
功能区面板
功能区上下文选项卡状态
工具栏
下拉式菜单
快捷特性
鼠标悬停工具提示
快捷菜单
键盘快捷键和临时替代键
双击动作
鼠标按钮
工作空间
传统用户界面元素(数字化仪菜单、数字化仪按钮和图像平铺菜单)
二、通过CUI编辑器编辑CUI文件
CAD中编辑用户自定义界面，通过自定义用户界面(CUI)编辑器进行编辑。下面就介绍一下如何使用CUI编辑器完成自定义界面的编制。
1.CAD中输入CUI命令，打开CUI编辑器。
2.选择传输选项卡，并新建一个自定义界面，并保存
3.在自定义界面中打开刚刚新建的自定义CUI文件。
4.在工具栏中新建一个工具条，名称可以自定义。
5.在命令列表中新建一个命令，并编辑这个命令。在右侧编辑框中可以设定该命令的图标、名称以及这个命令需要调用的宏命令，这里的宏命令就可以写需要调用的插件对应功能的命令。
比如这里我新建了一个按钮名称叫做主界面，作用是通过这个按钮来调用小葛CAD工具箱的主界面，这里调用的宏就只需要写上小葛CAD工具箱的主界面的调用命令【hh】即可。
6.根据自己的需要添加功能并通过鼠标单击拖动添加至刚刚新建的工具条内，这样工具条就制作完成了。
7.完成自定义CUI编辑，保存编辑好的CUI文件
三、加载自定义界面CUI文件
CAD中加载自定义界面CUI文件的命令为【CUILOAD】，输入CUILOAD在弹出的加载框中选择需要刚刚保存的CUI文件就可以加载自定义的工具条了。
这便是我们创建的工具条了
如有疑问可联系我的个人微信:
我的微信/QQ：1026539820
备用微信/QQ：2261896995
有相关问题咨询讨论可加入我的QQ群:
CAD交流学习群:311710655
EXCEL技术交流群:499560580
更多CAD使用技巧关注我的微信公众号
关注公众号
发表评论：
昵称
邮件地址 (选填)
个人主页 (选填)

哈喽亲爱的盆友们上班快乐
临近情人节
“你问我爱你有多深”
“我爱你有几分”
在北方让人瑟瑟发抖
天寒地冻的下雪天里
离开温暖的坟（被）墓（窝）
准时上纲上线
全都是因为
作为大噶上班的第二天
经常有小可爱询问
“菜单名称怎么设置”
“公众号怎么添加外链”
“自定义菜单怎么做”
等等类似问题
废话不多说
教你干脆轻松地玩转
公众号自定义菜单
NO.1 关于自定义菜单
公众号的自定义菜单
对于粉丝们来说
就是公众号的“脸面”
因此对于菜单的设置
一定要做到
与公众号实际内容相符
而有些小可爱在设置
自定义菜单时也会经常问
为什么自定义菜单修改后
还是显示原来的模样
这时候你需要注意
是否把公众号授权给了第三方哦
NO.2 自定义菜单的母菜单
在自定义菜单的母菜单中
最多只能新建3个母菜单
且母菜单的字数不能超过
4个汉字或者8个字母
编辑母菜单时
能够添加的菜单内容
有消息、网页或者小程序
而“发送消息”页面下
又可以发送
图片、图文、文字、视频或语音
其中选择发送“图文消息”时
▼微信提供了三种图文方式▼
大家可以根据自己的需要
进行选择添加
而如果母菜单的菜单内容
选择了添加“跳转网页”
则可以选择跳转到
某一指定网页中
但需要注意的是
如果想要添加外链
那么公众号则必须是
经过微信认证的才可以哦
同时在给母菜单选择添加内链
也就是选择“公众号图文消息”时
能够选择的图文类型为四种
即已发送、素材库
历史消息和页面模板
其中想要跳转到公众号
已群发的图文页面的童鞋
直接选择“历史消息”即可
NO.3 自定义菜单的子菜单
母菜单设置完毕后
可以在母菜单的基础上添加子菜单
但子菜单最多添加5个
而子菜单在进行设置时
编辑方法和添加内容
▼与母菜单相同▼
这里需要提醒大噶的是
如果子菜单编辑失误
想要进行删除
那么点击右上角的“删除子菜单”即可
最后自定义菜单编辑完毕后
点击页面下方的
“保存并发布”就OK啦
以上就是关于
公众号自定义菜单的设置啦

一、自定义菜单创建接口说明
自定义菜单能够帮助公众号丰富界面，让用户更好更快地理解公众号的功能。开启自定义菜单后，公众号界面如图所示：


请注意：

①自定义菜单最多包括3个一级菜单，每个一级菜单最多包含5个二级菜单。

②一级菜单最多4个汉字，二级菜单最多7个汉字，多出来的部分将会以“…”代替。

③创建自定义菜单后，菜单的刷新策略是，在用户进入公众号会话页或公众号profile页时，如果发现上一次拉取菜单的请求在5分钟以前，就会拉取一下菜单，如果菜单有更新，就会刷新客户端的菜单。测试时可以尝试取消关注公众账号后再次关注，则可以看到创建后的效果。
自定义菜单接口可实现多种类型按钮，如下：

**1、click：**点击推事件用户点击click类型按钮后，微信服务器会通过消息接口推送消息类型为event的结构给开发者（参考消息接口指南），并且带上按钮中开发者填写的key值，开发者可以通过自定义的key值与用户进行交互；

**2、view：**跳转URL用户点击view类型按钮后，微信客户端将会打开开发者在按钮中填写的网页URL，可与网页授权获取用户基本信息接口结合，获得用户基本信息。

**3、scancode_push：**扫码推事件用户点击按钮后，微信客户端将调起扫一扫工具，完成扫码操作后显示扫描结果（如果是URL，将进入URL），且会将扫码的结果传给开发者，开发者可以下发消息。

**4、scancode_waitmsg：**扫码推事件且弹出“消息接收中”提示框用户点击按钮后，微信客户端将调起扫一扫工具，完成扫码操作后，将扫码的结果传给开发者，同时收起扫一扫工具，然后弹出“消息接收中”提示框，随后可能会收到开发者下发的消息。

**5、pic_sysphoto：**弹出系统拍照发图用户点击按钮后，微信客户端将调起系统相机，完成拍照操作后，会将拍摄的相片发送给开发者，并推送事件给开发者，同时收起系统相机，随后可能会收到开发者下发的消息。

**6、pic_photo_or_album：**弹出拍照或者相册发图用户点击按钮后，微信客户端将弹出选择器供用户选择“拍照”或者“从手机相册选择”。用户选择后即走其他两种流程。

**7、pic_weixin：**弹出微信相册发图器用户点击按钮后，微信客户端将调起微信相册，完成选择操作后，将选择的相片发送给开发者的服务器，并推送事件给开发者，同时收起相册，随后可能会收到开发者下发的消息。

**8、location_select：**弹出地理位置选择器用户点击按钮后，微信客户端将调起地理位置选择工具，完成选择操作后，将选择的地理位置发送给开发者的服务器，同时收起位置选择工具，随后可能会收到开发者下发的消息。

**9、media_id：**下发消息（除文本消息）用户点击media_id类型按钮后，微信服务器会将开发者填写的永久素材id对应的素材下发给用户，永久素材类型可以是图片、音频、视频、图文消息。请注意：永久素材id必须是在“素材管理/新增永久素材”接口上传后获得的合法id。

**10、view_limited：**跳转图文消息URL用户点击view_limited类型按钮后，微信客户端将打开开发者在按钮中填写的永久素材id对应的图文消息URL，永久素材类型只支持图文消息。请注意：永久素材id必须是在“素材管理/新增永久素材”接口上传后获得的合法id。

请注意，3到8的所有事件，仅支持微信iPhone5.4.1以上版本，和Android5.4以上版本的微信用户，旧版本微信用户点击后将没有回应，开发者也不能正常接收到事件推送。9和10，是专门给第三方平台旗下未微信认证（具体而言，是资质认证未通过）的订阅号准备的事件类型，它们是没有事件推送的，能力相对受限，其他类型的公众号不必使用。
接口调用请求说明
http请求方式：POST（请使用https协议）

https://api.weixin.qq.com/cgi-bin/menu/create?access_token=ACCESS_TOKEN
click和view的请求示例
{
     "button":[
     {    
          "type":"click",
          "name":"今日歌曲",
          "key":"V1001_TODAY_MUSIC"
      },
      {
           "name":"菜单",
           "sub_button":[
           {    
               "type":"view",
               "name":"搜索",
               "url":"http://www.soso.com/"
            },
            {
                 "type":"miniprogram",
                 "name":"wxa",
                 "url":"http://mp.weixin.qq.com",
                 "appid":"wx286b93c14bbf93aa",
                 "pagepath":"pages/lunar/index"
             },
            {
               "type":"click",
               "name":"赞一下我们",
               "key":"V1001_GOOD"
            }]
       }]
 }

其他新增按钮类型的请求示例
{
    "button": [
        {
            "name": "扫码", 
            "sub_button": [
                {
                    "type": "scancode_waitmsg", 
                    "name": "扫码带提示", 
                    "key": "rselfmenu_0_0", 
                    "sub_button": [ ]
                }, 
                {
                    "type": "scancode_push", 
                    "name": "扫码推事件", 
                    "key": "rselfmenu_0_1", 
                    "sub_button": [ ]
                }
            ]
        }, 
        {
            "name": "发图", 
            "sub_button": [
                {
                    "type": "pic_sysphoto", 
                    "name": "系统拍照发图", 
                    "key": "rselfmenu_1_0", 
                   "sub_button": [ ]
                 }, 
                {
                    "type": "pic_photo_or_album", 
                    "name": "拍照或者相册发图", 
                    "key": "rselfmenu_1_1", 
                    "sub_button": [ ]
                }, 
                {
                    "type": "pic_weixin", 
                    "name": "微信相册发图", 
                    "key": "rselfmenu_1_2", 
                    "sub_button": [ ]
                }
            ]
        }, 
        {
            "name": "发送位置", 
            "type": "location_select", 
            "key": "rselfmenu_2_0"
        },
        {
           "type": "media_id", 
           "name": "图片", 
           "media_id": "MEDIA_ID1"
        }, 
        {
           "type": "view_limited", 
           "name": "图文消息", 
           "media_id": "MEDIA_ID2"
        }
    ]
}

参数说明




参数
是否必须
说明




button
是
一级菜单数组，个数应为1~3个


sub_button
否
二级菜单数组，个数应为1~5个


type
是
菜单的响应动作类型，view表示网页类型，click表示点击类型，miniprogram表示小程序类型


name
是
菜单标题，不超过16个字节，子菜单不超过60个字节


key
click等点击类型必须
菜单KEY值，用于消息接口推送，不超过128字节


url
view、miniprogram类型必须
网页 链接，用户点击菜单可打开链接，不超过1024字节。 type为miniprogram时，不支持小程序的老版本客户端将打开本url。


media_id
media_id类型和view_limited类型必须
调用新增永久素材接口返回的合法media_id


appid
miniprogram类型必须
小程序的appid（仅认证公众号可配置）


pagepath
miniprogram类型必须
小程序的页面路径


返回结果
正确时的返回JSON数据包如下：
{"errcode":0,"errmsg":"ok"}

错误时的返回JSON数据包如下（示例为无效菜单名长度）：
{"errcode":40018,"errmsg":"invalid button name size"}

二、自定义菜单实体类的封装
接下来是对菜单结构的封装。因为我们是采用面向对象的编程方式，最终提交的json格式菜单数据就应该是由对象直接转换得到，而不是在程序代码中拼一大堆json数据。菜单结构封装的依据是公众平台API文档中给出的那一段json格式的菜单结构，如下所示：

菜单结构的封装有多种方式，因人而异，我介绍一种。


package weixin.entity.menu;

/**
 * @所属类别:实体类
 * @用途:微信公众号开发中自定义菜单-自定义菜单创建接口（所有菜单共有属性)
 * @author yilei
 * @version:1.0
 */
public class Button {

	private String type;//菜单的响应类型
	private String name;//菜单标题
	private Button[] sub_button;//	二级菜单数组
	public String getType() {
		return type;
	}
	public void setType(String type) {
		this.type = type;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public Button[] getSub_button() {
		return sub_button;
	}
	public void setSub_button(Button[] sub_button) {
		this.sub_button = sub_button;
	}
	/**
	 * @param type
	 * @param name
	 * @param sub_button
	 */
	public Button(String type, String name, Button[] sub_button) {
		this.type = type;
		this.name = name;
		this.sub_button = sub_button;
	}
	public Button(){
		
	}
	 
}


package weixin.entity.menu;

/**
 * @所属类别:实体类
 * @用途:微信公众号开发中自定义菜单-自定义菜单创建接口（view/clike/scancode_push/scancode_waitmsg/pic_sysphoto/pic_photo_or_album/pic_weixin，)
 * @author yilei
 * @version:1.0
 */
public class TypeButton extends Button{

	 private String key;//click等点击类型必须	菜单KEY值，用于消息接口推送，不超过128字节
	 
	 private String url;//view、miniprogram类型必须	网页 链接，用户点击菜单可打开链接，不超过1024字节。 type为miniprogram时，不支持小程序的老版本客户端将打开本url。

	public String getKey() {
		return key;
	}

	public void setKey(String key) {
		this.key = key;
	}

	public String getUrl() {
		return url;
	}

	public void setUrl(String url) {
		this.url = url;
	}
	 	 
}


package weixin.entity.menu;

/**
 * @所属类别:实体类
 * @用途:微信公众号开发中自定义菜单-自定义菜单创建接口（Menu类代表整个微信公众号自定义菜单)
 * @author yilei
 * @version:1.0
 */
public class Menu {

	private Button[] button;//button	是	一级菜单数组，个数应为1~3个

	public Button[] getButton() {
		return button;
	}

	public void setButton(Button[] button) {
		this.button = button;
	}

	/**
	 * @param button
	 */
	public Menu(Button[] button) {
		this.button = button;
	}
	
	public Menu(){
		
	}
	
}


三、自定义菜单的创建
   /**
     * 组装菜单
     * @return
     */

    public static Menu initMenu(){
    Menu menu = new Menu();
    
    //---------菜单1、点击类型菜单-------------------//
    TypeButton c1 = new TypeButton();
    c1.setName("点击类型菜单1");
    c1.setType("click");
    c1.setKey("1");

    Button b1 = new Button();
    b1.setName("菜单标题1");
    b1.setSub_button(new Button[]{c1}); 

    //---------菜单2，具有2个子菜单（一个点击类型、一个是网页类型)   -------------------//
    TypeButton c2 = new TypeButton();
    c2.setName("点击类型菜单1");
    c2.setType("click");
    c2.setKey("11");

    TypeButton v1 = new TypeButton();
    v1.setName("点击网页类型1");
    v1.setType("view");
    v1.setUrl("http://www.baidu.com");
    
    Button b2 = new Button();
    b2.setName("菜单标题2");
    b2.setSub_button(new Button[]{c2,v1}); 
    
    //---------菜单3，具有5个子菜单（scancode_push/scancode_waitmsg/pic_sysphoto/pic_photo_or_album/pic_weixin/location_select)   -------------------//   
    TypeButton t1 = new TypeButton();
    t1.setName("扫码推事件");
    t1.setType("scancode_push");
    t1.setKey("scancode_push");
 
    TypeButton t2 = new TypeButton();
    t2.setName("扫码带提示");
    t2.setType("scancode_waitmsg");
    t2.setKey("scancode_waitmsg");
    
    TypeButton t3 = new TypeButton();
    t3.setName("系统拍照发图");
    t3.setType("pic_sysphoto");
    t3.setKey("pic_sysphoto");
    
    TypeButton t4 = new TypeButton();
    t4.setName("拍照或者相册发图");
    t4.setType("pic_photo_or_album");
    t4.setKey("pic_photo_or_album");
    
    TypeButton t5 = new TypeButton();
    t5.setName("微信相册发图");
    t5.setType("pic_weixin");
    t5.setKey("pic_weixin");

    TypeButton t6 = new TypeButton();
    t6.setName("发送位置");
    t6.setType("location_select");
    t6.setKey("location_select");
    
    Button b3 = new Button();
    b3.setName("菜单标题3"); 
    b3.setSub_button(new Button[]{t1,t2,t3,t4,t5});
       
    menu.setButton(new Button[]{b1,b2,b3});// 
    return menu;

    }
    
    
    /**
     * 创建菜单
     * @param token(ACCESS_TOKEN)
     * @param menu(已经转换为json格式的Meun类型的字符串)
     * @return result =0,表示创建成功，否则失败
     */
    public static int createMenu(String token,String menu){
    	int errcode = 0;
    	String url = WeiXin.MENU_CREATE.replace("ACCESS_TOKEN", token);
    	JSONObject jsonObject = doPostStr(url, menu);
    	if(jsonObject != null){
    		errcode = jsonObject.getInt("errcode");
    	}
    	return errcode;
    }

	/**
	 * 发起Http请求, 通过POST方式访问网络用到的方法
	 * @param url,请求的URL地址
	 * @return 响应后的字符串
	 */
	public static JSONObject doPostStr(String url,String outstr){
		DefaultHttpClient httpClient = new DefaultHttpClient();
        HttpPost httpPost = new HttpPost(url);
        JSONObject jsonObject = null;
		try {
			httpPost.setEntity(new StringEntity(outstr, "UTF-8"));
			HttpResponse response = httpClient.execute(httpPost);
			HttpEntity entity = response.getEntity();
			String result=EntityUtils.toString(entity,"UTF-8");
			jsonObject = JSONObject.fromObject(result);
		
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} 
		return jsonObject;
		
	}

	/**
	 * 自定义菜单-自定义创建菜单接口
	 */
    public static final String MENU_CREATE="https://api.weixin.qq.com/cgi-bin/menu/create?access_token=ACCESS_TOKEN";
	/**
	 * @变量类别 自定义菜单接口可实现多种类型按钮
	 * @变量含义 点击推事件
	 */
	public static final String  MENU_CLICK="click";	
	
	/**
	 * @变量类别 自定义菜单接口可实现多种类型按钮
	 * @变量含义 跳转URL
	 */
	public static final String  MENU_VIEW="view";	
	
	/**
	 * @变量类别 自定义菜单接口可实现多种类型按钮
	 * @变量含义 扫码推事件
	 */
	public static final String  MENU_SCANCODE_PUSH="scancode_push";	
	
	/**
	 * @变量类别 自定义菜单接口可实现多种类型按钮
	 * @变量含义 扫码推事件且弹出“消息接收中”提示框
	 */
	public static final String  MENU_SCANCODE_WAITMSG="scancode_waitmsg";	
	
	/**
	 * @变量类别 自定义菜单接口可实现多种类型按钮
	 * @变量含义 弹出系统拍照发图
	 */
	public static final String  MENU_PIC_SYSPHOTO="pic_sysphoto";
	
	/**
	 * @变量类别 自定义菜单接口可实现多种类型按钮
	 * @变量含义 弹出拍照或者相册发图
	 */
	public static final String  MENU_PIC_PHOTO_OR_ALBUM="pic_photo_or_album";
	
	/**
	 * @变量类别 自定义菜单接口可实现多种类型按钮
	 * @变量含义 弹出微信相册发图器
	 */
	public static final String  MENU_PIC_WEIXIN="pic_weixin";
	
	/**
	 * @变量类别 自定义菜单接口可实现多种类型按钮
	 * @变量含义 弹出地理位置选择器
	 */
	public static final String  MENU_LOCATION_SELECT="location_select";
	
	/**
	 * @变量类别 自定义菜单接口可实现多种类型按钮
	 * @变量含义 下发消息（除文本消息）
	 */
	public static final String  MENU_MEDIA_ID="media_id";
	
	/**
	 * @变量类别 自定义菜单接口可实现多种类型按钮
	 * @变量含义 跳转图文消息URL
	 */
	public static final String  MENU_VIEW_LIMITED="view_limited";

微信服务器配置URL指向路径
	/**
	 * 处理微信服务器发post请求发来的xml格式消息
	 */
    @Override
	public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
    	ServletContext context = getServletContext();
    	AccessToken accessToken = (AccessToken) context.getAttribute("access_token");
    	String menu = JSONObject.fromObject(WeiXinCheck.initMenu()).toString();
    	int errcode = WeiXinCheck.createMenu(accessToken.getAccessToken() , menu);
    	if(errcode==0){
    		System.out.println("菜单创建成功！");
    		long startTime=System.currentTimeMillis();   //获取开始时间
            // TODO 接收、处理、响应由微信服务器转发的用户发送给公众帐号的消息
            // 将请求、响应的编码均设置为UTF-8（防止中文乱码）
            request.setCharacterEncoding("UTF-8");
            response.setCharacterEncoding("UTF-8");
            System.out.println("微信的post请求进入了本地服务器了");
            String result = "";
            try {
                Map<String,String> map = WeiXinCheck.parseXml(request);
                System.out.println("微信公众号要开始发送消息");
                result =  WeiXinCheck.buildResponseMessage(map);
                
                if(result.equals("")){
                    result = "未正确响应";
                }
            } catch (Exception e) {
                e.printStackTrace();
                System.out.println("发生异常："+ e.getMessage());
            }
            
            response.getWriter().println(result);
            System.out.println( result) ;
            long endTime=System.currentTimeMillis(); //获取结束时间
            System.out.println("程序运行时间： "+(endTime-startTime)+"ms");
    	}else{
    		System.out.println("菜单创建失败");
    	}
    	
    }

四、自定义菜单的创建成功
如果已经关注了微信公众号，可以先取消关注，重新扫描关注，就可以直接查看最新菜单




本节代码：

微信开发学习总结（四）——自定义菜单——自定义菜单创建接口——项目源码

下载地址：

https://download.csdn.net/download/qq_29914837/10700209

很久以前写的微信自定义菜单由于当时没有保存源码，现在再写服务器后台发布页面又要写一遍（在网上搜了一遍没有找到这方面UI和交互的，也没有尝试去扒微信公众平台的），花了些时间又写了一个，除了没有更换菜单位置功能外，其他的交互流程都有了，不想造轮子的可以直接拿去用，还热乎的，刚在程序里提出来。

1.前提：后台使用的是H-ui框架，http://www.h-ui.net/index.shtml ，H-ui脚手架的lib里面包含了jquery、layer框架，去这个网站下载就行了。 




<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta http-equiv="Cache-Control" content="no-siteapp">
<!--[if lt IE 9]>
<script type="text/javascript" src="lib/html5.js"></script>
<script type="text/javascript" src="lib/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="static/h-ui/css/H-ui.min.css">
<link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/H-ui.admin.css">
<link rel="stylesheet" type="text/css" href="lib/Hui-iconfont/1.0.8/iconfont.css">
<link rel="stylesheet" type="text/css" href="static/h-ui.admin/skin/default/skin.css" id="skin">
<link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/style.css">
<title>角色管理</title>
<meta name="keywords" content="">
<meta name="description" content="">
<style>
    .z-mobile{
        width: 300px;
        height: 550px;
        margin: 20px 0 0 20px;
        float: left;
        position: relative;
        border: 1px solid #ccc;
    }
    .z-mobile-head{
        background: url("bg_mobile_head_default3a7b38.png");
        width: 300px;
        height: 60px;
        background-size: 100%;
        background-repeat: no-repeat;
        margin: 0;
    }
    .z-mobile-foot{
        background: url("bg_mobile_foot_default3a7b38.png");
        width: 300px;
        height: 50px;
        position: absolute;
        bottom: 0px;
        border-top: 1px solid #dcdbdb;
    }
    .z-mobile-foot ul{margin-left: 50px;}
    .z-menu li{
        width: 82px;
        float: left;
        line-height: 48px;
        text-align: center;
        cursor: pointer;
    }
    .z-menu-child{
    position: absolute;
    bottom: 60px
    }
    .z-menu-child li{
        width: 77px;
        float: left;
        border: 1px solid #ccc;
        text-align: center;
        margin: 0 2px;
        height: auto;
        overflow: hidden;
    }
    .z-menu-child span{
        height: 30px;
        display: block;
        line-height: 30px;
        width: 98%;
        cursor: pointer;
    }

    .z-menu-child .z-child-menu{
        height: 30px;
        display: block;
        line-height: 30px;
        width: 98%;
        cursor: pointer;
    }
    .z-info {
        border: 1px solid #ccc;
        float: left;
        margin-top: 20px;
        margin-left: 10px;
        height: 510px;
        padding: 20px;
    }
    .z-info .row{
        margin-bottom: 20px;
    }
</style>
</head>
<body>

    <nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 微信管理 <span class="c-gray en">&gt;</span> 自定义菜单 <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont">&#xe68f;</i></a></nav>

    <div class="z-mobile">
        <div class="z-mobile-head"></div>
        <div class="z-mobile-foot">

            <ul class="z-menu-child">
                <li>
                    <span class="z-add-1" data-sign='1'>+</span>
                </li>
                <li>
                    <span class="z-add-2" data-sign='2'>+</span>
                </li>
                <li>
                    <span class="z-add-3" data-sign='3'>+</span>
                </li>
            </ul>

            <ul class="z-menu">
                <li class="z-menu-1" data-type='' data-info="" data-sign='1' id="sign1">+</li>
                <li class="z-menu-2" data-type='' data-info="" data-sign='2' id="sign2">+</li>
                <li class="z-menu-3" data-type='' data-info="" data-sign='3' id="sign3">+</li>
            </ul>   

        </div>
    </div>
    <div class="z-info">
        <input id="sign" value="" type="hidden">
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2" style="text-align: right;"><span class="c-red"></span>菜单名称：</label>
            <div class="formControls col-xs-8 col-sm-10">
                <input type="text" class="input-text" value="" placeholder="" id="name" name="" >
            </div>
        </div>

        <div class="row cl">
        <label class="form-label col-xs-4 col-sm-2" style="text-align: right;"><span class="c-red"></span>菜单类别：</label>
        <div class="formControls col-xs-8 col-sm-10">
        <div class="radio-box" id="type-1">
            <input name="q" type="radio" id="sex-1" value="1" >
            <label for="sex-1">关键字</label>
        </div>
        <div class="radio-box" id="type-2">
            <input type="radio"  name="q" id="sex-2" value="2"  >
            <label for="sex-2">链接</label>
        </div>
        </div>
    </div>


        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2" style="text-align: right;"><span class="c-red"></span>菜单内容：</label>
            <div class="formControls col-xs-8 col-sm-10">
                <input type="text" class="input-text" value="" placeholder="" id="info" name="" required>
            </div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2" style="text-align: right;"><span class="c-red"></span></label>
            <div class="formControls col-xs-8 col-sm-10">
                <button type="button" id="delMenu"  class="btn btn-danger radius">删除当前菜单</button>
                <button type="button" id="submitMenu" class="btn btn-primary radius">发布当前菜单</button>
            </div>
        </div>


    </div>

<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script> 
<script type="text/javascript" src="lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="static/h-ui/js/H-ui.min.js"></script>
<script type="text/javascript" src="static/h-ui.admin/js/H-ui.admin.js"></script> 

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript">
//菜单数据
var id = '1'; //保存在数据库的微信id
var menu = $.parseJSON( '[{"name":"多菜单","sub_button":[{"type":"view","name":"连接","url":"https://www.baidu.com/"},{"type":"click","name":"关键字","key":"测试"}]},{"type":"click","name":"关键字","key":"测试"},{"type":"view","name":"连接","url":"https://www.baidu.com/"}]' );

var btnNum = menu.length;
//把服务数据展示在页面上
for(var i=1;i<=btnNum;i++){
    $("#sign"+i).text(menu[i-1].name);
    var key = "";
    //主菜单
    if(typeof(menu[i-1].type) != "undefined"){
        if(menu[i-1].type == "view"){
            $("#sign"+i).attr("data-type",2);
            key = menu[i-1].url;
        }else if(menu[i-1].type == "click"){
            $("#sign"+i).attr("data-type",1);
            key = menu[i-1].key;
        }
        $("#sign"+i).attr("data-info",key);
    }
    //子菜单
    if(typeof(menu[i-1].sub_button) != "undefined"){
        var subBtn = menu[i-1].sub_button;
        var child = "";
        for(var j=0;j<subBtn.length;j++){
            var dataType = 1;
            var key = "";
            if(subBtn[j].type == "view"){
                dataType = 2;
                key = subBtn[j].url;
            }else if(subBtn[j].type == "click"){
                dataType = 1;
                key = subBtn[j].key;
            }
            child += "<div class='z-child-menu' data-type='"+dataType+"' data-info='"+key+"' data-sign='"+i+j+"' id='sign"+i+j+"'>"+subBtn[j].name+"</div>";
        }
        $(".z-menu-child").children().eq(i-1).prepend(child);
    }

}



var width = $("body").width();
$(".z-info").css("width",width-400);
//隐藏所有子菜单
$(".z-menu-child li").hide();
$(".z-menu li").click(function(){
    //边框颜色改变
    typeChange(this);
    $(".z-info").children().eq(2).show();
    $(".z-info").children().eq(3).show();
    var that = this;
    //去除单选按钮状态
    $(".iradio-blue").removeClass("checked");
    //右侧内容改变 1.判断是否存在子菜单
    var sign = $(this).attr("data-sign");
    var childLength = $(".z-menu-child").children().eq(sign-1).children().length;
    if(childLength == 1){ //没有子菜单
        $("#name").val($(that).text());
        $("#info").val($(that).attr("data-info"));
        $("#type-"+$(that).attr("data-type")).children().addClass("checked");
        $("#sign").val(sign);
    }else{ //有子菜单
        $("#name").val($(that).text());
        $("#sign").val(sign);
        $(".z-info").children().eq(2).hide();
        $(".z-info").children().eq(3).hide();
    }
    //显示对应子菜单
    $(".z-menu-child li").hide();
    $(".z-menu-child li").eq(sign-1).css("marginLeft",85*(sign-1)).show();
})
//添加子菜单
$(".z-menu-child span").on("click",function(){
    typeChange(this);
    $(".z-info").children().eq(2).hide();
    $(".z-info").children().eq(3).hide();
    $("#sign").val("");
    //判断span数量
    var spanNum = $(this).siblings().length;
    var sign = $(this).attr("data-sign");
    if(spanNum < 5){//添加元素
        var html = "<div class='z-child-menu' data-type='' data-info='' data-sign='"+sign+spanNum+"' id='sign"+sign+spanNum+"'>子菜单</div>";
        $(this).before(html);
        if(spanNum == 4){
            $(this).hide();
        }
    }
})
//点击子菜单
$(".z-menu-child").on("click",".z-child-menu",function(){
    var that = this;
    typeChange(that);
    //去除单选按钮状态
    $(".iradio-blue").removeClass("checked");
    var sign = $(this).attr("data-sign");
    $("#name").val($(that).text());
    $("#info").val($(that).attr("data-info"));
    $("#type-"+$(that).attr("data-type")).children().addClass("checked");
    $("#sign").val(sign);
    $(".z-info").children().eq(2).show();
    $(".z-info").children().eq(3).show();
})
//去除所有按钮的边框 文字颜色 ，为点击的按钮加上边框颜色和文字颜色
function typeChange(that){
    $(".z-menu li").css("border","none").css("color","#333");
    $(".z-menu-child span").css("border","none").css("color","#333");
    $(".z-child-menu").css("border","none").css("color","#333");
    $(that).css("border","1px solid #156900").css("color","#156900");
}



//初始化插件
$('.radio-box input').iCheck({
    checkboxClass: 'icheckbox-blue',
    radioClass: 'iradio-blue',
    increaseArea: '20%'
});
//改变了菜单名字
$("#name").blur(function(){
    var sign = $("#sign").val();
    $("#sign"+sign).text($("#name").val());
})
//改变了菜单值
$("#info").blur(function(){
    var sign = $("#sign").val();
    $("#sign"+sign).attr("data-info",$("#info").val());
})
//改变了单选按钮
$('.radio-box input').on('ifChecked', function(event){ //ifCreated 事件应该在插件初始化之前绑定 
    var sign = $("#sign").val();
    $("#sign"+sign).attr("data-type",event.target.value);
});
//删除按钮
$("#delMenu").click(function(){
    var sign = $("#sign").val();
    if(sign == ""){
        layer.msg("没有选择菜单");
        return;
    }

    if(sign > 3){ //删除子菜单
        $("#sign"+sign).siblings("span").show();
        var parentLi = $("#sign"+sign).parent();
        $("#sign"+sign).remove();
        //对所有子菜单重新排列
        var chlidDiv = parentLi.children("div");
        for(var z=0;z<chlidDiv.length;z++){
            chlidDiv.eq(z).attr("data-sign",sign.substring(0,1)+z).attr("id","sign"+sign.substring(0,1)+z);
        }

    }else { //删除主菜单
        var childLength = $(".z-menu-child").children().eq(sign-1).children().length;
        if(childLength > 1){
            layer.msg('请先删除子菜单');
            return;
        }
        $("#sign"+sign).text("+");
    }
    $("#sign"+sign).css("border","none");
    $("#name").val("");
    $("#info").val("");
    $("#type-"+$("#sign"+sign).attr("data-type")).children().removeClass("checked");
    $("#sign"+sign).attr("data-type","");
    $("#sign"+sign).attr("data-info","");
    $("#sign").val("");
})

//组装发送数据
$("#submitMenu").click(function(){
    var json = '{"button":[ ';
    for(var i = 1;i < 4;i++){
        //是否有子菜单
        var childNum = $(".z-menu-child").children().eq(i-1).children().length;
        if(childNum == 1){ //没有子菜单
            //主菜单是否有数据
            var type = $("#sign"+i).attr("data-type");
            var info = $("#sign"+i).attr("data-info");
            var name = $("#sign"+i).text();
            var wxType = "click";
            var wxKey = "key";
            if(type == 2){
                wxType = 'view';
                wxKey = 'url';
            }
            if(type!="" && info != ""){
                json+='{"type":"'+wxType+'","name":"'+name+'","'+wxKey+'":"'+info+'"},';
            }
        }else{ //有子菜单
            json += '{"name":"'+$("#sign"+i).text()+'","sub_button":';
            json += '[ ';
            for(var j=0;j<5;j++){
                var type = $("#sign"+i+j).attr("data-type");
                var info = $("#sign"+i+j).attr("data-info");
                var name = $("#sign"+i+j).text();
                var wxType = "click";
                var wxKey = "key";
                if(type == 2){
                    wxType = 'view';
                    wxKey = 'url';
                }
                if(type!="" && info != "" && typeof(info) != "undefined" && typeof(type) != "undefined"){
                    json+='{"type":"'+wxType+'","name":"'+name+'","'+wxKey+'":"'+info+'"},';
                }else if(type=="" || info == ""){
                    layer.msg('请删除未添加数据的子菜单');
                    return;
                }
            }
            json = json.substring(0,json.length-1) + "]},";
        }
    }
    json = json.substring(0,json.length-1) + "]}";
    /*$.ajax({
        url:'#(path)/admin/wx/menu/add',
        data:{"json":json,"id":id},
        type:"post",
        success:function(data){
            if(data == '200'){
                layer.msg('发布成功');
            }else{
                layer.msg('发布失败');
            }
        }
    })*/

})
</script>
<!--/请在上方写此页面业务相关的脚本-->
</body>
</html>