前端大本营

HTML5，CSS3，Responsive，资料站
2017 07/21 周五

PhoneGap的 In-App Browsers扩展插件 ThemeableBrowser插件的使用方法

在使用这个插件的时候， 出现很多的问题，首先就是网上大家都遇到的只显示工具栏，没有按钮的问题（iOS开发）。
多处查找资料，最后还是在国外的网站上发现了解决方法，国内的说明很多都失效或是干脆没用。

无按钮解决方法 
var ref = cordova.ThemeableBrowser.open(url, '_blank', {
                statusbar: {
                    color: '#ffffff00'  #元代码为#ffffffff，导致状态栏纯白什么也看不见。最后两位为透明度设置。
                },
                toolbar: {
                    height: 44,
                    color: '#f0f0f0ff'
                },
                title: {
                    color: '#003264ff',
                    showPageTitle: true
                },
                backButton: {
                    wwwImage: 'img/back@2x.png',  #注意这个部分，原来是img，我是用了自定义按钮样式的方法， 文件夹为根目录下img，不是插件目录下
                    wwwImagePressed: 'img/back_pressed.png',   #注意这个部分，原来是img，我是用了自定义按钮样式的方法， 文件夹为根目录下img，不是插件目录下
                    width: 15,
                    height: 22,
                    align: 'left',
                    wwwImageDensity: 1,
                    event: 'backPressed'
                },
                forwardButton: {
                    wwwImage: 'img/forward@2x.png',   #注意这个部分，原来是img，我是用了自定义按钮样式的方法， 文件夹为根目录下img，不是插件目录下
                    wwwImagePressed: 'img/forward_pressed@2x.png',   #注意这个部分，原来是img，我是用了自定义按钮样式的方法， 文件夹为根目录下img，不是插件目录下
                    wwwImageDensity: 1,
                    align: 'right',
                    event: 'forwardPressed'
                },
                backButtonCanClose: true
            }).addEventListener('backPressed', function(e) {
                //alert('back pressed');
            }).addEventListener(cordova.ThemeableBrowser.EVT_ERR, function(e) {
                console.error(e.message);
            }).addEventListener(cordova.ThemeableBrowser.EVT_WRN, function(e) {
                console.log(e.message);
            }).addEventListener('loadstop', function(event) {
                // login & passの保存
                var set_login = 'localStorage.setItem("login", $("#user_login").val() );';
                var set_pass = 'localStorage.setItem("pass", $("#user_pass").val() );';
                ref.executeScript({ code: '$("#wp-submit").click(function(){' + set_login + set_pass + '});' });
            });

看了我代码里的说明还不赶快去试试。

附带插件地址

Posted in Monaca App开发, 本站原创 | PhoneGap的 In-App Browsers扩展插件 ThemeableBrowser插件的使用方法已关闭评论
2017 07/11 周二

【项目1】产品比较页面

6月底刚结束佳X公司的产品公布，紧接着7月份又接到一份制作产品比较的MiniSite任务。任务说起来也不难，一份excel表，一个xd原型设计。接着就是经理Barabara的讲了一堆（好似没记住）。项目内容

  1. 制作两个页面，一个是产品列表，总共13个产品。一个是比较结果页面。
  2. 两个页面均要对要对应Responsive（响应式设计）
  3. 产品列表页要求首部要一个整屏banner， banner中间有一个一直居中的标题。点里面的Get Started按钮自动翻篇到下面的列表
  4. 产品列表部分，每一个产品都有一个compare按钮，单击后产品反转，背景发生改变及Compare按钮的名称改为Selected,并在页面的下面做一个固定的显示几个被选中的提示栏
  5. 下面的提示栏有一个按钮，单击后会转到比较结果页面，并将选中的产品ID传给比较结果页面
  6. 比较结果页面，要求使用Ajax技术，根据产品ID，获得产品资料
  7. 比较结果页面，要求可以手动拖拽页面
  8. 比较结果页面，要求有帮助功能。及顶部固定提示产品名称栏
7月7日

一天将PC版的展示做了出来，当然功能没有做。本来这里打算用BootStrap， 后来觉得用框架用的太多，好久没自己手写了。索性来了一把手写Responsive

index.html 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>EOS Compare</title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">  <!--Responsive的关键部分，控制屏幕缩小后的显示比例-->
<meta name="WT.cg_abc" content="">
<meta name="WT.cg_refer" content="">
<!-- 由于没有太多需要打开页面就加载的内容js不放在这里影响速度-->
<link href="css/site.css" rel="stylesheet" />   <!--本人的样式表->
</head>

<body>
*******省略*******
</body>
</html>
这里遇到第一个问题，产品列表页打开后，有一个整屏，内容上下左右居中。

为了保证能够整屏， 我把html, body, section_top, top_banner都设成了100%高度。背景图片要一直居中，所以设置了一个居中背景，之前说的难点上下左右居中，设置了元素的高宽，position设置成absolute后，就简单了。top:0; right=0; bottom:0; left:0; margin:auto; 这回去看看吧，不论在什么情况下这个元素都居中。这里没有太多的难点

HTML 
<div class="section_top">
    <div class="header">
        <div class="h_logo"><img src="img/logo.png" alt="" title=""></div>
        <div class="sub_logo"><img src="img/sub_logo.png" alt="" title=""></div>
        <div class="mb0"></div>
    </div>
    <div class="top_banner">
        <div class="top_in">
            <h1 class="size60 pb20">EOS COMPARE</h1>
            <a href="#camera" class="blue_bg button size24">Get started</a>
        </div>
    </div>
</div>
CSS 
body{font:14px/1.2 'RyomCN-sanserif-li', 'Microsoft Yahei', Arial, Helvetica, SimHei, san-serif; color: #333; height: 100%;}
html,body{*background-image:url(#); background-attachment:fixed;} /*background-attachment:fixed 设置这个可以防止absolute做伪fixed时抖动的问题，其实这里没有任何关系*/
a{color: #FFF; text-decoration: none;}
/*INDEX PAGE*/
.contriant{min-height: 100%;}
.header{position:relative; z-index: 1;}
.header .h_logo{float: left; margin: 20px 0 0 30px;}
.header .sub_logo{float: right; margin: 25px 30px 0 0;}
.section_top{width: 100%; min-height: 100%; position: relative; display: block; box-sizing: border-box;}
.top_banner{position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../img/top.jpg) no-repeat center; background-size:cover;} /*做一个一直居中的背景，并随着屏幕的尺寸自动调整*/
.top_banner h1{color: #FFF; font-weight: normal;}
.top_in{height: 140px; text-align: center; width: 1024px; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0;}

接下来制作四列产品列表，这里的问题出自于如何做一个统一格式的列表框，不用切割。我的想法就是大家左右上下都设10px的margin，背景是白色居中 + 响应式设计基本没问题。

<div class="camera_list" id="camera">
            <div class="col-4 center">
                <img class="pb10" src="img/80d.png" alt="eos 80d" />
                <img class="pb30" src="img/80d_logo.png" alt="eos 80d" />
                <a data-id="1" class="button blue_bg" href="javascript:;">选择</a>
            </div>
            <div class="col-4 center">
                <img class="pb10" src="img/77d.png" alt="eos 77d" />
                <img class="pb30" src="img/77d_logo.png" alt="eos 77d" />
                <a data-id="2" class="button blue_bg" href="javascript:;">选择</a>
            </div>
            <div class="col-4 center">
                <img class="pb10" src="img/800d.png" alt="eos 800d" />
                <img class="pb30" src="img/800d_logo.png" alt="eos 800d" />
                <a data-id="3" class="button blue_bg" href="javascript:;">选择</a>
            </div>
            <div class="col-4 center">
                <img class="pb10" src="img/760d.png" alt="eos 760d" />
                <img class="pb30" src="img/760d_logo.png" alt="eos 760d" />
                <a data-id="4" class="button blue_bg" href="javascript:;">选择</a>
            </div>
            <div class="col-4 center">
                <img class="pb10" src="img/750d.png" alt="eos 750d" />
                <img class="pb30" src="img/750d_logo.png" alt="eos 750d" />
                <a data-id="5" class="button blue_bg" href="javascript:;">选择</a>
            </div>
            <div class="col-4 center">
                <img class="pb10" src="img/700d.png" alt="eos 700d" />
                <img class="pb30" src="img/700d_logo.png" alt="eos 700d" />
                <a data-id="6" class="button blue_bg" href="javascript:;">选择</a>
            </div>
            <div class="col-4 center">
                <img class="pb10" src="img/200d.png" alt="eos 200d" />
                <img class="pb30" src="img/200d_logo.png" alt="eos 200d" />
                <a data-id="7" class="button blue_bg" href="javascript:;">选择</a>
            </div>
            <div class="col-4 center">
                <img class="pb10" src="img/100d.png" alt="eos 100d" />
                <img class="pb30" src="img/100d_logo.png" alt="eos 100d" />
                <a data-id="8" class="button blue_bg" href="javascript:;">选择</a>
            </div>
            <div class="col-4 center">
                <img class="pb10" src="img/1300d.png" alt="eos 1300d" />
                <img class="pb30" src="img/1300d_logo.png" alt="eos 1300d" />
                <a data-id="9" class="button blue_bg" href="javascript:;">选择</a>
            </div>
            <div class="col-4 center">
                <img class="pb10" src="img/m5.png" alt="eos m5" />
                <img class="pb30" src="img/m5_logo.png" alt="eos m5" />
                <a data-id="10" class="button blue_bg" href="javascript:;">选择</a>
            </div>
            <div class="col-4 center">
                <img class="pb10" src="img/m6.png" alt="eos m6" />
                <img class="pb30" src="img/m6_logo.png" alt="eos m6" />
                <a data-id="11" class="button blue_bg" href="javascript:;">选择</a>
            </div>
            <div class="col-4 center">
                <img class="pb10" src="img/m3.png" alt="eos m3" />
                <img class="pb30" src="img/m3_logo.png" alt="eos m3" />
                <a data-id="12" class="button blue_bg" href="javascript:;">选择</a>
            </div>
            <div class="col-4 center">
                <img class="pb10" src="img/m10.png" alt="eos m10" />
                <img class="pb30" src="img/m10_logo.png" alt="eos m10" />
                <a data-id="13" class="button blue_bg" href="javascript:;">选择</a>
            </div>
            <div class="mb0 pb40"></div>
        </div>

.col-4{width: 236px; height: 260px; margin: 10px; border-radius: 7px; border: 1px solid #CCC; float: left; padding: 0; transform-style: preserve-3d;
  transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);}
.col-4.gray_bg{transform: rotateY(360deg);}

样式表简单说明 border-radius圆角， transform-style: preserve-3d设置3D旋转，速度定为0.8秒内完成 cubic-bezier自定义过渡效果 rotateY(360deg) Y轴360度旋转

Posted in 本站原创 | 【项目1】产品比较页面已关闭评论
2017 07/07 周五

jQuery 获取 div 宽度与高度（width,padding,margin,border）

一般讲的宽度指的是内容宽度，但一个 div 的实际宽度不仅只于内容宽度，尤其在做 CSS 排版时更不能搞错，必须同时考虑 Padding、Border 与 Margin 的宽度，四个加起来才是 div 真正占有的宽度。
JQUERY 获取 DIV 宽度与高度（width,padding,margin,border）全都有了！

var content = $(‘div’). width();//只是获取content宽度
var contentWithPadding = $(‘div’). innerWidth();//获取content+padding的宽度
var withoutMargin = $(‘div’). outerWidth();//获取content+padding+border的宽度
var full = $(‘div’). outerWidth(true);//获取content+padding+border+margin的宽度

宽度与高度概念一样，只差水平与垂直向而已。

Margin 有个特色，就是当两个有 margin的 div 靠在一起时，两个 div 紧邻的 margin 不是相加，而是取其大者，举例来说，两个 10px margin 的 div 并在一起只会有 10px margin 的距离，若是一个 20px margin，另一个为 10px margin，则会有 20px 的 margin。

但是获取当前元素的全部宽度的时候，还是获取自身的margin+content+padding+border的值。
Tags:
Posted in 精彩内容 | jQuery 获取 div 宽度与高度（width,padding,margin,border）已关闭评论
Copyright © 2004~2018 日星网 . All rights reserved.
MEMORY PEAK : 63356 KB | Administrator