前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >sui的一些方法封装

sui的一些方法封装

作者头像
windseek
发布2018-06-14 18:04:26
6390
发布2018-06-14 18:04:26
举报
文章被收录于专栏:杨龙飞前端杨龙飞前端
代码语言:javascript
复制
+ function($) {
    "use strict";

    var today = new Date();

    var getDays = function(max) {
        var days = [];
        for(var i=1; i<= (max||31);i++) {
            days.push(i < 10 ? "0"+i : i);
        }
        return days;
    };

    var getDaysByMonthAndYear = function(month, year) {
        var int_d = new Date(year, parseInt(month)+1-1, 1);
        var d = new Date(int_d - 1);
        return getDays(d.getDate());
    };

    var formatNumber = function (n) {
        return n < 10 ? "0" + n : n;
    };

    var initMonthes = ('01 02 03 04 05 06 07 08 09 10 11 12').split(' ');

    var initYears = (function () {
        var arr = [];
        for (var i = 1950; i <= 2030; i++) { arr.push(i); }
        return arr;
    })();


    var defaults = {

        rotateEffect: false,  //为了性能

        value: [today.getFullYear(), formatNumber(today.getMonth()+1)],

        onChange: function (picker, values, displayValues) {
            var days = getDaysByMonthAndYear(picker.cols[1].value, picker.cols[0].value);
        },

        formatValue: function (p, values, displayValues) {
            return displayValues[0] + '-' + values[1];
        },

        cols: [
            // Years
            {
                values: initYears
            },
            // Months
            {
                values: initMonthes
            }
        ]
    };

    $.fn.monthPicker = function(params) {
        return this.each(function() {
            if(!this) return;
            var p = $.extend(defaults, params);
            $(this).picker(p);
            if (params.value) $(this).val(p.formatValue(p, p.value, p.value));
        });
    };
    $.fn.selectedval = function(value){
        var picker=this.data("picker");
            var date=new Date(value);
            var year=value.substr(0,4);
            var month=value.substr(5,2);
            var day=value.substr(8,2);
            var hour=value.substr(11,2);
            var minutes=value.substr(14,2);
            value=[year,month,day,hour,minutes];
            picker.initialized=true;
            picker.value=value;
            return false;
    };
    $.fn.setMinutes = function(value){
        var picker=this.data("picker");
        picker.params.cols[6].values=value;
    };
    $.fn.setDataSource = function(datasource){
        var picker=this.data("picker");
        picker.open();
        picker.cols[0].replaceValues(datasource);
    };
}(Zepto);

monthPicker:只选择月份

selectedval:修改下拉框默认选择值

setminutes:修改分钟的数据源;

setDataSource:修改下拉框的数据源;

其实setDataSource可以写成跟setminutes一样的方法,只是我的产品需要,就不做修改了;

sui的scorll加载时,一定要提前执行,$.init();否则无效,我在最初使用时,老是看不到效果,就是因为这个,对比iscroll.js,sui的滚动更容易操作,兼容性也比较好

另外,sui是仿照framework7来写的,做了一些改进,framework7针对ios系统,sui同时支持ios和andriod

sui的sm.js一定要在body后面加载,否则没有效果,我在使用fremark模板时进行了相关配置,

代码语言:javascript
复制
<#macro weixin title="" css=[] script=[] systag=0>
<html>
<head>
    <title>${title!""}</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <#include "/include/weixin/link.ftl"/>
    <#list css as c>
        <link rel="stylesheet" type="text/css" href="${c}" />
    </#list>
    <script src="${basePath}/weixin/js/zepto.min.js" charset="UTF-8"></script>
</head>
<body>
<#nested />
</body>
<#include "/include/weixin/script.ftl"/>
<#list script as s>
        <script type="text/javascript" src="${s}" charset="UTF-8"></script>
</#list>
</html>
</#macro>
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2017-03-21 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档