我如何让jscolor colorpicker在div上工作？ [英] How can I make jscolor colorpicker to work on a div?

问题描述

我正在使用 jscolor colorpicker ，它只能附加到按钮元素或输入元素上。我想用它来做div。我试过这种方式 -

https://jsfiddle.net/anuranpal/Lead7c7q/ 43 /

CSS

  edit-color-container {
 border：1px solid gainsboro; 
 height：70px; 
 width：70px; 
 text-align：center; 
} 
 
 .select-button {
 background：none！important; 
 border：none; 
填充：0！重要; 
光标：指针; 
 display：block; 
宽度：100％; 
身高：100％; 
 -moz-user-select：none; 
 -webkit-user-select：none; 
 / *这将在未来用于QtWebKit * / 
 -webkit-user-drag：none; 
} 
 
 .selected-color-container {
 -moz-border-radius：50px / 50px; 
 -webkit-border-radius：50px 50px; 
 border-radius：50px / 50px; 
 width：35px; 
 height：35px; 
背景：＃DF068C; 
 display：inline-block; 
 vertical-align：top; 
 margin：auto; 
 margin-top：5px; 
职位：亲属; 
} 
  

HTML $ b

 < div class =edit-color-container> 
< input id =selected-color-valuetype =hiddenvalue =＃DF068C/> 
  {width：150，height：150，valueElement：'selected-color- 
 value '，styleElement：'selectedColor'，borderWidth：0，borderColor：'＃FFF'，
 insetWidth：0，insetColor：'＃FFF'，shadow：false，
 backgroundColor：'＃e6e7e9'，borderRadius ：2，zIndex：'2000'}> 
< div class =selected-color-containerid =selectedColor>< / div> 
< div class =uk-text-small uk-text-primary uk-margin-small-topstyle =margin：auto> Edit< / div> 
< / button> 
< / div> 
  

但是在这里我使用了按钮而不是div，它在chrome中创建了一些问题，在圆上，没有任何事情发生，但如果我在圆外点击，颜色选择器会切换。

所以，我想用div代替按钮并打开 colorpicker 当我点击div时。
请帮助。感谢您提前:-)

解决方案

看起来像插件不支持 div ，但是使用它的api，你可以使用代码切换 colorpicker ，如果我得到了你的正确答案，这是我的解决方案：

HTML

 < div class =edit-color-container> ; 
< div id =styleSpanstyle =background-image：none; background-color：rgb（186,243,255）; color：rgb（0,0,0）; 
 onclick =document.getElementById（'color-picker'）。jscolor.show（）>< / div> 
< div id =btnonclick =document.getElementById（'color-picker'）。jscolor.show（）>编辑< / div> 
< input id =color-pickerclass =jscolor {styleElement：'styleSpan'，value：'DF068C'}type =hidden> 
< / div> 
  

CSS

  .edit-color-container {
 border：1px solid gainsboro; 
 height：70px; 
 width：70px; 
 text-align：center; 
} 
 
 #styleSpan {
 width：35px; 
 height：35px; 
 border-radius：50％; 
 margin：5px auto; 
光标：指针; 
} 
 
 #btn {
 cursor：pointer; 
} 
 
 body> div：last-child {
 margin：50px 0 0 20px; 
} 
  

jsfiddle 注意，您可以使用 onclick code>在 edit-color-container 上。

I am using jscolor colorpicker which can only be attached to button element or input element.I want to use it for div.I tried this way-

https://jsfiddle.net/anuranpal/Lead7c7q/43/

CSS

edit-color-container {
    border: 1px solid gainsboro;
    height: 70px;
    width: 70px;
    text-align: center;
}

.select-button {
    background: none!important;
    border: none;
    padding: 0!important;
    cursor: pointer;
    display: block;
    width: 100%;
    height: 100%;
    -moz-user-select: none;
    -webkit-user-select: none;
    /* this will work for QtWebKit in future */
    -webkit-user-drag: none;
}

.selected-color-container {
    -moz-border-radius: 50px/50px;
    -webkit-border-radius: 50px 50px;
    border-radius: 50px/50px;
    width: 35px;
    height: 35px;
    background: #DF068C;
    display: inline-block;
    vertical-align: top;
    margin: auto;
    margin-top: 5px;
    position: relative;
}

HTML

<div class="edit-color-container">
    <input id="selected-color-value" type="hidden" value="#DF068C" />
    <button id="editColor" class="select-button jscolor " data-jscolor="
  {width:150, height:150,valueElement:'selected-color-
  value',styleElement:'selectedColor',borderWidth:0,borderColor:'#FFF', 
   insetWidth:0, insetColor:'#FFF',shadow:false, 
   backgroundColor:'#e6e7e9',borderRadius:2, zIndex:'2000'}">
        <div class="selected-color-container" id="selectedColor"></div>
        <div class="uk-text-small uk-text-primary uk-margin-small-top" style="margin:auto">Edit</div>
    </button>
</div>

But here I have used button instead of div and it is creating some issues in chrome like if I click on the circle,nothing happen but If I click just outside the circle, the color picker toggles.

So, I want to use div instead of button and open the colorpicker when I click on the div. Please help. Thank you in Advance :-)

解决方案

Seems like the plugin doesn't support div, but using its api you can toggle colorpicker using code, if I got you correctly, here is my solution:

HTML

<div class="edit-color-container">
    <div id="styleSpan" style="background-image: none; background-color: rgb(186, 243, 255); color: rgb(0, 0, 0);"
    onclick="document.getElementById('color-picker').jscolor.show()"></div>
    <div id="btn" onclick="document.getElementById('color-picker').jscolor.show()">Edit</div>
    <input id="color-picker" class="jscolor {styleElement:'styleSpan',value:'DF068C'}" type="hidden">
</div>

CSS

.edit-color-container {
    border: 1px solid gainsboro;
    height: 70px;
    width: 70px;
    text-align: center;
}

#styleSpan {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    margin: 5px auto;
    cursor: pointer;
}

#btn {
    cursor: pointer;
}

body > div:last-child {
    margin: 50px 0 0 20px;
}

jsfiddle

Notice that you can use onclick on edit-color-container instead.

这篇关于我如何让jscolor colorpicker在div上工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！