闲着蛋疼去研究sae后台的js

浏览数：65 / 时间：2015年06月09日

原本只为了日期范围选择器看下sae的前端怎么实现

然后。。。

公共函数两个文件，第一个是各种插件：

typeahead.js 自动完成

        //关键词自动完成
        $(‘#page-auto-complete‘).typeahead({
            name: ‘twitter-oss‘,
            local: $SAE[‘search_keywords‘] || [],
            template: [
                ‘<a href="{{url}}" target="_blank" class="auto-complete-link">‘,
                ‘<p class="repo-language">{{category}}</p>‘,
                ‘<p class="repo-name">{{name}}</p>‘,
                ‘<p class="repo-description">{{description}}</p>‘,
                ‘</a>‘
            ].join(‘‘),
            engine: Hogan,
            limit: 10
        });

Hogan.js 模版引擎

json2.js json序列化和反序列化（JSON.stringfy,JSON.parse()：为什么我不引入也可以用，在fronzeui中？）

iframe autoheight 不晓得

moment.js 时间（这个好啊！当初我还折腾js的时间兼容呢）

moment(‘2015-03-19‘).format(‘YYYY-MM-DD‘);

http://www.soulteary.com/大牛的插件不晓得干嘛用，里面的博客很漂亮估计以前也是sae的前端工程师吧

i18next 语言

他们的使用方法

//切换语言事件
        $(‘#switch_lang‘).on(‘click‘, function (e) {
            var lang = $(e.target);
            $.cookie(‘hl‘, lang.data(‘lang‘));
            window.location.reload();
            return false;
        })
//获取语言cookie
 var curLang = $.cookie(‘hl‘);
        // i18N_CONFIG该在$SAE中
        $SAETOOLS.i18N_ID = $SAETOOLS.i18N({lang: curLang});
//处理语言，好好研究如果用到
$SAETOOLS.i18N = function (params) {
    var config = {
        ‘zh_CN‘: 1,
        ‘en_US‘: 2
    }
    // 待完成根据服务器设置返回默认语言,或者IP地址选择
    var init = function () {
        // 读取COOKIES设置
        var curLang = $.cookie(‘hl‘);
        if (curLang) {
            $.i18n.init({
                lng: curLang,
                fallbackNS: $SAE[‘modeName‘]
            });
            return config[curLang];
        } else {
            // 读取推荐设置
            var jsDefault = $SAETOOLS.i18N_CONFIG;
            if (jsDefault) {
                $.i18n.init({lng: jsDefault, ns:$SAE[‘modeName‘], resGetPath:‘/?m=ajax&a=get_resources&language=__lng__&namespace=__ns__‘, dynamicLoad:true});
                return config[jsDefault];
            } else {
                // 读取服务器推荐设置 待完成
            }
        }
    }
    if (params) {
        if (params.lang) {
            $.i18n.init({
                lng: params.lang,
                fallbackNS: $SAE[‘modeName‘]
            });
            return config[params.lang];
        } else {
            return init();
        }

    } else {
        return init();
    }
}

===================

我的任务研究是daterangepicker!

1.引入它的js和css文件

2.初始化中文吧

//初始化daterangepicker
initDaterangepicker: function(starttime, endtime, callback, options) {
	options = $SAETOOLS.extend({
		format: ‘YYYY-MM-DD‘,
		startDate: starttime,
		endDate: endtime,
		showDropdowns: true,
		locale: {
			cancelLabel: ‘关闭‘,
			applyLabel: ‘确认‘,
			daysOfWeek: ["日", "一", "二", "三", "四", "五", "六"],
			monthNames: [‘一月‘, ‘二月‘, ‘三月‘, ‘四月‘, ‘五月‘, ‘六月‘, ‘七月‘, ‘八月‘, ‘九月‘, ‘十月‘, ‘十一月‘, ‘十二月‘],
			fromLabel: ‘‘,
			toLabel: ‘‘,
			customRangeLabel: ‘自定义‘
		}
	}, options);
	return this.daterangepicker(options, callback);
}

2.封装一下使用

if ($(‘#date-range‘).length > 0 && $("#chart-main").length < 1) {
    var initdate = function(stime, etime) {
        $(‘#date-range‘).initDaterangepicker(stime, etime, function(start, end) {
            var stime = moment(start).format(‘YYYY-MM-DD‘);
            var etime = moment(end).format(‘YYYY-MM-DD‘);
            $("#stime").val(stime);
            $("#etime").val(etime);
            getPic(‘beans‘, ‘‘, ‘other‘, stime, etime);
        });
    }
    initdate($(‘#date-range‘).data(‘starttime‘), $(‘#date-range‘).data(‘endtime‘));
}

3.dom结构

<div class="input-prepend input-group">
                       <span class="add-on input-group-addon">数据日期</span>
                       <input type="text" name="date_range" id="date-range" class="form-control" value="2015-03-19 到 2015-04-18" data-starttime="2015-03-19" data-endtime="2015-04-18"> 
                    </div>