@diahkomalasarinpm/quis-ex-ad v1.0.0

Dialog.js

线上示例 ☟

Online

点击这里带你穿越

• 多个实例应用融合
  • 时间
  • 天气
  • 弹窗
  • 单选
  • 多选
  • 开关
  • 时钟
  • ...

目录

• merge
• query
• render
• auto
• tips
• each
• picker
• runer
• confirm
• destroy

截图

注释

/**
 * @autor alwbg@163.com | soei
 * -----------------------------------
 * - https://github.com/diahkomalasarinpm/quis-ex-ad -
 * -----------------------------------
 * 提供弹窗,提示[左上,上中,右上,右下,下中,左下,中]位置显示,xx秒自动关闭功能
 * 支持全局和 AMD和CMD调用
 * update 2018-03-29
 * - 新增 auto内的配置项
 * dialog.auto( html, Function,
 * 'inner:左边距 上边距 右边距 下边距 中间选择器;animate:true|false 开始位置 结束位置;offset: 左 上 右 下;center:true'
 * )
 * 可以通过 dialog.push 添加和重写以上参数方法
 * dialog.push('auto', 'animate', function( current[, use,...]){} )
 * update 2020-04
 * 新增 -dialog.query(selector, context, true|false|[0-9])[css, attr, find, each, ...] @see #query(selector[,context, elements]);
 * 	-dialog.addClass(target, class)
 * 	-dialog.removeClass(target, class)
 * 	-dialog.css(target, class[, val])
 * 	-dialog.attr(target, prop[, val])
 * 	-dialog.html(target[, html])
 * 	-dialog.is(selector, target)
 * 	-dialog.within(selector, target)
 * update 2020-8-13
 * 新增
 * - dialog.query(#Selector, true) === dialog.createElement(tag.class[attr]{inner})
 * - dialog.createElement(tag.class[attr]{inner}|<tag .class [attr] ../>)
 * update 2020-11-20
 * 优化及新增
 * - dialog.tips(show text, time, {
 * 	target: 目标DOM,
 * 	positon: 'left,top,bottom,right' #显示规则, 优先级
 * }, init Function)
 * update 2021-03
 * 新增
 * -dialog.query(selector, [true|false]|[0-9]+)
 * -dialog.query#parent(selector)
 * -dialog.query#insert(selector, target)
 * update 2021-10
 * 新增
 * -dialog.render(htmlString, {data, events, components, watch})
 *
 * Mix-time : 2023-01-07 00:22:22 子时
 */

merge

merge(args1, args2,..., true, "mix") 合并

用法一

基本用法

merge(args1, args2)

let a = { name: "Joy" };
let b = { name: "Band", age: 10 };
dialog.merge(a, b);
// a : {name: 'Joy', age: 10}
// b : {name: 'Band', age: 10}

用法二

强制覆盖

merge(args1, args2, args3, true)

• args1, args2 为接收方
• args3 为属性输出方

let a = { name: "Joy" };
let b = { name: "Band", age: 10 };
let c = { name: "Juerry" };
// 这里以 c 为模版, 把 c 中的属性强制覆盖到 前面的一个或者多个对象中去
dialog.merge(a, b, c, true);
// a, b为接收方
// a : {name: 'Juerry'}
// b : {name: 'Juerry', age: 10}
// c : {name: 'Juerry'}

用法三

多参数 merge(args1, args2, args3)

• args1, args2 为接收方
• args3 为属性输出方

let a = { name: "Joy" };
let b = { name: "Band", age: 10 };
dialog.merge(a, b, {
  age: 11,
});
// a, b为接收方
// a : {name: 'Joy', age: 11}
// b : {name: 'Band', age: 10}

用法四

merge(args1, args2,..., "mix")

• 末尾参数为 "mix" 时, args1 为接收方, 其他参数均为属性输出方

let a = { name: "Joy" };
let b = { name: "Band" };
let c = { name: "Juerry", age: 10 };
// 参数1, 参数2
dialog.merge(a, b, c, "mix");
// a为接收方 b, c为属性输出方
// a: { name: 'Joy', age: 10 }
// b: { name: 'Band' }
// c: { name: "Juerry", age: 10 }

用法五

merge(args1, args2,..., true, "mix")

• true 和 mix 的混合使用 最终属性值取决于最后一次出现的属性

let a = { name: "Joy" };
let b = { name: "Band" };
let c = { name: "Juerry", age: 11 };
dialog.merge(a, b, c, true, "mix");
// a为接收方 b, c为属性输出方
// a: {name: 'Juerry', age: 11}
// b: {name: 'Band'}
// c: {name: 'Juerry', age: 11}

runer

用法一

已知方法

var app = {
  fx: function (c) {
    return (this.a + this.b + c) >> 0;
  },
};
var result = dialog.runer(
  app.fx,
  {
    a: 1,
    b: 2,
  },
  6
);
// result: 9

用法二

调用未知方法

• app.fx 如果存在且为 Function 则执行, 否则返回 undefined
• dialog.picker 参见这里

var result = dialog.runer(dialog.picker(window, "app.fx=>exec").exec, {
  a: 1,
  b: 2,
});
// result: undefined

query

查找 DOM 对象并执行相关操作

以下没有声明 query 的视为 dialog.query('.windows') 的简写

on('eventName', handle)

// 事件绑定
query.on("click", (e) => {});

html(element|stringHtml?)

// 设置
query.html("设置内容!");
// 设置
query.html("<span>设置内容!</span>");
// 获取
var html = query.html();

next()

获取所对应的下一个 element

var next = query.next();

prev()

获取所对应的上一个 element

var prev = query.prev();

first()

获取第一个 element

var first = query.first();

unbind(handle?)

解绑事件 参见 off

// 清楚全部
query.unbind();
// 清楚click
query.unbind("click");
// 清楚单个
query.unbind(() => {});

is(selector?)

获取所对应的 element

• 返回值: Boolean

var _isSpan = query.is("span");

appendTo(Element|selector)

将目标元素当做子类添加到指定的容器中

var next = query.appendTo("body");

append()

给目标元素增加子类

append(Element|selector|StringHtml)

• 如果参数不含有"...\..."则视为在当前 document 下查询相关节点后, 添加到目标元素中

  query.append(".window");

  查找.windows 的所有元素,将结果追加到 body 下
• 如果参数为"...\..."结构

  query.append("<span>inner</span>");

  为 body 添加子节点\<span>inner\

insert()

把目标对象添加到指定位置

• query.insert('.windows', true|false)
• true 目标对象后面, false 和默认不填是添加之前

let query = dialog.query("<div>new</div>");
query.insert(".windows", true /* 目标对象被添加到第一个参数对应的DOM后面 */);

stop()

stop(isStopAll, isToEnd);

• isStopAll 是否停止所有动画
• isToEnd 是否执行完成设置样式

query.stop(true, false);

attr()

• attr(attributes);
• attr(attribute, val);

/* 获取 */
query.attr("offsetHeight");
// {offsetHeight: 835}
query.attr("offsetHeight=>h,offsetWidth=>w");
// {h: 835, w: 510}

/* 设置 */
query.attr({
  "data-name": "jerry",
  "data-age": "12",
});

css()

• css(attributes);
• css(attribute, val);
• css(multistringattribute, 'number');

/*** 设置 ***/
// 单个属性
query.css("height", 300);
// 多个属性
query.css({
  height: "+=200",
  width: "-=100",
});
/***获取数值 ***/
query.css("height,width", "number");
// {height: 500, width: 490}
query.css("height=>h,width=>w", "number");
// {h: 500, w: 490}
query.css("height=>h,width=>w");
// {h: '500px', w: '490px'}
query.css("line-height|height=>h,width=>w");
// {h: 'normal', w: '490px'}
query.css("line-height|height=>h,width=>w", "number");
// {w: 490}

find()

find(selectors);

• selectors: 多个 className 之间用逗号 , 分隔

var items = query.find(".selector");

addClass()

addClass('className1 className2 className...');

• 多个 className 之间用空格分隔

query.addClass("className1 className2");

removeClass()

removeClass('className1 className2 className...');

• 多个 className 之间用空格分隔

query.removeClass("className1 className2");

remove()

删除目标 Dom

query.remove();

data()

// 这里设置属性
query.attr({ "e-a": 1, "e-d": 3 });

/* 这里获取的是所有的以 e-开头的所有属性 */
query.data(null, "e");
// {dialog: '20160590', a: '1', d: '3'}

/* 获取 data-* 属性 等价于 query.data(null, "data"); */
query.data();

animate()

执行动画

• 0=>attributes,
• 1.speed|1=>speed,
• 1.easing=>easing,
• callback|2=>callback

参见 picker

这里的 0, 1, 2 为 animate(args0, args1, args2)参数索引

query.stop(true, true).animate({
  height: "+=100",
});
// 执行动画,执行内容:高度增量100,在自有的高度增加100

trigger()

触发事件

query.trigger("click");

val()

获取 input 的值

/* 设置input|textarea的属性 value值 */
query.val("123");
/* 获取input|textarea的属性 value值 */
query.val();

off()

解绑事件

• query.off(String|Function)

query.off("click");
query.off();

hide()

隐藏目标对象

query.hide();

show()

显示目标对象

query.show();

事件

• events
  • resize, click, focus, blur, change, scroll, load, hashchange, error
  • /PC 端相关/
    • mousedown, mouseenter, mouseleave, mousemove, mouseout, mouseover, mouseup, mousewheel, keydown, keypress, keyup
  • /移动端相关/
    • touchcancel, touchend, touchmove, touchstart
  • /html5 相关/
    • animationend, animationiteration, animationstart

query["eventname"](() => {
  // 处理逻辑
});
// 相当于
query.on("eventname", () => {
  // 处理逻辑
});
query.off("eventname");

:: HTML相关用例

<div class="windows">
  <div>
    <div class="selector">...</div>
  </div>

  <div class="selector">...</div>
</div>

实例

var Query = dialog.query(".selector", ".windows");
// stop, animate
Query.stop(true, true).animate({
  height: "+=100",
});
// 查询.windows下的.selector的所有dom 并执行动画,执行内容:高度增量100,在自有的高度增加100

通过伪 css语法生成Query实例

var Query = dialog.query('div.selector[title="title"]{这里是内容}', true);

// 创建Query对象
Query{
  0: HTMLDivElement{ /* 这里是DOM对象 */
    class: 'selector',
    attributes: {
      title: 'title'
    },
    innerHTML: '这里是内容'
  },
  ...
}

each

dialog.each({ a: 1, b: 2 }, (k, v) => {
  console.log(k, v);
});
// 输出:
// a 1
// b 2
dialog.each([1, 2], (k, v) => {
  console.log(k, v);
});
// 输出:
// 0 1
// 1 2

picker

:: 用法一

// 别名输出
var data = dialog.picker(
  {
    a: {
      b: {
        c: "d",
      },
    },
  },
  "a.b.c=>abc,e"
);
// data输出 {abc: 'd'} data.e = undefined 不包含e

:: 用法二

// 模糊输出 *=>*
var data = dialog.picker(
  {
    a: {
      b: {
        c: "d",
        e: "e",
      },
    },
  },
  "a.b.*=>*"
);
// data输出 {c: 'd', e: 'e'}

:: 用法三

// 多查询"|", 优先级和顺序相关[1|2|3]
var data = dialog.picker(
  {
    a: {
      b: {
        c: "d",
        e: "e",
      },
    },
    c: 3,
  },
  "a.b.c|c=>c"
);
// data输出 {c: 'd'}

tips

提示

// 实例
dialog.tips("show text", 3, {
  target: "目标DOM",
  //#显示规则, 优先级,具体显示以显示空间为主,四个方向都显示不了,居中显示
  positon: "left,top,bottom,right",
});

notice

提示, 色彩区分 参见 tips

// 实例
dialog.notice("show text", 3, {
  target: "目标DOM",
  //#显示规则, 优先级,具体显示以显示空间为主,四个方向都显示不了,居中显示
  positon: "left,top,bottom,right",
});

error

错误, 色彩区分 参见 tips

// 实例
dialog.error("show text", 3, {
  target: "目标DOM",
  //#显示规则, 优先级,具体显示以显示空间为主,四个方向都显示不了,居中显示
  positon: "left,top,bottom,right",
});

auto

参见 dialog.render 已集成 dialog.render

• last {Function}

• cs {String} 配置

  • offset

    控制窗口的四个方向的边距

    • 书写规则
    • 取值

  • inner

    控制容器内部边距

    • 书写规则
    • 取值

  • animate

    出场动画 自带满足不了需求时可设置配置或者重写

    • 覆盖
    • 替换

  • center

• destroy

  • 窗口销毁是执行的动画配置(非必要参数)

• center

• end

• position

   /**
   * positon是设置窗口出现的位置
   * - left right 和 top bottom 和 center两两组合不分顺序
   * - 但是入场动画和第一个出现的位置相关 center除外
   **/
   position: "right center",

  ---

dialog.auto(
  {
    mode: '{{count}}+.confirm-cancel.close[:onclick="close"]{×}',
    data: {
      count: 1,
    },
    events: {
      close() {
        this._dialog.remove();
      },
    },
  },
  {
    last() {
      console.log(this);
    },
    cs: "offset:10 10 10 90;inner: 10 10 10 10 .center 10;animate: true +=50 -=50",
  }
);

• 写法一

dialog.auto(
  "Hellow JS!",
  function (id) {
    console.log(id, this);
  },
  // offset 左 上 右 下
  "offset:10 10 10 90"
);

• 写法二

dialog.auto(
  "Hellow JS!",
  function (id) {
    console.log(id, this);
  },
  {
    cs: "offset:10 10 10 90;inner: 10 10 10 10 .center 10;animate: true +=50 -=50",
  }
);

• 写法三

//关联窗口, 代码后续更新
dialog.auto(
  {
    mode: '{{ap}}+.confirm-cancel.close[:onclick="close"]{×}',
    data: {
      ap: 1,
    },
    events: {
      close() {
        this._dialog.remove();
      },
    },
  },
  {
    cs: "offset:2 2 50 2;animate : true -=24 +=24;",
    last() {
      this.addClass("ios simply");
    },
    position: "[left,right,bottom,top]".on(),
  }
).link = dialog.notice(
  {
    nodeType: 1,
    mode: "(({{ap}}+{-{month}}+.close{x}))",
    data: {
      ap: "10",
      month: 10,
    },
  },
  7,
  "[top,bottom,center] [left,right,center]".on()
);

confirm

模式窗口

dialog.confirm(title, content, back, position);

参见 auto

dialog.confirm(
  "提示!",
  '(({这里是}+[data-text="内容"]+{~~}))'.buildHtml(),
  () => {
    // 这里写窗口内的所需验证的逻辑
    // ...
    /* 当返回 为 true时窗口关闭 */
    return true;
  },
  {
    /**
     * positon是设置窗口出现的位置
     * - left right 和 top bottom 和 center两两组合不分顺序
     * - 但是入场动画和第一个出现的位置相关
     **/
    position: "right center",
  }
);

destroy(Dialog)

销毁创建的窗口对象

• 这个参数为 dialogauto|tips|notice|error|confirm,...返回值

var tips = dialog.tips("ok!", 3);
dialog.destroy(tips);

String 新增方法

on 的基本用法

• '{attr}'.[ 'format', 'on' ]( args1 );
• '? ? ? ? '.[ 'format', 'on' ]( args1, args2, ... );

"name: ? age: ? color: ? from: ?".on("tom", "2", "blue", "小漂亮国");
// 输出: 'name: tom age: 2 color: blue from: 小漂亮国'

"name: ? age: ? color: ? from: ?".on("未知");
// 输出: 'name: 未知 age: 未知 color: 未知 from: 未知'

"{name} 是个男孩.".on({ name: "小明" });
// '小明是个男孩.'

"name: ? age: ? color: ? from: ?".on({
  name: "tom",
  age: "2",
  color: "blue",
  from: "小漂亮国",
});
// 输出: 'name: tom age: 2 color: blue from: 小漂亮国'

on 中的随机用法

// '...'.['format', 'on'];
"[red,green,blue,yellow]".on();
// 随机输出: 'green'

on 中的 三元运算 用法 {expr,true,false}

"{name,name,age}".on({
  name: "",
  age: 1,
});
// 输出: 1

"{name>2,+name + 2, +age - 1}".on({
  name: "3",
  age: 1,
});
// '5'

"{name>2,+name + 2, +age - 1}".on({
  name: "2",
  age: 1,
});
// '0'

on 中的 区间随机 用法

"{99-999}".on();
// 随机输出: '610'

"{100-999}-{100-999}-{100-999}-{100-999}".on();
// 输出: '298-768-285-212'

on 中的 属性 用法

"{now}".on();
// 输出: 当前毫秒值

"{fx} is in!".on({
  fx: () => {
    return "string";
  },
});
// 'string is in!'
"{fx} is in!".on({
  fx: "string",
});
// 'string is in!'

buildHtml 的用法

`div.selector[title="title"]{内容}>.inner{子节点}`.buildHtml();

输出结果

<div class="selector" title="title">
  内容
  <span class="inner"> 子节点 </span>
</div>

Render

• 源码待上传 参见线上实例
• ...

dialog.render('{{show}}+.confirm-cancel.close[:onclick="close"]{×}', {
  data: {
    show: 1,
  },
  events: {
    close() {
      this._dialog.remove();
    },
  },
});

相关截图

待续