zoukankan      html  css  js  c++  java
  • sui的一些方法封装

    + 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模板时进行了相关配置,

    <#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>
    学而不思则罔,思而不结则殆,结而不看,一事无成
  • 相关阅读:
    sql 语句总结
    linux 操作命令
    elk 相关问题总结
    windows 下命令总结
    spring 生态的区别
    电脑基本常识 cpu的认识
    git 命令总结
    reques 和session
    linux centos7 安装docker
    get和post请求
  • 原文地址:https://www.cnblogs.com/windseek/p/6593014.html
Copyright © 2011-2022 走看看