jQuery編輯表視圖樣式401
首先我們準備HTML和CSS,按鈕和風格樣式的對象。
<span class="trigger-italic">italic</span>
<span class="trigger-strong">strong</span>
<span class="trigger-underline">underline</span>
span {
 display: inline-block;
 width: 23px;
 height: 23px;
 text-indent: -9999%;
 cursor: pointer
}
  
span:hover {
 background-position: bottom left;
}
  
.trigger-strong {
 background: url('images/bold.png') top left;
}
  
.trigger-italic {
 background: url('images/italic.png') top left;
}
  
.trigger-underline {
 background: url('images/underline.png') top left;
}
  
.trigger-background-selected{
 background: url('images/background.png') top left;
}
  
.trigger-italic-selected {
 background: url('images/italic.png') top left;
}
  
.trigger-center-selected {
 background: url('images/center.png') top left;
}
上面的腳本將創建一個按鈕,一些樣式(*風格)我們將添加或刪除的對象。現在我們添加一個功能按鈕。
$('.trigger-italic, .trigger-strong, .trigger-underline').toggle(function() {
  
 className = $(this).attr('class')+'-style';
  
 $('td').addClass(className);
 $(this).addClass('selected');
  
},function() {
  
 $(this).removeClass('selected');
  
 className = $(this).attr('class')+'-style';
  
 $('td').removeClass(className);
  
});
首先,我們添加一個按鈕切換函數,這將使一個按鈕可以選擇,沒有選擇。 如果按鈕被選中,我們將創建一個基于按鈕類的類名(我們只添加“風格”文本類名)。 所以,如果按鈕類的名字“trigger-italic”腳本將生成一個新的類名“trigger-italic-style”。 我們這類名稱添加到每一個“td”我們(這代表“所有內容”),然后選中的類添加到按鈕讓它看起來選中。
$('.trigger-background-2, .trigger-right-2, .trigger-center-2').toggle(function() {
  
 className = $(this).attr('class')+'-style';
  
 $('tr td:nth-child(2)').addClass(className);
 $(this).addClass('selected');
  
},function() {
  
 $(this).removeClass('selected');
  
 className = $(this).attr('class')+'-style';
  
 $('tr td:nth-child(2)').removeClass(className);
  
});
  
$('.trigger-background-23, .trigger-small-23, .trigger-big-23').toggle(function() {
  
 className = $(this).attr('class')+'-style';
  
 $('tr:nth-child(4)').children('td').addClass(className);
 $(this).addClass('selected');
  
},function() {
  
 $(this).removeClass('selected');
  
 className = $(this).attr('class')+'-style';
  
 $('tr:nth-child(4)').children('td').removeClass(className);
  
});
最后是閱讀用戶定義的選擇對象。
$('td').click(function() {
  
 thisIndex  = $(this).index() + 1;
 parentIndex = $(this).parents('tr').index() + 1;
  
 $.cookie('thisIndex', thisIndex);
 $.cookie('parentIndex', parentIndex);
  
 $(this).append('
<div class="td-selected">Content Was Selected</div>
');
 $('.td-selected').fadeOut(1000);
  
});
該腳本將定位對象通過閱讀它的指數及其母公司指數在餅干,然后保存它告訴用戶,他們有選擇一個對象。我們將添加一個功能按鈕,它可以找到所選對象。
$('.trigger-background-selected, .trigger-italic-selected, .trigger-center-selected').toggle(function() {
  
 className = $(this).attr('class')+'-style';
 cookieTR  = $.cookie('parentIndex');
 cookieTD  = $.cookie('thisIndex');
  
 if(cookieTD != null && cookieTR != null)  {
  $('tr:nth-child('+cookieTR+')').children('td:nth-child('+cookieTD+')').addClass(className);
  $(this).addClass('selected');
 } else {
  alert('Choose a content on a table first');
 }
  
},function() {
  
 $(this).removeClass('selected');
  
 className = $(this).attr('class')+'-style';
 cookieTR  = $.cookie('parentIndex');
 cookieTD  = $.cookie('thisIndex');
  
 $('tr:nth-child('+cookieTR+')').children('td:nth-child('+cookieTD+')').removeClass(className);
  
});

技術討論區(0 個討論)

  1. 請先登錄

      發 布
今天体育彩票中奖号码