只記錄使用者目前點擊的項目，不包含使用者點擊過哪些項目
參考資料：
jQuery教學-點選開啟下拉選單
前置作業：
使用JQuery-v1.6.4
Code：
<!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>記錄點擊li，重整後顯示點擊的li</title>
<script src="js/jquery.min.js" language="javascript"></script>
<script>
$(function(){
//cookie不等於0
if( document.cookie.length!=0 ){
var s_value=document.cookie.search('click_item=');//search字串搜尋,沒有找到為-1;
var e_value,str_CookTemp;
if( s_value!=-1 ){
s_value=s_value+('click_item='.length);
e_value=document.cookie.indexOf(';', s_value);
if( e_value==-1 ){
e_value=document.cookie.length;
}
str_CookTemp=document.cookie.slice(s_value,e_value);
//使用parents()可以取得DOM中的html元素;find搜索所有段落
var get_li=$('.menu ul:eq('+(str_CookTemp)+')').parents('li').find('a[href="#"]');
var str_title=get_li.html(); //取得title名稱
str_title=str_title.replace("►","▼");
get_li.html(str_title); //變更標題名稱
get_li.next().show();
}
}
$(".menu li a").click(function(){
var _this=$(this);
var on_li=$(this).closest('li'); //取得a上一層的li
var li_index=on_li.index(); //記錄li的index
document.cookie='click_item='+li_index+';'; //記錄點了哪一個li
if(_this.next("ul").length>0){
if(_this.next().is(":visible")){
//隱藏子選單並替換符號
_this.html(_this.html().replace("▼","►")).next().hide();
}else{
//開啟子選單並替換符號
_this.html(_this.html().replace("►","▼")).next().show();
}
//關閉連結
return false;
}
});
});
</script>
<style>
a{color:#333333; text-decoration:none; font-size:12px;}
a:hover{text-decoration:underline;}
ul{margin:0;padding:0;list-style-type: none;}
ul.submenu{display:none;}
ul.submenu{margin-left:25px;list-style-type:disc; color:#333333;}
</style>
</head>
<body>
<ul id="ulid" class="menu">
<li>
<a href="#">►abc公司</a>
<ul class="submenu">
<li><a href="http://localhost/" target="_blank">部門1</a></li>
<li><a href="http://localhost/" target="_blank">部門2</a></li>
</ul>
</li>
<li>
<a href="#">►def公司</a>
<ul class="submenu">
<li><a href="http://localhost/" target="_blank">部門1</a></li>
<li><a href="http://localhost/" target="_blank">部門2</a></li>
<li><a href="http://localhost/" target="_blank">部門3</a></li>
</ul>
</li>
<li>
<a href="#">►ghi公司</a>
<ul class="submenu">
<li><a href="http://localhost/" target="_blank">部門1</a></li>
<li><a href="http://localhost/" target="_blank">部門2</a></li>
<li><a href="http://localhost/" target="_blank">部門3</a></li>
<li><a href="http://localhost/" target="_blank">部門4</a></li>
</ul>
</li>
</ul>
</body>
</html>
2014年2月22日 星期六
2014年2月18日 星期二
JQuery Mobile 應用篇
適用於JQuery Mobile-1.1.0
checkboxradio(Checkbox)設定
1.選擇input name=n1 值是100,設定為勾選,並刷新
$('input[name="n1"][value="100"]').prop('checked', true);
$('input[name="n1"]').checkboxradio(); //等同刷新-此方法是動態產生元件使用
2.選擇n2設定不啟用(可看到checkbox但無法點選)
$('input[name="n2"]').prop('disabled', true);
$('input[name="n2"]').checkboxradio(); //等同刷新-此方法是動態產生元件使用
3.建立事件
$('input[type="radio"][name="n2"]').bind( "change",function(){....});
selectmenu(Select下拉式選單)設定
1.選擇id=select1的選項值100設定為預設選項
$('#select1 option[value="100"]').prop('selected', true);
$('#select1' ).selectmenu(); //等同刷新-此方法是動態產生元件使用
2.選擇id=select2 設定為不啟用
$('#select2').prop('disabled', true);
$('#select1' ).selectmenu(); //等同刷新-此方法是動態產生元件使用
Button設定
1.按鈕顯示及隱藏
$('#Button1').closest('.ui-btn').show(); //按鈕顯示
$('#Button1').closest('.ui-btn').hide(); //按鈕隱藏
2.設定按鈕顯示文字
$("#Button1").prev('span').find('span.ui-btn-text').text("這是button1");
3.設定按鈕為不啟用(jquery.mobile-1.4.2可用)
$('#Button1').addClass('ui-state-disabled'); //不啟用
$('#Button1').removeClass('ui-state-disabled'); //移除ui-state-disabled 代表啟用
4.按鈕不啟用(jquery.mobile-1.4.4)
$('#Button1').button().button('disable');
P.S 如果是在ajax中執行可以寫成$('#Button1').button('disable');
備註
2015/01/13
1.假如在jquery mobile的pageinit事件中使用到jquery $post時，必須注意如果在javascript中有使用到$.mobile.changePage切換頁面，此時會在跑一次pageinit事件，大置上如下。
$(document).bind('pageinit', function (init_event) {
//如果使用$.mobile.changePage切換頁面,會在跑一次pageinit
$.post('a.aspx',{sd: str_comm},function(data, status){
.....
});
});
checkboxradio(Checkbox)設定
1.選擇input name=n1 值是100,設定為勾選,並刷新
$('input[name="n1"][value="100"]').prop('checked', true);
$('input[name="n1"]').checkboxradio(); //等同刷新-此方法是動態產生元件使用
2.選擇n2設定不啟用(可看到checkbox但無法點選)
$('input[name="n2"]').prop('disabled', true);
$('input[name="n2"]').checkboxradio(); //等同刷新-此方法是動態產生元件使用
3.建立事件
$('input[type="radio"][name="n2"]').bind( "change",function(){....});
selectmenu(Select下拉式選單)設定
1.選擇id=select1的選項值100設定為預設選項
$('#select1 option[value="100"]').prop('selected', true);
$('#select1' ).selectmenu(); //等同刷新-此方法是動態產生元件使用
2.選擇id=select2 設定為不啟用
$('#select2').prop('disabled', true);
$('#select1' ).selectmenu(); //等同刷新-此方法是動態產生元件使用
Button設定
1.按鈕顯示及隱藏
$('#Button1').closest('.ui-btn').show(); //按鈕顯示
$('#Button1').closest('.ui-btn').hide(); //按鈕隱藏
2.設定按鈕顯示文字
$("#Button1").prev('span').find('span.ui-btn-text').text("這是button1");
3.設定按鈕為不啟用(jquery.mobile-1.4.2可用)
$('#Button1').addClass('ui-state-disabled'); //不啟用
$('#Button1').removeClass('ui-state-disabled'); //移除ui-state-disabled 代表啟用
4.按鈕不啟用(jquery.mobile-1.4.4)
$('#Button1').button().button('disable');
P.S 如果是在ajax中執行可以寫成$('#Button1').button('disable');
備註
2015/01/13
1.假如在jquery mobile的pageinit事件中使用到jquery $post時，必須注意如果在javascript中有使用到$.mobile.changePage切換頁面，此時會在跑一次pageinit事件，大置上如下。
$(document).bind('pageinit', function (init_event) {
//如果使用$.mobile.changePage切換頁面,會在跑一次pageinit
$.post('a.aspx',{sd: str_comm},function(data, status){
.....
});
});
訂閱：
文章 (Atom)