改造matrix_admin模版后台——表格（五）

一、uniform.js

使用了jquery.uniform.js这个插件来美化checkbox等控件。使用的版本是2.1.2。

选择默认的样式，在页面中引入css，再将jquery文件引入进来。

<link rel="stylesheet" type="text/css" href="scripts/libs/uniform/themes/default/css/uniform.default.css"/>

样式是出来的，但是在刷新一下后，还会先变成老样子过个1秒后才会变成新样式，这里我就想试试require的domReady插件，看看能不能解决下这个问题。

不行，还是会有点小延时，压缩了下代码还是一样，查看到执行语句在最后面。

看来只能在页面中调用了，不通过requirejs。

<script src="scripts/libs/jquery/jquery.js" type="text/javascript"></script>
<script src="scripts/libs/uniform/jquery.uniform.js" type="text/javascript"></script>
<script src="scripts/views/libs/uniformView.js" type="text/javascript"></script>

 

二、select2

下拉框需要引入一个插件叫select2.js。用的是3.5.2的版本，最新版本还不太会用。从官网上下载下来想要引入到requirejs中，碰到了点麻烦。引用不进来。。。。网上看到了篇文章，跟我碰到了相同的问题《Load Select2 jQuery plugin immediately on load RequireJS》

没办法也只能用script标签引入了。

<script src="scripts/libs/select2/select2.js" type="text/javascript"></script>
<script src="scripts/views/libs/select2View.js" type="text/javascript"></script>

 

三、行颜色

不同的行可以显示不同的颜色

还有就是移上去变颜色，是间隔显示的，一个颜色不变下一个就变。

bootstrap.css中有几个属性是控制表格的。

1. table-hover：控制:hover的显示，我把2146行.table-hover tbody tr:hover > td中的颜色变成了#eaeaea深一点，不然都看不到。
2. table-bordered：控制边框圆角与颜色等。
3. table-striped：控制奇偶行数显示不同颜色。

 

三、侧边栏有显示影藏的特效

将matrix.js中的代码剥离出来

$('.submenu > a').click(function(e) {
                e.preventDefault();
                var submenu = $(this).siblings('ul');
                var li = $(this).parents('li');
                var submenus = $('#sidebar li.submenu ul');
                var submenus_parents = $('#sidebar li.submenu');
                if(li.hasClass('open')) {
                    if(($(window).width() > 768) || ($(window).width() < 479)) {
                        submenu.slideUp();
                    } else {
                        submenu.fadeOut(250);
                    }
                    li.removeClass('open');
                }else {
                    if(($(window).width() > 768) || ($(window).width() < 479)) {
                        submenus.slideUp();
                        submenu.slideDown();
                    } else {
                        submenus.fadeOut(250);
                        submenu.fadeIn(250);
                    }
                    submenus_parents.removeClass('open');
                    li.addClass('open');
                }
            });

 

四、seach按钮的特效

看到search按钮绑定了一个叫typeahead的特效。这是一个文本提示的插件

下载了1.2.2版本的插件，引入到结构中，不能显示效果。只能通过查看源码了。

通过查看源码发现是source的展现形式变了，变成了json格式

$('#search input[type=text]').typeahead({
                    source: [
                        {name:'Dashboard'},
                        {name:'Form elements'},
                        {name:'Common Elements'},
                        {name:'Validation'},
                        {name:'Wizard'},
                        {name:'Buttons'},
                        {name:'Icons'},
                        {name:'Interface elements'},
                        {name:'Support'},
                        {name:'Calendar'},
                        {name:'Gallery'}
                    ],
                    items: 4,
                    display: 'name'
            });

 

五、顶部栏特效

这边的特效一开始漏掉了，现在补上。应该是用到了其中的dropdown插件。

 

 

附件下载：

http://download.csdn.net/detail/loneleaf1/8451123