无需申请自动送彩金68_白菜送彩金网站大全[无需申请秒送彩金]
做最好的网站
来自 无需申请自动 2019-07-10 23:52 的文章
当前位置: 无需申请自动送彩金68 > 无需申请自动 > 正文

实例代码,JS组件Bootstrap导航条使用方法详解

下拉菜单用于显示链接列表的可切换、有上下文的菜单。

$.post、$.get是一些简单的方法,如果要处理复杂的逻辑,还是需要用到jQuery.ajax()

导航条是在您的应用或网站中作为导航标头的响应式元组件。

1、案例

一、$.ajax的一般格式

1、默认的导航条

将下拉菜单触发器和下拉菜单都包裹在.dropdown里,然后添加组成菜单的HTML代码。

$.ajax({

   type: 'POST',

   url: url ,

  data: data ,

  success: success ,

  dataType: dataType

});

导航条在移动设备上可以折叠(并且可开可关),且在可用的视口宽度增加时变为水平展开模式
定制折叠模式与水平模式的阈值 根据你所放在导航条上的内容的长度,也许你需要调整导航条进入折叠模式和水平模式的阈值。通过改变@grid-float-breakpoint变量的值或加入您自己的媒体查询CSS代码均可实现你的需求。
第一步: 最外面的容器nav标签,并添加nav-bar样式类,表示这里面属于导航条

 <div class="dropdown">
 <button class="btn dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
 Dropdown

 </button>
 <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
 <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
 <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
 <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
 <li role="presentation" class="divider"></li>
 <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
 </ul>
 </div>

二、$.ajax的参数描述

<nav class="navbar navbar-default" role="navigation"> 
</nav>

可以通过上面的代码发现,里面可能有很多陌生的样式类或者属性。

参数 描述

 效果:

一个Dropdown按钮和右侧有个小图标caret,当然这个小图标和按钮的文本是平级的。

url 必需。规定把请求发送到哪个 URL。
data 可选。映射或字符串值。规定连同请求发送到服务器的数据。
success(data, textStatus, jqXHR) 可选。请求成功时执行的回调函数。
dataType

可选。规定预期的服务器响应的数据类型。

默认执行智能判断(xml、json、script 或 html)。

图片 1

首先看button按钮中有个dropdown-toggle,还有一个data-toggle属性,根据这个属性来弹出下来列表。

三、$.ajax需要注意的一些地方:

第二步:增加header

紧接着ul标签的dropdown-menu应该是和上面button按钮的样式类dropdown-toggle联合使用,在通过aria-labelledby绑定上面的button按钮。

  1.data主要方式有三种,html拼接的,json数组,form表单经serialize()序列化的;通过dataType指定,不指定智能判断。

<nav class="navbar navbar-default" role="navigation"> 
  <div class="navbar-header"> 
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
  Toggle navigation 



  </button> 
  <a href="#" class="navbar-brand">品牌</a> 
  </div> 
 </nav>

下来第四个li标签中有个divider其实是一个分割线的样式类。

  2.$.ajax只提交form以文本方式,如果异步提交包含<file>上传是传过不过去,需要使用jquery.form.js的$.ajaxSubmit

按钮标签里嵌套了三个span的icon。然后给与navbar-toggle样式类和属性collapse(收起),点击的时候目标为data-target。
当窗口缩小到一定程度,右侧的效果显现。

大概我理解的就这个样子,理解的肯定不到位。

四、$.ajax我的实际应用例子

图片 2

图片 3

//1.$.ajax带json数据的异步请求
var aj = $.ajax( { 
  url:'productManager_reverseUpdate',// 跳转到 action 
  data:{ 
       selRollBack : selRollBack, 
       selOperatorsCode : selOperatorsCode, 
       PROVINCECODE : PROVINCECODE, 
       pass2 : pass2 
  }, 
  type:'post', 
  cache:false, 
  dataType:'json', 
  success:function(data) { 
    if(data.msg =="true" ){ 
      // view("修改成功!"); 
      alert("修改成功!"); 
      window.location.reload(); 
    }else{ 
      view(data.msg); 
    } 
   }, 
   error : function() { 
     // view("异常!"); 
     alert("异常!"); 
   } 
});


//2.$.ajax序列化表格内容为字符串的异步请求
function noTips(){ 
  var formParam = $("#form1").serialize();//序列化表格内容为字符串 
  $.ajax({ 
    type:'post',   
    url:'Notice_noTipsNotice', 
    data:formParam, 
    cache:false, 
    dataType:'json', 
    success:function(data){ 
    } 
  }); 
} 


//3.$.ajax拼接url的异步请求
var yz=$.ajax({ 
   type:'post', 
   url:'validatePwd2_checkPwd2?password2=' password2, 
   data:{}, 
   cache:false, 
   dataType:'json', 
   success:function(data){ 
     if( data.msg =="false" ) //服务器返回false,就将validatePassword2的值改为pwd2Error,这是异步,需要考虑返回时间 
     { 
        textPassword2.html("<font color='red'>业务密码不正确!</font>"); 
        $("#validatePassword2").val("pwd2Error"); 
        checkPassword2 = false; 
        return; 
      } 
   }, 
   error:function(){} 
}); 


//4.$.ajax拼接data的异步请求
$.ajax({  
  url:'<%=request.getContextPath()%>/kc/kc_checkMerNameUnique.action',  
  type:'post',  
  data:'merName=' values,  
  async : false, //默认为true 异步  
  error:function(){  
    alert('error');  
  },  
  success:function(data){  
    $("#" divs).html(data);  
  }
});

第三步:嵌套下拉菜单,form表单,下拉菜单。
代码:

2、对齐选项

url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址。

<h1 class="page-header">导航条</h1> 
 <nav class="navbar navbar-default" role="navigation"> 
  <div class="navbar-header"> 
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
  Toggle navigation 



  </button> 
  <a href="#" class="navbar-brand">品牌</a> 
  </div> 
  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
  <!--嵌套下拉菜单--> 
  <ul class="nav navbar-nav"> 
   <li class="active"><a href="#">Link</a></li> 
   <li><a href="#">Link</a></li> 
   <li><a href="#">Link</a></li> 
   <li class="dropdown"> 
   <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
   下拉<b class="caret"></b> 
   </a> 
   <ul class="dropdown-menu"> 
    <li><a href="#">Action</a></li> 
    <li><a href="#">Action</a></li> 
    <li><a href="#">Action</a></li> 
    <li><a href="#">Action</a></li> 
   </ul> 
   </li> 
  </ul> 

  <!--嵌套表单--> 
  <form action="" class="navbar-form navbar-left" role="search"> 
   <div class="form-group"> 
   <input type="text" class="form-control" /> 
   </div> 
   <button type="button" class="btn btn-default">Submit</button> 

  </form> 
  <!----> 
  </div> 
 </nav> 

给下拉菜单.dropdown-menu加上.text-right 使文字右对齐。

type: 要求为String类型的参数,请求方式(post或get)默认为get。注意其他http请求方法,例如put和

预览:

 <div class="dropdown">
 <button class="btn dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
 Dropdown

 </button>
 <ul class="dropdown-menu text-right" role="menu" aria-labelledby="dropdownMenu1">
 <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
 <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
 <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
 <li role="presentation" class="divider"></li>
 <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
 </ul>
 </div>

delete也可以使用,但仅部分浏览器支持。

图片 4

只是在上面的代码中的ul标签上添加了一个text-right的样式类。

timeout: 要求为Number类型的参数,设置请求超时时间(毫秒)。此设置将覆盖$.ajaxSetup()方法的全局设

增强导航条的可访问性
要增强可访问性,一定要给每个导航条加上role="navigation"。

图片 5

置。

2、表单 将表单放置于.navbar-form之内可以呈现很好的垂直对齐,并在较窄的viewport中呈现折叠状态。使用对齐选项可以确定其在导航条上出现的位置。

3、标题

async:要求为Boolean类型的参数,默认设置为true,所有请求均为异步请求。

通过使用mixin,.navbar-form和 .form-inline共享了很多代码。

在任何下拉菜单中均可通过添加标题来标明一组动作。

如果需要发送同步请求,请将此选项设置为false。注意,同步请求将锁住浏览器,用户其他操作必须等

代码

 <h1>下拉菜单</h1>
 <div class="dropdown">
 <button class="btn dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
 Dropdown

 </button>
 <ul class="dropdown-menu text-right" role="menu" aria-labelledby="dropdownMenu1">
 <li role="presentation" class="dropdown-header">Dropdown header</li>
 <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
 <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
 <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
 <li role="presentation" class="divider"></li>
 <li role="presentation" class="dropdown-header">Dropdown header</li>
 <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
 </ul>
 </div>

待请求完成才可以执行。

<form action="" class="navbar-form navbar-left" role="search"> 
   <div class="form-group"> 
   <input type="text" class="form-control" /> 
   </div> 
   <button type="button" class="btn btn-default">Submit</button> 

  </form> 

主要是添加了<li role="presentation" class="dropdown-header">Dropdown header</li>   里面有个.dropdown-header的样式类。

cache:要求为Boolean类型的参数,默认为true(当dataType为script时,默认为false)。

图片 6

图片 7

设置为false将不会从浏览器缓存中加载请求信息。

为输入框添加label标签
如果你没有为输入框添加label标签,屏幕阅读器将会遇到问题。对于导航条内的表单,可以通过.sr-only class隐藏label标签。

4、禁用的菜单项

data: 要求为Object或String类型的参数,发送到服务器的数据。如果已经不是字符串,将自动转换为字符串格

3、按钮 代码:
<button type="button" class="btn btn-default navbar-btn">登陆</button>
预览:

给下拉菜单中的<li>加上.disabled禁用链接。

式。get请求中将附加在url后。防止这种自动转换,可以查看processData选项。对象必须为key/value格

图片 8

继续修改上面的代码将Something else here行的代码进行替换

式,例如{foo1:"bar1",foo2:"bar2"}转换为&foo1=bar1&foo2=bar2。如果是数组,JQuery将自动为不同

4、文本 把文本包裹在.navbar-text中时,为了有正确的行距和颜色,通常使用<p>标签。
代码段:
<p class="navbar-text">文本</p>
5、非导航的链接 或许你希望在标准的导航组件之外添加标准链接,那么,使用.navbar-link class可以让链接有正确的默认颜色和反色。
代码段:

复制代码 代码如下:

值对应同一个名称。例如{foo:["bar1","bar2"]}转换为&foo=bar1&foo=bar2。

复制代码 代码如下:

<li class="disabled" role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>

dataType: 要求为String类型的参数,预期服务器返回的数据类型。如果不指定,JQuery将自动根据http包mime

<p class="navbar-text navbar-right">这个是<a href="#" class="navbar-link">链接</a></p>

主要是在li标签中添加.disabled的样式类。

信息返回responseXML或responseText,并作为回调函数参数传递。

 
6、组件对齐 用.navbar-left或者.navbar-right工具类给导航链接、表单、按钮或文本对齐。两种类都用到在特定方向的CSS浮动样式。例如,要对齐导航链接,就要把它们放在个分开的、应用了工具类的<ul>里。

你运行之后可以查看效果,其实效果和上面的标题样式差不多,当你点击的时候会有一个禁用的图标显示。

可用的类型如下:

这些class是.pull-left和.pull-right的mixin版本,但是他们被限定在了媒体查询中,这样可以更容易的在各种尺寸的屏幕上处理导航条组件。

5、基本案例

xml:返回XML文档,可用JQuery处理。

7、固定在顶部 添加.navbar-fixed-top可以让导航条固定在顶部。效果就不上了。
需要为body标签设置内补(padding)
这个固定的导航条会遮住页面上的其它内容,除非你给<body>的上方设置了padding。用你自己的值,或用下面给出的代码都可以。提示:导航条的默认高度是50px。

图片 9

html:返回纯文本HTML信息;包含的script标签会在插入DOM时执行。

body { padding-top: 70px; }
一定要放在Bootstrap CSS的核心文件之后。(覆盖问题)
8、固定在底部
用.navbar-fixed-bottom代替。
需要为body标签设置内部(padding)
这个固定的导航条会遮住页面上的其它内容,除非你给<body>底部设置了padding。用你自己的值,或用下面给出的代码都可以。提示:导航条的默认高度是50px。

本文由无需申请自动送彩金68发布于无需申请自动,转载请注明出处:实例代码,JS组件Bootstrap导航条使用方法详解

关键词: