图片 3

提升你设计水平的CSS3新技术,智能表单系列

本章介绍如何在生成表单后,将一个model的数据展示到form表单中(一般用于编辑页面)

案例:
    1)  load
方式请求ajax,返回值在div中显示,载入远程html文件代码并插入到DOM中。
ajax_2.jsp:
<%@ page language=”java” pageEncoding=”UTF-8″%>
<html>
    <head>
        <script type=”text/javascript”
src=”jquery-1.2.6-vsdoc-cn.js”></script>
        <script type=”text/javascript”>
            //用jquery处理ajax请求
            function doajax(){            ajax请求的url地址       
传递到后台的数组参数             后台返回来的结果
               
$(‘#testja’).load(‘/ajaxTest/jquery-ajax/testajax.do’,{param:456},function(responseText){
                    alert(responseText);
                });
            }
        </script>
    </head>

前些日子在SmashingMagazine看到一篇关于CSS3新技术不错的文章,它详细介绍了CSS3的新特性和它的使用方法,它包括:浏览器专有属性、选择器(属性选择器、连字符、伪类、伪元素)、RGBA和透明度属性、多栏布局、多背景图、Word
Wrap、文字阴影、CSS圆角、边框图片、盒阴影、盒尺寸、媒体查询、语音,并详细说明了每个新技术目前有哪些浏览器兼容。本想将本文翻译成中文版和大家分享,但发现已有国人完成翻译,所以就偷个小懒,转载一下人家的翻译,在此感谢前端观察的博主辛苦翻译本文,为大家贡献了如此珍贵的学习资料。
 
如果你热爱前端开发,你对CSS感兴趣,那么你肯定不可错过这篇文章。
 
级联样式表在13年前被引入,而且被广泛使用的CSS 2.1
标准在11年前被创建,显然我们现在已经与当年相差千里了。相当了不起的是期间网站开发有了多少进步——事实上,我们也无法想象。
 
为什么会这样呢,当提到CSS的时候,过去我们是如此的不情愿和害怕尝试?为什么我们还要使用讨厌的hack和依赖JavaScript的技术来写样式?为什么我们不能利用丰富的CSS3
特性和现代浏览器中可用的工具 并将我们的设计品质带到下一个等级?
 
是时候在我们的项目中引入CSS3
特性了,不用害怕逐渐在我们的样式表中加入css3特性和选择器会出问题。让我们的客户意识到CSS3的优势
(而且让旧浏览器更快的消失)是我们力所能及的事情——我们应该这样做,特别是在它能够让网站更加灵活并减少开发和维护成本的时候。
 
在本文中,我们将研究CSS3的优势,并看一下一些网页设计师是如何使用它们的。最后,我们将了解到从CSS3中我们能得到什么以及我们如何在我们的项目中使用它的新特性。
 
同时请参考我们之前的一篇相关文章:
 使用CSS3将你的网站设计推向未来
 
使用浏览器专有属性
 
为了使用大部分CSS3特性,我们不得不与原来的属性一起使用生产商专有扩展。原因是直到现在,大部分浏览器只支持部分CSS3属性。而且不幸的是,一些属性甚至到最后都可能不被W3C推荐,所以通过指定浏览器专有属性,将他们与标准属性区分开来是很重要的(然后在他们是多余的的时候使用符合标准的样式将之覆盖)。
 
当然,这种方法的劣势是,将导致一个杂乱的样式表和网站在浏览器之间的表现不一致。毕竟,我们不想在我们的样式表中重拾私有浏览器hack的需求。Internet
Explorer的臭名昭著的marquee、blink以及其它标签在大量样式表中被应用,并在20世纪九十年代成为一个传奇;它们依然让现存的很多网站(在其他浏览器中)表现不一致甚至难以阅读。而我们现在也不想将我们自己置于同样的境地,对吧?
 
然而,网站不需要在所有的浏览器中看起来必须严格的一致。有的时候在某个浏览器中使用私有属性来实现特定的效果是可行的。
 
最常见的私有属性是用于Webkit核心浏览器的(比如, Safari),
它们以-webkit-开始,以及Gecko核心的浏览器(比如,
Firefox),以-moz-开始,还有Konqueror (-khtml-)、Opera (-o-) 以及Internet
Explorer (-ms-)都有它们自己的属性扩展(目前只有IE8支持-ms-前缀)
 
作为专业的设计师,我们不得不注意:使用这些私有属性将让我们的样式表不能通过验证。所以目前将他们放到最终版的样式中是少见的。但是在某种情况下,比如试验或学习,我们至少可以考虑将他们和标准的CSS属性一起写到一个样式表中。

代码如下(连接地址:

    <body>
        <a >测试jquery-ajax</a>
        <div id=”testja”></div>
    </body>
</html>   
    2)   get/post  方式请求ajax,上述doajax()代码可改写为:
<script type=”text/javascript”>
                function doajax(){
               
$.get(‘/ajaxTest/jquery-ajax/testajax.do’,{param:456},function(responseText){
                            $(‘#testja’).html(responseText);
                    });
            }
        </script>
    3)    $.ajax({…}) 更多的控制ajax细节:
//控制细节
            function doajax(){
                $.ajax({
                    type: “post”,
                    url: “/ajaxTest/jquery-ajax/testajax.do”,
                    data: “param=456123&aa=aaa”,
                    success: function(responseText){
                        $(‘#testja’).html(responseText);
                    }
                });
            }

1. 选择器

CSS选择器是个难以置信地强大的工具:它们允许我们在标签中指定特定的HTML元素而不必使用多余的class、
ID
或JavaScripts。而且它们中的大部分并不是CSS3中新添加的,而是没有被得到应有的广泛应用。如果你在尝试实现一个干净的、轻量级的标签以及
结构与表现更好的分离,高级选择器是非常有用的。它们可以减少在标签中的class和ID的数量并让设计师更方便的维护样式表。

<!DOCTYPE html>  <html lang="en">            <head>          <meta charset="UTF-8">          <title>数据绑定</title>          <meta name="viewport" content="width=device-width, initial-scale=1">          <link rel="stylesheet"  >          <!--自定义站点样式-->          <link rel="stylesheet"  >          <script src="../lib/jquery.js"></script>          <script src="../lib/bootstrap.js"></script>          <!--工具方法-->          <script src="../scripts/global.js"></script>          <!--插件-->          <script src="../scripts/plugin.js"></script>      </head>            <body>          <div >                  <div >                      <label>数据绑定</label>                      <div >                          <button id="btnSubmit" >提交表单</button>                      </div>                  </div>                                <div >                  <form action="#" id="formContainer" ></form>              </div>          </div>          <div >              <div ><label>介绍</label></div>              <div >                  <h3 >表单数据绑定</h3>                      <blockquote>                          <p>将json格式的model绑定到表单中,此处使用模拟的model数据,实际环境中应该是与服务器交互取到数据,在配置对象的是需要一个回调方法,在回到方法里面可以做表单的一些其他操作,如添加表单验证、添加日期插件的支持====</p>                          <p>note:复选框的数据源为数组形式</p>                      </blockquote>              </div>          </div>          <script>              $(function () {                  var eles=[                      [                        {label:{text:'自定义用户名:'},ele:{type:'text',name:'UserName',title:'用户名:',required:true}},                        {ele:{type:'radio',name:'sex',title:'性别:',items:[{text:'男',value:1},{text:'女',value:2}]}},                        {ele:{type:'checkbox', name:'plant',title:'使用平台:',items:[{text:'APP',value:'app'},{text:'web',value:'web'}]}}                        ],                      [                             {ele:{type:'select',name:'province',title:'省份:',withNull:true,items:[{text:'广东',value:'GD'},{text:'湖南',value:'HN'}]}},                             {ele:{pre:{text:'<input type="radio">'},type:'text',name:'displayName',title:'显示名称:'}},                             {ele:{type:'search',title:'产品',id:'ProductName'}}                      ],                      [                          {ele:{type:'datetime',name:'FromeDate',title:'有效期:'}},                          {ele:{type:'datetime',name:'ToDate',title:'~'}},                      ]                  ];                  //隐藏表单元素主要用于编辑时候后台可以区别开来                  var hides = [{ id: 'primaryKey' }];                  var bsForm = new BSForm({ eles: eles, hides: hides, autoLayout: '1,3' }).Render('formContainer',function(bf){                      var model={primaryKey:1,UserName:'xxg',sex:1,plant:['app','web'],province:'GD',displayName:'TEST',ProductName:'笔记本',FromeDate:'2015-06-10',ToDate:'2015-08-08'};                      bf.InitFormData(model);                  });                                    $("#btnSubmit").bind('click',function () {                      var postData=bsForm.GetFormData();                      alert("获取到的表达数据为:"+JSON.stringify(postData));                  })              });          </script>      </body></html>

    4)     $.ajaxSetup({…})   
全局设置ajax默认选项,语法等同于$.ajax({…})。
//全局设定ajax
            $.ajaxSetup({
                data: “param=456&aa=aaa”
            });
           
            //控制细节
            function doajax(){
                $.ajax({                                       
———————>
                    type:
“post”,                                                           
可以将$.ajax({…})中的设置,全部提到$.ajaxSetup({…}),更加通用。但必须至少保留$.ajax({…})
                    url: “/ajaxTest/jquery-ajax/testajax.do”,
                    //data: “param=456123&aa=aaa”,
                    success: function(responseText){
                        $(‘#testja’).html(responseText);
                    }
                });
            }

属性选择器

三个新的属性选择器被添加到CSS3:

  • [att^="value"]
    匹配包含以特定的值开头的属性的元素
  • [att$="value"]
    匹配包含以特定的值结尾的属性的元素
  • [att*="value"]
    匹配包含含有特定的值的属性的元素

值的属性的元素

图片 1

tweetCC
使用一个属性选择器来指定有title属性并以字符“tweetCC”结尾的链接:

1
2
3
4
5
6
7
8
9
a[title$="tweetCC"] {
position: absolute;
top: 0;
right: 0;
display: block;
width: 140px;
height: 140px;
text-indent: -9999px;
}

浏览器支持:只有IE6不支持CSS的属性选择器。IE7和IE8、Opera、Webkit核心和Gecko核心的浏览器都支持。所以在你的样式中使用属性选择器是比较安全的。

此处使用js创建了一个json类型的model,实际开发情况下
会跟服务器交互得到一个model,通过表单插件的InitFormData方法将model显示到form表单中

AjaxTestAction:
public ActionForward execute(ActionMapping mapping, ActionForm form,
            HttpServletRequest request, HttpServletResponse response)
            throws Exception {
        String str1 = request.getParameter(“param”);
        StringBuffer sb = new StringBuffer(str1);
        sb.append(“+123”);
        String responseText = sb.toString();

连字符

CSS3中唯一新引入的连字符是通用的兄弟选择器(同级)。它针对一个元素的有同一个父级节点的所有兄弟级别元素。

比如,给某个特定的div的同级的图片添加一个灰色的边框(div和图片应该有同一个父级节点),在样式表中定义下面的样式就足够了:

1
2
3
div~img {
border: 1px solid #ccc;
}

浏览器支持:所有的主要浏览器都支持这个通用的兄弟选择器除了我们最爱的IE6

效果图如下:

        // 回传处理的结果,到之前页面
        response.getWriter().println(responseText);          <——-
用这种方式将值 传回给页面
        return null;
    }

伪类

或许在CSS3中增加最多的就是新的伪类了,这里是一些最有趣和最有用的:

  • :nth-child(n)
    让你基于元素在父节点的子元素的列表位置来指定元素。你可以是用数字、数字表达式或odd
    和even
    关键词(对斑马样式的列表很完美)。所以如果你想匹配在第四个元素之后的一个3个元素的分组,你可以简单的这样使用:

    :nth-child(3n+4) { background-color: #ccc; }/*匹配第4,7,10,13,16,19...个元素*/
    
  • :nth-last-child(n)
    与上个选择器的思想同样,但是从后面匹配元素(倒序),比如,为了指定一个div里面的最后两个段落,我们可以使用下面的选择器:

    div p:nth-last-child(-n+2)
    
  • :last-child
    匹配一个父节点下的最后一个子元素,等同于:nth-last-child(1)

  • :checked
    匹配选择的元素,比如复选框
  • :empty
    匹配空元素(没有子元素)。
  • :not(s)
    匹配所有不符合指定声明(s)的元素。比如,如果你想让所有的没有使用”lead”类的段落的显示为黑色,可以这样写:
    p:not([class*="lead"]) { color: black; }
    .

Andrea Gandino 在他的网站上使用:last-child
为选择器指定每篇日志的最后一个段落,并将其的外间距(margin)设置为0:

图片 2

1
2
3
#primary .text p:last-child {
margin: 0;
}

浏览器支持: Webkit核心和Opera 浏览器支持所有新的CSS3 伪类,Firefox 2
和3 (Gecko核心) 只支持:not(s), :last-child, 😮 nly-child, :root, :empty,
:target, :checked, :enabled 和:disabled,但是Firefox 3.5 将更加广泛的支持CSS3
选择器。Trident核心浏览器(Internet
Explorer)事实上不支持这些伪选择器。

图片 3

    5)    jquery实现ajax返回XML格式的数据。
function doajax_responseXML() {
        $.ajax( {
                    type :”post”,
                    url
:”/ajax_jquery/ajax_jquery/testajax.do?method=doajax_responseXML”,
                    dataType :”xml”, //在这里设置返回数据的类型 text OR
xml.
                    success :callback
                });
    }
    function callback(responseXML) {
        var jqueryObj = $(responseXML); //将dom对象,转化成JQuery对象
        var message = jqueryObj.children();
//获取其中的结点;children(“expr”)
        var text = message.text();
        $(‘#testja’).html(text);
   
}后台Action中组装一个<message>XML格式,并且注意response.setContentType(“text/xml;charset=utf-8”);

伪元素

在CSS3中唯一引入的伪元素是::selection.它可以让你指定被用户高亮(选中)的元素。

浏览器支持: 目前没有任何一款Internet Explorer 或Firefox
浏览器支持::selection 伪元素。Safari, Opera 和Chrome 均支持。

定义的数据成功显示到表单中,

 

扩展阅读

  • Selectors Level 3: W3C Working Draft
  • CSS3: Attribute selectors: CSS3.info
  • Compatibility table: CSS3 Selectors
  • CSS selectors and pseudo selectors browser
    compatibility
  • CSS3 Attribute Selectors
  • ::selection
  • General Sibling Selector
  • CSS3 Pseudo-classes

note:针对复选框多选的情况下,需要返回的是一个数组

出处:

2. RGBA和透明度

RGBA
让你可以不仅仅设定色彩,还能设定元素的透明度。一些浏览器尚不支持它,所以最好在RGBa前面设定其它浏览器支持的没有透明的颜色属性。

图片 4
Tim Van Damme在链接的hover效果上使用了RGBA

在这个网站上,Tim Van
Damme在鼠标悬停效果上使用了RGBa;例如,在他的首页的network链接上:

1
2
3
4
#networks li a:hover,
#networks li a:focus {
background: rgba(164, 173, 183, .15);
}

当设定一个RGBA
色彩的时候,我们必须依次设定红、蓝、和绿色的值,可以是0-255或百分数。透明值应该在0.0到1.0之间,例如0.5
代表50% 的透明度。

RGBA 和opacity
之间的不同是前者只会应用到指定的元素上,而后者会影响我们指定的元素及其子元素。

这里有个例子展示我们如何给一个div添加80% 透明:

1
2
3
div {
opacity: 0.8;
}

浏览器支持: RGBA 被Webkit内核浏览器支持。IE所有版本都不支持。Firefox
2也不支持,但是Firefox 3 和Opera 9.5均支持。Opacity 被Opera、Webkit核心
和Gecko核心的浏览器支持。IE所有版本同样不支持。IE只支持自家的该死的滤镜(filter)

 


扩展阅读:

  • CSS Color Module Level 3: W3C Working
    Draft
  • RGBA colors: CSS3.info
  • RGBA color space
  • Is CSS3 RGBa ready to rock?
  • Super-Awesome Buttons with CSS3 and
    RGBA

上一章:BootStrap 智能表单系列 五  表单依赖插件处理

3. 多栏布局

这是新的CSS3
选择器可以让你不用使用多个div标签就能实现多栏布局。浏览器解释这个属性并生成多栏,让文本实现一个仿报纸的多栏结构。

图片 5
tweetCC 在其首页使用了CSS3 多栏选择器

tweetCC
在其首页上将介绍文字显示为四栏。这四栏并非浮动的div;相反,设计师使用下面的CSS3
多栏布局:

1
2
3
4
5
6
.index #content div {
-webkit-column-count : 4;
-webkit-column-gap : 20px;
-moz-column-count : 4;
-moz-column-gap : 20px;
}

我们可以通过这个选择器定义三件事情:栏数(column-coun)、栏宽(column-width、例子中没有用到)和各栏之间的空白/间距(column-gap)。
如果column-count未设定,浏览器会在允许的宽度内容纳尽可能多的栏目。

为了在各栏时间添加一个数值的分隔,我们可以使用column-rule
属性,其功能和border 属性类似:

1
2
3
div {
column-rule: 1px solid #00000;
}

上面的这条属性,浏览器中不会看到任何效果,因为它没有分栏,如果配合上面的例子就可以了。

相关属性: column-break-after, column-break-before, column-span,
column-fill.

浏览器支持: 多栏布局目前被Safari 3+,chrome,和Firefox 1.5+所支持。

下一章:BootStrap 智能表单系列 七 验证的支持

扩展阅读:

  • CSS3 module: Multi-column layout: W3C Working
    Draft
  • Columns
  • CSS3 – Multi-Column Layout
    Demonstration
  • CSS3 Columns
  • Designing tweetCC
  • Introduction to CSS3 – Part 5: Multiple
    Columns

发表评论

电子邮件地址不会被公开。 必填项已用*标注

标签:
网站地图xml地图