小编Fra_cia的帖子

为我的网络应用程序制作自定义右键单击上下文菜单

我有一些网站,如google-docs和map-quest,当你右键单击时会有自定义下拉菜单.他们以某种方式覆盖了浏览器下拉菜单的行为,我现在确切地知道他们是如何做到的.我找到了一个jQuery插件来做到这一点,但我仍然对一些事情感到好奇:

这是如何运作的？浏览器的下拉菜单是否实际被覆盖,或者效果是否只是模拟？如果是这样,怎么样？
这个插件抽象了什么？幕后发生了什么？
这是实现这种效果的唯一方法吗？

自定义上下文菜单图像

查看几个自定义上下文菜单

javascript jquery contextmenu jquery-plugins right-click

123
推荐指数

5
解决办法

13万
查看次数

IE和Firefox - 自定义下拉菜单无法删除原生箭头

我正在尝试创建自定义下拉控件,我需要隐藏本机控件中的箭头.我正在使用以下内容CSS,适用于Chrome和Safari,但不适用于Mozilla和IE.

select.desktopDropDown
{
    appearance: none;
    -moz-appearance:none; /* Firefox */
    -webkit-appearance:none; /* Safari and Chrome */
}

Run Code Online (Sandbox Code Playgroud)

这是[jsfiddle] [1].

css internet-explorer mozilla custom-controls

32
推荐指数

2
解决办法

7万
查看次数

PHP结束标记删除换行符

我正在做一个实验,一个像SLIM或Jade这样的html预处理器.

这是似乎正确的PHP代码:

nav
  ul id: "test"
    li
      @<?= $Var; ?>
    li
      @About
    li
      @Contact

Run Code Online (Sandbox Code Playgroud)

这是预期的预处理html(是的,$ Var =="Test"):

nav
  ul id: "test"
    li
      @Test
    li
      @About
    li
      @Contact

Run Code Online (Sandbox Code Playgroud)

但是,在浏览器中我得到这个错误的文本作为预处理器html:

nav
  ul id: "test"
    li
      @Test    li
      @About
    li
      @Contact

Run Code Online (Sandbox Code Playgroud)

最后,有两种方法可以使其正确.

手动添加分隔线:

nav
  ul id: "test"
    li
      @<?= $Var . "\n"; ?>
  li
    @About
  li
    @Contact

Run Code Online (Sandbox Code Playgroud)

在PHP结束标记之后写一个空格(??).

为什么是第一种情况,<?= $Var; ?>忽略关闭PHP标记后的换行符？我真的找不到任何东西,因为谷歌带来了太多的结果,为什么你应该忽略我做的每一次搜索的结束标记,而不是我想要找到的.

html php preprocessor line-breaks

9
推荐指数

1
解决办法

1364
查看次数

在同一页面中组合特定页面样式和全局样式时的性能

我的主要目标是允许尽可能快地加载几个页面.为此,我想利用缓存和一种"特殊技术",作为后备,依赖于标准缓存.

结构体

在后端我有以下结构.public_html中有一个主页面和几个子页面,每个子页面都有不同的特定css规则.所有最小化文件的创建都是通过脚本完成的,因此没有额外的复杂性.为简单起见,我们假设这是结构,虽然它更复杂:

/public_html
  /index.php
  /style.css    ~50kb
  /min.css      ~100kb
  /subjects
    /index.php
    /style.css      ~20kb
    /min.css        ~10kb
  /books
    /index.php  
    /style.css      ~20kb
    /min.css        ~10kb
  ...

Run Code Online (Sandbox Code Playgroud)

第一个请求

因此,当用户第一次在子页面上输入时,他们将收到此HTML代码:

<!DOCTYPE html>
<html>
  <head>
    <link href="/subjects/min.css" rel="stylesheet" type="text/css">
  </head>
  <body>
    All the body here
    <link href="/min.css" rel="stylesheet" type="text/css">
  </body>

Run Code Online (Sandbox Code Playgroud)

如您所见,用户在一个小文件中加载标题中该页面所需的所有css代码.请注意,这/subjects/min.css比/min.css第一个加载更快的请求要小得多.然后,在完整的html和css正确加载后,/min.css将开始加载.此文件包含所有子页面样式.

请注意,将标记置于标记<link>内是合适的<body>,即使它不起作用,也没有问题,因为已经加载了特定于页面的样式.我为什么要在这里加载？继续阅读:

以下要求

对于该会话的第二个及后续请求,用户将收到此html代码:

<!DOCTYPE html>
<html>
  <head>
    <link href="/min.css" rel="stylesheet" type="text/css">
  </head>
  <body>
    All the body here …

Run Code Online (Sandbox Code Playgroud)

html css php performance load-time

9
推荐指数

2
解决办法

570
查看次数

我需要在2016年删除事件监听器吗？

这个问题在2011年得到了回答.然而,网络场景已经发生了相当大的变化,现在IE6和IE7已经淘汰,IE8-10几乎没有出现(每个低于1%),只有IE11仍在那里.

那么,在2016年,您是否需要手动删除事件侦听器以避免内存泄漏？请考虑只有IE11的答案.我问,因为我创建了一个小型库作为jQuery的替代品,并且很想知道我是否必须先手动删除它们.当然问题是使用vanilla javascript,而不是jQuery.

javascript events cross-browser dom-events

7
推荐指数

1
解决办法

1532
查看次数

动态渲染 mathjax

我想用 MathJax 显示公式并用 CKEditor 的数学公式编辑它们。但是，当我从编辑模式切换到显示模式时，公式显示为空白（最初并在编辑模式下正确显示）。我已经能够将它减少到一个小的 jsfiddle：

JSFiddle

重现它的步骤：

输入JSFiddle。查看公式如何正确显示。
单击Edit按钮和文本中的某处。您将能够在 TeX 和周围文本中编辑公式。注意：我在 jsfiddle 中使用没有数学公式插件的 CDN，但它不会影响行为。
单击显示矩形中的空白处以隐藏 CKEditor 实例。
现在您可以单击该Save按钮。如您所见，公式不再显示。

但是，如果您检查元素，您将看到步骤 1 中的初始代码和此步骤之后的代码是相同的，但现在未显示。

HTML代码：

<div id = "fullarticle" contenteditable = "false">
    <p>Some text</p>
    <span class = "math-tex">
        \(x = {-b \pm \sqrt{b^2-4ac} \over 2a}\)
    </span>
    <p>Some more text</p>
</div>
<button class = "edit">Edit</button>
<button class = "save">Save</button>

Run Code Online (Sandbox Code Playgroud)

javascript代码：

$(".edit").click(function(){
  $(".math-tex").each(function(index){
    $(this).html("\\(" + $(this).find("script").html() + "\\)");
    });
  $("#fullarticle").attr("contenteditable", "true");
  CKEDITOR.inline('fullarticle');
  });

$(".save").click(function(){
  var mytext …

Run Code Online (Sandbox Code Playgroud)

html javascript jquery ckeditor mathjax

6
推荐指数

1
解决办法

6105
查看次数

从mysql查询中打印一个随机行

我一直在寻找一种创建协作翻译小部件的方法.所以我有一个mysql数据库和表(称为翻译),以及一个允许用户一次翻译一个页面的小脚本.

但我不太相信我的剧本.我觉得它不够高效.首先,mysql获取所有具有空"en"列的行,然后通过屏幕显示其中一个行.有没有其他方法这样做？这是代码:

//Retrieve all the data from the "translations" table
$result = mysql_query("SELECT * FROM translations WHERE en IS NULL OR en=''") or die(mysql_error());

$Randnum=rand(0,mysql_num_rows($result)-1); //Gets a random number between 0 and the maximum number of rows
$i=0;   //Start to 0
while($Col = mysql_fetch_array($result))  //While there are rows to evaluate
    {
    if ($i==$Randnum)
        {
        echo "\"".$Col['es']."\"<br><br>Translate it to English: <br>";
        }
    $i++;
    }

Run Code Online (Sandbox Code Playgroud)

我正在寻找类似"echo $ Col [$ Randnum] ['es']"或"echo $ Col. $ Randnum ['es']"的内容,而不是使用整个while循环来打印单个随机行.我该如何实现呢？如果只是优化问题.如果你可以带一个脚本或想法来分配$ Col只有一行随机数和空'en'col,那就更好了!(我认为最后一点不可能).'en'行是文本,所以我不知道如何实现我见过的其他方法,因为他们使用ORDER BY编号.

php mysql optimization

5
推荐指数

1
解决办法

1210
查看次数

URL.createObjectURL() 很慢

我创建了库uwork，但是启动每个进程都需要一些时间，因此它不适合实时应用程序。通过进行一些性能基准测试，我得到了这个片段来说明问题：

let external = (new Date()).getTime();
let blob = new Blob([`
  let internal = new Date();
  console.log("Creation:", internal - ${external} + 'ms');
`], {"type": "text\/plain"});
let file = URL.createObjectURL(blob);
let ww = new Worker(file);

Run Code Online (Sandbox Code Playgroud)

创建文件和 Web Worker 需要 50-400 毫秒之间的任何时间。有什么办法可以优化这个吗？为什么需要这么长时间？

这对于“长”处理时间来说是完全可以的，因为启动时间可以忽略不计，但对于视频分析等实时应用程序来说就不行了，我想以至少 10fps（100ms/运行）的速度应用它。

编辑

经过一些测试后，这也需要 50-400 毫秒，所以我强烈认为是URL.createObjectURL()（或new Blob()）花费了这一时间，而不是 Web Worker 本身的创建：

let external = (new Date()).getTime();
let blob = new Blob([external], {"type": "text\/plain"});
let file = URL.createObjectURL(blob);
fetch(file).then(res => res.text()).then(file => { …

Run Code Online (Sandbox Code Playgroud)

javascript parallel-processing real-time web-worker

5
推荐指数

0
解决办法

2455
查看次数

当有__construct()元素时,将类转换为函数

我正在学习PHP(不断),我前段时间创建了一个处理翻译的课程.我想模仿gettext但是从数据库中获取翻译的字符串.但是,现在我再次看到它,我不喜欢它,作为一个类,我需要使用它$Translate->text('String_keyword');.我不想要使用,$T->a('String_keyword');因为那完全不直观.

我一直在思考如何使用简单的_('String_keyword')gettext样式调用它,但是从我从SO中学到的东西,我还没有找到一个"很好"的方法来实现这一点.我需要以某种方式将默认语言传递给函数,我不想每次调用它时都传递它_('String_keyword', $User->get('Language')).我也不想在_()函数中包含用户检测脚本,因为它只需要运行一次而不是每次运行.

最简单的一个办法是使用全局变量,但是我在这里了解到,他们是完全,彻底禁止(会是这样,我唯一的情况下可以使用它们？),那么我认为DEFINE变量与用户的语言一样define ( USER_LANGUAGE , $User->get('Language') ),但它似乎与全球一样.这是我可以看到的两个主要选项,我知道还有其他一些方法,比如依赖注入,但它们似乎为这么简单的请求添加了太多的复杂性,而我还没有时间深入研究它们.

我正在考虑首先创建一个包装器来测试它.像这样的东西:

function _($Id, $Arg = null)
  {
  $Translate = new Translate (USER_LANGUAGE);
  return $Translate -> text($Id, $Arg)
  }

Run Code Online (Sandbox Code Playgroud)

这是翻译代码.在创建之前检测语言并将其传递给对象.

注意:这是旧代码 不要$Translate->text('String_keyword');在新代码中使用函数.它们不再被维护,并且已经开始弃用.看到 红色的盒子？了解准备好的语句,并使用 PDO或MySQLi - 本文将帮助您确定哪些.如果您选择PDO,这是一个很好的教程.

// Translate text strings
// TO DO: SHOULD, SHOULD change it to PDO! …

Run Code Online (Sandbox Code Playgroud)

php oop class function

4
推荐指数

1
解决办法

194
查看次数

padding-top 不影响 Chrome

在 Chrome 中看到的问题说明：

在 chrome 中看到的问题

预期行为和 FF 之一：

在 Firefox 中看到的预期行为

我们正在制作一个页面，Hybrid Orange，但 padding-top 似乎不会影响Chrome 中div Tecnología的高度。我希望 div 为 100% 高度，因此滚动的第一个 px 是下一部分。我不确定是什么导致这种行为在 FF 和 Chrome 中有所不同。

HTML 的相关部分：

<nav>
  <header id = "bar">
    [...]
  </header>
  <ul>
    [...]
  </ul>
</nav>

<div id = "inicio">
  [...]
</div>

<div id = "tecnologia">
  <div class = "v_center">
    <div class="container clearfix">
      <div id="tecno-web" class="tecno-div">
      [...]
      </div>
    </div>
  </div>
</div>

Run Code Online (Sandbox Code Playgroud)

css的相关部分：

nav {
  position: absolute;
  top: 60%;
  z-index: 100;
  width: 80%;
  height: 4em;
  padding: 0 10%;
  /* …

Run Code Online (Sandbox Code Playgroud)

html css firefox height google-chrome

4
推荐指数

1
解决办法

1732
查看次数

标签统计

html ×4

php ×4

css ×3

contextmenu ×1

cross-browser ×1

custom-controls ×1

google-chrome ×1

internet-explorer ×1

jquery-plugins ×1

line-breaks ×1

oop ×1

optimization ×1

parallel-processing ×1

performance ×1

preprocessor ×1

right-click ×1

«
1
2
»