music unfamous original game design efficient software wtf
life ui algorithm fix programming

SUI 界面库

作者:trinity  Javascript    2015-12-3  标签:  ui 

    SUI 库有两个,移动的叫 Sui-Mobile,还有一个支持桌面的。我最近使用到了 Sui-Mobile,本库是阿里巴巴 UED 团队制作的,质量和效果是不容置疑的,毕竟阿里云那一套不是随便一个公司能倒腾出来的。阿里俨然成了国内技术领域的先驱。

    这次使用 SUI 的过程中,总体印象还是很简单的,完成一个简单的系统用了几个小时。但在后面添加一个小功能的时候发现了使用 SUI 的“规则”。这个规则不知道是不是和 Zepto.js 的实现有关。

    我以 JQuery 常见的方式使用 Js 代码,最后,要添加一个弹出对话框的功能,但怎么调就是出不来。最后看了看 SUI 的初始化部分的文档,竟给我看出了端倪。由此反复测试,总结了一套 SUI 的一些注意事项:

    1,按照文档指定的方式加载 CSS 和 Js 文件。比如:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>我的生活</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="/favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.5.4/css/sm.min.css">
    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.5.4/css/sm-extend.min.css">

  </head>
  <body>
    <!-- 你的html代码 -->
    <script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.5.4/js/sm.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.5.4/js/sm-extend.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='my.js' charset='utf-8'></script>
  </body>
</html>


    该在 head 里的在 head 里,该在 body 里的在 body 里。

    2,开发时编写的调用 SUI API 的代码组织在一个单独的 Js 文件里,在 </body> 之前载入,比如上面的 my.js。不这样恐怕弹出对话框和无限滚动会失常(亲测- -)。<body></body>里面的标签逻辑大致是:

<div class="page" id="mypage">
	<header class="bar bar-nav">
		<a class="button button-link button-nav pull-left" href="#" data-transition='slide-out'>
			<span class="icon icon-left"></span>
			返回
		</a>
		<h1 class="title">title</h1>
	</header> 
	<div class="content">
		<div class="list-block">
			<ul>
				<!-- Text inputs -->
				
			</ul>
		</div>
		<div class="content-block">
			<div class="row">
				<div class="col-100"><a id="btn" href="#" class="button button-big button-fill">登录</a></div>
			</div>
		</div>
	</div>
</div>


    这是个样板,对应的,在自己工程使用的单独 Js 代码文件(比如上面的 my.js)里,大致是这样的代码:


//my.js
$(function(){
  'use strict';
  $(document).on('pageInit','#mypage',function(e,id,page){
     var $content=$(page).find('.content');
     $content.on('click','#btn',function(){
         console.log('pressed');
     });
     // others event
  });
  // other page
  $(document).on('pageInit','#other',function(e,id,page){
    ...
  }
  // init.
  $.init();
});

    以上,任何效果都是可以正常工作的,当然,不出意外的话。

    3,控件 id 最好全局唯一。

    比如你在两个页面都有一个 id 是 'name' 的 input ,后面的 $("#input") 会引用之前页面的,这就是意外。

    Sui-Mobile 基于 Framework7,所以效果有点接近 IPhone,有人说效果像魅族、小米,--啥也不说了。