by ·0评论

首先我想说的是，在windows下配置vagrant环境比linux和mac下要恶心和麻烦的多。

因为vagrant启动默认需要的很多服务，windows下面都没有，比如用来做目录映射的rsync

  1. 下载相关的软件包，这个不必多说。我用的是vagrant+virtualbox。Box最好先下载到本地，然后在使用本地路径而不是url加载，Box基本都host在国外，一个几百MB，下载速度是在是太慢了，光等待的时间就够你烦的了。可以试用国外的远程服务器wget下载，然后再传到网盘里，然后再从网盘里下载。
  2. 确认BIOS的虚拟化选项开启，如果你的BIOS虚拟化选项没有开启，你会发现打开virtualbox你只可以虚拟32位的操作系统，而且安装完vagrant之后，根本就没有办法启动vagrant。
  3. 为了映射本地目录到虚拟机目录，你需要在windows和虚拟机上面都安装rsync。我是先安装的mingw，然后通过mingw安装的rsync到windows。

折腾了一晚上，rsync装好了，但是还需要进一步配置脚本

  1. 我用的是debian-jessie的box，官方文档里说，root用户的默认密码是vagrant，其实是不对的，默认的root账户用该没有设置密码，好在可以sudo -i切换到root然后passwd root设置新的密码了。

by ·0评论

Drupal使用Views Exposed Filter-Ajax–Auto-Submit时后台预览页面显示正常，但是前台页面相关的button没有隐藏，原因是因为

在自定义的主题中每有载入系统默认的基础样式system.base.css

此样式设置文件里含有大量关于ajax的样式，如auto-complete， auto-submit等。

 

注意drupal默认的ajax隐藏的表单元素都会大有js-hide的class。

by ·0评论

Vagrant Box下载

点击到确定的发行版版本页面

https://atlas.hashicorp.com/debian/boxes/jessie64/versions/8.5.2

一般都是如上的链接

在链接后面加入/providers/virtualbox.box

https://atlas.hashicorp.com/debian/boxes/jessie64/versions/8.5.2/providers/virtualbox.box

上面的链接就是最终的下载链接。

by ·0评论
// Add tooltip for product gallery
            var h2TitleObj = $('.node-type-structure-product h2'),
                productImageGalleryTop = $('.product-gallery').offset().top,
                productImageGalleryLeft = $('.product-gallery').offset().left;
            //console.log(typeof productImageGallery.offset().top);
            //console.log(typeof productImageGallery.offset().left);
            $.each(h2TitleObj, function (key, value) {
                if (this.innerHTML.trim() == "Images") {

                    //$(this).addClass('tooltip-active').attr('tooltip-attr','Click to see large image');
                    /*
                     $(this).tooltip({
                     show: { effect: "blind", duration: 800 },
                     content: "Click to see large image",
                     });
                     */
                    $(this).attr('tooltip-attr','Click to see large image').tooltip({
                            //show: { effect: "blind", duration: 800 },
                            content: "Click to see large image",
                            items: "[tooltip-attr]",
                            position:  {
                                //my: "left top",
                                //at: "right center",
                                collision: "none",
                                //of: ".product-gallery",
                                //within: ".product-gallery",},
                                using: function () {
                                    $(this).css({top: productImageGalleryTop+"px", left: productImageGalleryLeft+"px"});
                                },
                        },
                    });

                    $(this).tooltip("open");
                }
            });

 

by ·0评论

CSS样式组件化符合开发的内聚和耦合原则，同时可以维持网站样式的唯一性，构建统一的视觉体验，从而形成用户对产品和品牌的统一性认识。

鉴于目前大家大多使用CSS预处理器来编写CSS代码，我们这里就以sass为例。

styles.scss                                # import all scss files
          --_normalize.scss/_reset.scss
          --_mixins.scss
          --_colors.scss                   # color palettes
          --_components.scss
              --_animate.scss
          --_layout.css
              --_small.scss                # cellphone styles
              --_medium.scss               # tablet styles
              --_large.scss                # monitor styles
          --_print.scss
          --_extend.scss
              --_rtl-language-support.scss

 

 

CSS组件话的另一个思路是按照功能和业务逻辑进行划分

比如一个B2B网站具体的产品页可以这样划分css组件

all items including

title
summary
image gallery
video
product details //含有table和list
application
package shipping
delivery
moq
price terms
presale
aftersale
notes
inquery //form

 

by ·0评论

为了满足SEO的要求，很多时候我们不得不将表格改造为更加Search Engine Friendly的unordered list或是ordered list，但是在网页的页面上，我们更希望列表是以表格的形式展现给用户的，这样方便用户的阅读，满足用户体验的要求。

CSS的display table相关的属性可以满足这样的设定。

Display table需要有着和表格html结构类似的markup，其实不严格按照table的markup结构也是可以渲染的。有人说，如果不按照table的markup，就不符合W3C的规范，关于这一点我不是很认同。我认为css只是改变了部分html的渲染方式，而这一点恰恰是W3C希望大家去尝试的，即不修改html结构的基础上改变html的渲染方式。

闲话少说，上代码

<ul class="table-row-wrap">
	<li class="table-row">
	<ul class="tables-cell-wrap">
		<li class="table-cells">Cell1</li>
		<li class="table-cells">Cell2</li>
		<li class="table-cells">Cell3</li>
	</ul>
	</li>
</ul>

其实上面没有完全按照table相似的html来构造，按照表格显示很简单

    .tables-cell-wrap{
      display: table;
      width: 100%;
    }
    .table-cells{
      display: table-cell;
      width: 33%;
      border-right: 1px solid #cccccc;
      text-align: center;
      vertical-align: middle;
      padding: 0.8em 1em;
    }

注意，如果将table-row-wrap设置display:table,再将tables-cell-wrap设置display:table-row,然后设置table-cells为display:table-cell, 这个时候，ul.tables-cell-wrap会出现不能铺满container的情况，这个现象可能和html本身的结构有关系。