красивый вид опроса ucoz
Сегодня
я покажу как установить на свой ucoz сайт скрипт, который сделает
дизайн опросов на вашем проекте красивее. Сам дизайн опроса станет похож
на дизайн опросов с DLE.
Я постарался крайне упростить установку.
Просто вставьте этот код в конец кода "Управление дизайном » Опросы"
Code
</font><div class="bbCodeBlock"><div class="codeMessage" style="border: 1px inset; max-height: 200px; overflow: auto;"><br><span class="xml-punctuation"><</span><span class="xml-tagname">style</span><span class="xml-punctuation">></span><span class="css-select-op">.</span><span class="css-selector">progress </span><span class="css-punctuation">{ </span><span class="css-identifier">border</span><span class="css-punctuation">: </span><span class="css-unit">1px </span><span class="css-value">solid </span><span class="css-colorcode">#ccc</span><span class="css-punctuation">; </span><span class="css-identifier">position</span><span class="css-punctuation">: </span><span class="css-value">relative</span><span class="css-punctuation">; </span><span class="css-identifier">display</span><span class="css-punctuation">: </span><span class="css-value">block</span><span class="css-punctuation">; </span><span class="css-identifier">padding</span><span class="css-punctuation">: </span><span class="css-unit">0</span><span class="css-punctuation">; </span><span class="css-identifier">margin</span><span class="css-punctuation">:</span><span class="css-unit">2px </span><span class="css-unit">0</span><span class="css-punctuation">; </span><span class="css-identifier">background</span><span class="css-punctuation">: </span><span class="css-colorcode">#DEDEDE</span><span class="css-punctuation">; </span><span class="css-identifier">background</span><span class="css-punctuation">: </span><span class="css-value">-webkit-gradient</span><span class="css-value">(linear</span><span class="css-select-op">, </span><span class="css-value">left </span><span class="css-value">top</span><span class="css-select-op">, </span><span class="css-value">left </span><span class="css-value">bottom</span><span class="css-select-op">, </span><span class="css-value">from</span><span class="css-value">(</span><span class="css-colorcode">#ccc</span><span class="css-value">)</span><span class="css-select-op">, </span><span class="css-value">to</span><span class="css-value">(</span><span class="css-colorcode">#e9e9e9</span><span class="css-value">)</span><span class="css-value">)</span><span class="css-punctuation">; </span><span class="css-identifier">background</span><span class="css-punctuation">: </span><span class="css-value">-moz-linear-gradient</span><span class="css-value">(top</span><span class="css-select-op">, </span><span class="css-colorcode">#ccc</span><span class="css-select-op">, </span><span class="css-colorcode">#e9e9e9</span><span class="css-value">)</span><span class="css-punctuation">;</span><span class="css-identifier">filter</span><span class="css-punctuation">: </span><span class="css-value">progid</span><span class="css-punctuation">:</span><span class="css-value">DXImageTransform</span><span class="css-select-op">.</span><span class="css-value">Microsoft</span><span class="css-select-op">.</span><span class="css-value">gradient</span><span class="css-value">(startColorstr</span><span class="css-compare">=</span><span class="css-string">'#cccccc'</span><span class="css-select-op">, </span><span class="css-value">endColorstr</span><span class="css-compare">=</span><span class="css-string">'#e9e9e9'</span><span class="css-value">)</span><span class="css-punctuation">;</span><span class="css-identifier">-moz-box-shadow</span><span class="css-punctuation">:</span><span class="css-unit">0 </span><span class="css-unit">1px </span><span class="css-unit">0 </span><span class="css-colorcode">#fff</span><span class="css-punctuation">;</span><span class="css-identifier">-webkit-box-shadow</span><span class="css-punctuation">:</span><span class="css-unit">0 </span><span class="css-unit">1px </span><span class="css-unit">0 </span><span class="css-colorcode">#fff</span><span class="css-punctuation">; </span><br><span class="whitespace"> </span><span class="css-identifier">box-shadow</span><span class="css-punctuation">:</span><span class="css-unit">0 </span><span class="css-unit">1px </span><span class="css-unit">0 </span><span class="css-colorcode">#fff</span><span class="css-punctuation">;</span><span class="css-identifier">-moz-border-radius</span><span class="css-punctuation">: </span><span class="css-unit">4px</span><span class="css-punctuation">;</span><span class="css-identifier">-webkit-border-radius</span><span class="css-punctuation">: </span><span class="css-unit">4px</span><span class="css-punctuation">;</span><span class="css-identifier">border-radius</span><span class="css-punctuation">: </span><span class="css-unit">4px</span><span class="css-punctuation">;</span><span class="css-punctuation">} </span><br><span class="whitespace"> </span><span class="css-select-op">.</span><span class="css-selector">progress_1 </span><span class="css-punctuation">{ </span><br><span class="whitespace"> </span><span class="css-identifier">border</span><span class="css-punctuation">: </span><span class="css-unit">1px </span><span class="css-value">solid </span><span class="css-colorcode">#0078a5</span><span class="css-punctuation">; </span><span class="css-identifier">background-color</span><span class="css-punctuation">: </span><span class="css-colorcode">#5C9ADE</span><span class="css-punctuation">; </span><br><span class="whitespace"> </span><span class="css-identifier">background</span><span class="css-punctuation">: </span><span class="css-value">-moz-linear-gradient</span><span class="css-value">(top</span><span class="css-select-op">, </span><span class="css-colorcode">#00adee </span><span class="css-unit">10%</span><span class="css-select-op">, </span><span class="css-colorcode">#0078a5 </span><span class="css-unit">90%</span><span class="css-value">)</span><span class="css-punctuation">; </span><br><span class="whitespace"> </span><span class="css-identifier">background</span><span class="css-punctuation">: </span><span class="css-value">-webkit-gradient</span><span class="css-value">(linear</span><span class="css-select-op">, </span><span class="css-value">left </span><span class="css-value">top</span><span class="css-select-op">, </span><span class="css-value">left </span><span class="css-value">bottom</span><span class="css-select-op">, </span><span class="css-value">color-stop</span><span class="css-value">(0</span><span class="css-select-op">.</span><span class="css-unit">1</span><span class="css-select-op">, </span><span class="css-colorcode">#00adee</span><span class="css-value">)</span><span class="css-select-op">, </span><span class="css-value">color-stop</span><span class="css-value">(0</span><span class="css-select-op">.</span><span class="css-unit">9</span><span class="css-select-op">, </span><span class="css-colorcode">#0078a5</span><span class="css-value">)</span><span class="css-value">)</span><span class="css-punctuation">; </span><br><span class="whitespace"> </span><span class="css-identifier">filter</span><span class="css-punctuation">: </span><span class="css-value">progid</span><span class="css-punctuation">:</span><span class="css-value">DXImageTransform</span><span class="css-select-op">.</span><span class="css-value">Microsoft</span><span class="css-select-op">.</span><span class="css-value">gradient</span><span class="css-value">(startColorstr</span><span class="css-compare">=</span><span class="css-string">'#00adee'</span><span class="css-select-op">, </span><span class="css-value">endColorstr</span><span class="css-compare">=</span><span class="css-string">'#0078a5'</span><span class="css-value">)</span><span class="css-punctuation">; </span><br><span class="whitespace"> </span><span class="css-punctuation">} </span><br><span class="whitespace"> </span><span class="css-select-op">.</span><span class="css-selector">progress_2 </span><span class="css-punctuation">{ </span><br><span class="whitespace"> </span><span class="css-identifier">border</span><span class="css-punctuation">: </span><span class="css-unit">1px </span><span class="css-value">solid </span><span class="css-colorcode">#5c9425</span><span class="css-punctuation">; </span><span class="css-identifier">background-color</span><span class="css-punctuation">: </span><span class="css-colorcode">#77AF3F</span><span class="css-punctuation">; </span><br><span class="whitespace"> </span><span class="css-identifier">background</span><span class="css-punctuation">: </span><span class="css-value">-moz-linear-gradient</span><span class="css-value">(top</span><span class="css-select-op">, </span><span class="css-colorcode">#8fc857 </span><span class="css-unit">10%</span><span class="css-select-op">, </span><span class="css-colorcode">#5c9425 </span><span class="css-unit">90%</span><span class="css-value">)</span><span class="css-punctuation">; </span><br><span class="whitespace"> </span><span class="css-identifier">background</span><span class="css-punctuation">: </span><span class="css-value">-webkit-gradient</span><span class="css-value">(linear</span><span class="css-select-op">, </span><span class="css-value">left </span><span class="css-value">top</span><span class="css-select-op">, </span><span class="css-value">left </span><span class="css-value">bottom</span><span class="css-select-op">, </span><span class="css-value">color-stop</span><span class="css-value">(0</span><span class="css-select-op">.</span><span class="css-unit">1</span><span class="css-select-op">, </span><span class="css-colorcode">#8fc857</span><span class="css-value">)</span><span class="css-select-op">, </span><span class="css-value">color-stop</span><span class="css-value">(0</span><span class="css-select-op">.</span><span class="css-unit">9</span><span class="css-select-op">, </span><span class="css-colorcode">#5c9425</span><span class="css-value">)</span><span class="css-value">)</span><span class="css-punctuation">; </span><br><span class="whitespace"> </span><span class="css-identifier">filter</span><span class="css-punctuation">: </span><span class="css-value">progid</span><span class="css-punctuation">:</span><span class="css-value">DXImageTransform</span><span class="css-select-op">.</span><span class="css-value">Microsoft</span><span class="css-select-op">.</span><span class="css-value">gradient</span><span class="css-value">(startColorstr</span><span class="css-compare">=</span><span class="css-string">'#8fc857'</span><span class="css-select-op">, </span><span class="css-value">endColorstr</span><span class="css-compare">=</span><span class="css-string">'#5c9425'</span><span class="css-value">)</span><span class="css-punctuation">; </span><br><span class="whitespace"> </span><span class="css-punctuation">} </span><br><span class="whitespace"> </span><span class="css-select-op">.</span><span class="css-selector">progress_3 </span><span class="css-punctuation">{ </span><br><span class="whitespace"> </span><span class="css-identifier">border</span><span class="css-punctuation">: </span><span class="css-unit">1px </span><span class="css-value">solid </span><span class="css-colorcode">#f47a20</span><span class="css-punctuation">; </span><span class="css-identifier">background-color</span><span class="css-punctuation">: </span><span class="css-colorcode">#faa51a</span><span class="css-punctuation">; </span><br><span class="whitespace"> </span><span class="css-identifier">background</span><span class="css-punctuation">: </span><span class="css-value">-moz-linear-gradient</span><span class="css-value">(top</span><span class="css-select-op">, </span><span class="css-colorcode">#faa51a </span><span class="css-unit">10%</span><span class="css-select-op">, </span><span class="css-colorcode">#f47a20 </span><span class="css-unit">90%</span><span class="css-value">)</span><span class="css-punctuation">; </span><br><span class="whitespace"> </span><span class="css-identifier">background</span><span class="css-punctuation">: </span><span class="css-value">-webkit-gradient</span><span class="css-value">(linear</span><span class="css-select-op">, </span><span class="css-value">left </span><span class="css-value">top</span><span class="css-select-op">, </span><span class="css-value">left </span><span class="css-value">bottom</span><span class="css-select-op">, </span><span class="css-value">color-stop</span><span class="css-value">(0</span><span class="css-select-op">.</span><span class="css-unit">1</span><span class="css-select-op">, </span><span class="css-colorcode">#faa51a</span><span class="css-value">)</span><span class="css-select-op">, </span><span class="css-value">color-stop</span><span class="css-value">(0</span><span class="css-select-op">.</span><span class="css-unit">9</span><span class="css-select-op">, </span><span class="css-colorcode">#f47a20</span><span class="css-value">)</span><span class="css-value">)</span><span class="css-punctuation">; </span><br><span class="whitespace"> </span><span class="css-identifier">filter</span><span class="css-punctuation">: </span><span class="css-value">progid</span><span class="css-punctuation">:</span><span class="css-value">DXImageTransform</span><span class="css-select-op">.</span><span class="css-value">Microsoft</span><span class="css-select-op">.</span><span class="css-value">gradient</span><span class="css-value">(startColorstr</span><span class="css-compare">=</span><span class="css-string">'#faa51a'</span><span class="css-select-op">, </span><span class="css-value">endColorstr</span><span class="css-compare">=</span><span class="css-string">'#f47a20'</span><span class="css-value">)</span><span class="css-punctuation">; </span><br><span class="whitespace"> </span><span class="css-punctuation">} </span><br><span class="whitespace"> </span><span class="css-select-op">.</span><span class="css-selector">progress_4 </span><span class="css-punctuation">{ </span><br><span class="whitespace"> </span><span class="css-identifier">border</span><span class="css-punctuation">: </span><span class="css-unit">1px </span><span class="css-value">solid </span><span class="css-colorcode">#A92C2C</span><span class="css-punctuation">; </span><span class="css-identifier">background-color</span><span class="css-punctuation">: </span><span class="css-colorcode">#C44747</span><span class="css-punctuation">; </span><br><span class="whitespace"> </span><span class="css-identifier">background</span><span class="css-punctuation">: </span><span class="css-value">-moz-linear-gradient</span><span class="css-value">(top</span><span class="css-select-op">, </span><span class="css-colorcode">#DD5F5F </span><span class="css-unit">10%</span><span class="css-select-op">, </span><span class="css-colorcode">#A92C2C </span><span class="css-unit">90%</span><span class="css-value">)</span><span class="css-punctuation">; </span><br><span class="whitespace"> </span><span class="css-identifier">background</span><span class="css-punctuation">: </span><span class="css-value">-webkit-gradient</span><span class="css-value">(linear</span><span class="css-select-op">, </span><span class="css-value">left </span><span class="css-value">top</span><span class="css-select-op">, </span><span class="css-value">left </span><span class="css-value">bottom</span><span class="css-select-op">, </span><span class="css-value">color-stop</span><span class="css-value">(0</span><span class="css-select-op">.</span><span class="css-unit">1</span><span class="css-select-op">, </span><span class="css-colorcode">#DD5F5F</span><span class="css-value">)</span><span class="css-select-op">, </span><span class="css-value">color-stop</span><span class="css-value">(0</span><span class="css-select-op">.</span><span class="css-unit">9</span><span class="css-select-op">, </span><span class="css-colorcode">#A92C2C</span><span class="css-value">)</span><span class="css-value">)</span><span class="css-punctuation">; </span><br><span class="whitespace"> </span><span class="css-identifier">filter</span><span class="css-punctuation">: </span><span class="css-value">progid</span><span class="css-punctuation">:</span><span class="css-value">DXImageTransform</span><span class="css-select-op">.</span><span class="css-value">Microsoft</span><span class="css-select-op">.</span><span class="css-value">gradient</span><span class="css-value">(startColorstr</span><span class="css-compare">=</span><span class="css-string">'#DD5F5F'</span><span class="css-select-op">, </span><span class="css-value">endColorstr</span><span class="css-compare">=</span><span class="css-string">'#A92C2C'</span><span class="css-value">)</span><span class="css-punctuation">; </span><br><span class="whitespace"> </span><span class="css-punctuation">} </span><br><span class="whitespace"> </span><span class="css-select-op">.</span><span class="css-selector">progress_5</span><span class="css-punctuation">{ </span><br><span class="whitespace"> </span><span class="css-identifier">border</span><span class="css-punctuation">: </span><span class="css-unit">1px </span><span class="css-value">solid </span><span class="css-colorcode">#8c2ca9</span><span class="css-punctuation">; </span><span class="css-identifier">background-color</span><span class="css-punctuation">: </span><span class="css-colorcode">#8c2ca9</span><span class="css-punctuation">; </span><br><span class="whitespace"> </span><span class="css-identifier">background</span><span class="css-punctuation">: </span><span class="css-value">-moz-linear-gradient</span><span class="css-value">(top</span><span class="css-select-op">, </span><span class="css-colorcode">#bf5fdd </span><span class="css-unit">10%</span><span class="css-select-op">, </span><span class="css-colorcode">#8c2ca9 </span><span class="css-unit">90%</span><span class="css-value">)</span><span class="css-punctuation">; </span><br><span class="whitespace"> </span><span class="css-identifier">background</span><span class="css-punctuation">: </span><span class="css-value">-webkit-gradient</span><span class="css-value">(linear</span><span class="css-select-op">, </span><span class="css-value">left </span><span class="css-value">top</span><span class="css-select-op">, </span><span class="css-value">left </span><span class="css-value">bottom</span><span class="css-select-op">, </span><span class="css-value">color-stop</span><span class="css-value">(0</span><span class="css-select-op">.</span><span class="css-unit">1</span><span class="css-select-op">, </span><span class="css-colorcode">#bf5fdd</span><span class="css-value">)</span><span class="css-select-op">, </span><span class="css-value">color-stop</span><span class="css-value">(0</span><span class="css-select-op">.</span><span class="css-unit">9</span><span class="css-select-op">, </span><span class="css-colorcode">#8c2ca9</span><span class="css-value">)</span><span class="css-value">)</span><span class="css-punctuation">; </span><br><span class="whitespace"> </span><span class="css-identifier">filter</span><span class="css-punctuation">: </span><span class="css-value">progid</span><span class="css-punctuation">:</span><span class="css-value">DXImageTransform</span><span class="css-select-op">.</span><span class="css-value">Microsoft</span><span class="css-select-op">.</span><span class="css-value">gradient</span><span class="css-value">(startColorstr</span><span class="css-compare">=</span><span class="css-string">'#bf5fdd'</span><span class="css-select-op">, </span><span class="css-value">endColorstr</span><span class="css-compare">=</span><span class="css-string">'#8c2ca9'</span><span class="css-value">)</span><span class="css-punctuation">; </span><br><span class="whitespace"> </span><span class="css-punctuation">}</span><br><span class="whitespace"> </span><span class="xml-punctuation"></</span><span class="xml-tagname">style</span><span class="xml-punctuation">></span><br><br><span class="xml-punctuation"><</span><span class="xml-tagname">script </span><span class="xml-attname">type</span><span class="xml-punctuation">=</span><span class="xml-attribute">"text/javascript"</span><span class="xml-punctuation">> </span><br><span class="js-keyword">var </span><span class="js-variable">a </span><span class="js-operator">= </span><span class="js-punctuation">[</span><span class="js-string">'http://ucoz-lab.ucoz.ru/images/ic1.png'</span><span class="js-punctuation">,</span><span class="js-string">'http://ucoz-lab.ucoz.ru/images/ic2.png'</span><span class="js-punctuation">,</span><span class="js-string">'http://ucoz-lab.ucoz.ru/images/ic3.png'</span><span class="js-punctuation">,</span><span class="js-string">'http://ucoz-lab.ucoz.ru/images/ic4.png'</span><span class="js-punctuation">,</span><span class="js-string">'http://ucoz-lab.ucoz.ru/images/ic5.png'</span><span class="js-punctuation">,</span><span class="js-string">'http://ucoz-lab.ucoz.ru/images/ic1.png'</span><span class="js-punctuation">,</span><span class="js-string">'http://ucoz-lab.ucoz.ru/images/ic2.png'</span><span class="js-punctuation">,</span><span class="js-string">'http://ucoz-lab.ucoz.ru/images/ic3.png'</span><span class="js-punctuation">,</span><span class="js-string">'http://ucoz-lab.ucoz.ru/images/ic4.png'</span><span class="js-punctuation">,</span><span class="js-string">'http://ucoz-lab.ucoz.ru/images/ic5.png'</span><span class="js-punctuation">]</span><span class="js-punctuation">; </span><br><span class="js-keyword">for</span><span class="js-punctuation">(</span><span class="js-keyword">var </span><span class="js-variable">i </span><span class="js-operator">= </span><span class="js-atom">0</span><span class="js-punctuation">; </span><span class="js-variable">i </span><span class="js-operator">< </span><span class="js-variable">a</span><span class="js-punctuation">.</span><span class="js-property">length</span><span class="js-punctuation">; </span><span class="js-variable">i</span><span class="js-operator">++</span><span class="js-punctuation">)</span><span class="js-punctuation">{</span><span class="js-variable">$</span><span class="js-punctuation">(</span><span class="js-string">'div.answer div'</span><span class="js-punctuation">)</span><span class="js-punctuation">.</span><span class="js-property">eq</span><span class="js-punctuation">(</span><span class="js-variable">i</span><span class="js-punctuation">)</span><span class="js-punctuation">.</span><span class="js-property">addClass</span><span class="js-punctuation">(</span><span class="js-string">'progress'</span><span class="js-punctuation">)</span><span class="js-punctuation">.</span><span class="js-property">css</span><span class="js-punctuation">(</span><span class="js-punctuation">{</span><span class="js-property">height</span><span class="js-punctuation">: </span><span class="js-string">'18px'</span><span class="js-punctuation">}</span><span class="js-punctuation">)</span><span class="js-punctuation">;</span><span class="js-variable">$</span><span class="js-punctuation">(</span><span class="js-string">'div.answer div div'</span><span class="js-punctuation">)</span><span class="js-punctuation">.</span><span class="js-property">eq</span><span class="js-punctuation">(</span><span class="js-variable">i</span><span class="js-punctuation">)</span><span class="js-punctuation">.</span><span class="js-property">addClass</span><span class="js-punctuation">(</span><span class="js-string">'progress progress_'</span><span class="js-operator">+</span><span class="js-variable">a</span><span class="js-punctuation">)</span><span class="js-punctuation">.</span><span class="js-property">css</span><span class="js-punctuation">(</span><span class="js-punctuation">{</span><span class="js-property">background</span><span class="js-punctuation">: </span><span class="js-string">'url(' </span><span class="js-operator">+ </span><span class="js-variable">a</span><span class="js-punctuation">[</span><span class="js-variable">i</span><span class="js-punctuation">] </span><span class="js-operator">+ </span><span class="js-string">')'</span><span class="js-punctuation">, </span><span class="js-property">marginTop</span><span class="js-punctuation">: </span><span class="js-string">'-3px'</span><span class="js-punctuation">, </span><span class="js-property">marginBottom</span><span class="js-punctuation">: </span><span class="js-string">'-3px'</span><span class="js-punctuation">, </span><span class="js-property">height</span><span class="js-punctuation">: </span><span class="js-string">'25px'</span><span class="js-punctuation">, </span><span class="js-property">backgroundRepeat</span><span class="js-punctuation">: </span><span class="js-string">'repeat-x'</span><span class="js-punctuation">}</span><span class="js-punctuation">)</span><span class="js-punctuation">;</span><span class="js-punctuation">} </span><br><span class="js-variable">$</span><span class="js-punctuation">(</span><span class="js-string">'div.answer span'</span><span class="js-punctuation">)</span><span class="js-punctuation">.</span><span class="js-property">each</span><span class="js-punctuation">(</span><span class="js-keyword">function</span><span class="js-punctuation">(</span><span class="js-punctuation">)</span><span class="js-punctuation">{</span><span class="js-variable">$</span><span class="js-punctuation">(</span><span class="js-localvariable">this</span><span class="js-punctuation">)</span><span class="js-punctuation">.</span><span class="js-property">html</span><span class="js-punctuation">(</span><span class="js-variable">$</span><span class="js-punctuation">(</span><span class="js-localvariable">this</span><span class="js-punctuation">)</span><span class="js-punctuation">.</span><span class="js-property">html</span><span class="js-punctuation">(</span><span class="js-punctuation">)</span><span class="js-operator">+</span><span class="js-string">' - <span class="procent">'</span><span class="js-operator">+</span><span class="js-variable">$</span><span class="js-punctuation">(</span><span class="js-localvariable">this</span><span class="js-punctuation">)</span><span class="js-punctuation">.</span><span class="js-property">attr</span><span class="js-punctuation">(</span><span class="js-string">'title'</span><span class="js-punctuation">)</span><span class="js-punctuation">.</span><span class="js-property">split</span><span class="js-punctuation">(</span><span class="js-string">':'</span><span class="js-punctuation">)</span><span class="js-punctuation">[</span><span class="js-atom">1</span><span class="js-punctuation">]</span><span class="js-operator">+</span><span class="js-string">'</span>'</span><span class="js-punctuation">)</span><span class="js-punctuation">}</span><span class="js-punctuation">)</span><span class="js-punctuation">; </span><br><span class="xml-punctuation"></</span><span class="xml-tagname">script</span><span class="xml-punctuation">></span></div></div><span class="xml-punctuation"><br></span><font class="code">
Коментарии 0