小编Mir*_*iro的帖子
启用:仅关注键盘使用(或按键)
我想在:focus不需要时禁用,因为我不喜欢当焦点在它上面时我的导航看起来如何.它使用相同的风格,.active令人困惑.但是我不想为使用键盘的人摆脱它.
我正在考虑enabled-focus在标签按下的主体上添加一个类,然后有,body.enabled-focus a:focus{...}但这将为每个具有焦点的元素添加大量额外的CSS.然后在第一次鼠标按下时从主体中删除该类.
我该怎么办呢？有更好的解决方案吗？
推荐指数
解决办法
查看次数
统一排列/分配数组项
我有一个带有type属性的多维关联数组.它看起来像这样:
$data = array(
array( "name" => "SomeName", "type" => "A"),
array( "name" => "SomeName", "type" => "A"),
array( "name" => "SomeName", "type" => "A"),
array( "name" => "SomeName", "type" => "A"),
array( "name" => "SomeName", "type" => "A"),
array( "name" => "SomeName", "type" => "B"),
array( "name" => "SomeName", "type" => "B"),
array( "name" => "SomeName", "type" => "B"),
array( "name" => "SomeName", "type" => "C"),
array( "name" => "SomeName", "type" => "C")
);
我想重新排列它以使项目更均匀地分布(如果可能的话,重复类型的数量最少).它应该如下所示:
array(
array( …推荐指数
解决办法
查看次数
如何使用Jquery序列化多个列表
我有3个可排序的UL和一个简单的jquery/javascript
<ul class="sortable" id="menu1">
<li id="id_1">whatever</li>
<li id="id_2">you</li>
</ul>
<ul class="sortable" id="menu2">
<li id="id_3">wanne</li>
<li id="id_4">put</li>
</ul>
<ul class="sortable" id="menu3">
<li id="id_5">in</li>
<li id="id_6">here</li>
</ul>
$(function() {
$("ul.sortable").sortable({
connectWith: 'ul'
});
});
</script>
LI在UL之间是可拖动的我如何序列化这样我得到例如menu1 [0] = 1&menu1 [1] = 3或者数组或者我可以用什么来保存状态？
推荐指数
解决办法
查看次数
取消设置宽度以恢复为内联html属性“ width = XX”
我正在尝试使图像的大小与属性说明的内容(width=XX)无关，而不与CSS无关。这就是使用UI拖动角将图像调整为85 x 30时Wordpress Html编辑器所设置的内容。但是，该主题具有一些CSS height/width:auto，使其img达到了自然尺寸，我找不到“杀死”的方法。该CSS，因此它恢复为内联。（当然，无需编辑主题CSS）
我尝试了width:unset，inherit但无济于事。有任何想法吗？
/* Untouchable CSS */
.row .col img:not([srcset]) {
width: auto;
}
.row .col img {
height: auto;
}
/*End Untouchable CSS */
img{
width:unset !important; /*doesn't work*/
height:unset !important; /*doesn't work*/
}<div class="row">
<div class="col">
<a href="#"><img width="85" height="30" src="https://placehold.it/340x120/00aaaa/fff/?text=Logo"></a>
</div>
</div>推荐指数
解决办法
查看次数
从商店发出 AJAX 请求
我有 3 个关于 Svelte 商店的问题：
- 如何在商店内发出ajax请求？我尝试使用以下方法：
REPL 演示
//store.js
import { writable } from 'svelte/store';
let data = [];
const apiURL = "https://jsonplaceholder.typicode.com/todos";
async function getData(){
const response = await fetch(apiURL);
data = (await response.json()).slice(0,20);
console.log('Response:', data);
}
getData();
export const testsStore = writable(data);
请求通过，但数据永远不会传递到导出。我见过的所有示例都使用没有 async/await 的静态数据。我也试过return data;，writable(getData());但它返回一个承诺而不是数据本身。
这甚至是将数据从 API 加载到商店的正确方法还是我应该在其他地方进行调用。
我如何以及何时使用
export default testsStore;我尝试从另一个示例中使用它并且它抛出说store.js isn't exporting testsStore
推荐指数
解决办法
查看次数
$(this)在函数中不起作用
以下代码从文件加载html内容(我使用此线程)
<script>
$.fn.loadWithoutCache = function (){
$.ajax({
url: arguments[0],
cache: false,
dataType: "html",
success: function(data) {
$(this).html(data); // This is not working
//$('#result').html(data); //THIS WORKS!!!
alert(data); // This alerts the contents of page.html
}
});
}
$('#result').loadWithoutCache('page.html');
</script>
请告诉我这是什么问题？我希望这是一个愚蠢的东西:)
编辑:正确的代码
<script>
$(document).ready(function() {
$.fn.loadWithoutCache = function (){
var $el = $(this);
$.ajax({
url: arguments[0],
cache: false,
dataType: "html",
context: this,
success: function(data) {
$el.html(data);
}
});
}
$('#result').loadWithoutCache('page.html');
});
</scipt>
谢谢乔恩和大家!
推荐指数
解决办法
查看次数
解释这个绝对位置的css行为
我想知道css中的这种行为是否正常,为什么？我的问题是关于立场:绝对; 我有两个div,第一个包含图像时,它位于绝对位置0底部和右0它粘在页面的末尾(但不是真实页面的结尾,但页面结束显示视图)注意它没有任何具有绝对或固定或相对位置的父级
JSbin Demo
这是一个完整的代码
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
body {
background: #808080;
/*height:1200px;*/
}
.content {
background: rgba(0, 148, 255, 0.69);
/*min-height:400px;*/
width: 900px;
margin: 0 auto;
border: 6px groove #00ff90;
}
h1 {
position: relative;
top: 5px;
right: 5px;
}
p {
/*position: relative;*/
/*top: 150px;*/
/*right: 5px;*/
}
img {
border: 3px groove #0ff;
width: 400px;
position: absolute;
/*top:0px;
right:0px;*/
bottom: 0px;
right: 0px;
}
</style>
</head>
<body>
<div class="content">
<h1>why we should using reletive …推荐指数
解决办法
查看次数
SortableJS - 无法排除项目可拖动和可排序
我已经在这里提交了一个问题，但只是想检查一下您是否可以在这里更快地解决这个问题。
尝试排除某个项目的可拖动性是可行的，但无法排除其可排序性——问题是其他元素可以放置在其后面。
SortableJS 文档似乎没有排除。
以下是使用 jQuery UI 的预期行为：
//jQuery UI
$("#demo .sortable").sortable({
items: "li:not(.exclude)",
cancel: "li.exclude"
});
$("#demo .sortable").disableSelection();
$('.add-new').click(function(){
$(this).prev().clone().insertBefore(this);
});h1{ font-size: 1em; margin:1em}
.sortable { list-style-type: none; margin: 0; padding: 0; width: 260px; overflow:auto; }
.sortable li { background:lightgray; text-align:center; float:left; width:50px; height:50px; margin:0.2em; padding: 0.2em; cursor:move; }
.sortable li.add-new{cursor:default; color:#959595; opacity:0.8; background: white; outline:2px dotted gray}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<h1>jQuery UI</h1>
<div id="demo">
<ul class="sortable">
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
<li class="ui-state-default"><span …推荐指数
解决办法
查看次数
填充父div的剩余宽度(非flexbox或calc)
.alert {
position: absolute;
right: 0;
bottom: 20px;
background: red;
padding: 20px;
min-height: 70px;
min-width: 400px;
}
.alert-forgotPassword {
margin-top: 10px;
width: 100%;
background: green;
}
.alert-forgotPassword-input-wrapper {
float: left;
}
.alert-forgotPassword-input {
width: 100%;
}
.alert-forgotPassword-button-wrapper {
float: right;
}<div class="alert">
<div>
<div class="alert-forgotPassword-input-wrapper">
<input class="alert-forgotPassword-input" type="text" size="" placeholder="your.email@company.com">
</div>
<div class="alert-forgotPassword-button-wrapper">
<button>Reset Password</button>
</div>
</div>http://codepen.io/basickarl/pen/WwjEqy
上面的代码得到了彼此相邻的div.我希望输入框的宽度为100%,以便它总是触摸按钮的侧面,例如下面.
示例如果父div被拉伸更宽:
示例如果父div的宽度较小:
我希望有一个纯粹的css/html解决方案适用于ie9及以上,欢迎对结构进行更改!不过欢迎.
推荐指数
解决办法
查看次数
<input Accept="image/*;capture=camera"... 允许移动设备上的任何文件类型
如何将图像浏览按钮限制为仅白色图像，允许下拉菜单从移动设备上的相机、库、文件中进行选择？
这是发生的事情：
使用时，<input type="file" accept="image/*;capture=camera">
我得到了我需要的下拉菜单，但它不限制图像文件类型 - 它可以是任何内容（*.*）
仅使用<input type="file" accept="image/*" capture>它的图像但没有下拉菜单时。相机直接打开。
如何获取下拉菜单 + image/*？
移动演示。（iPhone 主要需要）：
<p>Drop-down for camera, library, files but all files allowed:</p>
<input type="file" accept="image/*;capture=camera">
<p>Only images allowed but doesn't have drop-down. Opens camera directly:</p>
<input type="file" accept="image/*" capture>目前，我正在使用 JS 来限制非图像，但想知道是否有 html5 原生方式。
推荐指数
解决办法
查看次数
ajaxForm插件在任何<button>上单击提交
看看这个
http://jsbin.com/goyokir/edit?html,output
$(document).ready(function() {
$('#myForm').ajaxForm(function() {
alert("Form was submitted");
});
$('button').click(function(e){
e.preventDefault(); //if removed, it acts as submit button
$('body').append('regular clicked!<br>');
});
});
我的问题是我的表单中有一些<button>内容,当点击它们时,出于某种奇怪的原因,它们就像提交按钮一样.我可以preventDefault用来解决这个问题,但另一个问题是,当你专注于输入并按下输入时,它会触发<button>它找到的第一个,而不是<input type='submit'>
我试着看看插件的来源并修复它,但它超出了我的范围.captureSubmittingElement对我来说似乎很好.
有任何想法吗？
推荐指数
解决办法
查看次数