How to add value with zen coding? - input

Question

I like to add value when I type zen coding. For example, input:text becomes :. How do I make it so that input:text becomes and place keyboard cursor between '' of value property?

Answer 1

#Moon
Here is a trick that I use.
select>option#$*5 // this would give the following HTML <select>
<select>
<option id="1"></option>
<option id="2"></option>
<option id="3"></option>
<option id="4"></option>
<option id="5"></option>
</select>
then, you select the whole <select> block in your text editor.
Then, replace all "<option id" with "<option value".
Cheers :-)

Answer 2

If you ment the value by defining what value should be wrapped (between open and closing tags), then use following pattern
b{this is a bold text}
which results to
<b>this is a bold text</b>
Allthough I'm not aware of the editors and IDE's supporting this feature, but all I can say is it works for IntelliJ and Notepad++.

Answer 3

Adding this table>tr*5>td*5>lorem10
Will generate:
<table>
<tr>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, aperiam.</td>
<td>Sit eius temporibus optio reprehenderit itaque blanditiis harum consectetur rerum.</td>
<td>Ex, odit, nostrum quia nemo consequuntur quisquam corrupti ipsam quis.</td>
<td>Voluptatibus, cum, aspernatur rem officia recusandae similique saepe praesentium nulla.</td>
<td>Labore, obcaecati iure rerum beatae dignissimos fugit sapiente! Sequi, fugit.</td>
</tr>
<tr>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, totam.</td>
<td>Officiis, dolores facilis non vitae eius accusamus consequatur magnam incidunt!</td>
<td>Voluptates repellendus delectus illo facilis at provident unde sint error!</td>
<td>Quibusdam, nisi, reprehenderit incidunt rem a ducimus sint expedita molestias?</td>
<td>Quam, laborum rerum unde quaerat fuga architecto odio voluptatum nemo.</td>
</tr>
<tr>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In, architecto.</td>
<td>Maiores, voluptatum modi sunt iure aperiam aut quisquam nobis suscipit?</td>
<td>Repellendus, amet vero modi inventore ipsam libero culpa animi debitis.</td>
<td>Earum consequuntur ut totam possimus provident libero ad commodi esse!</td>
<td>Reprehenderit, quo, et laboriosam inventore error quas facilis dignissimos voluptate.</td>
</tr>
<tr>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime, necessitatibus.</td>
<td>Officiis maxime praesentium repellendus distinctio cum atque aspernatur animi dolorum.</td>
<td>Culpa pariatur quos quis voluptate ratione eos unde accusantium quisquam.</td>
<td>Id possimus nisi sequi nostrum cum pariatur eius vel commodi.</td>
<td>Velit, et, iure incidunt illum culpa cum nihil quidem perferendis.</td>
</tr>
<tr>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est, ab?</td>
<td>Labore, voluptatem quasi temporibus fugit cumque possimus obcaecati id dolor?</td>
<td>Asperiores hic maiores architecto alias commodi ea in suscipit unde!</td>
<td>Distinctio, quasi reprehenderit tempora ipsa nisi ad ut eaque numquam!</td>
<td>Nobis, illum ex excepturi quaerat mollitia animi vero repellat quam.</td>
</tr>
</table>

Answer 4

As far as I know, you can't - at least not in the default Zen Coding standard. There is at least one project that tries to add values and some rudimentary logic (like looping) to Zen Coding though, see https://github.com/zodoz/jquery-ZenCoding. This is a Javascript implementation, mind.

Answer 5

You can add attributes to tags using the square brackets, so writing input:text[value] would create <input type="text" name="|" id="|" value="|"> — the input with three places for placeholders, two generic, that come with :text and the value attribute which comes from [value].

Answer 6

Something I used once ..
select>option[value=$].gameSize${$x$}*10
will generate
<select name="" id="">
<option value="1" class="gameSize1">1x1</option>
<option value="2" class="gameSize2">2x2</option>
<option value="3" class="gameSize3">3x3</option>
<option value="4" class="gameSize4">4x4</option>
<option value="5" class="gameSize5">5x5</option>
<option value="6" class="gameSize6">6x6</option>
<option value="7" class="gameSize7">7x7</option>
<option value="8" class="gameSize8">8x8</option>
<option value="9" class="gameSize9">9x9</option>
<option value="10" class="gameSize10">10x10</option>
</select>
So, $ would expand to corresponding number...wherever you put it!
I was using Emmet plugin with Sublime Text 2.