翻转和旋转的区别,初识bootstrap之表单验证

     
  我以前一直以为旋转跟翻转一样,今日自己旋转了好久都发觉跟翻转差一点点,纠结了十几分钟才明白,只能怪自己的立体感太差了。

bootstrap-3.3.4.css

       
学习bootstrap是个过程,它提供给我们的文档上有很详细的说明。包括常用的栅栏布局、页面元素等,这里就不啰嗦了,今天,我就来说下结合jquery的表单验证。

       
css3中的transform中有旋转,放缩,倾斜,平移的功能,分别对应的属性是:rotate,scale,skew,translate

1—@2989  .btn

       
最开始不借助插件,我们需要自己去编写验证规则。使用jquery验证,能让我们省去一些功夫。

        旋转:(rotate)

使用touch-action来控制滚动;CSS属性touch-action允许你在触摸时控制滚动行为;

       
首先我们需要引入js文件:jquery.validate.js;另外为了能使用它的样式,我们需另外引入screen.css。当然,如果要使用bootstrap,还是要引入其所需的文件的。

-webkit-transform:rotate(10deg); -moz-transform:rotate(10deg); transform:rotate(10deg);

如下是touch-action的所有可能值:

        下面,我们需要一个表单:

        翻转:(scale)

touch-action: auto
滚动正常工作,只要浏览支持触摸操作依旧可以触发水平或是垂直的滚动。
touch-action: none 触摸操作不能触发滚动
touch-action: pan-x 触摸操作可以触发水平滚动;但垂直滚动被禁止;
touch-action: pan-y 触摸操作可以触发垂直滚动;但水平滚动被禁止;
touch-action: manipulation
鼠标可以悬停在内容上(指向该内容)而不激活它(单击它);

    <form class="form-horizontal" id="form1" method="post">            <div class="control-group">              <label class="control-label">                  用户名              </label>              <div class="controls">                  <div class="input-icon">                      <input type="text" class="m-wrap" id="loginname" name="loginname">                  </div>              </div>          </div>            <div class="control-group">              <label class="control-label">                  手机              </label>              <div class="controls">                  <div class="input-icon">                      <input type="text" class="m-wrap" id="mobilephone" name="mobilephone">                  </div>              </div>          </div>            <div class="control-group">              <label class="control-label">                  邮箱              </label>              <div class="controls">                  <div class="input-icon">                      <input type="text" class="m-wrap" id="email" name="email">                  </div>              </div>          </div>            <div class="form-actions">              <button type="submit" class="btn blue">                  <i class="icon-ok"></i> 保存              </button>              <button type="button" class="btn" onclick="history.go(-1)">                  返回              </button>          </div>      </form>

     
 (这个属性是放缩的功能,怎么能翻转的!原来括弧里面(1,1)前者表示X轴,后者表示Y轴,当数字大于1时放大,大于0并小于1时缩小,负数代表翻转)

记住:使用touch-action: pan-x或touch-action:
pan-y更好,因为你的目的明确,用户只能在元素上水平或垂直的滚动。

 

       水平翻转:

CSS3 user-select 新特性 禁选文本
none:用户不能选择文本;text:用户可以选择文本
需要注意的是:user-select并不是一个W3C的CSS标准属性,浏览器支持的不完整,需要对每种浏览器进行调整
user-select: none;
-ms-user-select: none; /*IE10及以上*/
-moz-user-select: none; /*FF*/
-webkit-user-select: none; /*Chrome*/

 

-webkit-transform:scale(-1,1); -moz-transform:scale(-1,1); transform:scale(-1,1);

IE6-9还没发现相关的CSS属性,可以使用配合js解决
document.body.onselectstart = function(){
return false; /*IE,Chrome 都适用, FF不适用*/
}

       在页面加载的时候,我需要添加表单的验证规则:

       垂直翻转:

 

  function checkForm(){                  $("#form1").validate({                      onsubmit:true,                      rules: {                          loginname: {                              required: true    //此处就是必填项验证                          },                          mobilephone: {                              required: true,                              phone:true     //号码格式验证,jquery.validate.js本身不提供此项验证,可通过引入扩展插件或修改jquery.validate.js实现                            },                          email: {                              required: true,                              email: true   //邮箱格式验证                          },                          roleidstr:{                              required: true                          }                      },                      messages: {     //相对应的错误提示信息                          loginname: {                              required: "请输入账号!"                          },                          mobilephone: "请输入有效的手机号!",                          email: "请输入有效的邮箱地址"                      },                      success:"valid",                      submitHandler:function(){                           save();    //验证通过后,点击保存按钮时执行的函数                      }                  });              }                            $(function() {                  checkForm();                    //表单数据初始化                  }              });
-webkit-transform:scale(1,-1); -moz-transform:scale(1,-1); transform:scale(1,-1);

2—@2989  .btn-group-justified

 

      

table-layout 固定表格布局:

   然后,我们就可以在表单中输入数据,体验它的验证效果了,附上一张截图:

相关文章

发表评论

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