小编Mar*_*nbu的帖子

反应| 如何检测页面刷新(F5)

我正在使用React js.我需要检测page refresh.当用户点击刷新图标或按F5时,我需要找出该事件.

我尝试使用javascript函数进行stackoverflow发布

我用javascript函数beforeunload仍然没有运气.

onUnload(event) { 
  alert('page Refreshed')
}

componentDidMount() {
  window.addEventListener("beforeunload", this.onUnload)
}

componentWillUnmount() {
   window.removeEventListener("beforeunload", this.onUnload)
}

Run Code Online (Sandbox Code Playgroud)

在这里我有关于stackblitz的完整代码

javascript browser page-refresh reactjs

Mar*_*nbu

lucky-day

10
推荐指数

6
解决办法

2万
查看次数

响应式文件管理器将图像打开为图库

我在我的项目中使用响应式文件管理器进行Web文件管理.它工作正常.

问题

我的问题是当我打开图像时,它以灯箱模式显示预览.如何使Image像图像画廊一样在Image之间导航.

<a class="tip-right preview" title="<?php echo trans('Preview')?>" data-url="<?php echo $src;?>" data-toggle="lightbox" href="#previewLightbox">
  <i class=" icon-eye-open"></i>
</a>

Run Code Online (Sandbox Code Playgroud)

这里是一个代码JS代码,它在lightbox modal文件中

r.on("click", ".preview", function() {
  var e = jQuery(this);
  return 0 == e.hasClass("disabled") && jQuery("#full-img").attr("src", decodeURIComponent(e.attr("data-url")))

Run Code Online (Sandbox Code Playgroud)

HTML

<div id="previewLightbox" class="lightbox hide fade"  tabindex="-1" role="dialog" aria-hidden="true">
    <div class='lightbox-content'>
        <img id="full-img" src="">
    </div>
</div>

Run Code Online (Sandbox Code Playgroud)

在这里小提琴

html javascript css jquery responsive-filemanager

Mar*_*nbu

2019 06-18

8
推荐指数

1
解决办法

688
查看次数

反应 | 模态输入字段自动对焦

我正在为我的项目使用React和ant design。

我有一个 Popover，它有一个按钮。当用户单击按钮时它显示带有输入字段的模式

问题

当我单击 Show Modal Button 时，自动对焦不起作用，并且弹出框也没有隐藏

我试过 HTML5 autoFocus

<textarea autoFocus></textarea>

Run Code Online (Sandbox Code Playgroud)

但它没有用。我有关于stackblitz 的完整代码

autofocus reactjs

Mar*_*nbu

lucky-day

6
推荐指数

3
解决办法

2万
查看次数

反应 | localeCompare 排序与空值

我正在使用React ant design table。在该表中，我试图通过使用localeCompare它显示类型错误来对空值进行排序。

JSON

const data = [{
  key: '1',
  name: null,
  age: 32,
}, {
  key: '2',
  name: 'Jim Green',
  age: '32',
}, {
  key: '3',
  name: 'Joe Black',
  age: 32,
}];

Run Code Online (Sandbox Code Playgroud)

当我排序时，我收到如下错误：

 TypeError: Cannot read property 'localeCompare' of null

Run Code Online (Sandbox Code Playgroud)

我在代码沙盒上有完整的代码

javascript sorting reactjs antd

Mar*_*nbu

lucky-day

6
推荐指数

2
解决办法

3763
查看次数

3列垂直居中连续Bootstrap 3

我在静态网站中使用Bootstrap 3.在页脚中,我col-lg-4连续有3列.

我的页脚看起来像:

我需要的是有3列的行的中心,如下所示:

这是我的代码:

<!-- libraries for demo: -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<!-- actual code: -->
<div class="container">
    <div class="row">
        <div class="col-xs-4">
            <ul class="links">
                <li><a>Sub Menu</a></li>
                 <li><a>Sub Menu</a></li>
                 <li><a>Sub Menu</a></li>
                 <li><a>Sub Menu</a></li>
           </ul>
        </div>
        <div class="col-xs-4">
            <ul class="links">
                <li><a>Sub Menu</a></li>
                 <li><a>Sub Menu</a></li>
                 <li><a>Sub Menu</a></li>
                 <li><a>Sub Menu</a></li>
           </ul>
        </div>
        <div class="col-xs-4">
            <ul class="links">
                <li><a>Sub Menu</a></li>
                 <li><a>Sub Menu</a></li>
                 <li><a>Sub Menu</a></li>
                 <li><a>Sub Menu</a></li>
           </ul>
        </div>
    </div>
</div>

Run Code Online (Sandbox Code Playgroud)

小提琴: 这里

css twitter-bootstrap

Mar*_*nbu

2015 11-08

5
推荐指数

1
解决办法

184
查看次数

如何限制jQuery UI连接的列表拖放到单个方向

我正在使用jQuery UI Connectedlist

在这里拖放从左到右以及从右到左都可以正常工作。

如何禁用从右到左？从左到右，它只能工作一种方式。

我还需要排序以使ul黄色项目（如灰色项目）仍能正常工作。

$(function() {
    $( "#sortable1, #sortable2" ).sortable({
      connectWith: ".connectedSortable"
    }).disableSelection();
  });

Run Code Online (Sandbox Code Playgroud)

#sortable1, #sortable2 {
    border: 1px solid #eee;
    width: 142px;
    min-height: 20px;
    list-style-type: none;
    margin: 0;
    padding: 5px 0 0 0;
    float: left;
    margin-right: 10px;
  }
  #sortable1 li, #sortable2 li {
    margin: 0 5px 5px 5px;
    padding: 5px;
    font-size: 1.2em;
    width: 120px;
  }

Run Code Online (Sandbox Code Playgroud)

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Sortable - Connect lists</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" …

Run Code Online (Sandbox Code Playgroud)

javascript jquery drag-and-drop jquery-ui jquery-ui-sortable

Mar*_*nbu

2016 02-18

5
推荐指数

1
解决办法

711
查看次数

Ant Design Table 扩展更改 CSS 类 | 反应

我在我的项目中使用ant design。我在那里使用DataTable。

它具有行扩展功能。

问题

当用户展开子行时，需要更改父行背景颜色，或者需要为该行添加 css 类。

在这里小提琴

我已经创建了onExpand表的功能。

  onExpand = (expanded, record) => {
    alert(expanded);
    console.log('onExpand', expanded, record);   }

Run Code Online (Sandbox Code Playgroud)

TIA

html css datatables reactjs antd

Mar*_*nbu

2018 03-06

5
推荐指数

1
解决办法

7033
查看次数

反应 | 多个动态选择框的单个onchange方法

我收到来自 API 的响应，如下所示json。通过使用该响应，我正在生成动态select.

问题： 无法为不同的选择框选择不同的值。我正在努力通过状态来实现。在这种情况下如何动态声明状态。

JSON

const jsonFields = {
  fields: [
    { name: "sex", value: ["m", "f"] },
    { name: "age", value: ["10", "20"] }
  ]
};

Run Code Online (Sandbox Code Playgroud)

注意：我不知道 json 键名，例如性别和年龄。名称将是动态的

选择更改：

handleChange = event => {
        this.setState({ [event.target.name]: event.target.value });
    };

Run Code Online (Sandbox Code Playgroud)

加载字段：

loadfields = () => {
    const FieldsArray = [];
    let FieldsData = jsonFields.fields;
    FieldsData.forEach((val, index) => {
      let FieldsDatavalue = val.value;
      FieldsArray.push(
        <FormControl>
          <InputLabel htmlFor="controlled-open-select">{val.name}</InputLabel>
          <Select
            value=""
            onChange={this.handleChange}
            inputProps={{
              name: "age"
            }}
          > …

Run Code Online (Sandbox Code Playgroud)

select reactjs react-redux

Mar*_*nbu

lucky-day

5
推荐指数

1
解决办法

1448
查看次数

React 在异步调用中调度方法

如何在反应异步调用中调度 redux 函数。当我调用 dispatch function 时dispatch(updatingcontact()，我收到了 dispatch 未定义的错误。

const UpdateContact = async (URL, method, type, address) => {
dispatch(updatingcontact()
const APIResponse = await fetch(URL, {
    method: POST,
    headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json',
    },
    body: JSON.stringify({
        "webContacts": {
            "address": address
        }
    })
})
    .then(response => {
        if (!response.ok) {
            return Promise.reject(response.statusText);
        }
        return response.json();
    })
    .then(status => {
        return status
    })
    .catch(error => {
        console.log(error);
    });
}

Run Code Online (Sandbox Code Playgroud)

我只想调用updatingcontact()里面的函数UpdateContact并调用reducer在UI中显示更新消息。

function updatingcontact() {
return {
    type: …

Run Code Online (Sandbox Code Playgroud)

asynchronous middleware reactjs redux

Mar*_*nbu

lucky-day

5
推荐指数

1
解决办法

3335
查看次数

Revslider滑块图像数据转换用于左右导航

在 Revslider 中，当我单击左侧导航箭头图像应来自左侧，当我单击右侧箭头图像应来自右侧

现在我正在使用下面的数据转换，每个图像 data-transition='parallaxtoright'图像都来自右侧，即使我单击左箭头图像也来自右侧

html代码在这里：

<div class="fullwidthbanner">
<li data-transition="parallaxtoright" data-slotamount="10" data-speed="100"  data-masterspeed="300">

    <!-- THE MAIN IMAGE IN THE FIRST SLIDE -->
    <img src="img/slideshow/1.jpg">

</li>
</div>

Run Code Online (Sandbox Code Playgroud)

jQuery 脚本在这里：

        jQuery('#rev_slider_4').show().revolution({
        dottedOverlay: 'none',
        delay: 1500,
        startwidth: 585,
        startheight: 390,

        hideThumbs: 200,
        thumbWidth: 200,
        thumbHeight: 50,
        thumbAmount: 2,


        navigationType: "bullet",
        navigationArrows: "solo",
        navigationStyle: "round",

        touchenabled: 'on',
        onHoverStop: 'on',

        navigationHAlign: "center",
        navigationVAlign: "bottom",
        navigationHOffset: 0,
        navigationVOffset: 20,

        soloArrowLeftHalign: "left",
        soloArrowLeftValign: "center",
        soloArrowLeftHOffset: 20,
        soloArrowLeftVOffset: 0,

        soloArrowRightHalign: "right",
        soloArrowRightValign: "center",
        soloArrowRightHOffset: 20,
        soloArrowRightVOffset: 0, …

Run Code Online (Sandbox Code Playgroud)

html javascript jquery revolution-slider

Mar*_*nbu

lucky-day

4
推荐指数

1
解决办法

4328
查看次数

CSS 自动换行不适用于 <a> 标签

我正在使用Word-wrap:brakword标签：a。如果溢出width:100px;

tag:a 的样子：

如何标记：a 应该是：

我的代码看起来像：

div{
    width: 50px;
}
.GreenBtn {
    background-color: #6aae12;
    border: 1px solid #539102 !important;
    color: #FFFFFF !important;
    cursor: pointer !important;
}
.buttonGreen {
    font-family: 'Roboto';
    border: 1px #ddd solid;
    background: #6AAE12;
    color: #FFF;
    /* margin-bottom: 10px; */
    padding: 7px 12px;
    transition: color 300ms ease-in-out 0s, background-color 300ms ease-in-out 0s, background-position 300ms ease-in-out 0s;
}

Run Code Online (Sandbox Code Playgroud)

<div >
  <a class="GreenBtn buttonGreen" style="text-decoration: none;" href="#">
    <span> Bestellung anzeigen </span>
  </a>
</div>

Run Code Online (Sandbox Code Playgroud)

html css word-wrap

Mar*_*nbu

lucky-day

4
推荐指数

1
解决办法

1194
查看次数

jQuery-bootgrid如何仅在Mobile和Tab中隐藏列

我想在Tab中隐藏数据列.我提到了Bootgrid文档.

在列设置中我找到了.

data-visible="false"

Run Code Online (Sandbox Code Playgroud)

它也隐藏了PC中的数据列.我需要类似的东西

 .hidden-xs, .hidden-sm

Run Code Online (Sandbox Code Playgroud)

jquery jquery-plugins twitter-bootstrap jquery-bootgrid

Mar*_*nbu

2015 07-24

3
推荐指数

1
解决办法

1637
查看次数

图像上的Bootstrap叠加文本

我试图使用Bootstrap在Image上显示叠加文本.我审阅了Stack Overflow问题和答案.但Overlay不适合Image.我不知道答案中我错过了什么

我曾尝试过这里的小提琴

谢谢

HTML

<div class="container">
   <div id="DivOurProducts" class="row">
      <div class="col-lg-3 col-md-3 col-xs-3 col-sm-3 wrapper">
         <a href="/Article/Overview/1">
            <div class="fixOverlayDiv">
               <img alt="offer banner1" class="category-banner img-responsive" src="http://placehold.it/300x300">
               <div class="OverlayText">Text Here</div>
            </div>
         </a>
      </div>
      <div class="col-lg-3 col-md-3 col-xs-3 col-sm-3 wrapper">
         <a href="/Article/Overview/2">
            <div class="fixOverlayDiv">
               <img alt="offer banner1" class="category-banner img-responsive" src="http://placehold.it/300x300">
               <div class="OverlayText">Text Here</div>
            </div>
         </a>
      </div>
      <div class="col-lg-3 col-md-3 col-xs-3 col-sm-3 wrapper">
         <a href="/Article/Overview/3">
            <div class="fixOverlayDiv">
               <img alt="offer banner1" class="category-banner img-responsive" src="http://placehold.it/300x300">
               <div class="OverlayText">Text Here</div>
            </div>
         </a>
      </div>
      <div …

Run Code Online (Sandbox Code Playgroud)

html css overlay twitter-bootstrap

Mar*_*nbu

2017 05-23

3
推荐指数

1
解决办法

7793
查看次数