小编And*_*isi的帖子

在悬停时使用XML内容更新DIV

我想要做的事情的概念相当简单.我有一个通过XSLT从XML文档加载的公司徽标网格,每个徽标都有自己唯一的公司配置文件链接.

我在页面上有一个单独的div,本质上是一个"预览"框.我想要做的是:

我滚动一个徽标,它将公司名称和简短描述加载到预览div中.此内容通过XML加载.

我一直在搞乱Jquery load()函数,将目标文档更改为在Hover上加载 - 它几乎得到了我想要的东西,但它将整个目标XML文档加载到div中.

如何将此目标XML数据分成单独的div?(我的风格不同)我假设我会以某种方式使用Ajax.我想将<name>节点加载到name_div中,将<desc>节点加载到description_div中,并在hover上更新它们.在此先感谢您的帮助!

以下是我正在使用的代码的一些示例:

portfolio.xml文件(此文件是我的主页面,显示网格和预览div,示例使用3家公司):

<portfolio>
    <company>
        <name>ABC Company</name>
        <sdesc>Consumer products</sdesc>
        <logo-thumb>abcco.jpg</logo-thumb>
        <link>abcco.xml</link>
    </company>

    <company>
        <name>DEF Company</name>
        <sdesc>Communications firm</sdesc>
        <logo-thumb>defco.jpg</logo-thumb>
        <link>defco.xml</link>
    </company>
    <company>
        <name>GHI Corporation</name>
        <sdesc>Electronic products</sdesc>
        <logo-thumb>ghico.jpg</logo-thumb>
        <link>ghico.xml</link>
    </company>
</portfolio>
Run Code Online (Sandbox Code Playgroud)

以下XSLT在页面上显示该代码:

<xsl:for-each select="portfolio/company">
     <xsl:sort select="name" />

       <div class="invest-port-thumb">
         <a>
         <xsl:attribute name="href">
              <xsl:value-of select="link" />
         </xsl:attribute>

         <img>
         <xsl:attribute name="src">
              <xsl:value-of select="logo-thumb" />
         </xsl:attribute>
         </img>
         </a>
       </div>

</xsl:for-each>
Run Code Online (Sandbox Code Playgroud)

这是"预览div"的HTML结构:

<div id="preview">

<div id="preview-name"> [Name to display here] </div>
<div id="preview-desc"> [Description to …
Run Code Online (Sandbox Code Playgroud)

javascript xml ajax jquery

6
推荐指数
1
解决办法
3094
查看次数

Coffeescript + Browserify + Gulp + Uglify

几乎一整天都在这一个,我无法弄清楚如何正常工作.正如主题所暗示的那样,我有一段时间让这个设置正常工作.

我有一个使用Browserify用Coffeescript编写的项目.我正在尝试编写一些Gulp构建任务,这些任务将把输出用于生产....非常标准.

这是我目前的设置gulpfile:

gulp = require 'gulp'
browserify = require 'browserify'
source = require 'vinyl-source-stream'
buffer = require 'vinyl-buffer'
uglify = require 'gulp-uglify'

# Bundle task
gulp.task('bundle', ->

  browserify(
    entries: ['./client/start.coffee']
    extensions: ['.coffee']
  )

  # Apply transforms and bundle
  .transform('coffeeify')
  .bundle()
  .pipe(source('bundle.js'))
  .pipe(buffer())
  .pipe(uglify())
  .pipe(gulp.dest('./build'))
)

# Run the tasks
gulp.task('default', ['bundle'])
Run Code Online (Sandbox Code Playgroud)

现在这个代码在大多数情况下工作得很好.正确运行任务捆绑所有内容,然后运行Uglify,从而生成一个缩小的bundle.js文件.问题是当我运行我的示例HTML页面与JS链接....我在控制台中看到此错误:

Uncaught SyntaxError: Invalid regular expression: /[ªµºÀ-ÖØ-öø-ˈ-ˑˠ-ˤˬˮͰ-ʹͶͷͺ-ͽΆΈ-ΊΌΎ-ΡΣ-ϵϷ-ÒÒŠ-Ô§Ô±-Õ–Õ™Õ¡-Ö‡×-תװ-ײؠ-يٮٯٱ-Û“Û•Û¥Û¦Û®Û¯Ûº-Û¼Û¿ÜÜ’-ܯÝ-ޥޱߊ-ߪߴߵߺࠀ-ࠕࠚࠤࠨࡀ-ࡘࢠࢢ-ࢬऄ-हऽà¥à¥˜-ॡॱ-ॷॹ-ॿঅ-ঌà¦à¦à¦“-নপ-রলশ-হঽৎড়à§à§Ÿ-ৡৰৱਅ-ਊà¨à¨à¨“-ਨਪ-ਰਲਲ਼ਵਸ਼ਸਹਖ਼-ੜਫ਼ੲ-ੴઅ-àªàª-ઑઓ-નપ-રલળવ-હઽà«à« à«¡à¬…-ଌà¬à¬à¬“-ନପ-ରଲଳଵ-ହଽଡ଼à­à­Ÿ-ୡୱஃஅ-ஊஎ-à®à®’-கஙசஜஞடணதந-பம-ஹà¯à°…-ఌఎ-à°à°’-నప-ళవ-హఽౘౙౠౡಅ-ಌಎ-à²à²’-ನಪ-ಳವ-ಹಽೞೠೡೱೲഅ-ഌഎ-à´à´’-ഺഽൎൠൡൺ-ൿඅ-à¶–à¶š-නඳ-රලව-à·†à¸-ะาำเ-ๆàºàº‚ຄງຈຊàºàº”-ທນ-ຟມ-ຣລວສຫອ-ະາຳຽເ-ໄໆໜ-ໟༀཀ-ཇཉ-ཬྈ-ྌက-ဪဿá-á•áš-áá¡á¥á¦á®-á°áµ-á‚ႎႠ-ჅჇáƒáƒ-ჺჼ-ቈቊ-á‰á‰-ቖቘቚ-á‰á‰ -ኈኊ-áŠáŠ-ኰኲ-ኵኸ-ኾዀዂ-ዅወ-ዖዘ-áŒáŒ’-ጕጘ-ášáŽ€-áŽáŽ -á´á-ᙬᙯ-ᙿáš-áššáš -ᛪᛮ-ᛰᜀ-ᜌᜎ-ᜑᜠ-ᜱá€-á‘á …
Run Code Online (Sandbox Code Playgroud)

javascript coffeescript browserify gulp

6
推荐指数
1
解决办法
1615
查看次数

是否有可能用CSS制作这个?

带圆圈的div,包含投影

有没有一个很好的方法来使用HTML/CSS?基本上是一个div,边缘有一个"凹凸"的圆圈.这部分很容易使用伪类,但我的问题是使投影将其视为形状的一部分.

当我分别对圆圈应用阴影时,它不能可靠地工作.我知道有办法做到这一点..但我不确定浏览器的支持是什么.

你们建议什么是解决这个问题的最佳方法?谢谢!

html css css3 css-shapes

5
推荐指数
1
解决办法
218
查看次数

使用CSS将顶部和底部边框添加到一组选定元素

所以我有一个搜索结果网格.这些结果是可选择的,当它们被选中时,我会添加class='selected'它们.

可以有多组结果(通过命令/按住Ctrl键单击行来完成).根据结果​​组,我的意思是选择的连续元素.我想要做的是,只将顶部边框添加到任何给定的一组选定结果中的第一个,并将底部边框添加到给定组的最后一个项目.

使用CSS有一个很好的方法吗?还是我将不得不申请.first.last各组内?

例如,考虑这个近似的HTML(行数不完全匹配):

<ul>
    <li>Gray row</li>
    <li class="selected">Blue row - should have border-top-color only</li>
    <li class="selected">Blue row - should have NO border-top-color or border-bottom-color</li>
    <li class="selected">Blue row - should have border-bottom-color only</li>
    <li>Gray row</li>
    <li>Gray row</li>
    <li class="selected">Blue row - should have border-top-color and border-bottom-color</li>
</ul>
Run Code Online (Sandbox Code Playgroud)

这就是我想要它的样子.这是在Chrome Devtools中伪造的.

伪造它看起来应该是什么样的视觉效果

css css-selectors css3

3
推荐指数
1
解决办法
221
查看次数