澳门新葡萄京官网首页html日记——使用强大的Bootstrap(3)

本文实例汇报了js实现input框文字动态调换呈现效果。分享给我们供大家参照他事他说加以考查。具体如下:

上两篇博客只讲了组件怎么样利用,基本没有说js,那篇博客要整合js来说讲
首要教授一下多少个零器件

此间演示js完成INPUT框中的特殊展现效果,一些文字稳步改造展现,最终显示出完整的文字,须要出示的文字预先保存在数组中,依次调用彰显,风趣啊。

1.模态框
2.轮转监听
3.标签页
4.工具提醒
5.弹出框
6.按钮
7.堆叠
8.轮换页
9.侧边栏

运转效果截图如下:

率初步入css和js

在线演示地址如下:

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="js/jquery-3.1.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>

现实代码如下:

1.模态框

作者们常见在签到注册,可能阅读某个条例时都是用那么些模态框,所以模态框是非常普遍的

澳门新葡萄京官网首页,先是写三个开发模态框的按键

<!--data-target是我们的模态框的id,data-whatever="@ime"是我们传入模态框的标签和值-->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" data-whatever="@ime">
    打开模态框
</button>

下一场写模态框

<div class="modal  " id="myModal" role="dialog" aria-label="myModalLabel" aria-hidden="true">
    <!--这是小模态框,将modal-sm换成modal-lg是大模态框-->
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <!--模态框头部-->
            <div class="modal-header">
                <!--右上角的关闭按钮-->
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    &times;
                </button>
                <!--标题-->
                <div class="modal-title">Modal title</div>
            </div>
            <!--模态框内容-->
            <div class="modal-body">
                <!--模态框内容可以是文字或表格-->
                <!--<p>hello</p>-->
                <form>
                    <div class="form-group">
                        <label class="control-label">username</label>
                        <input class="form-control" type="text">
                    </div>
                    <div class="form-group">
                        <label class="control-label">password</label>
                        <input class="form-control" type="password">
                    </div>
                </form>
            </div>
            <!--模态框脚部-->
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">
                    Close
                </button>
                <button type="button" class="btn btn-primary">
                    保存
                </button>
            </div>
        </div>
    </div>
</div>

若果是点击开关然后向模态框的表格传入参数的话
在开关的性子要加data-标签:值
以上面data-whatever=”@ime”为例加了二个标签为whatever,值为@ime的参数
下面是js操作

//    绑定模态框展示的方法
    $("#myModal").on("show.bs.modal",function(e){
//        获得点击打开的按钮
        var button=$(e.relatedTarget)
//        根据标签获得按钮传入的参数
        var recipient=button.data("whatever")
//        获得模态框本身
        var modal=$(this)
//        更改将title的text
        modal.find(".modal-title").text("Hello"+recipient);
//        更改body里input的值
        modal.find(".modal-body input").val(recipient)
    })
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"""html xmlns=""headmeta "Content-Type" content="text/html; charset=gb2312" /titleinput文字特殊显示/title/headbody bgcolor="#ffffff" onLoad="startQuote();"SCRIPT LANGUAGE="JavaScript"!-- Beginvar quoteStr;var quoteNum;var quoteDis;var quoteLen;var quoteLoc;var quotePic;var quoteMax;var numQuote;function funcQuote() { this[0] = "有没有想过在页面中不同地方出现不同的鼠标形状,这个就是了"; this[1] = "鼠标上出现蜘蛛网一样的东东,放到文字链接上后会出现变化"; this[2] = "鼠标上面的晃动小球,效果非常新颖,你一定会喜欢的,酷极了"; this[3] = "鼠标右键入的弹出导航条,导航条上有背景变化,很有新意的,酷"; this[4] = "双击鼠标页面向下滚动,单击鼠标页面停止滚动,很实用"; this[5] = "鼠标周围的旋转宣传文字,又是一种很酷的效果,一定不可错过"; this[6] = "所鼠标放在链接上后在状态栏显示一大串的字符,可以用来隐藏链接."; this[7] = "在页面上你用鼠标选中什么,就会弹出警告框显示选中的内容"; this[8] = "在页面上点中鼠标后随意拖动,会在页面上显示鼠标运动的轨迹"; this[9] = "围着鼠标一圈的宣传文字,随鼠标移动,并且自身也在旋转,酷"; this[10] = "跟随鼠标的半透明图片,看上去可是很酷的,可以做阴影效果.";}function getQuote() { quoteLen = 0; quoteLoc = 0; quoteNum = Math.floor(Math.random() * numQuote); quoteStr = makeQuote[quoteNum]; quoteLen = quoteStr.length; padQuote();}function disQuote() { quoteLoc = quoteLoc + 1; if (quoteLoc  quoteMax) { getQuote(); } quoteDis = quoteStr.substring(0, quoteLoc); for (var i = quoteLoc; i  quoteMax; i++){ var charone; charone = quoteStr.substring(i, i + 1); var rdnum; rdnum = Math.floor(Math.random() * 57) if (charone != " "){ quoteDis = "" + quoteDis + quotePic.substring(rdnum, rdnum + 1); } else { quoteDis = "" + quoteDis + " "; } }}function padQuote () { var spacePad = quoteMax - quoteStr.length; var frontPad = Math.floor(spacePad / 2); for (var i = 0; i  frontPad; i++) { quoteStr = " " + quoteStr; } for (var i = quoteStr.length; i  quoteMax; i++) { quoteStr= "" + quoteStr + " "; }}function loopQuote() { document.RandomText.box1.value=quoteDis; disQuote(); setTimeout ("loopQuote();", 100);}function startQuote() { quoteStr = ""; quoteNum = 0; quoteDis = ""; quoteLen = 0; quoteLoc = 0; quotePic = "abcdefghjkmnopqrstuvwxyzABCEDEFGHJKLMNOPQRSTUVXYZ234567890"; quoteMax = 50; numQuote = 11; makeQuote = new funcQuote(); getQuote(); disQuote(); loopQuote();}// End --/scriptform name="RandomText"input type="text" size="70" name="box1"/form/body/html

2.滚动监听

滑动到分歧内容,标签页选中会变化
首先写body属性

<!--offset设为70,这个值是经过测试最佳的值-->
<body data-spy="scroll" data-target=".navbar" data-offset="70">

接下来写标签页

<!--标签栏固定的显示内容的顶部-->
        <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
            <div class="container-fluid">
                <div class="collapse navbar-collapse js-navbar-scrollyspy" id="myScrollspy">
                    <ul class="nav navbar-nav">
                        <!--a标签中的连接是下面标题的id-->
                        <li><a href="#iwen">iwen</a> </li>
                        <li><a href="#ime">ime</a> </li>
                        <!--在标签页中嵌套下拉菜单-->
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                下拉菜单

                            </a>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="#one" tabindex="-1">one</a> </li>
                                <li><a href="#two" tabindex="-1">two</a> </li>
                                <li><a href="#three" tabindex="-1">three</a> </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>

下一场写内容

<h2 id="iwen">@iwen</h2>
<p>这是一个人  这是一个人</p>
<h2 id="ime">@ime</h2>
<p>这是一个人  这是一个人</p>
<h2 id="one">@one</h2>
<p>这是一个人  这是一个人</p>
<h2 id="two">@two</h2>
<p>这是一个人  这是一个人</p>
<h2 id="three">@three</h2>
<p>这是一个人  这是一个人</p>

建议把内容写得长一些,那样效果才会越来越旗帜显明,这里演示不便于写太多没用的文字

还可以写一些js的艺术

//  绑定标签切换时的方法
    $("#myScrollspy").on("activate.bs.scrollspy",function(e){
        alert("hello");
    })

愿意本文所述对大家的javascript程序设计有着辅助。

3.标签页

点击分裂的竹签能够显得分歧的内容

首先写标签栏

<ul id="myTab" class="nav nav-tabs">
        <!--a标签链接对应下面tab-pane的id-->
        <li ><a href="#home" data-toggle="tab">Home</a> </li>
        <li><a href="#profile" data-toggle="tab">Profile</a> </li>
        <li class="dropdown">
            <a href="#" id="myTabdrop1" class="dropdown-toggle" data-toggle="dropdown">
                下拉菜单

            </a>
            <ul class="dropdown-menu" role="menu">
                <!--与普通下拉菜单不同,要加data-toggle="tab"-->
                <li><a href="#one" tabindex="-1" data-toggle="tab">one</a> </li>
                <li><a href="#two" tabindex="-1" data-toggle="tab">two</a> </li>
            </ul>
        </li>
    </ul>

下一场写不一致标签的剧情

 <div id="myTabContent" class="tab-content">
        <div class="tab-pane fade" id="home">
            <p>home</p>
        <div class="tab-pane fade" id="profile">
            <p>profile</p>
        <div class="tab-pane fade" id="one">
            <p>one</p>
        <div class="tab-pane fade" id="two">
            <p>two</p>

能够用js初步化突显的标签页
有下边二种选用标签页的办法

$('#myTabs a[href="#profile"]').tab('show') // 根据名字选择
$('#myTabs a:first').tab('show') // 选择第一个标签页
$('#myTabs a:last').tab('show') // 选择最后一个标签页
$('#myTabs li:eq(2) a').tab('show') // 选择第三个标签页(因为0是第一个),如果是下拉菜单里的标签页,数字要加1

4.工具提醒

<p>
        <!--若title内容为空则显示data-original-title的内容,placement为显示的位置,可设为top|bottom|left|right-->
        <!--参数可以以data-****的方式设置-->
        欢迎来到<a data-animation="false" id="myTooltip" href="#" data-toggle="tooltip" title="title"
               data-placement="bottom" data-original-title="www.jk.com">jack's page</a>
    </p>

接下来要用js伊始化,不然会未有此外作用

//初始化tooltip,指向则显示
$('[data-toggle="tooltip"]').tooltip();

5.弹出框
弹出框相同工具提醒,但出示的从头到尾的经过比工具提醒特别丰富,也比它常用

<!--data-trigger="foucus"点击空白可消失,不加的话点击按钮消失,设为hover的话鼠标移动的按钮显示,移开消失-->
    <!--这个弹出框标题为title,内容为content-->
    <button   type="button" class="btn btn-default js-popover" data-trigger="foucus" data-placement="bottom" data-toggle="popover" title="title" data-content="content">
        弹出框
    </button>

然后要用js初步化

//    初始化popover
 $(".js-popover").popover();

6.按钮

前2篇讲的是按键的大旨样式,本次是进级使用,能够让开关在加载时显得分歧的文字

 <!--可以设置按钮在loading时的文字-->
    <button type="button" data-loading-text="Loding for 3s" class="btn btn-primary js-loading-btn">
        Loading Status
    </button>

接下来要用js绑确定地点击事件

//    绑定按钮的点击事件
    $(".js-loading-btn").on("click", function (e) {
//        点击后设为loading状态,显示loading的文字
        var btn = $(this).button("loading");
//        3s后恢复
        setTimeout(function (e) {
            btn.button("reset")
        }, 3000)
    })

7.堆叠

堆放效果能够省去大量的显示屏控件,特别实用

那是点击开关张开堆集的

<!--href为显示内容的id-->
    <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample">点击查看</a>
    <div class="collapse" id="collapseExample">
        <div class="well">
            Hello
        </div>
    </div>

那是面板组的堆积

<div class="panel-group" id="accordion" role="tablist">
        <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingOne">
                <!--显示的标题-->
                <h4 class="panel-title">
                    <!--data-parent要是panel-group的id-->
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">item1</a>
                </h4>
            </div>
            <!--加了in表示打开,不加表示隐藏-->
            <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel">
                <div class="panel-body">
                    Hello<br>
                    Hello<br>
                    Hello<br>
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingTwo">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">item1</a>
                </h4>
            </div>
            <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel">
                <div class="panel-body">
                    Hello<br>
                    Hello<br>
                    Hello<br>
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingThree">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">item1</a>
                </h4>
            </div>
            <div id="collapseThree" class="panel-collapse collapse" role="tabpanel">
                <div class="panel-body">
                    Hello<br>
                    Hello<br>
                    Hello<br>
                </div>
            </div>
        </div>
    </div>

8.轮换页

大家日常能够在网址的主页能够见到

<div id="carousel-example-generic" class="carousel slide">
        <!--这是下面那三个白色圆indicator-->
        <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        </ol>
        <!--轮换页的内容-->
        <div class="carousel-inner">
            <div class="item active">
                <img src="images/4.jpg">
                <!--添加文字-->
                <div class="carousel-caption">
                    <h3>U3D</h3>
                    <p>新版本升级</p>
                </div>
            </div>
            <div class="item ">
                <img src="images/2.jpg">
                <div class="carousel-caption">
                    <h3>U3D</h3>
                    <p>新品上线</p>
                </div>
            </div>
            <div class="item ">
                <img src="images/3.jpg">
                <div class="carousel-caption">
                    <h3>Apple</h3>
                    <p>Apple手表</p>
                </div>
            </div>
        </div>
        <!--轮换页左边和右边的箭头-->
        <a class="left carousel-control" href="#carousel-example-generic" data-slide="prew">

        </a>
        <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">

        </a>
    </div>

能够用js设置间距和机动开端

    //设置间隔为2s且自动轮播
    $(".carousel").carousel({
        interval:2000
    })

9.侧边栏

右边栏的要害内容是四个列表

<!--要设置宽度,在手机屏幕上隐藏-->
    <div class="col-md-3 col-sm-4 hidden-xs">
        <ul class="list-group affixed-element-top js-affixed-element-top">
            <a href="#" class="list-group-item">hello</a>
            <a href="#" class="list-group-item">hello</a>
            <a href="#" class="list-group-item">hello</a>
            <a href="#" class="list-group-item">hello</a>
            <a href="#" class="list-group-item">hello</a>
            <a href="#" class="list-group-item">hello</a>
            <a href="#" class="list-group-item">hello</a>
            <a href="#" class="list-group-item">hello</a>
        </ul>
    </div>

再写style

    <style>
        .affixed-element-top.affix{
            /*如果想在底部的话可以改为bottom:10px;*/
            top:10px;
        }
        .affixed-element-top.affix-bottom{
            position: relative;
        }
    </style>

还要加一些js

 $(".js-affixed-element-top").affix({
        offset:{

        }
    })

Boostrap的主干用法宛如此,领会后就足以做出很好的网页了

发表评论

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