DIV CSS 佈局教程網
設為首頁
加入收藏
首頁
HTML基礎知識
CSS入門知識
JavaScript入門知識
DIV+CSS佈局
WEB網站前端
網頁腳本
網頁SEO優化
網頁制作工具
DIV+CSS佈局教程網
>>
網頁腳本
>>
JavaScript入門知識
>>
jQuery入門知識
>>
JQuery特效代碼
>> jquery tree 可編輯節點實現代碼(jquery一句話節點菜單)
jquery tree 可編輯節點實現代碼(jquery一句話節點菜單)
編輯：JQuery特效代碼
下面的代碼。大家可以研究下，對於jquery的學習還是非常有好處的。
鋒利的jquery中的一句話代碼，實現的菜單
運行後，需要刷新下(因為是調用的外地jquery)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>1-5-1</title> <style type="text/css"> #menu { width:300px; } .has_children{ background : #555; color :#fff; cursor:pointer; } .highlight{ color : #fff; background : green; } div{ padding:0; } div a{ background : #888; display : none; float:left; width:300px; } </style> <!-- 引入 jQuery --> <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script> <script type="text/javascript"> //等待dom元素加載完畢. $(function(){ $(".has_children").click(function(){$(this).addClass("highlight").children("a").show().end() .siblings().children("a").hide().removeClass("highlight") })}); </script> </head> <body> <div id="menu"> <div class="has_children"> <span>第1章-認識jQuery</span> <a>1.1-JavaScript和JavaScript庫</a> <a>1.2-加入jQuery</a> <a>1.3-編寫簡單jQuery代碼</a> <a>1.4-jQuery對象和DOM對象</a> <a>1.5-解決jQuery和其它庫的沖突</a> <a>1.6-jQuery開發工具和插件</a> <a>1.7-小結</a> </div> <div class="has_children"> <span>第2章-jQuery選擇器</span> <a>2.1-jQuery選擇器是什麼</a> <a>2.2-jQuery選擇器的優勢</a> <a>2.3-jQuery選擇器</a> <a>2.4-應用jQuery改寫示例</a> <a>2.5-選擇器中的一些注意事項</a> <a>2.6-案例研究——類似淘寶網品牌列表的效果</a> <a>2.7-還有其它選擇器麼？</a> <a>2.8-小結</a> </div> <div class="has_children"> <span>第3章-jQuery中的DOM操作</span> <a>3.1-DOM操作的分類</a> <a>3.2-jQuery中的DOM操作</a> <a>3.3-案例研究——某網站超鏈接和圖片提示效果</a> <a>3.4-小結</a> </div> </div> </body> </html>
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執行]
運行後，需要刷新下(因為是調用的外地jquery)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script> <style type="text/css"> li{ text-indent: 10px; margin-left: -20px; padding-top: 0px; list-style: none; } .oline{ background-image: url(treeview-default-line.gif); background-position: 7px 18px; background-repeat: no-repeat; } .lline{ background-image: url(L.gif); background-position: 7px 18px; background-repeat: no-repeat; } .expand{ background-image: url(minus.gif); background-repeat: no-repeat; background-position: left; } .colpse{ background-image: url(plus.gif); background-repeat: no-repeat; background-position: left; } label{ padding-left: 15px; padding-top: -5px; } .leaf{ background-image: url(L.gif); background-repeat: no-repeat; background-position: left; } input{ border: 1px solid #CCC; } </style> </head> <body> <ol> <li > <label>A</label> <ol > <li > <label>A-1</label> <ol> <li > <label>A-1-1</label> <ol> <li > <label>A-1-1-1</label> <ol> <li > <label>A-1-1-1-1</label> </li> </ol> </li> </ol> </li> <li > <label>A-1-1</label> <ol> <li > <label>A-1-1-1</label> <ol> <li > <label>A-1-1-1-1</label> </li> </ol> </li> </ol> </li> <li > <label>A-1-1</label> <ol> <li > <label>A-1-1-1</label> <ol> <li > <label>A-1-1-1-1</label> </li> </ol> </li> </ol> </li> </ol> </li> <li > <label>B-1</label> <ol> <li > <label>B-1-1</label> <ol> <li > <label>B-1-1-1</label> <ol> <li > <label>B-1-1-1-1</label> </li> </ol> </li> </ol> </li> </ol> </li> </ol> </li> </ol> </body> </html> <script type="text/javascript"> $("li:has(ol)>label").addClass('colpse'); $('ol>li:not(:only-child)').addClass('oline'); $('ol>li:only-child').addClass('lline'); $('ol>li:last-child').addClass('lline'); $("li:has(ol)>label").toggle( function(){ $(this).removeClass(); $(this).addClass('colpse'); $("+ol",this).children().slideUp(100); }, function(){ $(this).removeClass(); $(this).addClass('expand'); $("+ol",this).children().slideDown(100); } ); $("li:has(ol)>label").click(); $("label:not(:has(ol))").dblclick(function(){ $(this).hide(); $(this).before('<input type="text" value="'+$(this).html()+'"/><input type="button" value="add"/>'); $(":button").click(function(){ $(this).prev().hide(); $(this).hide(); $(this).next().html($(this).prev().val()); $(this).next().show(); }); }); </script>
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執行]
上一頁:
JQuery 解析多維的Json數據格式
下一頁:
jquery 最簡單的屬性菜單
JQuery特效代碼
jQuery點擊自身以外地方關閉彈出層的簡單實例
主要功能是點擊顯示,然後通過點擊頁面的任意位置都能關閉顯示效果,主要是$(document).cli
Jquery 實現彈出層插件
彈出層的應用還是比較多的，登陸，一些同頁面的操作，別人的總歸是別人的，自己的才是自己的，所以一直以來
Raphael一個用於在網頁中繪制矢量圖形的Javascript庫
Raphael 是一個用於在網頁中繪制矢量圖形的 Javascript 庫。它使用 SVG W3C
相關文章
用vue實現簡單實時匯率計算功能
jquery中attr和prop的區別
jquery操作復選框(checkbox)的12個小技巧總結
jquery 單引號和雙引號的區別及使用注意
jQuery DOM 操作（基本操作、內部插入、外部插入、包裹操作）
使用js和jquery獲取url及url參數的方法
jqueryUI部件庫的優缺點
jQuery+CSS3實現可拖拽的3D立體圖片展示環
HTML5+jQuery實現全屏煙花特效
jquery ui打開url網址的對話框
jQuery基礎知識
JQuery入門技巧
JQuery特效代碼
JQuery常見問題
小編推薦
jquery實現submit提交表單
jquery.bgiframe.js在IE9下提示INVALID_CHARACTER_ERR錯誤
jquery中的sortable排序之後的保存狀態的解決方法
JQuery學習筆錄 簡單的JQuery學習過程
jquery tree 可編輯節點實現代碼(jquery一句話節點菜單)
Asp.net下使用Jquery Ajax傳送和接收DataTable的代碼
jQuery中:input選擇器用法實例教程
jquery下異步提交表單 異步跨域提交表單
jquery.validate分組驗證代碼
jQuery 借助插件Lavalamp實現導航條動態美化效果
熱門推薦
jQuery中實現動畫效果的基本操作介紹
獲得所有表單值的JQuery實現代碼[IE暫不支持]
jquery屬性過濾選擇器使用示例
跟著JQuery API學Jquery 之二 屬性
1月分享20個最新的jQuery插件下載
jquery中ajax學習筆記一
jquery實現跳到底部，回到頂部效果
jquery根據錨點offset值實現動畫切換
JQuery中關於jquery.js與jquery.min.js的比較探討
大家都在看
猜數字游戲
CSS3實例教程:box-shadow陰影和表格陰影
css網頁制作實用技巧9則
你得學JavaScript
捕獲鍵盤事件(且兼容各浏覽器)
SyntaxHighlighter語法高亮插件使用說明
學習DIV float在ff和ie下的布局區別(2)
js實現同一個頁面多個漸變效果的方法
XML學習教程
|
jQuery入門知識
|
AJAX入門
|
Dreamweaver教程
|
Fireworks入門知識
|
SEO技巧
|
SEO優化集錦
|
Copyright ©
DIV+CSS佈局教程網
All Rights Reserved