smextendminjs_JS或Jquery動態改變導航欄樣式

① js如何添加行和刪除行

<!DOCTYPE html>

<head>

$(document).ready(function(){

var spotMax = 30;

if($('div.spot').size() >= spotMax) {$(obj).hide();}

$("input#add").click(function(){ addSpot(this, spotMax);

});

function addSpot(obj, sm) {

$('div#spots').append(

'<div>' +

'<span><input name="shengfen" type="text" /></span>'+

'<span><input name="diqu" type="text" /></span>'+

'<input type="button" class="remove spot01" value="刪除行" /></div>')

.find("input.remove").click(function(){

$(this).parent().remove();

$('input#add').show();

});

if($('div.spot').size() >= sm) {$(obj).hide();}

};

</script>

</head>

<body>

<div>

</div>

</body>

</html>

效果這樣（樣式再自己調）

不懂再追問

② js如何獲得系統時間年月日時分秒

javascript 自帶有個對象(構造函數)，Date().下面是代碼：

varoDate=newDate();//實例一個時間對象；
oDate.getFullYear();//獲取系統的年；
oDate.getMonth()+1;//獲取系統月份，由於月份是從0開始計算，所以要加1
oDate.getDate();//獲取系統日，
oDate.getHours();//獲取系統時，
oDate.getMinutes();//分
oDate.getSeconds();//秒

③ 我怎麼使用jquery.plugins.js插件

jQuery插件要使用它的話通常插件中都有demo或者api可以查閱
通常jQuery插件為了減小體積會發布兩個版本 XXX.js和XXX.min.js

如果你要修改插件需要使用XXX.js文件

首先你要知道它怎麼用,先有一個可用的demo(沒有demo就自己寫一個),然後用webkit內核或firefox進行斷點查看,這主要是為了找插件入口點,當然你也可以直接查看js代碼這需要一定的底子
最後就是慢慢查看他的代碼的實現功能了,先得看懂他是怎麼實現的,然後你才會知道怎麼改.

jQuery插件我也寫的不少像模擬alert/confirm/prompt 錯誤信息提示框模擬彈出窗體無縫marquee滾動分頁控制項拖拽控制項等等

jQuery插件的框架寫法通常是

(function($){
$.fn.extend({
fnKey:function(){}
})
//或者
$.fn.fnKey=function(){}
})(jQuery)

上面的兩種寫法的調用方式是

$("XXX").fnKey()進行調用的

還有一種寫法:
var fnClass = function(){
this.fnKey=function(){
}
this.props="";
}

這種寫法是的調用方式是
fnClass obj = new fnClass();
obj.fnKey();

第二種寫法是js的面向對象編程得自己慢慢的理解哈

④ JS或Jquery動態改變導航欄樣式

簡單的插件代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>動態導航插件</title>
<style type="text/css">

</style>
<script type=text/javascript src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
(function($){
$.fn.dynamicNav=function(options){

//默認配置
var defaults = {
direction:"up", //動畫切換方向，總共4種up 、down 、left 、right
ration:100 //三種預定速度之一的字元串("slow", "normal", or "fast")或表示動畫時長的毫秒數值(如：1000)
};

// 覆蓋默認配置
var opts = $.extend(defaults, options);

this.each(function(){
var navList=$(this).find("li"),
navLink=navList.find("a");

//在a標簽外側插入span
navList.wrapInner("<span></span>");

var span=navLink.parent();

//判斷是否垂直切換
if(opts.direction=="up" || opts.direction=="down"){
var v=true;
}

//判斷是否改變span初始位置及a樣式
if(opts.direction=="right" || opts.direction=="down"){
var restSpan=true;
}

navLink.each(function(){

//獲取a高度和寬度
var w=$(this).outerWidth(),
p=$(this).parent();

//初始復制現有a標簽
$(this).clone().appendTo(p).addClass("over");

//如果是垂直切換
if(v){
p.css("width",w);
}else{
p.css("width",2*w).parent().css("width",w);
}

});

//如果向右或向下切換，改變span初始位置及a樣式
if(restSpan){
span.each(function(){

if(opts.direction=="right"){
$(this).css({"margin-left":-$(this).outerWidth()/2});
}

if(opts.direction=="down"){
$(this).css({"margin-top" : -$(this).outerHeight()/2});
}

$(this)
.find('a')
.last()
.removeClass("over")
.prev()
.addClass("over");
});
}

//滑鼠經過時動畫函數
function over(o){
o.animate(v?{"margin-top": -o.outerHeight()/2}:{"margin-left": -o.outerWidth()/2}, opts.ration);
}

//滑鼠移開時動畫函數
function out(o){
o.animate(v?{"margin-top":0}:{"margin-left": 0}, opts.ration);
}

//滑鼠經過和離開
span.hover(function(){
restSpan ? out($(this)) : over($(this));
},function(){
restSpan ? over($(this)) : out($(this));
});

});
};

})(jQuery);

$(function(){

//向左
$("#nav1").dynamicNav({
direction:"left", //動畫切換方向，總共4種up 、down 、left 、right
ration:300 //三種預定速度之一的字元串("slow", "normal", or "fast")或表示動畫時長的毫秒數值(如：1000)
});
//向右
$("#nav2").dynamicNav({
direction:"right",
ration:200
});
//向上
$("#nav3").dynamicNav({
direction:"up",
ration:100
});
//向下
$("#nav4").dynamicNav({
direction:"down",
ration:400
});
});

</script>
</head>
<body>

<h1>向左（速度300毫秒）</h1>
<ul class="nav" id="nav1">
<li><a href="http://www.muzilei.com/">首頁</a></li>
<li><a href="http://www.muzilei.com/">前端技術</a></li>
<li><a href="http://www.muzilei.com/">視覺設計</a></li>
<li><a href="http://www.muzilei.com/">文章歸檔</a></li>
<li><a href="http://www.muzilei.com/">工具/書籍</a></li>
<li><a href="http://www.muzilei.com/">關於我</a></li>
</ul>

<h1>向右（速度200毫秒）</h1>
<ul class="nav" id="nav2">
<li><a href="http://www.muzilei.com/">首頁</a></li>
<li><a href="http://www.muzilei.com/">前端技術</a></li>
<li><a href="http://www.muzilei.com/">視覺設計</a></li>
<li><a href="http://www.muzilei.com/">文章歸檔</a></li>
<li><a href="http://www.muzilei.com/">工具/書籍</a></li>
<li><a href="http://www.muzilei.com/">關於我</a></li>
</ul>

<h1>向上（速度100毫秒）</h1>
<ul class="nav" id="nav3">
<li><a href="http://www.muzilei.com/">首頁</a></li>
<li><a href="http://www.muzilei.com/">前端技術</a></li>
<li><a href="http://www.muzilei.com/">視覺設計</a></li>
<li><a href="http://www.muzilei.com/">文章歸檔</a></li>
<li><a href="http://www.muzilei.com/">工具/書籍</a></li>
<li><a href="http://www.muzilei.com/">關於我</a></li>
</ul>

<h1>向下（速度400毫秒）</h1>
<ul class="nav" id="nav4">
<li><a href="http://www.muzilei.com/">首頁</a></li>
<li><a href="http://www.muzilei.com/">前端技術</a></li>
<li><a href="http://www.muzilei.com/">視覺設計</a></li>
<li><a href="http://www.muzilei.com/">文章歸檔</a></li>
<li><a href="http://www.muzilei.com/">工具/書籍</a></li>
<li><a href="http://www.muzilei.com/">關於我</a></li>
</ul>

</body>
</html>

導航:首頁 > 編程語言 > smextendminjs

smextendminjs

與smextendminjs相關的資料

友情鏈接