小编Red*_*ddy的帖子

我正在使用带有Sortable的jQuery UI选项卡,如何在Double Click上重命名？请帮帮我!

小提琴

HTML

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Tab 1</a></li>
    <li><a href="#tabs-2">Tab 2</a></li>
    <li><a href="#tabs-3">Tab 3</a></li>
  </ul>
  <div id="tabs-1">
    <p>Tab Content 1</p>
  </div>
  <div id="tabs-2">
    <p>Tab Content 2</p>
  </div>
  <div id="tabs-3">
    <p>Tab Content 3</p>
  </div>
</div>

jQuery的

$(function() {
    var tabs = $( "#tabs" ).tabs();
    tabs.find( ".ui-tabs-nav" ).sortable({
        axis: "x",
        stop: function() {
            tabs.tabs( "refresh" );
        }
    });
});

在单击<li><a>....</a></li>除最后一个子元素之外的任何元素时,此元素应作为第一个子元素移动到顶部<ul>.

小提琴

描述

默认情况下:

<ul>
    <li><a href="#">01</a></li>
    <li><a href="#">02</a></li>
    <li><a href="#">03</a></li>
    <li><a href="#">04</a></li>
    <li><a href="#">05</a></li>
    <li><a href="#">06 (Last Child)</a></li>
</ul>

如果我点击03,这个列表应该如下所示..

<ul>
    <li><a href="#">03</a></li>
    <li><a href="#">01</a></li>
    <li><a href="#">02</a></li>
    <li><a href="#">04</a></li>
    <li><a href="#">05</a></li>
    <li><a href="#">06 (Last Child)</a></li>
</ul>

但是如果单击最后一个孩子,<li>则不应移动或更改此元素...最后一个孩子应始终保持最后一个.

如何根据具有绝对位置的子元素高度来增加具有相对位置的父元素的高度。

在我下面的示例中，.parent元素的高度显示为0px

PS：我不想使用任何脚本

预期的：

我得到什么：

jsFiddle

HTML：

<div class="parent">
    <div class="child" style="top:20px;">Hello</div>
    <div class="child" style="top:40px;">Some content</div>
    <div class="child" style="top:60px;">Some more content</div>
</div>

CSS：

.parent{position:relative;background:green;height:100%;border:1px solid #000000;width:250px;}
.child{position:absolute;}

我正在使用jQuery UI Droppable Cart Demo插件,我想创建一个旋转木马或箭头一旦Dropped area达到5个元素...如果我点击Arrows,remaning应该显示

小提琴

HTML

<div id="products">
  <h2>Drag</h2>
  <div id="catalog">
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
        <li>Item 6</li>
      </ul>
  </div>
</div>

<div id="cart">
  <h2>Drop Here...</h2>
  <div class="ui-widget-content">
    <ol>
      <li class="placeholder">Add your items here</li>
    </ol>
  </div>
</div>

jQuery的

$(function() {
    $( "#catalog li" ).draggable({
        appendTo: "body",
        helper: "clone"
    });
    $( "#cart ol" ).droppable({
        activeClass: "ui-state-default",
        hoverClass: "ui-state-hover",
        accept: ":not(.ui-sortable-helper)",
        drop: function( event, ui ) {
            $( this ).find( ".placeholder" ).remove();
            $( "<li></li>" ).text( …

我正在研究Bootstrap,我得到了如下图像的要求......

在线演示

需求

我能够得到一切,除了边界高度.边框高度不应该从顶部到底部结束.但棘手的部分是,总高度应该是可点击的...... :(

我得到了什么

HTML

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <ul class="nav navbar-nav">
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
      <li><a href="#">Link 3</a></li>
      <li><a href="#">Link 4</a></li>
    </ul>
  </div>
</nav>

CSS

.navbar-default{background:#005986;}
.navbar{border:0;border-radius:0;}
ul.nav{border-right:1px solid #84B6D0;}
ul.nav li a{border-left:1px solid #84B6D0;color:#fff; }
.navbar-default .navbar-nav>li>a,.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover{color:#fff;}
.navbar-default .navbar-nav>li>a:hover{background:#022E44;}

我正在使用 Highcharts。

在单页中，我有多个Area具有不同数据和标题以及相同图表属性配置的图表。

在线演示

由图1改为图2、图3如下：

• 系列名称
• 系列数据
• 传奇
• 工具提示数据

除了上面的，其他都一样...

如何避免为#chart-1, #chart-2, #chart-3等等编写重复代码并仅配置以上元素？

HTML：

<div id="chart-1" style="height: 200px; width: 500px"></div>
<div id="chart-2" style="height: 200px; width: 500px"></div>
<div id="chart-3" style="height: 200px; width: 500px"></div>

全局初始化：

jQuery(function () {

    Highcharts.setOptions({
        colors: ['#fe5758', '#99cc03', '#33b5e6'],
        chart: {
            style: {
                fontFamily: 'Roboto Light',
                fontWeight: 'normal',
                fontSize: '12px',
                color: '#585858',
            }
        },      
        title: { text: null },
        subtitle: { text:null },
        credits: { enabled: false },
        exporting: { enabled: …

我有两个容器.第一个容器(.links)有锚标记,类名block-1, block-2等等...

第二个容器(.highlight-block)与其他类名相同block-1, block-2......

小提琴

HTML

<div class="links">
    <a href="#" class="lb block-1">Highlight Block 1</a>
    <a href="#" class="lb block-2">Highlight Block 2</a>
    <a href="#" class="lb block-3">Highlight Block 3</a>
    <a href="#" class="lb block-4">Highlight Block 4</a>
    <a href="#" class="lb block-5">Highlight Block 5</a>
    <a href="#" class="lb block-6">Highlight Block 6</a>
</div>

<div class="highlight-block">
    <div class="cb block-1 active">This is Block 1</div>
    <div class="cb block-2">This is Block 2</div>
    <div class="cb block-3">This is Block 3</div>
    <div class="cb block-4">This is Block 4</div> …

我正在使用jQuery - MixItUp组合插件.

如何可以显示默认选项卡的内容为" Icon Tab" 相关的内容,而不是" All"

Tab Active在内容不变的情况下正常工作......

在线演示

jQuery的

$(function () {

  var filterList = {

    init: function () {

      // MixItUp plugin
      // http://mixitup.io
      $('#portfoliolist').mixitup({
        targetSelector: '.portfolio',
        filterSelector: '.filter',
        effects: ['fade'],
        easing: 'snap',
        // call the hover effect
        onMixEnd: filterList.hoverEffect()
      });               

    },

    hoverEffect: function () {

      // Simple parallax effect
      $('#portfoliolist .portfolio').hover(
        function () {
          $(this).find('.label').stop().animate({bottom: 0}, 200, 'easeOutQuad');
          $(this).find('img').stop().animate({top: -30}, 500, 'easeOutQuad');               
        },
        function () {
          $(this).find('.label').stop().animate({bottom: -40}, 200, 'easeInQuad'); …

Visual Studio中的ASP.NET**项目.

我<script>在_Layout.cshtml文件中包含了所有文件,其中包括底部的所有外部脚本文件...但是在所有视图中同时(例如:AboutUs,ContactUs,Products等...),我有页面相关的脚本在页面的底部.

当我呈现页面时,我收到脚本错误,因为页面脚本在jQuery /其他插件之前运行.

我试图将所有插件脚本放在head部分,但我不认为这是个好主意......

现在我的问题是:

虽然我在每个视图中都有页面级脚本,但如何在页面级第一个<script>标记之前放置_Layout.cshtml中的所有外部插件脚本？

代码呈现后的下面的参考图像...

使用_Layout.cshtml如下文件..

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>@ViewBag.Title</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <link rel="stylesheet" href="@Url.Content("~/Content/ui-bootstrap.css")">
    <link rel="stylesheet" href="@Url.Content("~/Content/themes/base/ui-theme.css")">
    <link rel="stylesheet" href="@Url.Content("~/Content/master.css")">
</head>
<body>

    <header>
        <h3>Header 1</h3>
    </header>

    <div id="body">
        @RenderBody()
    </div>

    <footer>
        &copy; copyright
    </footer>

    <script src="@Url.Content("~/Scripts/jquery.min.js")"></script>
    <script src="@Url.Content("~/Scripts/jquery-ui.min.js")"></script>
    <script src="@Url.Content("~/Scripts/clients-init.js")"></script>

</body>
</html>

和我的AboutUs.cshtml页面如下......

@{
ViewBag.Title = "About";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<section>
    <h2>About us</h2>
    <p>Lorem ipsum dolar sit amet...</p>
    <div class="showHide hide">Hello World!</div> …

我more在顶部有链接的员工列表.

如果我点击更多链接,我想获取相关元素的值并显示在底部...

在线演示

请看下面的代码并指导我？

$(document).ready(function(){

  var empName = $(this).closest('.emp-details').find('.ename').text();
  var empDesignation = $(this).closest('.emp-details').find('.edesignation').text();
  $('.more-info').on('click', function(){
    $('#info-container').show();
    $('#info-container #empname').text(empName);
    $('#info-container #designation').text(empDesignation);
  });

});