表明表单并阻碍违规提交,HTML5技巧教程之8

使用onsubmit()验证表单并阻止非法提交(使用jQuery),onsubmitjquery

代码检测textarea内填写的长度,未填写时提示需要重新填写,少于15字符时提示需要长于15字符,成功时显示所填写建议。

 1 <script type="text/javascript">
 2 //jQuery代码
 3 function confirm()
 4 {
 5   if($("#advice").val().length == 0)
 6 {
 7   alert("We can't see your advice. Maybe you should fill the form first.");
 8   $("#advice").focus();
 9   return false;
10 }
11 else if($("#advice").val().length <= 15)
12 {
13   alert("Your advice should longer than 15 letters.");
14   $("#advice").focus();
15   return false;
16 }
17 else
18 {
19   alert("Thank you for your advice! You will get out reply in 24 hours for advice:\n"+$("#advice").val());
20   return true;
21 }
22 
23 }
24 </script>
25 
26 <form action="" method="post" onSubmit="return confirm();" >
27   <textarea id="advice" rows="20" cols="50"placeholder="Give us some advice?"></textarea>
28   <input type="submit"value="Thank you"/>
29 </form>

上一节我们已经在新建的作品中添加了元素和动画,如果我们想要作品能够和用户互动,就需要给元素添加动作行为。在舞台上选中一个要添加动作的元素,在属性栏的动作下拉列表中选择一个动作。可选类别有链接、表单、行为。链接可以导航到网页;表单可以被编辑并提交;行为是更高级的动作方式(包括播放控制、过渡、调用电话功能、回调函数等)。后面会有详细介绍。

jQuery如何实现竖向二级导航菜单,jquery竖向

jQuery如何实现竖向二级导航菜单:
二级导航菜单在网页设计中数不胜数,有横向导航菜单,也有竖向导航菜单。在个人的印象中,好像介绍实现横向导航的教程比较多,所以在这里咱们就单独介绍一下如何使用jQuery实现竖向导航菜单,这里只介绍如何实现此种功能,对于效果的美观度,可以自行修改设计。下面简单介绍一下如何实现此效果:
静态代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.51texiao.cn/" />
<title>蚂蚁部落</title>
<style type="text/css">
 body 
 {
   font-size:12px;
   padding:0px;
   margin:0px;
 }
 #menu,#menu ul
 {
   list-style-type:none;
   margin: 0;
   padding: 0;
   width:160px;
 }
 #menu a
 {
   display:block;
   text-decoration: none;        
 }
 #menu li
 {
   margin-top: 1px;
 }
 #menu li ul
 {
   display:none;
 }
 #menu li a 
 {
   background:#ccc;
   color: #fff;        
   padding:5px;
 }
 #menu li ul li a 
 {
   background-color:green;
   color:#000;
   padding-left:20px;
 }
</style>
</head>
<body>
<ul id="menu">
  <li> <a href="#">div+css专区</a>
    <ul>
      <li><a href="#">CSS学习</a></li>
      <li><a href="#">div+css教程</a></li>
    </ul>
  </li>
  <li> <a href="#">jQuery专区</a>
    <ul>
      <li><a href="#">实例教程</a></li>
      <li><a href="#">jQuery教程</a></li>
      <li><a href="#">jQuery特效</a></li>
    </ul>
  </li>
  <li> <a href="#">交流专区</a>
    <ul>
      <li><a href="#">搜索优化</a></li>
      <li><a href="#">运营交流</a></li>
    </ul>
  </li>
</ul>
</body>
</html>

以上代码是代码的代码,这个时候二级菜单式是隐藏的。需要特别注意的是,二级菜单的ul是嵌套在li元素中,之所以这样,是为了便于jQuery代码的处理,比如当鼠标指针离开附近li的时候,二级菜单就可以隐藏,否则不容易当鼠标指针一旦一级菜单的li,二级菜单就会隐藏,无法选中二级菜单。为静态代码添加jQuery代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.51texiao.cn/" />
<title>蚂蚁部落</title>
<style type="text/css">
 body 
 {
   font-size:12px;
   padding:0px;
   margin:0px;
 }
 #menu,#menu ul
 {
   list-style-type:none;
   margin: 0;
   padding: 0;
   width:160px;
 }
 #menu a
 {
   display:block;
   text-decoration: none;        
 }
 #menu li
 {
   margin-top: 1px;
 }
 #menu li ul
 {
   display:none;
 }
 #menu li a 
 {
   background:#ccc;
   color: #fff;        
   padding:5px;
 }
 #menu li ul li a 
 {
   background-color:green;
   color:#000;
   padding-left:20px;
 }
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  jQuery.mymenu=function(selector){
    $(selector).click(function(){
      $(this).find("ul").css("display","block");
    });
    $(selector).mouseleave(function(){
      $(this).find("ul").css("display","none");
    }) 
  }
  $.mymenu("#menu li");   
})
</script>
</head>
<body>
<ul id="menu">
  <li> <a href="#">div+css专区</a>
    <ul>
      <li><a href="#">CSS学习</a></li>
      <li><a href="#">div+css教程</a></li>
    </ul>
  </li>
  <li> <a href="#">jQuery专区</a>
    <ul>
      <li><a href="#">实例教程</a></li>
      <li><a href="#">jQuery教程</a></li>
      <li><a href="#">jQuery特效</a></li>
    </ul>
  </li>
  <li> <a href="#">交流专区</a>
    <ul>
      <li><a href="#">搜索优化</a></li>
      <li><a href="#">运营交流</a></li>
    </ul>
  </li>
</ul>
</body>
</html>

以上代码实现了我们想要的效果,不是太美观,不过框架和方法已经有了,可以根据需要自行修饰。

原文地址是:

jQuery如何实现竖向二级导航菜单:
二级导航菜单在网页设计中数不胜数,有横向导航菜单,也有…

>关键点

1.必须要有onSubmit=”return confirm();” return 这个词,不可缺少。
2.自行完整的网页结构。

代码检测textarea内填写的长度,未填写时提示需要重新填写,少于15字符时提示…

图片 1

图片 2

链接是在广告动画中比较常用的方式。通过链接的方式,我们可以再作品中加入想要用户浏览的一些链接。在动作下拉列表中选择“链接”后在后面的输入框中输入网址。然后选择链接的打开方式,有外部打开、内部打开和扩展显示。

图片 3

如果选择外部打开,该链接将在默认浏览器下一个新的窗口/标签中打开,通常是一个独立的浏览器(例如iPhone的Safari浏览器)。

图片 4

如果选择内部打开,在支持MRAID(广告行业中的一种标准)的容器中,链接将以扩大的显示尺寸(例如,扩展至全屏幕视图)和作品在同一个网页窗口/标签中被打开。在一个不支持MRAID的容器中(例如,移动设备浏览器),它和外部打开方式相同。

图片 5

如果选择扩展显示,在支持MRAID的容器中,链接将在内部Web
View容器中打开,通常是由MRAID SDK或容器提供一个内置的Web
View。在一个不支持MRAID的容器(例如,手机浏览器)中,该链接将和作品在同一网页窗口/标签被打开。

图片 6

行为是更高级的动作形式,包括播放控制、过渡、调用电话功能、回调函数等。可以再一个动作中添加多个行为。选择动作下拉列表中的“行为”项后,点击编辑,弹出编辑行为对话框,

选择并编辑想要添加的行为。播放控制,可以通过舞台的帧控制舞台动画的播放,有跳转并播放、跳转并停止、暂停、播放、下一帧、上一帧。过渡,主要在支持MRAID标准的环境中使用,有展开和改变大小。电话功能,可以调用手机等移动设备的本地功能,有打电话、发短信、发邮件、保存图片、日历事件、地图、播放视频、播放声音。其他选项主要是回调函数,通过回调可以再脚本代码中加入想要的事件触发是完成的操作,关于脚本添加后面的章节会有专门介绍。

图片 7

图片 8

添加后的行为需要进一步进行编辑,选择事件触发方式,有点击和出现两种,点击就是通过鼠标或者手指点击触发,出现就是当动画播放到这一帧(添加行为的元素所在的那一帧)时就会自动触发。

对添加上的行为要可以进行组织操作,上移、下移和删除,来改变多个行为出现的顺序

图片 9

发表评论

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