标签: jquery-plugins

我正在使用David Lynch 出色的 MapHighlight 插件和美国地图的自定义版本。不幸的是，美国的一些州（如罗德岛）非常小。出于这个原因，我在地图右侧创建了一些方框，其中包含一些较小州的缩写。

我希望能够做的是当用户将鼠标悬停在框或状态上时同时突出显示框和地图。

<area href="#" title="RI" shape="poly" coords="617,141, 617,138, 617,135, 616,131, 620,130, 621,131, 623,133, 625,136, 623,138, 622,137, 622,139, 620,140, 617,141, 617,141"/>
<area href="#" title="RI" shape="rect" coords="728,164,760,182"/>

两个项目共享相同的时间标题。（例如，罗德岛的标题标签是“RI”）

根据 David Lynch 网站上的示例，我认为执行以下操作可能会很有用。

$('area[title]').mouseover(function() {
   $(this).mouseover();     
});

不幸的是，这并没有奏效，事件似乎从未发生过——即使我尝试了许多变体。

我可以做些什么来同步这些元素（以通用方式）并使所有具有相同标题的区域标签在鼠标悬停/悬停时突出显示？

当数据在初始页面加载时提供时，DataTables 与 GAS HTMLService 配合得很好，但 GAS 的更好做法是“异步加载数据，而不是在模板中”。此外，数据表的服务器端处理为大型数据表提供了响应更快的 UI。我正在寻找一种满足这些建议的模式。我从一个基本的 DataTables 示例开始，转换为 GAS HTMLService 模板模型。

GS 代码：

 function doGet() {
   Logger.log("Start");
   var start = new Date();
   // rt params
   // var rtParameters = getRunTimeParameters(request);
   // uses HtmlService to send page based on a template
   var temp = HtmlService.createTemplateFromFile('chart');
   // prepare data for initial page

   Logger.log("TIME to return:"+ (new Date() -start));
   return temp.evaluate();
 }

  function include(filename) {
    // helper function to load html into template from sep files in project
    return HtmlService.createHtmlOutputFromFile(filename)
    .getContent(); …

我遇到了最新版本的LayerSlider问题.我已经使用了全宽响应演示中的所有内容并阅读了所有选项,但是当我调整浏览器大小时,高度不会更新.为了使图像更清晰,图像本身会缩放,但容器的高度保持不变.在文档中,它说你必须给容器一个高度.

我的代码如下:

HTML:

<div id="LayerSlider" class="Slider">
    <div class="ls-slide" data-ls="transition2d:1;timeshift:-1000;">
        <img src="/Assets/Images/Layerslider/Banner1.jpg" class="ls-bg" alt="Slide background"/>
    </div>
    <div class="ls-slide" data-ls="transition2d:1;timeshift:-1000;">
        <img src="/Assets/Images/Layerslider/Banner2.jpg" class="ls-bg" alt="Slide background"/>
    </div>
</div>

jQuery的

$(document).ready(function () {
    $('#LayerSlider').layerSlider({
        responsive: false,
        layersContainer : 1178,
        responsiveUnder : 1500
    });
});

在文档中说你必须使用responsive:false如果你想使用responsiveUnder使它在指定的宽度下响应.

链接到LayerSlider http://kreaturamedia.com/layerslider-responsive-jquery-slider-plugin/

我正在使用Choosen jquery插件,我想在multiselect中限制选定的选项.有一个建议的解决方案, $(".chosen-select").chosen({max_selected_options: 5});但它不适合我!

这是我的js文件:

$(document).ready(function(){
// .....
$(".chosen-select").chosen({max_selected_options: 5});
//.....
});

这是php文件:

<em>Country</em>
<select data-placeholder="Choose your country..." id="mycountry" class="chosen-select" multiple style="width:400px;" tabindex="4">
                <option value=""></option>
                <?php  
// Data from dataabse
?>
</select>

我正在使用来自https://github.com/eternicode/bootstrap-datepicker的datepicker插件

在不更改库本身的情况下,有没有办法在日历弹出窗口中更改星期几的缩写格式？

我希望这是一个我可以通过的选项,因为我想使用DaysShort而不是DaysMin.

我想要调整的区域的屏幕截图:http://take.ms/qJvdA

谢谢!

我有一些动态数据加载到名为"tabNames"的数组中,如下所示:

    tabNames.push({name: hit.category});

然后我需要列出以下html中的"名称"字段.我想在数组"tabNames"中水平列出前7个"name"值,然后将其他值列入下拉列表中.

这是我的HTML

        <div id="categories" class="food-category-tab">
            <script id="categoriesList" type="text/x-jsrender">
                 <ul id="myTab" class="nav nav-tabs">
                 {{if #index <=6}}
                <li class="active"><a href="#home" data-toggle="tab">{{>name}}  </a></li>
                {{/if}}
                {{if #index >6}}
                 <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">More <b class="caret"></b></a>
                  <ul class="dropdown-menu">
                    <li><a href="#dropdown1" data-toggle="tab">{{>name}}</a></li>
                  </ul>
                </li>
                {{/if}}
              </ul>
                </script>
         </div>

我从js文件调用jsrender,其中编写函数用于将内容加载到"tabNames"数组中,如下所示:

    $("#categories").html($("#categoriesList").render(tabNames));

任何人都可以告诉代码有什么问题以及如何解决这个问题？

我有一个jsp页面。在那我正在尝试jquery星级。我正在使用此插件http://www.fyneworks.com/jquery/star-rating/。但是JS错误像TypeError一样来了：$（...）。rating不是函数这是我的JSP代码。

<div class="book-right" id="ajaxTest">
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery.rating.js"></script>
    <script type="text/javascript" src="js/jquery-latest.js"></script>
    <script type="text/javascript" src="js/jquery.tablesorter.js"></script>
    <script type="text/javascript" src="js/jquery.tablesorter.min.js"></script>
    <--table + some intermediate loop code --->
        <c:forEach var="leg" items="${option.legs}" varStatus="loopCounter3">
            <div>
                <input type="radio" name="rating-${loopCounter2.index}" value="1" class="rating-star" />
                <input type="radio" name="rating-${loopCounter2.index}" value="2" class="rating-star" />
                <input type="radio" name="rating-${loopCounter2.index}" value="3" class="rating-star" />
                <input type="radio" name="rating-${loopCounter2.index}" value="4" class="rating-star" />
                <input type="radio" name="rating-${loopCounter2.index}" value="5" class="rating-star" />
            </div>
            <input type="hidden" id="avgRating" name="avgRating" value="${leg.courierProduct.rating}"></input>

            <script>
                var avgRating = $('#avgRating').val();
                $('.rating-star').rating('select', avgRating);
            </script>
        </c:forEach>
</div>

我删除了一些JSP代码以使其变得简单。

这是我的代码。我想通过单击刷新/重新加载脚本标签和 div 内容。

<div id="mydiv"></div>
<a id="refresh">click</a>

<script id="mydiv">
$("#mydiv").css( //some_css )
</script>

<script>
$(function() {
  $("#refresh").click(function() {
     $("#mydiv").load("location.href + " .mydiv")
  })
})
</script>

当jQuery生成新字段时,新字段不能与'ent​​er'一起使用.

这是我的脚本:

咖啡

$('.teaser-form').keyup (e) ->
  if e.keyCode == 13
    $('.add-new-list').click()

form.haml

= f.simple_fields_for :products do |p|
  = render 'product_fields', :f => p 
.gear-item-add
  = link_to_add_association 'add item', f, :gears, class: "btn btn-default add-new-list"

所以jQuery调用link_to_add_association按钮创建下面显示的字段.(第一个字段是初始字段,所以如果按下回车键,则会产生第二个字段和第三个字段...但如果我尝试继续第三个字段并按Enter键,则不会发生任何事情)

_product_field.haml

.nested-fields.gear-patrol
  .col-md-12
    = f.text_field :list, class: 'teaser-form form-control', placeholder: 'testing'

我有以下输入

<input
  id="{{options.elementId}}"
  #awesomplete
  class="c-awesomplete__input dropdown-input"
  [formControl]="control"
  [type]="customType"
  [label]="options.label"
  (click)="toggleDropdown()"
  (change)="changed($event)">

使用awesomplete jquery插件。当我选择或写入一个值时，它不会触发更改的事件。而且我不知道为什么，除非我在输入组件之外单击。如果在输入之外单击，它将触发更改。但是，我希望一旦从下拉列表中选择一个值或编写一些内容，它就会触发。

  @ViewChild("awesomplete", {static: false}) public awesompleteRef: ElementRef;
  @Input() public control: FormControl;
  @Input() public options: IAwesompleteOptions;

  public awesomplete: Awesomplete;

  constructor() { }

  ngOnInit() {
    this.control.enable();
  }

  ngAfterViewInit() {
    this.awesomplete = new Awesomplete(this.awesompleteRef.nativeElement, this.options);

  }

  public toggleDropdown(): void {
    this.awesomplete.evaluate();
    this.awesomplete.open();
  }

  public clearText(): void {
    this.control.setValue("");
  }

  public changed($event): void {
    console.log("I've changed");
  }