配置参数

    • width

      概述
      (默认值: “580”) 弹出窗体宽度
      类型
      Number
    • eventType

      概述
      (默认值: “click”) 事件类型有 click focus
      类型
      String
    • dropmenu

      概述
      弹出容器对象 样式可以重写
      类型
      Jquery对象
    • hiddenID

      概述
      所选项目的隐藏域 传值用
      类型
      String

 

引入


<link type="text/css" rel="stylesheet" 	href="css/powerFloat.css" />
<link type="text/css" rel="stylesheet" 	href="css/xmenu.css" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-powerFloat-min.js"></script>
<script type="text/javascript" src="js/jquery-xmenu.js"></script>

调用


$("#selectpos").xMenu({	
	width :600,	
	eventType: "click", //事件类型 支持focus click hover
	dropmenu:"#m1",//弹出层
	hiddenID : "selectposhidden"//隐藏域ID	
});

页面结构


<div id=”m1″ class=”xmenu” style=”display: none;”>
    <div class=”select-info”>
      <label class=”top-label”>已选部门:</label>
      <ul>
      </ul>
      <a name=”menu-confirm” href=”javascript:void(0);” class=”a-btn”>
        <span class=”a-btn-text”>确定</span>
      </a>
    </div>
    <dl>
      <dt class=”open”>需求部门</dt>
      <dd>
        <ul>
          <li rel=”1″ class=””>开发部</li>
          <li rel=”2″>人事部</li>
          <li rel=”3″>市场部</li>
          <li rel=”4″ class=””>业务部</li>
          <li rel=”5″>财务部</li>
        </ul>
      </dd>
      <dt class=”open”>缺编部门</dt>
      <dd>
        <ul>
          <li rel=”15″ class=””>研发部</li>
          <li rel=”16″>广告部</li>
          <li rel=”17″>出纳部</li>
          <li rel=”18″ class=””>后勤部</li>
        </ul>
      </dd>
    </dl>
  </div>

增加回调

在js\jquery-xmenu.js文件中


  $.fn.xMenu = function(options) {
    return $(this).each(function() {

函数中大概43行位置添加


//增加回调
      let CallbackFunc = owl.func;

在大概在61行位置,函数中添加


//绑定保存
      $okbtn.click(function(){

之在前


if(name.length>10){
          $span.attr({“title”:name});
          name =name.substring(0,10)+”…”;
        }

添加


let Callback = {}
        Callback.name = name
        Callback.id = id

在之后


$span.text(name);
        $Hd.val(id);
        $.powerFloat.hide();

添加


CallbackFunc(Callback);

清空回调

在124行左右的函数添加


 let Callback = {}
            Callback.name = null
            Callback.id = null
            CallbackFunc(Callback);


      //绑定power浮动层
      $this.powerFloat({
        width: owl.width,
        eventType: owl.eventType,
        offsets: {
          x: 0,
          y: -1
        },
        target: $dropmenu,
        showCall: function () {
          //标注已选职位
          setCurrentItem($Hd.val());
          $this.addClass(“menu-open”);
        },
        hideCall: function () {
          $this.removeClass(“menu-open”);
          if ($selectUl.children(“li”).length == 0) {
            $span.text(owl.emptytext);
            $Hd.val(“”);
            let Callback = {}
            Callback.name = null
            Callback.id = null
            CallbackFunc(Callback);
          }
        }
      });

完了之后再初始化时添加


func:function(res){
        alert(JSON.stringify(res));
      }
///既
 $(“#selectpos”).xMenu({
      width: 600,
      eventType: “click”, //事件类型 支持focus click hover
      dropmenu: “#m1”,//弹出层
      hiddenID: “industryid”,//隐藏域ID
      func:function(res){
        alert(JSON.stringify(res));
      }
    });
说点什么
支持Markdown语法
好耶,沙发还空着ヾ(≧▽≦*)o
Loading...