你的位置:首页 > Java教程

[Java教程]如何在前端实现语义缩放(第一步)


在phone中找联系人的时候,点击那个拼音首字母,26个字母会在当前屏幕全部显示。这种语义缩放在WP中是一种控件。所有歌曲的名称也可以这样快速查找。

对于小的手机屏幕不适合一页一页的翻页,这个语义缩放真是太方便了。

在JS中怎么实现,先上图:

 

源代码:

 <ul id="l1" class="no-dot content">      <li>关怀</li>      <li>测试</li>      <li>阿女</li>      <li>第三方</li>      <li>谁谁谁</li>      <li>模糊</li>      <li>电话</li>      <li>发送</li>      <li>沟通</li>      <li>句</li>      <li>当天</li>      <li>当前</li>      <li>代码</li>      <li>但是</li>      <li>仍然</li>      <li>稳稳</li>    </ul>

通过对比,可以发现,按拼音首字母已经排序了。并且在每组(按首字母分组)的第一个词语前加上了首字母拼音。

做这个功能的关键是,所有汉字的拼音字典。(网上很多,一个JSON即可)

JS中的关键函数是get,输入汉字,返回拼音。

var Pinyin = {} Pinyin._ucfirst = function (l1) {  if (l1.length > 0) {    var first = l1.substr(0, 1).toUpperCase();    var spare = l1.substr(1, l1.length);    return first + spare;  }}Pinyin._arraySearch = function (l1, l2) {  for (var name in this._pinyin) {    if (this._pinyin[name].indexOf(l1) != -1) {      return this._ucfirst(name); break;    }  }  return false;}Pinyin.get = function (l1) {  var l2 = l1.length;  var I1 = "";  var reg = new RegExp('[a-zA-Z0-9\- ]');  for (var i = 0; i < l2; i++) {    var val = l1.substr(i, 1);//拆分后的输入字符        var name = this._arraySearch(val, this._pinyin);//不为false表示找到的拼音    if (reg.test(val)) {//半角字母或数字输出原字符      I1 += val;    } else if (name !== false) {      I1 += name;    }  }  I1 = I1.replace(/ /g, '-');  while (I1.indexOf('--') > 0) {    I1 = I1.replace('--', '-');  }  return I1;}

 


完整的HTMl源码:

<head>  <meta name="viewport" content="width=device-width" />  <title>List</title>  <script src="~/Scripts/Pinyin.js"></script>  <script src="~/Scripts/jquery-1.8.2.js"></script>  <script>    var usableLetter = [];    function appendFirstLetterOfPinyin(list)    {      var lis = $('li', list).each(function () {        var fp = getFP(this);        $(this).data('fp', fp);      }).sort(sort);      $(list).html(lis);      $('li', list).each(function (index, item) {        (function (me) {          var fp = getFP(me);          if (index === 0) {            insertFP(fp, me);          }          else {            var l_fp = getFP($('li:eq(' + (index -1) + ')', list));            console.log(l_fp + " - " + fp);            if (fp != l_fp) {              usableLetter.push(fp);              insertFP(fp, me);            }          }        })(this);              })    }    function insertFP(fp,target)    {      $('<div >' + '<a href="#' + fp + '">' + fp + '</a></div>').insertBefore(target);    }    function getFP(t) {      var fw = $(t).text().substring(0, 1);      var fp = Pinyin.get(fw).substring(0, 1);      return fp;    }    function sort(a, b) {      var _a = $(a).data('fp').charCodeAt(0);      var _b = $(b).data('fp').charCodeAt(0);      return _a - _b;    }    $(function () {      appendFirstLetterOfPinyin($('#l1'));    })  </script>  <style>    .flag {      width: 16px;      height: 16px;      padding: 2px;      text-align: center;      background-color: rgba(20, 181, 111, 0.92);      color: white;      cursor:pointer;    }    .no-dot {      list-style: none;    }    ul :first-child ::before {           }    .flag a    {      text-decoration:none;      color:white;    }     .content li {    }  </style></head><body>  <div>        <ul id="l1" class="no-dot content">      <li>关怀</li>      <li>测试</li>      <li>阿女</li>      <li>第三方</li>      <li>谁谁谁</li>      <li>模糊</li>      <li>电话</li>      <li>发送</li>      <li>沟通</li>      <li>句</li>      <li>当天</li>      <li>当前</li>      <li>代码</li>      <li>但是</li>      <li>仍然</li>      <li>稳稳</li>    </ul>  </div></body>


接下来是添加拼音首字母事件,点击后一屏出现26个字母,可用的字母用亮色表示,不可用的字母用暗色背景表示。然后点击可用字母后自动定位。

扩展用途:定位时自动获取翻页数据。

适用场景:小屏幕上找列表项是词语或短语的又需要翻页的。这个比传统的翻页更方便。

 

(拼音JSON较大,稍后附上)