我想要做的事情的概念相当简单.我有一个通过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) 几乎一整天都在这一个,我无法弄清楚如何正常工作.正如主题所暗示的那样,我有一段时间让这个设置正常工作.
我有一个使用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) 有没有一个很好的方法来使用HTML/CSS?基本上是一个div,边缘有一个"凹凸"的圆圈.这部分很容易使用伪类,但我的问题是使投影将其视为形状的一部分.
当我分别对圆圈应用阴影时,它不能可靠地工作.我知道有办法做到这一点..但我不确定浏览器的支持是什么.
你们建议什么是解决这个问题的最佳方法?谢谢!
所以我有一个搜索结果网格.这些结果是可选择的,当它们被选中时,我会添加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 ×2
css3 ×2
javascript ×2
ajax ×1
browserify ×1
coffeescript ×1
css-shapes ×1
gulp ×1
html ×1
jquery ×1
xml ×1