jQuery编辑表视图样式

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);  });

也许你还喜欢