化石原创文章,转载请注明来源并保留原文链接


这个库类似于Bootstrap,不过多了很多有用的控件,比如:

1、ListView (树形控件)

2、Draggable (可拖动控件)

3、Touch and Swipe (触控后移出)

4、Time picker (时间选择器)

5、File Input (文件选择)

6、Input material (更复杂的输入,不知道怎么描述)

7、Keypad (虚拟键盘)

8、Rating (投票控件)

9、Slider(滑动条)

10、Double Slider(双向滑动条)

11、Tag input (标签输入器)

12、Bottom sheet (紧贴在下方的控件栏)

13、Cube (这是干嘛的?)

14、Counter (计数器)

15、Chat (聊天控件)

16、Donut(圆环型进度条)

17、Image magnifier (图像放大器)

18、Image compare (图像比较器)

19、Gravatar (这玩意的出处在这里

20、Toast

等。

官网:

https://metroui.org.ua/index.html


化石原创文章,转载请注明来源并保留原文链接



化石原创文章,转载请注明来源并保留原文链接


bootstrap-typeahead是个javascript库,作用是在输入的时候,弹出提示框,帮助快速完成用户需要的输入。最常用的场合是:在用户输入的时候,前端通过ajax访问服务器,服务器从用户当前输入的字符,从数据库中寻找到含有该字符的合适字符串数组,然后返回给前端的typeahead运行库,typeahead负责显示列表框,辅助用户输入。

在使用ajax获取合适的数据的过程中,现在typeahead需要结合另外一个javascript库:bloodhound.js。

实际准备工作:

1、github上得到bootstrap-typeahead.min.js

地址:https://github.com/iqbalfn/bootstrap-typeahead/tree/master/dist/js

2、通过npm得到bloodbound.min.js

命令:npm install bloodhound-js –save

通过上面的命令,可以在当前目录下载到bloodhound.js的工程,对应的min.js在node_modules目录的bloodhound-js目录的dist目录下

实际代码工作:

1、在需要的html中引入bloodhound.min.js和bootstrap-typeahead.min.js (JQuery库一般都是常用的,这里默认大家都先引入)

譬如:

<script src="plugin/bloodhound.min.js"></script>
<script src="plugin/bootstrap-typeahead.min.js"></script>

2、自己的javascript中,在某个初始化的地方,初始化typeahead的绑定工作:(a)绑定typeahead和bloodhound实例;(b)绑定typeahead和html中的某个输入元素

举例:

$(document).ready(function() {
// Instantiate the Bloodhound suggestion engine
    var authors = new Bloodhound({
        datumTokenizer: function(datum) {
            return Bloodhound.tokenizers.whitespace(datum.value);
        },
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        remote: {
            wildcard: '%QUERY',
            url: 'http://127.0.0.1:8080/api/getjson',
            transform: function(response) {
                // Map the remote source JSON array to a JavaScript object array
                return $.map(response.data, function(data) {
                    return {
                        name: data
                    };
                });
            }
        }
    });
,
    // Instantiate the Typeahead UI
    $('#author-search').typeahead(null, {
        display: 'name',
        source: authors,
        limit: 1000, //如果这个不填,默认是搜索到的结果,也就是上面的transform.$.map返回结果的-1个
    });
});

上面例子中的第1行,说明了我们是在document准备好就开始做这个工作,这个也是常见的用法。

第23行,我们绑定了typeahead和html中一个id为author-search的input元素。这里同时也初始化了typeahead实例:(1)display的name和第15的name是一起运作的;(2)source指定了数据源从第3行的变量(方法)得到;(3)limit这个是个配置的值,如果不指定的话,那么如果ajax返回n个值,在typeahead中显示出来的,必定是n-1个。会看起来少一个值,这里注意。

第8行,说明了我们这个的数据从远程服务器得到,而不是本地。这里通过第10行配置一个可以访问的url,bloodhound会使用ajax(xmlHttpRequest)等手段访问该url(Get方式),该url必须返回json格式的数据。

第9行,wildcard是一个占位符,实际的作用是在url指定中,我们可以指定参数,比如“http://127.0.0.1:8080/api/getjson?id=%QUERY”,这里的%QUERY就是每次ajax访问(这个访问有typeahead根据内部策略发起)的时候,用户在input元素中已经输入的字符串。有这个字符串,我们的后台程序就知道用户现在输入了什么,就可以在给前端返回数据前根据这些输入的字符串做一次过滤。

第11行,transform方法回调是bloodhound用来在远程数据得到后做处理的地方。关键是参数response,这个参数如果放断点看到是null的时候,你就知道你的url返回的不是json格式。

如果正确的话,那么response就是远程返回的json数据。检查远程返回的数据是否json的话,最简单的就是使用Postman这个工具给对应的url发个Get请求,如果返回的数据在Postman中清晰的看到是json,那么如果第13行如果有断点,就能被击中。

第13行,在typeahead应用场景中,一般远程返回的json数据中,必定有一个栏位是数组形式(因为肯定是多个选择才会出列表)。这里是通过第一个参数定位response中哪个是列表,然后列表中的每个元素,哪个值是我们最后的typeahead需要的(第二个参数是每个列表的元素的句柄)。

以13和15行为里,这里我们返回的response json数据中,应该有这样的形式:

{“data”:[“string1”, “string2”]}

参数response.data就是[]的句柄,参数data第一次是string1、第二次是string2。

要就是bloodhound会循环数组中的每个元素(根据15行的规则,这里我们只是把string1、string2拷贝给每个name),得到最后喂给typeahead的数组。

这里要说的是,response的json格式,因为bloodhound的transform,完全就可以是任意格式。比如,我们上面的response,可以是

{“result”: 200, “description”: “OK”, “data”:[“string1”, “string2”]}

如果data数组里面的并不是单一的string,也是对象,比如

{“data”:[ {“name”:”joe”}, {“name”:”kylin”}]}

那么我们上面的transform代码就要改成:

transform: function(response) {
                return $.map(response.data, function(data) {
                    return {
                        name: data.name
                    };
                });
            }

因为这个时候,参数2其实都是json的一个对象格式。

第15行的name,这个名字完全是由24的display后面的字符决定的,如果24行改成了display: ‘value’,那么这里的name就需要变成value。


化石原创文章,转载请注明来源并保留原文链接



化石原创文章,转载请注明来源并保留原文链接


document.URL

“http://example.com/page1.html”

document.location.href

“http://example.com/page1.html”

document.location.origin

“http://example.com”

document.location.host

“example.com”

document.location.pathname

“/page1.html”

另有:

1、href
var currentURL = window.location.href;

2、host
var currentHost = window.location.host;

3、hostname
var currentHostname = window.location.hostname;

4、port
var currentPort = window.location.port;

5、protocal
var currentProtocol = window.location.protocol;

6、pathname
var currentPathname = window.location.pathname;

7、hash
var currenthash = window.location.hash;

8、search
var currentSearchString = window.location.search;


化石原创文章,转载请注明来源并保留原文链接



化石原创文章,转载请注明来源并保留原文链接


前面提到过javascript中时间戳的转化,近日遇到一个很不错的时间处理类库,moment.js,有中文官网,直接bing即可得到。

这个库使用时,直接在官网下载一个js文件即可。需要中文(不然时间格式出来的月份、星期等都是英文)的话,直接下载多语言版本的那个即可,如下图下方的一个文件。

图1:moment.js官方下载

这个库我看下来,常用的时间功能:格式化、加减等非常之多。这里仅举一个例子:取当前的时间,格式化成年月日带星期的,并且用中文习惯显示

    var dateTime = document.querySelector("#date-time-on-title");
    moment.locale("zh-cn");
    var date = moment().format("YYYY-MM-DD dddd");
    dateTime.innerText = date;

就上面涉及到moment的两句话即可。其中dddd是格式成星期x的显示,如果要“周六”这样的显示,只要换成ddd即可。非常方便。


化石原创文章,转载请注明来源并保留原文链接