2018-01-30 HTML5 移动页面自适应手机屏幕四类方法、关于bootstrap datetimepicker的用法以及小箭头消失的问题、dev gridview的单元格取值,取列名,...

第一组:杨昊 HTML5 移动页面自适应手机屏幕四类方法

1、使用meta标签:viewport

H5移动端页面自适应普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的,但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统。

viewport 是用户网页的可视区域。翻译为中文可以叫做"视区"。

手机浏览器是把页面放在一个虚拟的"窗口"(viewport)中,通常这个虚拟的"窗口"(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局),用户可以通过平移和缩放来看网页的不同部分。

viewport标签极其属性:

<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

每个属性的详细介绍:

属性名 取值 描述
width 正整数 或 device-width 定义视口的宽度,单位为像素
height 正整数 或 device-height 定义视口的高度,单位为像素,一般不用
initial-scale [0.0-10.0] 定义初始缩放值
minimum-scale [0.0-10.0] 定义缩小最小比例,它必须小于或等于maximum-scale设置
maximum-scale [0.0-10.0] 定义放大最大比例,它必须大于或等于minimum-scale设置
user-scalable yes/no 定义是否允许用户手动缩放页面,默认值yes
2、使用css3单位rem

rem是CSS3新增的一个相对单位(root em,根em),使用rem为元素设定字体大小时,是相对大小,但相对的只是HTML根元素。通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。

目前,除了IE8及更早版本外,所有浏览器均已支持rem。对于不支持它的浏览器多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。下面就是一个例子:

p {font-size:14px; font-size:.875rem;}

默认html的font-size是16px,即1rem=16px,如果某div宽度为32px你可以设为2rem。

通常情况下,为了便于计算数值则使用62.5%,即默认的10px作为基数。当然这个基数可以为任何数值,视具体情况而定。设置方法如下:

Html{font-size:62.5%(10/16*100%)}

具体不同屏幕下的规则定义,即基数的定义方式:可以通过CSS定义,不同宽度范围里定义不同的基数值,当然也可以通过js一次定义方法如下:

<script type="text/javascript">
   (function (doc, win) {
      var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
          var clientWidth = docEl.clientWidth;
          if (!clientWidth) return;
          docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';//其中“20”根据你设置的html的font-size属性值做适当的变化
        };
      if (!doc.addEventListener) return;
      win.addEventListener(resizeEvt, recalc, false);
      doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);
</script>
3、使用媒体查询

媒体查询也是css3的方法,我们要解决的问题是适应手机屏幕,这个媒体查询正是为解决这个问题而生。
媒体查询的功能就是为不同的媒体设置不同的css样式,这里的“媒体”包括页面尺寸,设备屏幕尺寸等。

例如:如果浏览器窗口小于 500px, 背景将变为浅蓝色:

@media only screen and (max-width: 500px) {
    body {
        background-color: lightblue;
    }
}
4、使用百分比

百分比指的是父元素,所有百分比都是这样的。子元素宽度50%,那么父元素的宽度就是100%;

所以body默认宽度是屏幕宽度(PC中指的是浏览器宽度)子孙元素按百分比定位(或指定尺寸)就可以了,这只适合布局简单的页面,复杂的页面实现很困难。

转载自:http://www.cnblogs.com/wenzheshen/
http://zypj01.b2b.qieta.com/


第二组:冯佳丽 关于bootstrap datetimepicker的用法以及小箭头消失的问题

——转载
首先,抛出问题,日历可以正常使用,就是左右箭头包括禁止填写的图标都不能显示(功能存在),如图:


于是就各种百度各种寻求解决办法,大海中捞到一条很重要的信息:

需要在input框中class类form-control 原因如下:

如果没有加form-control这个类就会造成读的是版本2,也就是这个图标是icon-arrow-left这个类(bs版本2才有的),加了它这个图标是glyphicon-arrow-left这个类,此类版本三才有!

解读一下就是说:在对应的input框中class中假日form-control这个类

[html] view plain copy 
1.  <input type="text" class="time-input form-control" id="startTime" placeholder="起始日期" name="begin_time" readonly class="form_datetime">  

然后来看神奇的效果:


其实这个插件真的很好用,现在来总结一下用法:

1,官网下载压缩包 http://www.bootcss.com/p/bootstrap-datetimepicker/index.htm
2, 在css和js包中将非min文件加载到页面中去。
3,写好html界面,代码如上所示(记得class中加入form-control)
4,最重要的一步(实现效果):在页面后面用jquery实现效果:

[javascript] view plain copy 
1.  <script type="text/javascript">  
2.    $('#startTime').datetimepicker({  
3.      format: 'yyyy-mm-dd  hh:00',//定义时间格式  
4.      autoclose: true,//选择好自动关闭  
5.      minView: 1,//只选择到小时  
6.      language: 'zh-CN', //汉化   
7.    });  
8.  </script>  

总结了一下minView几个数字的意思:

等于0时,表示显示时,分;1表示显示时;2表示显示日;3表示显示到月。


第三组: 好书推荐

梵高传 : 对生活的渴求

"罗素认为一切伟大的生活皆有无趣的片段组成。叔本华认为痛苦是一种常识,将痛苦视为人生永恒的主题。梵高则实实在在地告诉了我们:伟大的来源,一个是对爱的渴求,一个是对痛苦的体验。因为他告诉我们:艺术即生活,正如书的副标题所书:lust for life."

留传世间的《向日葵》和《星夜》是怎么诞生的?真的是他亲手结束了热烈的一生吗?依托梵高博物馆档案和学术研究,取材自数千封书信和海量文献,《梵高传》收录了近200幅代表画作及照片,珍贵图片首次发表;20余位梵高研究专家参与幕后创作,评注超28000条,打印稿逾5000页;首创特别软件解析10万张数码卡片,数字技术引领传记写作和艺术史研究,更加真实可靠;开设持续更新的全面支持网站,深度整合参考文献、文本注释、画作和照片。

这是一幅关于梵高的巨细靡遗、令人心碎的肖像画。两位作者以精致的细节、畅达的文字为我们描绘出梵高充满英雄主义的传奇一生。与阿姆斯特丹梵高博物馆的倾力合作下,以往从未触碰过的素材浮出水面,让我们更加接近这位伟大而又神秘的艺术家:早年渴望在世界立足;与弟弟提奥激烈的情感拉扯;来到普罗旺斯后,绘出西方艺术中备受珍爱的画作……梵高的内心世界也展现出异样的光芒:爱情生活的迷乱与癫狂;轮番上阵的抑郁症与心理病痛;三十七岁死亡时的重重疑云……

上帝怜惜天才,才让梵高有了提奥。没有提奥,没有梵高。


第四组:李俊 dev gridview的单元格取值,取列名,赋值

1、不指定具体列名,动态取焦点所在单元格的字段值

gridView1.FocusedValue;
gridView1.GetFocusedValue();
gridView1.GetFocusedRowCellValue(gridView1.FocusedColumn);
gridView1.GetFocusedRowCellValue(gridView1.FocusedColumn.FieldName);
如按钮1名称取 焦点所在单元格的字段值
simpleButton1.Text = gridView1.GetFocusedRowCellValue(gridView1.FocusedColumn.FieldName).ToString();

2、不指定具体列名,动态取焦点所在单元格的列名

gridView1.FocusedColumn.FieldName
如按钮1名称取 焦点所在单元格的列名
simpleButton1.Text = gridView1.FocusedColumn.FieldName.ToString();

3、单元格赋值
一种不能在单元格值变动的事件中写,否则陷入死循环
    int zj = Convert.ToInt32(tdQty / kunzs / zzl);
    decimal sj = tdQty % (kunzs * zzl);
    decimal kunZl = kunzs * zzl;
    this.gridView1.SetRowCellValue(handle, gridView1.Columns["整件"], zj.ToString());
    this.gridView1.SetRowCellValue(handle, gridView1.Columns["散件"], sj.ToString());
    this.gridView1.SetRowCellValue(handle, gridView1.Columns["kunZl"], kunZl.ToString());            
一种可以在单元格变动的事件中写
    int zj = Convert.ToInt32(tdQty / kunzs / zzl);
    decimal sj = tdQty % (kunzs * zzl);
    decimal kunZl = kunzs * zzl;
      this.gridView1.GetDataRow(handle)["整件"] = zj.ToString();
      this.gridView1.GetDataRow(handle)["散件"] = zj.ToString();
      this.gridView1.GetDataRow(handle)["kunZl"] = zj.ToString();

第五组:周倩宇 AngularJS文件上传

ed-uploader使用了angular-file-upload来进行上传。

一 使用方法:
<div ed-uploader class="ng-uploader list" ng-model="files" data-options="accept: 'image/*', multiple: true" ed-upload-dir="自定义目录"></div>

ed-uploader:定义文件上传指令,文件会上传到服务器配置文件中project.nginxControl所指定的目录下。

通过data-options设置的属性:
multiple:单选还是多选,默认false单选。单选时ng-model绑定的值为一个json,多选时为array
accept:允许上传文件类型,默认为*,用法同input file
ed-upload-dir:指定attachment.path下特定的目录,上面实例会保存在attachment.path下“自定义目录”目录下

json格式为:

{
    author: "admin"
    name: "安全规范V1.2.docx"
    size: "2823324"
    time: "2016-01-29 17:29:29"
    type: "docx"
    path: "文件保存路径,不包含文件统一的文件夹,数据库应该保存这个路径"
    url: "文件下载完整路径"
}

多选情况下,通过class='list'来控制多选时显示文件列表,单选和不加list则不显示文件列表(自己通过{{}}方式来绑定)。如图:


如需上传导入,则可以监听绑定scope.watch的值来再次提交导入。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,732评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,496评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,264评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,807评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,806评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,675评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,029评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,683评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 41,704评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,666评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,773评论 1 332
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,413评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,016评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,978评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,204评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,083评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,503评论 2 343

推荐阅读更多精彩内容