科探空谷

前端功能及实现代码对照表

目录

标签页切换

tabmenu切换，见map项目 recommendlist.html user.html 或 reciteWord.html

ListTabMenu.css里纯css 实现。 

#tab3:checked ~ #content3 {
  display: block;
}

更好方案，使用 bootstrap, 见reciteWord.html

<li class="active">
    <a href="#recite" data-toggle="tab">
        背单词
    </a>
</li>
<div class="tab-pane fade in active" id="recite">
    <a href="#start" data-toggle="tab">开始学习</a> //再点另显示content
</div>

导航栏颜色

选中或激活状态 active class

bootstrap.css 见 map项目 layout.html recommendlist.html 里, 忘记哪个js文件了。

var pgurl = window.location.href.substr(window.location.href.lastIndexOf("/"));

$("ul li a").each(function(){
    if ($(this).attr("href") == pgurl || ($(this).attr("href") == '/index.html' && pgurl == "/") )
        $(this).parent().addClass("active");
})

回到顶部 悬浮窗

map项目index.html 及 tutorial.js

function backToTop() {
    //滚页面才显示返回顶部
    $(window).scroll(function() {
        if ($(window).scrollTop() > 100) {
            $("#top").fadeIn(500);
        } else {
            $("#top").fadeOut(500);
        }
    });

    //点击回到顶部
    $("#top").click(function() {
        $("body").animate({
            scrollTop: "0"
        }, 500);
    });

    if ($(window).scrollTop() > 100) {
        $("#top").fadeIn(500);
    } else {
        $("#top").fadeOut(500);
    }
}

用JAVASCRIPT从服务器读取一个数据库文件（sqlite）

Javascript/js Load a database from the server

sql.js load db

var xhr = new XMLHttpRequest();
xhr.open('GET', '/path/to/database.sqlite', true);
xhr.responseType = 'arraybuffer';

xhr.onload = function(e) {
  var uInt8Array = new Uint8Array(this.response);
  var db = new SQL.Database(uInt8Array);
  var contents = db.exec("SELECT * FROM my_table");
  // contents is now [{columns:['col1','col2',...], values:[[first row], [second row], ...]}]
};
xhr.send();

jquery的点击事件

jquery click onclick

$(document).ready(function(){
    $("#ok").click(function (){
    })
});

多个div并排且居中

<div  style="text-align:center;">
    <div style="overflow:hidden; display:inline-block;">
        <div style="float:left;"><a href="#" id="ok">知道</a></div>
        <div style="float:left;"><a href="#" id="fuzzy">模糊</a></div>
        <div style="float:left;"><a href="#" id="wrong">不知道</a></div>
    </div>
</div>

Jquery focus无效不工作

jQuery focus not working link

设置一个timeout

setTimeout(function(){
    $("#cc_number").focus();
}, 0);

验证码图片

<label for="verification_code">验证码
    <a href="javascript:void(0)">
        <img onclick="refresh(this)" src="/verifycode" title="点击重新获取" />
    </a>
</label>
<input id="verification_code" name="verification_code" type="text" value="">

function refresh(obj) {
    obj.setAttribute('src','/verifycode?random='+Math.random());
}

主要是 img 标签里的 setAttribute('src', '/api?random=')

Published

Category

前端

Tags

Stay in Touch