精华内容
参与话题
问答
  • WeUI

    2018-12-27 16:02:08
    WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。 详细的样式可以到:https://weui.io/查看 jQuery WeUI jQuery WeUI 是专为...

    WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。

    详细的样式可以到:https://weui.io/查看

    jQuery WeUI

    jQuery WeUI 是专为微信公众账号开发而设计的一个简洁而强大的UI库,包含全部WeUI官方的CSS组件,并且额外提供了大量的拓展组件,丰富的组件库可以极大减少前端开发时间。

    jQuery WeUI 的最大特点是它只提供UI组件,并不会对项目所使用的框架和其他库有任何的限制,几乎可以在任何环境下使用。无论你的项目是基于jQuery,还是 React, Angular, Vue, 你都会发现 jQuery WeUI 能非常方便的和他们结合使用。既是你的项目是一个有很悠久历史的老项目,也几乎可以做到拿来即用。

    jQuery WeUI 提供了总共30+ 个非常实用的组件:列表,表单,卡片,对话框,下拉刷新等。

     

    为什么选择jQuery WeUI

    • 简单易用,无上手难度
    • 丰富强大的组件库,并且还在不断完善中
    • 轻量,无限制,可以结合任何主流JS框架使用,比如 `Vue, Angular, React` 等
    • 高性能的 CSS3 动画,低端手机上依然可以较流畅运行
    • 详尽完善的官方文档
    • 标准稳定的API,基本可以保证版本透明更新
    • 基于 MIT 协议发布,免费开源

    简洁而不简单

    按钮,列表之类的组件不需要JS,使用非常简单,只要从官网复制下来HTML代码并粘贴到你的项目中即可。

    对于需要用到JS的组件,如果你使用过jQuery,那么你使用jQuery WeUI 将没有任何障碍。所有的JS组件都是标准的jQuery插件:

    //显示一个对话框
    $.alert("我是一个对话框");
    
    //弹出一个actionsheet
    $.actions({
      actions: [{
        text: "编辑",
        onClick: function() {
          //do something
        }
      },{
        text: "删除",
        onClick: function() {
          //do something
        }
      }]
    });

    基础组件

    WeUI 包含了大量常用的组件:按钮,表单,列表,对话框等。

    组件展示

    这里展示一些组件的截图,仅作展示之用,具体请参阅 基础组件 和 拓展组件 页面,其中页面右侧的手机模拟器可以模拟组件的绝大多数操作(除缩放等复杂的手势外)。

    grid

    grid

    grid

    grid

    grid

    grid

    展开全文
  • weui

    2018-05-02 14:48:55
    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport"...
    <!DOCTYPE html>
    <html lang="zh">
    <head>
    	<meta charset="UTF-8" />
    	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
    	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
    	<title>Document</title>
    	<link rel="stylesheet" href="weui.css" />
    	<!--button、cell、dialog、 progress、 toast、article、actionsheet、icon-->
    	<!--https://blog.csdn.net/chq1988/article/details/73549027-->
    	<!--http://www.runoob.com/w3cnote/weui-for-weixin-web.html-->
    	<style>
    	  body{
    	    background: #999;
    	  }
    	</style>
    </head>
    <body>
    	<h3>按钮</h3>
    	<a href="javascript:;" class="weui_btn weui_btn_primary">按钮</a>
    	<a href="javascript:;" class="weui_btn weui_btn_disabled weui_btn_primary">按钮</a>
    	<a href="javascript:;" class="weui_btn weui_btn_warn">确认</a>
    	<a href="javascript:;" class="weui_btn weui_btn_disabled weui_btn_warn">确认</a>
    	<a href="javascript:;" class="weui_btn weui_btn_default">按钮</a>
    	<a href="javascript:;" class="weui_btn weui_btn_disabled weui_btn_default">按钮</a>
    	<div class="button_sp_area">
    	    <a href="javascript:;" class="weui_btn weui_btn_plain_default">按钮</a>
    	    <a href="javascript:;" class="weui_btn weui_btn_plain_primary">按钮</a>
    	
    	    <a href="javascript:;" class="weui_btn weui_btn_mini weui_btn_primary">按钮</a>
    	    <a href="javascript:;" class="weui_btn weui_btn_mini weui_btn_default">按钮</a>
    	</div>
    	
    	<h3>单元格</h3>
    	<div class="weui_cells_title">带说明的列表项</div>
    	<div class="weui_cells">
    	    <div class="weui_cell">
    	        <div class="weui_cell_bd weui_cell_primary">
    	            <p>标题文字</p>
    	        </div>
    	        <div class="weui_cell_ft">
    	            说明文字
    	        </div>
    	    </div>
        </div>
        
        <div class="weui_cells_title">带图标、说明、跳转的列表项</div>
    	<div class="weui_cells weui_cells_access">
    	
    	    <a class="weui_cell" href="javascript:;">
    	        <div class="weui_cell_hd">
    	            <img src="" alt="icon" style="width:20px;margin-right:5px;display:block">
    	        </div>
    	        <div class="weui_cell_bd weui_cell_primary">
    	            <p>cell standard</p>
    	        </div>
    	        <div class="weui_cell_ft">
    	            说明文字
    	        </div>
    	    </a>
    	    <a class="weui_cell" href="javascript:;">
    	        <div class="weui_cell_hd">
    	            <img src="" alt="icon" style="width:20px;margin-right:5px;display:block">
    	        </div>
    	        <div class="weui_cell_bd weui_cell_primary">
    	            <p>cell standard</p>
    	        </div>
    	        <div class="weui_cell_ft">
    	            说明文字
    	        </div>
    	    </a>
    	</div>
    </body>
    </html>

    展开全文
  • WEUI

    2018-08-15 10:53:40
    WEUI 1.showLoading 显示:$.showLoading("数据加载中"); 隐藏:$.hideLoading(); 2.修改showLoading样式 .weui-toast 3.修改加载框样式 p.weui-toast_content {  margin-top: 0rem; }...

    WEUI

    1.showLoading

    显示:$.showLoading("数据加载中");

    隐藏:$.hideLoading();

    2.修改showLoading样式

    .weui-toast

    3.修改加载框样式

    p.weui-toast_content {
           margin-top: 0rem;
    }

    展开全文
  • WeUi

    2017-03-23 17:24:00
    2019独角兽企业重金招聘Python工程师标准>>> ...

    一.参考文献

    1.GitHub:https://github.com/weui/weui

    2.weui+:一个扩展库,在weui0.44基础上,采用zepto作为基础库,兼容weui1.1所有效果,目前分为表单,基础,布局,组件,js函数五大类,共计百余项功能

    二.使用方法

    直接看官方文档

    三.注意

    1.如果用的是weui+(即参考文献2),则要使用GitHub上下载的css和zepto文件,因为作者做了修改,增加了一些功能。

    2.body上要加一个属性

    <body ontouchstart>

    四.实例(weui+)(meta标签是根据自己项目需求加的)

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8" />
            <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
            <!--优先使用最新版本 IE 和 Chrome-->
            <meta name="apple-mobile-web-app-title" content="">
            <!--添加到主屏后的标题(IOS)-->
            <meta name="apple-mobile-web-app-capable" content="yes" />
            <!--启用 WebApp 全屏模式(IOS)-->
            <meta name="apple-touch-fullscreen" content="yes" />
            <!--启用 WebApp 全屏模式(IOS)-->
            <meta http-equiv="Cache-Control" content="no-siteapp" />
            <!--禁止百度转码-->
            <meta name="format-detection" content="telephone=no" />
            <!--关闭电话号码的自动识别-->
            <meta content="email=no" name="format-detection" />
            <!--关闭邮箱的自动识别-->
            <meta name="msapplication-tap-highlight" content="no">
            <!--winphone系统a、input标签被点击时产生的半透明灰色背景-->
            <meta name="description" content="">
            <meta name="keywords" content="">
            <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
            <title></title>
            <link rel="stylesheet" type="text/css" href="../css/weuix.min.css"><!-- WeUi+样式文件 -->
        </head>
        <body ontouchstart>
    
            
            <script type="text/javascript" src="../js/zepto.min.js"></script>
        </body>
    </html>

     

    五.weui+(注意:不是weui)使用小结(这个扩展库的GitHub没有给出文档,以下是一些自己使用过的)

    5.1datetimePicker时间选择组件

    	// 日期选择初始化
    			$("#date1").datetimePicker({title:"选择日期",m:1,onChange: function () {
    				var date1=$("#date1").val();			
       },});

    我没有看到如何获取日期返回值,后来参考微信weui文档,加了个onChange函数获得了所选择的时间。注意,函数里面是用的input的val()。有个问题:获取的值是前一个onchange的,并非最终的,未解决这个问题。

    转载于:https://my.oschina.net/Cubicluo/blog/865701

    展开全文
  • WeUI - tailor-made for WeChat web service 中文版本 Introduction WeUI is an WeChat-like UI framework officially designed by the WeChat Design Team, tailor-made for WeChat Web development, in order ...
  • React-WeUI WeUI Components build with React. Docs 1.0.x documentation with live examples. 0.4.x documentation with live examples. Installation With npm: If React is not installed npm install --...
  • weui.js 概述 WeUI 的轻量级 js 封装。 注意:由于微信小程序不支持dom操作,所以weui.js并不适用于小程序。不过WeUI也为小程序开发了另外的版本,详情请看:https://github.com/Tencent/weui-wxss/ 手机预览 ...
  • 按钮常见的操作场景:确定、取消、警示,分别对应class:weui_btn_primary、weui_btn_default、weui_btn_warn,每种场景都有自己的置灰态weui_btn_disabled,除此外还有一种镂空按钮weui_btn_plain_xxx,客户端...
  • jQuery WeUI - 打造微信公众号开发的瑞士军刀 jQuery WeUI 是专为微信公众账号开发而设计的一个简洁而强大的UI库,包含全部WeUI官方的CSS组件,并且额外提供了大量的拓展组件,丰富的组件库可以极大减少...
  • WeUI for 小程序 为微信小程序量身设计 概述 WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。包含button、cell、dialog、 ...

空空如也

1 2 3 4 5 ... 20
收藏数 3,210
精华内容 1,284
关键字:

weui