品牌动态

当前位置:新萄京娱乐场手机版 > 品牌动态 > 万一Esc用来关闭导航,也急需容器使用者遵从一

万一Esc用来关闭导航,也急需容器使用者遵从一

来源:http://www.chrisproduction.com 作者:新萄京娱乐场手机版 时间:2019-10-09 06:09

H5 Crash 研究

2016/05/31 · HTML5 · Crash

初稿出处: 小胡子哥(@Barret托塔天王)   

我们掌握,支撑页面在 webview 上完美运营的前提是具有贰个飞速况兼稳固的 webview 容器,而容器的飞速稳固不仅仅由容器提供方来保障,也亟需容器使用者遵守一些基本准绳,不然就有异常的大可能率出现页面 Crash 的情景,这么些法则是何等?什么样的上层代码会挑起容器卓殊退出?那是本文须要演说的从头到尾的经过。

Button ,能够应用 <button> <input> <a>。 <input> 中的区别类型,submit , radio , checkbox 。还可以增加 icon ,split button 。

H5 Crash 难题大约

下图是 H5 Crash 的差相当的少流程图:

图片 1

鉴于前端无法捕捉到页面 Crash 的情形和储藏室,然而 H5 页面上产生的失实会传送到 Java 和更底层的 Native 直到容器卓殊退出,在剥离的那一刻,容器会将旅舍写入到日志中,当后一次开垦容器时(也大概是定期报告)就能够申报这个仓库音讯。

Autoconplete 为校准 文本 <input>提供了一个文件选拔的菜系。当浏览者初步在<input>中输入时,会活动相配输入的字符,展现建议。 允许通过箭头开关导航,Enter键选中,Esc键关闭菜单。当箭头键被用来导航时,每种提议都会并发在<input>中。假诺Esc用来关闭导航,<input>的 value 会回复到顾客输入的状态。

H5 Crash 原因初探

测验代码 仓库地址:

git clone ; cd demo;

1
2
git clone https://github.com/barretlee/h5crash.git;
cd demo;

注意: 代码必要在 Webview 容器中测验,PC 浏览器下不会出现格外。

H5 Crash 的来由不太显眼,然而从经验上决断和查找,大约归类为以下三种:

1. 内部存款和储蓄器难点

  • 测验方法:使用闭包,不断扩充内部存款和储蓄器量,看看增添到哪个区间大小, webview 容器会出现相当
  • 测量试验地方:(微信、微博只怕其余客商端展开该页面包车型地铁客户,能够点进去测量试验下,选用100M 内存,不出意外,你的客商端会闪退。)

XHTML

<script> var Closure = function() { var _cache = []; var cache = 0; var add = function(size) { cache += size; size = size * 1024 * 1024; _cache.push(new Array(size).join('x')); refresh(); }; var refresh = function() { r.innerHTML = '内存消耗: ' + cache + 'M'; }; return { cache: cache + 'M', add: add, refresh: refresh } }; var closure = Closure(); </script> <button onclick="closure.add(1)">扩大1M 内部存款和储蓄器消耗</button> <button onclick="closure.add(10)">增添10M 内部存储器消耗</button> <button onclick="closure.add(20)">扩大20M 内部存款和储蓄器消耗</button> <button onclick="closure.add(50)">扩张50M 内部存款和储蓄器消耗</button> <button onclick="closure.add(100)">扩展 100M 内部存款和储蓄器消耗</button> <div id="r">内部存储器消耗:0 M</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<script>
var Closure = function() {
  var _cache = [];
  var cache = 0;
  var add = function(size) {
    cache += size;
    size = size * 1024 * 1024;
    _cache.push(new Array(size).join('x'));
    refresh();
  };
  var refresh = function() {
    r.innerHTML = '内存消耗: ' + cache + 'M';
  };
  return {
    cache: cache + 'M',
    add: add,
    refresh: refresh
  }
};
var closure = Closure();
</script>
 
<button onclick="closure.add(1)">增加 1M 内存消耗</button>
<button onclick="closure.add(10)">增加 10M 内存消耗</button>
<button onclick="closure.add(20)">增加 20M 内存消耗</button>
<button onclick="closure.add(50)">增加 50M 内存消耗</button>
<button onclick="closure.add(100)">增加 100M 内存消耗</button>
 
<div id="r">内存消耗:0 M</div>

留存的搅动:这种测量检验存在很多的干扰,例如设备项目、系统项目(iOS/Android)、和设施内存运维境况等。

2. Layers 数问题

Layers 数的拿走相比费心,Chrome Driver 未有提供该数量的接口,近来也从没相比好的点子获得这几个数目。

  • 测量试验方法:通过分裂的章程制造层,观看页面包车型客车 Crash 情形
  • 测验地方:

XHTML

<style>.transform { transform: translateZ(0); } .animation { width:100px; height:100px; background:red; position:relative; animation:move 5s infinite; } @keyframes move { from {left:0px;} to {left:200px;} } </style> <script> var Layer = function() { function getType() { return document.querySelector('input:checked').value; }; return { createOne: function(index) { var div = document.createElement('div'); div.appendChild(document.createTextNode(index)); switch(getType()) { case 'opacity': div.style.cssText = "opacity:" + (index / 1000); break; case 'transform': div.className = 'transform'; break; case 'animation': div.className = 'animation'; break; case 'zindex': div.style.cssText = "position:relative; z-index:" + index; break; } document.body.appendChild(div); }, create: function(num) { [].slice.call(document.querySelectorAll('div')).forEach(function(item) { item.parentNode && item.parentNode.removeChild(item); }); while(num--) { this.createOne(num); } } } }; var layer = Layer(); </script> <strong>层类型: </strong> <ul> <li><label><input type="radio" checked name="type" value="opacity"> <span>通过 opacity 创制层</span></label></li> <li><label><input type="radio" name="type" value="transform"> <span>通过 transforms 创造层</span></label></li> <li><label><input type="radio" name="type" value="animation"> <span>通过 animation 创造层</span></label></li> <li><label><input type="radio" name="type" value="zindex"> <span>通过相对定位分层</span></label></li> </ul> <button onclick="layer.create(1)">成立 1 个层</button> <button onclick="layer.create(10)">创设 十个层</button> <button onclick="layer.create(20)">成立 18个层</button> <button onclick="layer.create(50)">创立 50个层</button> <button onclick="layer.create(100)">创制 100 个层</button> <button onclick="layer.create(200)">创制 200 个层</button> <button onclick="layer.create(500)">成立 500 个层</button> <button onclick="layer.create(一千)">创立 壹仟个层</button> <button onclick="layer.create(三千)">创制 两千个层</button> <button onclick="layer.create(陆仟)">创设 五千个层</button> <button onclick="layer.create(一千0)">创造10000 个层</button>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<style>.transform {
  transform: translateZ(0);
}
.animation {
  width:100px;
  height:100px;
  background:red;
  position:relative;
  animation:move 5s infinite;
}
 
@keyframes move {
  from {left:0px;}
  to {left:200px;}
}
</style>
<script>
var Layer = function() {
  function getType() {
    return document.querySelector('input:checked').value;
  };
  return {
    createOne: function(index) {
      var div = document.createElement('div');
      div.appendChild(document.createTextNode(index));
      switch(getType()) {
        case 'opacity':
          div.style.cssText = "opacity:" + (index / 1000);
          break;
        case  'transform':
          div.className = 'transform';
          break;
        case  'animation':
          div.className = 'animation';
          break;
        case  'zindex':
          div.style.cssText = "position:relative; z-index:" + index;
          break;
      }
      document.body.appendChild(div);
    },
    create: function(num) {
      [].slice.call(document.querySelectorAll('div')).forEach(function(item) {
        item.parentNode && item.parentNode.removeChild(item);
      });
      while(num--) {
        this.createOne(num);
      }
    }
  }
};
var layer = Layer();
</script>
 
<strong>层类型: </strong>
<ul>
  <li><label><input type="radio" checked name="type" value="opacity"> <span>通过 opacity 创建层</span></label></li>
  <li><label><input type="radio" name="type" value="transform"> <span>通过 transforms 创建层</span></label></li>
  <li><label><input type="radio" name="type" value="animation"> <span>通过 animation 创建层</span></label></li>
  <li><label><input type="radio" name="type" value="zindex"> <span>通过绝对定位分层</span></label></li>
</ul>
 
<button onclick="layer.create(1)">创建 1 个层</button>
<button onclick="layer.create(10)">创建 10 个层</button>
<button onclick="layer.create(20)">创建 20 个层</button>
<button onclick="layer.create(50)">创建 50 个层</button>
<button onclick="layer.create(100)">创建 100 个层</button>
<button onclick="layer.create(200)">创建 200 个层</button>
<button onclick="layer.create(500)">创建 500 个层</button>
<button onclick="layer.create(1000)">创建 1000 个层</button>
<button onclick="layer.create(2000)">创建 2000 个层</button>
<button onclick="layer.create(5000)">创建 5000 个层</button>
<button onclick="layer.create(10000)">创建 10000 个层</button>
  • 骨子里,创制四个层,也是对内部存款和储蓄器的皇皇消耗,页面 Crash 恐怕依然因为内部存款和储蓄器消耗过大

3. 并发过多难点

  • 测验方法:尝试并发发出八种不一致的伸手(Fetch央浼、XHWrangler须要、Script/CSS 能源恳求),观看页面 Crash 情状
  • 测量检验地方:

XHTML

<script> var Request = function() { function getType() { return document.querySelector('input:checked').value; }; function getResource() { var type = getType(); var resource = { fetch: '/', xhr: '/', script: '//g.alicdn.com/sd/data_sufei/1.5.1/aplus/index.js', css: '//g.alicdn.com/kg/global-util/1.0.3/index-min.css' }; return resource[type]; }; return { emitOne: function() { var url = getResource() + "?_t=" + (new Date * 1 + Math.random()); switch(getType()) { case 'fetch': return fetch('/'); case 'xhr': with(new XMLHttpRequest) { open('GET', url); send(); } return; case 'script': var s = document.createElement('script'); s.src = url; document.body.appendChild(s); return; case 'css': var s = document.createElement('link'); s.href = url; document.body.appendChild(s); } }, emit: function(num) { [].slice.call(document.querySelectorAll('script,link')).forEach(function(item) { item.parentNode && item.parentNode.removeChild(item); }); while(num--) { this.emitOne(); } } } }; var request = Request(); </script> <strong>需要类型: </strong> <ul> <li><label><input type="radio" checked name="type" value="fetch"> <span>使用 Fetch 发送央浼</span></label></li> <li><label><input type="radio" name="type" value="xhr"> <span>使用 XH福特Explorer发送央求</span></label></li> <li><label><input type="radio" name="type" value="script"> <span>并发必要脚本财富</span></label></li> <li><label><input type="radio" name="type" value="css"> <span>并发诉求样式财富</span></label></li> </ul> <button onclick="request.emit(1)">并发 1 个央求</button> <button onclick="request.emit(10)">并发 11个央浼</button> <button onclick="request.emit(20)">并发 二十个央浼</button> <button onclick="request.emit(50)">并发 肆17个必要</button> <button onclick="request.emit(100)">并发 100 个须求</button> <button onclick="request.emit(500)">并发 500 个央求</button> <button onclick="request.emit(一千)">并发 一千 个供给</button>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<script>
var Request = function() {
  function getType() {
    return document.querySelector('input:checked').value;
  };
  function getResource() {
    var type = getType();
    var resource = {
      fetch: '/',
      xhr: '/',
      script: '//g.alicdn.com/sd/data_sufei/1.5.1/aplus/index.js',
      css: '//g.alicdn.com/kg/global-util/1.0.3/index-min.css'
    };
    return resource[type];
  };
  return {
    emitOne: function() {
      var url = getResource() + "?_t=" + (new Date * 1 + Math.random());
      switch(getType()) {
        case 'fetch':
          return fetch('/');
        case 'xhr':
          with(new XMLHttpRequest) {
            open('GET', url);
            send();
          }
          return;
        case 'script':
          var s = document.createElement('script');
          s.src = url;
          document.body.appendChild(s);
          return;
        case 'css':
          var s = document.createElement('link');
          s.href = url;
          document.body.appendChild(s);
      }
    },
    emit: function(num) {
      [].slice.call(document.querySelectorAll('script,link')).forEach(function(item) {
        item.parentNode && item.parentNode.removeChild(item);
      });
      while(num--) {
        this.emitOne();
      }
    }
  }
};
var request = Request();
</script>
 
<strong>请求类型: </strong>
<ul>
  <li><label><input type="radio" checked name="type" value="fetch"> <span>使用 Fetch 发送请求</span></label></li>
  <li><label><input type="radio" name="type" value="xhr"> <span>使用 XHR 发送请求</span></label></li>
  <li><label><input type="radio" name="type" value="script"> <span>并发请求脚本资源</span></label></li>
  <li><label><input type="radio" name="type" value="css"> <span>并发请求样式资源</span></label></li>
</ul>
 
<button onclick="request.emit(1)">并发 1 个请求</button>
<button onclick="request.emit(10)">并发 10 个请求</button>
<button onclick="request.emit(20)">并发 20 个请求</button>
<button onclick="request.emit(50)">并发 50 个请求</button>
<button onclick="request.emit(100)">并发 100 个请求</button>
<button onclick="request.emit(500)">并发 500 个请求</button>
<button onclick="request.emit(1000)">并发 1000 个请求</button>
  • 存在的侵扰:设备的门类、设备的 CPU 使用状态和互联网意况等。
  • 规范button的装置启用
  • 配置选项
  • 添加icon
  • button 事件
  • button组
  • button方法
  • 选拔本地数据源的autocomplete
  • autocomplete的布局选项
  • autocomplete事件
  • autocomplete独特的秘技
  • 利用远程数据源的autocomplete
  • 在autocomplete的建议菜单中央银行使HTML

H5 Crash 测量试验结果

测验结果:

  • 由此 opacity、animation、positon 等措施成立层,即就是 1w 个,页面也不曾显明转换;然则采纳 transform 创造 2k~5k 个层,页面会卡顿几秒后及时闪退;
  • 内部存款和储蓄器是条红线,测量试验发掘,壹遍性消耗 20M 的内部存款和储蓄器,会招致顾客端即时闪退;
  • 并发央求也是存在响应难题的,Fetch API 和 CSS Resource 并发 1k 央求未有出现难题,但是 XHEvoque 和 Script Resource 必要,难题极度扎眼,即便并未有产生页面闪退,然而页面已经进来了假死状态。

以上临界值还足以继承标准。

1.1 规范设置启用

当使用<a>或 <button> 成分成立 button ,贰个<span>成分会被自动成立,并放置当中。那几个<span>会含有button 的 label text.

1 <a href="" id="myButton">A link button</a>2 <button id="myButton2"> button </button>3 <input id="myButton3" value="An input button">4 $(function(){ 5 $("#myButton").button(); 6 $("#myButton2").button(); 7 $("#myButton3").button(); 8 });

<input> 成分不容许包括子成分,所以<span>不会在动用<input>创设button的时候出现。

<a>成分通过制定href 属性,会简单地将浏览者送往新的页面或anchor。

选用<button> 成分同上,只是无需加多href属性。使用<input>成分也很简短,它利用 value属性设置 button 的文本。

小结

正文首假使对 H5 Crash 做了三个预备性研讨,测量检验或许存在好多标称误差,测量检验方法也亟需考订,但是沿着那么些的笔触考究会相比较便于找到结论。

承袭会提交相比较有意义的边际数据以及探测工具。

 

1 赞 3 收藏 评论

图片 2

1.2 配置选项

Option Default Value Used to…
disabled false 禁用button实例
icons {primary:null,secondary:null} 设置button实例的icons
label value属性或下层元素的文本 设置button实例的text
text true 当使用icon-only时,隐藏button的 text

label选项配置的值会覆盖<a>成分的文本。

1.3 button的 icons

button在大大多情景下顶多有另个icon。当一个<a>或<button>元素被用来创建button,大家能够使用icons配置选项来为其钦赐多少个或七个icons。

1 var buttonOpts={ 2 icons:{ 3 primary:"ui-icon-disk", 4 secondary:"ui-icon-triangle-1-s" 5 }, 6 text:false 7 };

icons属性接受三个目的,它含有最多多个键,primary和secondary。这个采用的值能够是 jquery.ui.theme.css 文件中的任何 ui-icon- classes。icons使用<span>成分增多到控件中。

1.4 input 的 icons

固然敬仲成分<span>能够用来展现钦赐的icon,然则大家无法为<input>元素增多子成分。大家能够使用额外的容器,满含<span>成分和一部分自定义的CSS,简单地为<input>增多我们和好的icons。

1 <style> 2 .iconic-input { display:inline-block; position:relative;} 3 .ui-icon { z-index:2;} 4 .iconic-input input { border:none; margin:0;} 5 </style> 6 </script> 7 <div class="iconic-input ui-button-text-icons ui-state-default ui-corner-all"> 8 <span class="ui-button-icon-primary ui-icon ui-icon-disk"></span> 9 <input id="myButton" type="button" value="Input icons" class="ui-button-text">10 <span class="ui-button-icon-secondary ui-icon ui-icon-triangle-1-s"></span>11 </div>

在较老版本的IE中不协理display:inline-block样式。为了幸免button占满它的容器,大家供给将其转移,设置期望宽度。

两端的icons 未有hover states,那是因为控件为<input>应用了总得的 classnames,没有给我们自定义的器皿。大家可以为icon增多需要的表现。

1 $("#myButton").button().hover(function(){ 2 $(this).parent().addClass("ui-state-hover"); 3 },function(){ 4 $(this).parent().removeClass("ui-state-hover"); 5 });

为icon增加截至效果。相当多动静下,使用<a> 和<button>元素成立 button 会更简短,更有效能。

1.5 button 的事件

利用<a>成分创制的button,会由此href跳转。在 <form>中运用 <button>或<input>成分,创立带有 type 属性的安装,会交到表单数据。

button控件只暴光了二个事变 create 事件。当 button 实例开端化创制后被触发。

咱们或许想要搜聚一些挂号音讯,并采纳button 发送消息到服务器。

1 <form method="post" action="aa.php"> 2 <label for="name">Name: 3 <input type="text" id="name" name="name"> 4 </label> 5 <label for="email">Email: 6 <input type="text" id="email" name="email"> 7 </label> 8 <button type="submit" id="myButton">Register</button> 9 </form>10 11 $(function(){ 12 $("#myButton").button().click(function(e){ 13 e.preventDefault(); 14 var form=$("form"), 15 formData={ 16 name:form.find("#name").val(), 17 email:form.find("#email").val() 18 }; 19 console.log(formData); 20 $.post("aa.php",formData,function(){ 21 $("#myButton").button("option","disabled",true); 22 form.find("label").remove(); 23 $("<label />").text("Thanks for registering!").prependTo(form); 24 }) 25 }); 26 });

1.6 button组

button控件也足以用来整合 radio buttons 和 checkboxes 。button是 jQuery UI 控件中,独步天下的,有多个主意的控件,它还应该有四个 buttonset() 方法,用来创设一组由 radio buttons 和 chekboxes 组成的button。

1.6.1 Checkbox buttonsets

1 <div id="buttons"> 2 <h2>Programming Languages</h2> 3 <p>Select all languages you know:</p> 4 <label for="js">JavaScript</label> 5 <input id="js" type="checkbox"> 6 <label for="py">Python</label> 7 <input id="py" type="checkbox"> 8 <label for="cSharp">C#</label> 9 <input id="cSharp" type="checkbox">10 <label for="jv">Java</label>11 <input id="jv" type="checkbox">12 </div>13 $(function(){ 14 $("#buttons").buttonset(); 15 });

当二个checkbox被选中,它会被应用 selected 状态。在HTML5中,使用关联的<label>成分创设form时,不允许利用button 控件。

1.6.2 Radio buttonsets

与checkbox 的差别仅仅在作为上,全数的<input>都必得有 name 属性。

1 <div id="buttons"> 2 <h2>Programming Languages</h2> 3 <p>Select all languages you know:</p> 4 <label for="js">JavaScript</label> 5 <input id="js" type="radio" name="lang"> 6 <label for="py">Python</label> 7 <input id="py" type="radio" name="lang"> 8 <label for="cSharp">C#</label> 9 <input id="cSharp" type="radio" name="lang">10 <label for="jv">Java</label>11 <input id="jv" type="radio" name="lang">12 </div>

1.7 Button 的方法

而外 destroy , disable, enable ,widget , option 那些集体的方法,button 控件只暴露了一个自定义的法子,refresh方法。它用来以代码的办法退换checkbox 和 raido 的景况。

1 <div id="buttons"> 2 <h2>Programming Languages</h2> 3 <p>Select all languages you know:</p> 4 <label for="js">JavaScript</label> 5 <input id="js" type="checkbox"> 6 <label for="py">Python</label> 7 <input id="py" type="checkbox"> 8 <label for="cSharp">C#</label> 9 <input id="cSharp" type="checkbox">10 <label for="jv">Java</label>11 <input id="jv" type="checkbox">12 </div>13 <br>14 <button type="button" id="select">Select all</button>15 <button type="button" id="deselect">Deselect all</button>16 17 $(function(){ 18 $("#buttons").buttonset(); 19 $("#select").button().click(function(){ 20 $("#buttons").find("input").attr("checked",true).button("refresh"); 21 }); 22 $("#deselect").button().click(function(){ 23 $("#buttons").find("input").attr("checked",false).button("refresh"); 24 }); 25 });

当 Select all button被点击,我们设置 cheked 属性为 true 。那会检查底层并且遮盖的check boxes,单不会对作为button显示的<label>成分做任何事情。更新那几个button 的地方,让他们来得被入选,需求调用 refresh 方法。

2 autocomplete 控件

1 <label>Enter your city:</label> 2 <input id="city"> 3 4 $(function(){ 5 var autoOpts = { 6 source: [ 7 "Aberdeen", "Armagh", "Bangor", "Bath", "Canterbury", 8 "Cardiff", 9 "Derby", "Dundee", "Edinburgh", "Exeter", "Glasgow", 10 "Gloucester", 11 "Hereford", "Inverness", "Leeds", "London", "Manchester", 12 "Norwich", 13 "Newport", "Oxford", "Plymouth", "Preston", "Ripon", 14 "Southampton", 15 "Swansea", "Truro", "Wakefield", "Winchester", "York" 16 ] 17 }; 18 $("#city").autocomplete(autoOpts); 19 });

在配备对象中,使用了 source 选项,钦定了四个本地字符串数组。source选项时强制性地,必得被定义。

 

 

 

 

 

 

2.1 使用对象数组作为数据源

1 var autoOpts = { 2 source: [ 3 { value: "AB", label: "Aberdeen" }, 4 { value: "AR", label: "Armagh" } 5 ] 6 }

各类对象有多个keys : value 和 label 。value的值是选中的值,label 用来呈现在提议的抉择列表中。借使某一个指标唯有多少个 key,则它既是value 也是 label。

2.2 配置 autocomplete 选项

Option Default Value Used to…
appendTo “body” 指定将控件添加到哪个元素上
autofocus false 当显示建议列表时,focus第一个建议
delay 300 指定浏览者输入字符后,延迟显示建议列表的milliseconds数
disabled false 禁用控件
minLength 1 指定在显示建议列表前,访问者需要输入的最短字符长度
position {my:”left top”,at:”left bottom”,collision:”none”} 指定建议列表应该显示在相对<input>的位置。它和 position 功能接受一样的值
source   指定用来填充建议列表的数据源。这个选项是强制和必须被配置的。它接受一个数组,字符串,或一个函数。

2.2.1 配置最小长度

安装 minLength 选项为当先暗中认可值1 的数,能够使提出列表变窄。在拍卖大批量长距离数据源时,那很关键,能够收缩远程数据源再次来到的数量。

2.2.2 将建议列表附加到贰个可选的成分上

默许地,提议列表被增大到页面包车型大巴<body>,position 成效用来定义列表的职位,所以她能显获得事关的<input>上。大家能够利用 appendTo 选项,改动,并创造该因素。

1 appendTo: "#container"

那能够使创办出来的 <ul> 被增大到 container上,实际不是body上。

2.3 autocomplete 事件

Evnet Fired when…
change 列表中的一个建议被选中。这个事件会被触发,一旦列表已经关闭,并且<input>已经社区focus
close 建议列表已经关闭
create 一个控件实例被创建
focus 键盘被用来focus一个建议
open 建议目录被显示
search 请求将要显示的建议
select 一个建议被选中

当我们应用一个指标数组作为数据源,对象中有超越label 和 value 属性之外的增大数据时,select事件此时很有用。

1 <label>Enter your city:</label> 2 <input id="city"> 3 $(function(){ 4 var autoOpts = { 5 source: [ 6 { value: "AB", label: "Aberdeen", population: 212125 }, 7 { value: "AR", label: "Armagh", population: 54263 } 8 ], 9 select:function(e,ui){ 10 if($("#pop").length){ 11 $("#pop").text(ui.item.label+"'s population is : "+ui.item.population); 12 } 13 else{ 14 $("<p></p>").attr("id","pop").text(ui.item.label+"'s population is : "+ui.item.population).insertAfter("#city"); 15 } 16 } 17 }; 18 $("#city").autocomplete(autoOpts);

大家使用select 事件,来获得 label 和 大家特出的性质。

2.4 Autocomplete 方法

Method Used to…
close 关闭建议目录
search 从数据源请求建议列表,指定 search term 作为可选参数

2.5 使用远程数据源

2.5.1 使用二个字符串作为数据源选项的值

1 var autoOpts = { 2 source: "" 3 };

为此,当使用三个字符串作为数据源选项的值时,传回到的多寡应该是三个对象数组。每一种对象饱含最少三个key ,label。数据足以经过 cross-domain 乞请获得 JSON 或 JSONP 。控件会自行在输入的字符后,加多查询字符串 term=   。

当大家从大家无法决定的公物网络服务器获取数据时,数据格式可能不得法。大家供给动用三个函数作为数据源选项的值,手工业转变数据。

2.5.2 使用函数作为数据源选项的值

大家选择函数乞请数据,管理数据,然后将其传给控件。

1 <div id="formWrap"> 2 <form id="messageForm" action="#" method="post"> 3 <fieldset> 4 <legend>New message form</legend> 5 <span>New message</span> 6 <div class="inner-form ui-helper-clearfix"> 7 <label for="toList">To:</label> 8 <div id="toList" class="ui-helper-clearfix"> 9 <input id="to" type="text"> 10 <input id="emails" type="hidden"> 11 </div> 12 <label for="message">Message:</label> 13 <textarea id="message" name="message" rows="2" cols="50"> 14 </textarea> 15 </div> 16 <div class="button ui-helper-clearfix"> 17 <button type="submit">Send</button> 18 <a href="#" title="Cancel">Cancel</a> 19 20 </div> 21 </fieldset> 22 </form> 23 </div> 24 <input id="country"> 25 <script src="jq/jquery-1.4.4.js"></script> 26 <script src="jq/jquery-ui-1.8.9.js"></script> 27 <script src="jq/jquery-ui-i18n.min-1.8.9.js"></script> 28 <script> 29 var autoOpts={ 30 source:function(req,resp){ 31 $.getJSON("", 32 req, 33 function(data){ 34 var suggestions=[]; 35 $.each(data,function(i,val){ 36 var obj={}; 37 obj.value=val.name; 38 obj.email=val.email; 39 suggestions.push(obj); 40 }); 41 resp(suggestions); 42 }); 43 }, 44 select:function(e,ui){ 45 var emailList=$("#emails"), 46 emails=emailList.val().split(","),//split分割出来的是数组 47 span=$("<span>"+ui.item.value+"</span>"), 48 a=$("<a href='#' class='remove' title='Remove'>x</a>").appendTo(span); 49 span.insertBefore("#to"); 50 emails.push(ui.item.email); 51 emailList.val(emails.join(",")); 52 $("#to").remove(); 53 $("<input id='to'>").insertBefore("#emails").autocomplete(autoOpts); 54 } 55 }; 56 $("#to").autocomplete(autoOpts); 57 $("#toList").click(function(){ 58 $("#to").focus(); 59 }); 60 //delegate() 方法为钦定的要素(属于被选成分的三个或两个子成分)增加二个或多个事件管理程序,并分明当这个事件发生时运转的函数。 61 //使用 delegate() 方法的事件管理程序适用于当下或现在的因素(比如由脚本成立的新因素)。 62 $("#toList").delegate("a","click",function(){ 63 var email=$(this).parent().data("email"), 64 65 emails=$(this).val().split(","); 66 $(this).parent().remove(); 67 $.each(emails,function(i,val){ 68 if(val===email){ 69 emails.splice(i,1);//从数组中移除有些因素, StartIndex,Count 70 } 71 }); 72 73 $("#emails").val(emails); 74 }); 75 </script> 76 <style> 77 #formWrap{ 78 padding:10px;position:absolute;background-color:#000; 79 background:rgba(82,82,82,0.7);border-radius:8px; 80 font:bold 14px "lucida grande",tahoma,verdana,arial,sans-serif; 81 } 82 #formWrap a:hover{color:#ff0000;} 83 #messageForm{ 84 width:467px;border:1px solid #666;background-color:#eee; 85 } 86 #messageForm fieldset{ 87 padding:0;margin:0;position:relative;border:none #CCC; 88 background-color:#fff; 89 } 90 #messageForm legend{ 91 visibility:hidden;height:0; 92 } 93 #messageForm span{ 94 display:block;width:467p;padding:10px 0;background-color:#6D84B4; 95 border:#3B5998 #3B5998;color:#fff;text-indent:20px; 96 } 97 .inner-form{padding:20px;} 98 #toList{ 99 width:349px;min-height:27px;padding:3px 3px 0 3px;100 border:1px solid #6D84B4; mairgin-bottom:8px;float:left;101 background-color:#fff;cursor:text;102 }103 #messageForm #to{104 width:10px;padding:0;position:relative;top:4px;float:left;105 border:none;106 }107 #messageForm input,#messageForm textarea{108 display:block;width:349px;padding:3px;border:1px solid #6D84B4;109 float:left;outline:none;110 }111 #messageForm textarea{resize:vertical;}112 #messageForm label{113 width:60px;margin:7px 10px 0 0;float:left;corlor:#666;114 font-size:11px;text-align:right;115 }116 .buttons{padding:10px 20px;background-color:#f2f2f2;}117 .button a{118 margin:3px 10px 0 0;float:right;font-size:11px;color:#6D84B4;119 }120 .buttons button{float:right}121 #toList span{122 width:auto;margin:0 3px 3px 0;padding:3px 20px 4px 8px;123 border:1px solid #9DACCC; border-radius:3px;position:relative;124 float:left;font-size:11px;font-weight:normal;text-indent:0;125 background-color:#E2E6F0;color:#1C2A47;126 }127 #toList span a{128 position:absolute;right:7px;top:1px;color:#666;129 font-weight:bold;font-size:12px;text-decoration:none;130 }131 .ui-menu .ui-menu-item{132 white-space:nowrap;padding:0 10px 0 0;133 }134 </style>

1 jsonp1376905372318([{"name":"Admiral Ackbar","email":"akbar@alliance.org"},{"name":"Admiral Ozzel","email":"ozzy@empire.org"}])

作者们运用<div>,设置它的体制,是它看起来像二个<input>,在它在那之中使用二个无样式的真人真事的<input> 。这一个实际的<input>是必需的,那样浏览者能输入,autocomplete与其涉嫌。大家运用<div>成分师因为大家无法在<input>中插入<span>成分。我们也要求一个掩蔽的<input>,它被用来囤积实际的 e-mail 地址。

在本子里,大家利用三个函数作为数据源选项的值。每一遍<input>里的公文字改进变,那一个函数就能够被调用。这几个函数接受五个参数,第多个是 req ,包涵二个称呼 term 的品质,是输入到<input>里的字符。第三个, resp ,是一个回调函数,我们在突显指出目录时会调用的。

这么些函数中,我们首先做JSON 央求。建八个空数组,将呼吁到的种种 json 对象中的 item。

大家接纳 jQuery 的 each() 方法管理每四个回来的item。大家成立贰个新的指标,给它丰盛value和email属性。控件会显示value属性。

每一种新创造的靶子都被投入建议数组,这一个数组会传给resp的回调函数。

咱俩选拔 select 配置选项,来拍卖不三不四的远程数据。这么些函数接受四个参数,event 对象 和多少个 ui 对象。

在那些函数中,大家第一缓存遮掩的<input>的采取器,并因而它的吻遍,创立三个数组存款和储蓄分隔后的e-mail地址。

我们接下来创造贰个<span>元素,并透过 ui.item.value 设置它的公文为被选择的值。偶们也开创了八个 <a> 成分,将它附加到这一个新的 <span>上。这么些因素用来移除 收件人列表中的<span>。大家也在 <span> 上加多了e-mail 地址作为 data,所以各样收件人名字都能关联到它的 e-mail 地址。

下一场大家将以此<span>元素插入到 <div> 成分,对它选取样式,使它看起来像一个 <input> ,然后,通过 ui.item.email 将它的 email 属性加多到 emails 数组,作为 掩饰的 <input> 的值。

2.6 在建议列表中播放HTML

暗中认可地,autocomplete 控件会仅仅播放各个建议的文本。这里有叁个扩张插件,能够帮忙大家在建议列表中呈现html,来高亮客商输入的字符。

1 <label for"city">Enter a city</label> 2 <input id="city"> 3 4 <script src="jq/jquery.ui.autocomplete.html.js"></script> 5 6 $(function(){ 7 var data = [ 8 { value: "Aberdeen", label: "Aberdeen" }, 9 { value: "York", label: "York" } 10 ], 11 autoOpts={ 12 html:true, 13 source:function(req,resp){ 14 var suggestions=[], 15 regEx=new RegExp("^"+req.term,"i"); 16 $.each(data,function(i,val){ 17 if(val.label.match(regEx)){ 18 var obj={}; 19 obj.value=val.value; 20 obj.label=val.label.replace(regEx,"<span>"+req.term+"</span>"); 21 suggestions.push(obj); 22 } 23 }); 24 resp(suggestions); 25 } 26 }; 27 $("#city").autocomplete(autoOpts); 28 }); 29 30 <style>31 span { color:red !important;}32 </style>

在大家的安排对象中,大家内定叁个新选项 html  被设为 true ,用来组成 html 扩充。

我们创制三个新的空数组,定义了一个新的正则表明式对象,它会在毫无知觉的情事下,相配客商输入的字符。

本文由新萄京娱乐场手机版发布于品牌动态,转载请注明出处:万一Esc用来关闭导航,也急需容器使用者遵从一

关键词:

上一篇:1.事件代理

下一篇:没有了