| MFSelector / beta / demo / demo2.html file last updated : 2023-08-30 |
|---|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Methodfish Styled Selector</title>
<link rel="icon" type="image/png" href="https://methodfish.com/images/methodfish.ico">
<link rel="stylesheet preload prefetch" as="style" href="https://fonts.googleapis.com/icon?family=Courier+Prime|Architects Daughter|Roboto|Material+Icons|Material+Icons+Outlined&display=block">
<script src="../js/mf-styled-select.js"></script>
<script src="http://localhost/methodfish/public_html/jsx/t"></script>
<link href="../css/mf-styled-select.css" rel="stylesheet preload prefetch" as="style">
<style>
select {
width:100%;
}
.selectStyle1 {
font-family:'Times New Roman';
padding:4px 8px 4px 8px;
font-family:Arial;
font-size:10pt;
width:calc(100% - 10px);
}
.selectStyle1 > .mf-option {
height: 19px;
padding: 8px 0 0 10px!important;
border-top: solid 1px #ccbdbd !important;
line-height: 13px!important;
}
.selectStyle1 > .mf-option.optgroup {
padding-left:0!important;
cursor:not-allowed!important;
}
.selectStyle1 > .mf-option:first-child {
border-top:none!important;
}
.selectStyle2 {
font-family:'Architects Daughter';
font-size:12pt;
background-color: #aef3ae;
width:calc(100% - 20px);
margin:10px;
}
.highlight-first-option.mf-ddlb > .mf-option:first-child {
background-color: black!important;
color:white!important;
cursor:default!important;
}
.highlight-first-option.mf-ddlb > .mf-option:first-child > span {
color:white!important;
}
</style>
</head>
<body>
<h3>mf-styled-select v2</h3>
<h4>Original Drop down lists...</h4>
<table style="width:100%; border:solid 1px #dadada">
<tr>
<td style="width:33%">
<select>
<option value="">A: {col grey}///Select an option///{/col}</option>
<option>xxxx **yyyy**</option>
<option>zzzz {col grey}grey{/col}</option>
<option>bbbb {col grey}grey{/col}</option>
<option>dddd **eeee**</option>
</select>
</td>
<td style="width:33%">
<select onChange='console.log("b: "+this.value)' class="selectStyle1 highlight-first-option">
<option value="" disabled>B: ///Select an option///</option>
<option value=1>**one** 1</option>
<option value=2>**two** 2</option>
<option >**three** 3</option>
<option >**four** 4</option>
<option >5</option>
<option >6</option>
<option >7</option>
<option >8</option>
<option >9</option>
<option >10</option>
<option >11</option>
<option >12</option>
<option >13</option>
<option >14</option>
<option >15</option>
<option>Add</option>
</select>
</td>
<td style="width:33%">
<select onChange='console.log("c: "+this.value)' class="selectStyle2 highlight-first-option">
<option value="" disabled>C: {col grey}///Select an option///{/col}</option>
<optgroup label='group1'>
<option>xxxx **yyyy**</option>
<option>zzzz _this is a custom underscore_</option>
</optgroup>
<optgroup label='group2'>
<option>bbbb {col grey}cccc{/col}</option>
<option>This is a very long option to see how the width works</option>
</optgroup>
</select>
</td>
</tr>
</table>
<h4>MF-Styled Drop down lists...</h4>
<table style="width:100%">
<tr>
<td style="width:33%">
<select class="mf-select" placeholder="{col grey}///Select an option///{/col}">
<option value="1">xxxx **yyyy**</option>
<option value="2">zzzz {col grey}grey{/col}</option>
<option value="3">bbbb {col grey}grey{/col}</option>
<option value="4">dddd **eeee**</option>
</select>
</td>
<td style="width:33%">
<select onChange='console.log("b: "+this.value)' class="mf-select selectStyle1 highlight-first-option">
<option value="">B: ///Select an option please///</option>
<option onSelect='xxx' value=1>**one** 1</option>
<option value=2>**two** 2</option>
<option >**three** 3</option>
<option >**four** 4</option>
<option >5</option>
<option >6</option>
<option >7</option>
<option >8</option>
<option >9</option>
<option >10</option>
<option >11</option>
<option >12</option>
<option >13</option>
<option >14</option>
<option >15</option>
<option onSelect="alert()">Add</option>
</select>
</td>
<td style="width:33%">
<select onChange='console.log("c: "+this.value)' class="mf-select selectStyle2 highlight-first-option">
<option value="">C: {col grey}///Select an option///{/col}</option>
<optgroup label='group1'>
<option>xxxx **yyyy**</option>
<option>zzzz _this is a custom underscore_</option>
</optgroup>
<optgroup label='group2'>
<option>bbbb {col grey}cccc{/col}</option>
<option>This is a very long option to see how the width works</option>
</optgroup>
</select>
</td>
</tr>
</table>
<div style="height:400px; width: 400px; overflow:scroll; display:inline-block; margin:50px; border:solid 1px grey">
<h1>a</h1>
<select class="mf-select">
<option value="">{col grey}///Select an option///{/col}</option>
<option>xxxx **yyyy**</option>
<option>zzzz ///aaaa///</option>
<option>bbbb {col grey}cccc{/col}</option>
<option>dddd eeee</option>
</select>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget libero sit amet magna sagittis sagittis quis nec risus. Pellentesque feugiat pharetra purus id pharetra. Donec non sem at odio facilisis porta quis a sapien. Integer commodo justo in erat interdum, vel consectetur est rutrum. Mauris vehicula eros sit amet maximus tincidunt. Praesent mauris mi, faucibus malesuada elit ac, vehicula dignissim urna. Suspendisse ac nisl vel diam sagittis hendrerit. Proin mattis a neque quis aliquam. Phasellus vitae facilisis justo, sit amet fringilla nibh. Donec ultrices, sem nec hendrerit mattis, magna tortor hendrerit eros, eu convallis velit ipsum vitae quam. Suspendisse commodo enim in purus malesuada pharetra. Donec a consectetur augue. Donec ut lorem ac tortor pulvinar vulputate.
Maecenas aliquet sapien eu cursus posuere. Quisque placerat ullamcorper diam at dapibus. Curabitur condimentum lectus diam, vitae lobortis urna viverra faucibus.
<h1>b</h1>
<select onChange='console.log("b: "+this.value)' class="mf-select selectStyle">
<option value="">{col grey}///Select an option///{/col}</option>
<option onSelect='xxx' value=1>1 **one**</option>
<option value=2>2 **two**</option>
<option >3 **three**</option>
<option >4</option>
<option >5</option>
<option >6</option>
<option >7</option>
<option >8</option>
<option >9</option>
<option >10</option>
<option >11</option>
<option >12</option>
<option >13</option>
<option >14</option>
<option >15</option>
<option onSelect="alert()">Add</option>
</select>
<h1>c</h1>
<select onChange='console.log("c: "+this.value)' class="mf-select selectStyle1">
<option value="">{col grey}///Select an option///{/col}</option>
<optgroup label='group1'>
<option>xxxx **yyyy**</option>
<option>zzzz ///aaaa///</option>
</optgroup>
<optgroup label='group2'>
<option>bbbb {col grey}cccc{/col}</option>
<option>This is a **very long** option to see how the width works</option>
</optgroup>
</select>
</div>
<div style="height:200px; width: 200px; overflow:scroll; display:inline-block; border:solid 1px grey">
<h1>a</h1>
<select class="mf-select">
<option value="">{col grey}///Select an option///{/col}</option>
<option>xxxx **yyyy**</option>
<option>zzzz ///aaaa///</option>
<option>bbbb {col grey}cccc{/col}</option>
<option>dddd eeee</option>
</select>
<h1>b</h1>
<select class="mf-select" onChange='console.log("b: "+this.value)'>
<option value="">{col grey}///Select an option///{/col}</option>
<option onSelect='xxx' value=1>**one**</option>
<option value=2>///2///</option>
<option value=3>{col grey}3{/col}</option>
</select>
<h1>c</h1>
<select class="mf-select" onChange='console.log("c: "+this.value)'>
<option value="">{col grey}///Select an option///{/col}</option>
<optgroup label='group1'>
<option>xxxx **yyyy**</option>
<option>zzzz ///aaaa///</option>
</optgroup>
<optgroup label='group2'>
<option>bbbb {col grey}cccc{/col}</option>
<option>This is a very long option to see how the width works</option>
</optgroup>
</select>
</div>
<script>
function myMDConverter(tx) {
return tx.replace(/_(.*?)_/g, "<u>$1</u>");
}
new mfSelector().init(myMDConverter);
</script>
</body>
</html>Also see
articles/Implementing-a-Monaco-Editorsquarearticles/iConnectionTestsquarearticles/image-zoomingsquarearticles/javascript-camerasquarearticles/list-editsquarearticles/minifierssquarearticles/opayosquarearticles/table-drag-sortersquarearticles/typewatchsquareprojects/MFCalendarPopupsquareprojects/MFChartColumnsquareprojects/MFColorPickersquareprojects/MFColorPickerBasicsquareprojects/MFColumnDataBarsquareprojects/MFColumnGradientsquareprojects/MFCropCornerUIsquareprojects/MFFloatawayMsgsquareprojects/MFPanelssquareprojects/MFSelectorsquareprojects/MFShowConsolesquare