小编use*_*653的帖子

我只是在学习angular2.在输入更改时应用某些内容时,我收到错误.

app.ts:

export class AppComponent {
    form: ControlGroup;

    constructor(fb: FormBuilder) {
        this.form = fb.group({
            search: []
        });

        var search = this.form.find('search');
        search.valueChanges
            .debounceTime(400)
            .map(str => (<string>str).replace(' ','?'))
            .subscribe(x => console.log(x));
    };

 }

错误:

怎么解决这个？我错过了什么吗？

Plunker演示

NB我现在无法在plunker上制作任何东西,因为我第一次在plunker上写了angular2.我在plunker只写了我的app.ts代码.我已经在本地电脑上显示了错误的屏幕截图.如果你告诉我在plunker上运行angular2项目的方式,我将不胜感激.

我有一些情况我应该使用多个背景颜色到一个div.这对我来说更好,而不是使用背景图像或额外的div.但是,我无法通过CSS找到更简单的方法来使用它.所以,我需要一些方案的帮助.请看图片:

(1)我想建立"A".因为我写道:

div.A { background: linear-gradient(to right, #9c9e9f, #f6f6f6); }

但是,在编写该代码后,它会像"B"一样.但是,我想要完全像"A".那么,通过css/css3我该怎么做(不添加更多的div)？

(2)是否可以使一部分比其他部分小？例如,在"C"处,蓝色比其他部分小(高度).如何,我可以将多个背景颜色应用于一个div,使一个部分变小,如"C"(不添加额外的div到"C")？

更新:在@ Mohammad回答之后,我已经尝试过这种方式了.但是,对于"C"场景,我无法降低蓝色部分的高度.你能告诉我,我该怎么办？
jsfiddle.net/mFjQ6

还有selectpicker旁边checkbox.我想如果复选框被选中,selectpicker将被启用,如果未选中,则selectpicker将被禁用.我写了这个不起作用(这是小提琴):

$('.checkBox').on('ifChecked', function(event) {
    $(this).parents('.clearfix').find('.selectpicker').removeAttr('disabled');

});
$('.checkBox').on('ifUnchecked', function(event) {
    $(this).parents('.clearfix').find('.selectpicker').attr('disabled');
});

我已经使用Select2插件进行标签输入.这是我基本工作的小提琴.我需要在下拉框中显示每个选项/标签的"使用过的数字",如下所示:

我在CSS(.used-number)中为该数字创建了一个类.但是,我不明白如何为我的HTML文件中的每个选项添加该数字.有没有办法添加这样的东西(或任何其他方式):

$(".tag").select2({
     data:[{tag: 'red',text:'3',className: 'used-number'},{tag: 'green',text:'12',className: 'used-number'},{tag: 'blue',text:'5', className: 'used-number'},{tag: 'black',text:'7'}]
});

});

我有几个项目已经.active通过点击它们上课了.现在,我不需要在任何.active课程中发生任何点击事件.我有很多点击功能来制作这个项目active.因此,为了防止点击活动类,我在其他地方编写了prevent函数,并在每个单击函数中调用它们.但是,它没有用.

$('body').on('click', '#one', function() {  
   $(this).addClass('active');
   // do something more
    noClickOnActive();
});
$('body').on('click', '#two', function() {  
   $(this).addClass('active');
   // do something more
    noClickOnActive();
}); 

function noClickOnActive() {
    $('body').on('click', '.content.active', function(event) {  
        event.preventDefault()
        event.stopPropagation();
    }); 
};

如何让它工作？

小提琴工作

我正在制作一个场景,用户可以通过单击"添加"按钮添加"删除"选项的新行.如果他们单击"删除"按钮,整个行将被删除.我已经为它编了脚本.但是,它并没有完美运作.请注意我的小提琴:http://jsfiddle.net/learner73/gS8u2/

我的问题是:

(1)如果用户单击"添加"按钮,将添加一个新行.非常好.但是,它已经低于"添加"按钮.我想,新行将添加到"添加"按钮上方,我的意思是"添加"按钮应始终位于底部.

(2)在我的代码中,如果用户单击先前创建的行上的"删除"按钮,则将删除整行.非常好.但是,当他们点击动态创建的行上的"删除"按钮时,什么都不会发生!

HTML:

<div class="optionBox">
    <div class="block">
        <input type="text" /> <span class="remove">Remove Option</span>
    </div>
    <div class="block">
        <input type="text" /> <span class="remove">Remove Option</span>
    </div>
    <div class="block">
        <span class="add">Add Option</span>
    </div>
</div>

jQuery的:

$('.add').click(function() {
    $('.optionBox').append('<input type="text" /><span class="remove">Remove Option</span>');
});

$('.remove').click(function() {
    $(this).parent('div').remove();
});

我正在使用iCheck插件进行复选框.我在那里放了一个"全选"功能.结构:

• 全选
• 复选框1
• 复选框2
• 复选框3

它工作正常,如检查"全选",将选中所有复选框.取消选中"全选"时,将取消选中所有复选框.但是,在选中"全选"后,如果取消选中任何复选框,则应自动取消选中"全选",因为此时未选中所有复选框.

为此,我写了这个:

$('#check-all').on('ifChanged', function(event){
    if($('.check').filter(':checked').length == $('.check').length) {
        $('#check-all').iCheck('check');
    } else {
        $('#check-all').iCheck('uncheck');
    }
    $('#check-all').iCheck('update');
});

但是,在输入此代码后,我的复选框工作不正常,如"全部选择"不能单击,它需要经常多次点击.如果取消选中任何一个复选框,也不会取消选中"全选".代码有什么问题？如何正确写？

小提琴工作

我已经使用这个HTML5可排序插件进行拖放.在那个可拖动的部分里面,我有可编辑的文字.在编辑时,当我尝试通过键盘命令ctrl + a选择输入字段的所有文本时,我注意到文本未被选中.起初,我不明白这是什么问题.为了测试,我将一个普通的textarea放在可排序的内容中,注意到它也不起作用!所以,这是HTML5可排序插件的问题.这是我的小提琴,你可以看到第一个可编辑文本input(在"可排序内容开始:"文本之外/之上)通过ctrl + a命令工作,其中input可排序内容中的剩余字段不能与ctrl + a一起使用.我怎样才能解决这个问题？

我正在使用响应式网站.我已经使用媒体查询来做出负责任的事情.基本上,我没有使用任何固定宽度.我用百分比作为每个div的宽度.

因此,根据浏览器的大小调整,可以按比例缩放网站.对于使用宽度的百分比可能会导致较旧的问题.因为ie即9之前不支持媒体查询,所以,我想为那些构建不可扩展的版本即.由于我只提供了很少的代码来实现可伸缩性,所以如果我使用我的默认CSS在我的主样式表下/在任何地方编写CSS代码也可以吗？

喜欢style.css:

#info {
   width: 13.672%;
   /*if ie9 and lower
   width: 175px;*/
   height: 830px;
   /*if ie9 and lower
   margin-right: 40px;*/
   margin-right: 3.125%;
   float: left;
}

img {
  margin: 0px;
  padding: 0px;
  border: 0px;
  max-width: 100%;
  /*if ie9 and lower
   max-width: inherit*/
  height: auto;
  /*if ie9 and lower
   height: inherit*/
}

我想写那种格式.但是,我不知道正确的格式.请告诉我正确的格式.

另一个问题给你.由于那些版本的ie不支持media-query,所以meta标签

<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0" />
<link href="KT2012.css" rel="stylesheet" type="text/css" />
<link href="kt_large.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" media="only screen and (min-width:50px) and …

我已经制作了两个框,其背景将在悬停和活动状态下更改.这是我的工作:http: //jsfiddle.net/3Vbz8/

在那里,当我点击"one"时,它将设置为它的活动状态(绿色背景).没关系.当我点击"Two"时,它将设置为活动状态,"one"将返回到之前的状态(灰色背景).这对我也没关系.

但是,我希望当"one"设置为活动状态时,那时,如果我点击"One",它也将返回到它的正常状态(灰色背景).同样的事件也应该发生在"两个".我该怎么做？

我的应用脚本:

$('.toggle').click(function(){
   $('.toggle').removeClass("active");
   $(this).toggleClass("active");
});

........... UPDATE ...........

克里希纳帮助我:http://jsfiddle.net/3Vbz8/1/

$('.toggle').click(function(){
   $('.toggle').not(this).removeClass("active");
   $(this).toggleClass("active");
});

我注意到了一个应该为我的项目更新的问题.那个问题是:如果"一个"处于"活动"状态,那么,如果任何用户点击"一个",它将返回到它的原始状态.但是,如果用户不从该按钮移除他/她的鼠标指针,该按钮似乎也在绿色背景上.这是悬停颜色.因此,如果任何用户一次又一次地点击按钮,他/她将不会理解状态是否改变,除非他/她移动他/她的指针.

所以,我需要(当鼠标指针没有被用户移动时):如果有人点击"一个"按钮,它会变成"绿色背景".如果用户再次点击"One",它将变为"灰色背景"(了解更改用户不必移动他/她的鼠标指针).如果用户一次又一次地点击按钮而不移动他/她的鼠标指针,则简短的悬停颜色应该是不活动的

我在网页上使用了此数据表。这是小提琴链接，我把代码。我想要第一数字第二数字列应该垂直旋转。我已经做到了。但是，问题是创建后，列标题和列不能在一起。 除此之外，我希望垂直旋转文本的列尽可能薄。但是，尽管我在该列的标题处设置了20px宽度，却无法做到。另一件事是，在IE8上，旋转文本的div看起来有所不同（填充/边距问题）。根据我的问题，我只应该写关于放置旋转文本的问题/失败。但是，我在这里写了多个问题。那是因为，我所有的问题都出在将旋转文本放在列标题之后（我给定插件的js也有点负责，因为它阻止了正确修改列的宽度）。我相信，如果我能够以适当的方式放置垂直旋转的文本（也关于IE8）并适当地修改表格的宽度，那么将不再存在任何问题。因此，如何将垂直旋转文本正确放置在列标题处？

一些代码：

<table id="example" class="dataTable display" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th class="rank">Rank</th>
      <th class="wider">User Inserted Title Name</th>
      <th class="rotate">
        <div>Fisrt Number Second Number</div>
      </th>
      <th class="rotate">
        <div>Fisrt Number Second Number</div>
      </th>
      <th class="rotate">
        <div>Fisrt Number Second Number</div>
      </th>
      <th class="rotate">
        <div>Fisrt Number Second Number</div>
      </th>
      <th class="rotate">
        <div>Fisrt Number Second Number</div>
      </th>
      <th class="rotate">
        <div>Fisrt Number Second Number</div>
      </th>
      <th class="rotate">
        <div>Fisrt Number Second Number</div>
      </th>
      <th …

我正在使用这个插件来编辑文本.这是我的小提琴.我想分别根据两个编辑字段的更改文本更改文本"文本1","文本2".我怎样才能做到这一点？

我试过这个脚本:

var title = $('.edit_text').editable('getValue');
$('.name-list p').html(title);

提前致谢!