Idle egg Pain to study the SAE backstage JS

Originally only for the date range selector to see the SAE front end how to achieve

And then...

Public functions two files, the first is a variety of plugins:

Typeahead.js Auto-complete

        //Automatic keyword Completion$ (' #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 Template engine

Json2.js JSON serialization and Deserialization (Json.stringfy,json.parse (): Why am I not introduced or can I use it in Fronzeui? ）

IFrame Autoheight don't know

Moment.js time (this is good!) At first I also toss JS time compatible?

Moment (' 2015-03-19 '). Format (' Yyyy-mm-dd ');

　　

http://www.soulteary.com/ Daniel Plug-ins do not know what to use, the blog is very beautiful in the past is also an SAE front-end engineer It

I18next language

How they are used

Toggles the language event $ (' #switch_lang '). On (' click ', Function (e) {var lang = $ (e.target);            $.cookie (' HL ', lang.data (' Lang '));            Window.location.reload ();        return false;        })//Get the language cookie var curlang = $.cookie (' hl '); I18n_config should be in the $sae $SAETOOLS. i18n_id = $SAETOOLS. i18n ({Lang:curlang});//Process The language and study it properly if $saetools.i18n = function is used (params)        {var config = {' zh_cn ': 1, ' en_US ': 2}//To be completed depending on the server settings returned to the default language, or the IP address select var init = function () {        Read the cookie settings var curlang = $.cookie (' hl ');            if (Curlang) {$.i18n.init ({Lng:curlang, fallbackns: $SAE [' modename ']            });        return Config[curlang];            } else {//read recommended setting 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 {//Read server recommended setting to complete}}} if (params) {if (Params.lang) {            $.i18n.init ({lng:params.lang, fallbackns: $SAE [' Modename ']});        return Config[params.lang];        } else {return init ();    }} else {return init (); }}

　　

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

My mission research is daterangepicker!.

1. Introduction of its JS and CSS files

2. Initialize the Chinese bar

Initialize Daterangepickerinitdaterangepicker:function (StartTime, Endtime, callback, options) {options = $SAETOOLS. Extend ( {format: ' Yyyy-mm-dd ', Startdate:starttime,enddate:endtime,showdropdowns:true,locale: {cancellabel: ' Off ', Applylabel: ' Confirmation ', DaysOfWeek: ["Day", "one", "two", "three", "four", "five", "Six"],monthnames: [' January ', ' February ', ' March ', ' April ', ' May ', ' June ', ' July ', ' eight Month ', ' September ', ' October ', ' November ', ' December '],fromlabel: ', Tolabel: ', Customrangelabel: ' Custom '}, Options '; return This.daterangepicker (options, callback);}

2. Encapsulate the use

if($ (' #date-range '). length > 0 && $ ("#chart-main"). Length < 1) {    varInitdate =function(stime, ETime) {$ (' #date-range '). Initdaterangepicker (Stime, ETime,function(start, end) {varStime = Moment (start). Format (' Yyyy-mm-dd '); varETime = 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 structure

<Divclass= "Input-prepend input-group">                       <spanclass= "Add-on Input-group-addon">Data date</span>                       <inputtype= "text"name= "Date_range"ID= "Date-range"class= "Form-control"value= "2015-03-19 to 2015-04-18"Data-starttime= "2015-03-19"Data-endtime= "2015-04-18">                     </Div>

Idle egg Pain to study the SAE backstage JS